文档流(normal flow)
网页是一个多层的结构,设置样式样式,也是一层一层的设置,最终我们看到的最上面的一层
文档流是网页最底层
我们创建的元素默认情况下,都在文档流中
元素分为两种状态:在文档流中,脱离文档流
元素的分类前提是在文档流中,才分成块元素、行内块元素,行内元素,
一旦元素脱离文档流,就不再区分块元素、行内块元素,行内元素,
所对应的元素的特点自然也就没有,块元素也不会独占一行了,行内元素也可以设置宽高了,
行内块元素也没有三像素问题
元素在文档流中分类的特点
块元素
1:会独占一行
2:块元素的宽度默认是父元素的100%
3:块元素的高度默认是被内容撑开的
内联元素(行内元素)
1:不会独占一行
2:宽度高度默认都是被内容撑开的,不能自己定义宽高
行内块元素
兼具块元素和行内元素的特点,即不会独占一行,也可以设置宽高,而且有三像素问题
元素之间的相互转换
块元素
行内元素
行内块元素
display样式可以进行元素类型的相互转换
可选值
block 将元素转成块元素
inline 将元素转成行内元素
inline-block 将元素转成行内块元素
none 隐藏元素