讲给后台程序员看的前端系列教程(23)—

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

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

HTML标签的分类

按照标签显示方式的不同将HTML标签分为：块级标签(block)，行内标签(inline)，行内块标签(inline-block)；现对其分别介绍。

块级标签(block)

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

它们具有如下特点：

块级标签独占一行显示(不论其实际宽度是否有屏幕那么宽)
块级标签的高度、宽度、行高以及顶和底边距都可设置
可容纳行内标签和其它块级元素
当块级标签发生嵌套时候如果子标签未设置宽度，那么该子标签的宽度为其父标签的宽度

行内标签(inline)

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

它们具有如下特点：

行内标签不独占一行显示，会和其它标签在同一行显示
宽度为文字或图片的宽度，默认情况不能更改其宽度
设置高度height无效，可通过line-height进行设置
设置margin时只有左右margin有效，上下无效
设置padding时只有左右padding有效，上下无效

行内块标签(inline-block)

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

它们具有如下特点：

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

display属性

display属性用以设定元素以何种形式显示，其常用属性如下：

inline：元素将显示为行内元素，行内元素display属性的默认值正是inline
block：元素将显示为块元素，块元素display属性的默认值正是block
inline-block：元素将显示为行内块元素，行内块元素display属性的默认值正是inline-block
none：元素不显示，亦不占用空间

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

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

示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>display属性</title><style type="text/css">a {width: 300px;height: 100px;font-size: 40px;font-family: 宋体;text-decoration: none;color: red;background-color: greenyellow;display: block;}</style></head><body><a href="http://blog.csdn.net/lfdfhl">原创作者</a><br><a href="http://blog.csdn.net/lfdfhl">谷哥的小弟</a></body></html>

效果如下：

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

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

示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>display属性</title><style type="text/css">a {width: 220px;height: 80px;font-size: 30px;font-family: 宋体;color: red;background-color: pink;text-decoration: none;display: inline-block;}</style></head><body><a href="http://blog.csdn.net/lfdfhl">本文原创作者</a><a href="http://blog.csdn.net/lfdfhl">CSDN谷哥的小弟</a></body></html>

效果如下：

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

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

示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>display属性</title><style type="text/css">div {font-size: 30px;font-family: 宋体;color: red;background-color: pink;margin-left: 15px;display: inline;}</style></head><body><div>谷哥的小弟 </div><div>http://blog.csdn.net/lfdfhl</div></body></html>

效果如下：

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