CSS盒模型——行盒、块盒、行块盒
三种盒子的排列方式根据页面布局方式的不同会发生变化
常规流
1. 块盒
- 处于包含块中
- 独占一行,块盒之间垂直排列
- 相邻兄弟块盒之间的垂直距离通过
margin
确定 - 可以设置
content, padding, margin
的width, height, top, bottom
的值 - 块盒之间相邻的
margin
会合并,取值更大的`margin
width
的默认值为auto
margin
的默认值为0
,设置为auto
时,margin
会自动填满剩余的块盒空间,并且垂直方向与水平方向都会均分
2. 行盒
- 盒子从包含块的顶端水平、依次排列
- 只有水平方向上的
margin, padding, border
起作用,竖直方向上的设置不会在显示上产生效果 - 行盒的内容盒只与内容的多少有关,设置行盒的
width
只影响背景的宽度
3. 行块盒
可以简单理解为可以设置宽高的行盒
浮动
浮动元素均为块盒
包含块为父元素的内容盒
width
的默认值为auto
,适应内容的宽度height
的默认值为auto
,适应内容的宽度margin
的默认值为auto
,值为0
定位
没有行盒与块盒之分,都是块盒,通过属性控制元素的排列