标签分类

可以分为三类：行级标签、块级标签、行块标签

行级元素

常用的行级元素：span、b、i、em、strong、a、del、sub、sup等

注意：

1、默认宽度随元素的内容的变化而变化；2、默认情况下高度由内容撑开；3、不会独立成行，相邻的行内元素会排列一同一行当中，直到一行排不下，才会换行；4、换行和空格存在的情况下会被解析；5、具有部分盒模型特征 宽高无效 padding margin 只显示左右 边框保留；6、使用：一般用来容纳文本和其他内联元素，通常行元素被包含在块元素中使用

例子：

页面：

块级元素

常用的块级元素：h1~h6、p、div、ul、li、ol、dl 、dt、dd等

注意：

1、默认宽度撑满父元素的宽度；2、默认高度由内容撑开；3、元素垂直布局；4、具有全部的盒模型特征；5、使用：块级元素中可以添加块级元素、行级元素、行块元素

例子：

p标签

h1标签

• li 1
• li 2

页面：

行块元素

常用的行块元素：img、input等

注意：

1、具有块级标记特征：可以设置宽高内填充外边距；2、具有行级标记的特征：默认横向显示，直到一行拍不下才会换行，空格会被解析

例子：

页面：第一行放不下的时候，自动换行展示

类型转换–display属性

display:none； 元素不会被显示—隐藏元素； 不占位display:block; 元素的显示，将元素显示为块级元素，具有块级元素的特征display:inline; 将元素显示为行级元素，具有行级元素的特征display:inline-block; 将元素显示为行块元素，具有行块元素的特征

页面：加上display:block：

页面：

2、display:inline例子：根据css的特性，优先继承最近属性，我们可以使用上面的例子，后面再加上属性display:inline即可

页面：3、display:inline-block

页面：