【CSS 基础】05 块级标签、行级标签、行内块级标签

块级标签、行级标签、行内块级标签

我们已经学习了很多的HTML标签，不同的标签有不同的特性，比如从文档流的角度区分，那么标签元素分为块级标签（元素）、行级标签和行内块级标签。

1. 块级元素

能设置宽高

独占一行

常见块级标签：p、ul、ol、li、hn、div

2. 行级元素

不能设置宽高

可以和其他标签共用一行

常见块级标签：a、strong、span

3. 行内块级元素

能设置宽高

可以和其他标签共用一行

常见块级标签：img、form

display属性

1. 块元素转行元素

display: inline;

2. 行元素转块元素

display: block;

3. 兼具行元素和块元素特性

display: inline-block;

比如，现在很多网站的导航栏，一定是a标签实现的。但是a标签无法设置宽高，所以可能通过设置display属性实现。当然在后面还会介绍其他实现方式。



4. 隐藏元素

display: none;

可以将元素隐藏，并且不占用空间。比如注册账号时弹出对话框，当点叉取消是，可以使用display将其隐藏掉。

初始DIV + CSS

1. div和span

div 和 span不像img、a标签那样。 它们都没有实际的功能，只是规划出一个区域，用来实现布局。

div 是块级标签，span是行级标签。

2. DIV + CSS

在网页开发中，通常使用div标签配合css实现布局网页。优点见css概述。

例如，可以将京东首页通过div划分成不同区域。至于如何组合，后面再详细介绍。