1.标准流(文档流)

顾名思义,标准流(文档流)就是按照元素的默认标准进行排列。
块级元素独占一行,能够设置宽和高,如果不设置宽,那么就会变成父元素宽度的100%。
行内元素和其他行类元素占一行,不能设置宽高,默认的高度就是内容的高度,也就是里面包含文本的高度。
按照代码顺序,依次排列。
如果按照这样的方式进行布局,网页不仅不美观,而且会对网页的布局造成极大的浪费。
网页布局的三种方式——1.标准流
所以,我们右拥有了一个特殊的元素,行内块元素
顾名思义,一行内可以排列的块级元素。
那么行内块有哪些特点呢?行类块元素可以设置宽高,可以一行内排列。
网页布局的三种方式——1.标准流
有了行类块元素,网页的布局就会更加美观。
怎样设置块状元素,行内元素,行内块元素的相互转换呢?
display属性来设置这三个元素的转换。
display: inline 转化为行内元素,切记行类元素设置宽和高时没有效果的
display:block转化为块级元素
**display: inline-block;**转化为行内块元素
转化为行内块元素后,根据需要,调整盒子模型,通过调整外边距margin,内边距padding,边框border的属性和值就可以布局一个简单的静态网页了。

相关文章: