谷哥的小弟学前端(05)——CSS基础知识（3）_html-js-css

概述深入探讨Android异步精髓Handler站在源码的肩膀上全解Scroller工作机制Android多分辨率适配框架（1）— 核心基础 Android多分辨率适配框架（2）— 原理剖析 Android多分辨率适配框架（3）— 使用指南自定义View系列教程00–推翻自己和过往，重学自定义Vi

深入探讨AndroID异步精华Handler

站在源码的肩膀上全解Scroller工作机制

AndroID多分辨率适配框架（1）— 核心基础
AndroID多分辨率适配框架（2）— 原理剖析
AndroID多分辨率适配框架（3）— 使用指南

自定义view系列教程00–颠覆自己和过往，重学自定义view
自定义view系列教程01–经常使用工具介绍
自定义view系列教程02–onMeasure源码详实分析
自定义view系列教程03–onLayout源码详实分析
自定义view系列教程04–Draw源码分析及其实践
自定义view系列教程05–示例分析
自定义view系列教程06–详解VIEw的touch事件处理
自定义view系列教程07–详解VIEwGroup分发touch事件
自定义view系列教程08–滑动冲突的产生及其处理

通过前面的几篇文章，我们已对HTML和CSS有了直观的认识和简单的了解；比如HTML标签的使用，CSS样式的设置，css选择器的使用。在此基础之上我们来进1步地认识它们的特性从而更好地学习和掌握相干开发技能。

HTML标签的分类

在之前的文章中，我们提到：依照标签是不是有结束标签可以将HTML标签分为单标签和双标签。在此，我们依照标签显示方式的不同将HTML标签分为：块级标签，行内标签，行内块标签；现对其分别介绍。

块级标签
典型的块级标签有：<p></p>，<div></div>，<h1></h1>，<form></form>，<ul></ul>

它们具有以下特点：

块级标签独占1行显示(不论其实际宽度是不是有屏幕那末宽)块级标签的高度、宽度、行高和顶和底边距都可设置当块级标签产生嵌套时候如果子标签未设置宽度，那末该子标签的宽度为其父标签的宽度

行内标签
典型的行内标签有：<span></span>，<strong></strong>，<label></label>，<a></a>，<br>

它们具有以下特点：

行内标签不会独占1行显示，会和其他标签在同1行显示不能直接设置行内标签的高度、宽度、行高和顶和底边距行内标签的宽度就是它包括的文字或图片的宽度

行内块标签
典型的行内标签有：<img>，<input>

它们具有以下特点：

行内块标签在同1行显示可以设置行内块标签的高度、宽度

在某些需求下，我们可以利用display实现块级标签、行内标签、行内块标签的相互转换。请看以下示例：

将行内标签转换为块级标签

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="utf⑻">        <Title>标签的转换</Title>        <style type="text/CSS">            a{                wIDth: 300px;                height: 300px;                Font-size: 30px;                Font-family: 宋体;                color: red;                background-color: pink;                display: block;             }        </style>    </head>    <body>        <a href="http://blog.csdn.net/lfdfhl">谷哥的小弟</a>        <div>这是我的博客</div>    </body></HTML>

运行后效果，请参见下图

在此，在标签选择器a中利用了display: block将标签<a></a>从行内标签转换成了块级标签。所以，点击全部粉红色区域都可以实现超链接。换句话说：本来的<a></a>标签是不能指定其宽高的，但是在此通过display: block就将其转换成了块级标签从而扩大了超链接的点击区域。

将行内标签转换为行内块标签

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="utf⑻">        <Title>标签的转换</Title>        <style type="text/CSS">            a{                wIDth: 300px;                height: 300px;                Font-size: 30px;                Font-family: 宋体;                color: red;                background-color: pink;                display: inline-block;              }        </style>    </head>    <body>        <a href="http://blog.csdn.net/lfdfhl">谷哥的小弟</a>        <a href="http://blog.csdn.net/lfdfhl">这是我的博客</a>        <div>欢迎大家的访问</div>    </body></HTML>

运行后效果，请参见下图

在此，在标签选择器a中利用了display: inline-block将标签<a></a>从行内标签转换成了行内块标签。既然是行内块标签，那末就能够为其设置宽高了，并且可以将它们放在同1行显示了。所以，点击全部粉红色区域都可以实现超链接。

将块级标签转换为行内标签

<!DOCTYPE HTML><HTML>    <head>        <Meta charset="utf⑻">        <Title>标签的转换</Title>        <style type="text/CSS">            div{                wIDth: 300px;                height: 300px;                Font-size: 30px;                Font-family: 宋体;                color: red;                background-color: pink;                display: inline;            }        </style>    </head>    <body>         <div>谷哥的小弟 </div>         <div>http://blog.csdn.net/lfdfhl</div>    </body></HTML>

运行后效果，请参见下图

在此，在标签选择器div中利用了display: inline将标签<div></div>从块级标签转换成了行内标签。既然是行内标签那末就能够将两个<div></div>放到同1行显示了，与此同时为其设置的宽和高也就无效了。

此篇，未完待续。

总结

以上是内存溢出为你收集整理的谷哥的小弟学前端(05)——CSS基础知识（3）全部内容，希望文章能够帮你解决谷哥的小弟学前端(05)——CSS基础知识（3）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1015815.html

谷哥的小弟学前端(05)——CSS基础知识（3）

发表评论

评论列表（0条）