CSS 布局核心属性总结

1 核心属性

CSS布局核心属性包括4个方面：DFBP。

布局核心属性	说明
1、显示D	设置行；
display	值block换行；inline与inline-block不换行；inline设置宽高无效。

2、浮动F	设置列。
float	值left左浮动；right右浮动。
clear	值both清除浮动。

3、盒子box模型B	设置空白间距与边框。
margin	外边距。
border	边框。
left	内边距。
width/ height	宽度/高度。

4、定位P	主要用于调整相对于父元素与浏览器窗口定位。
position	static页面流显示；relative相对自身；absolute相对非static父级元素。

布局属性使用的基本思路

1）首先通过div分行： display默认block；

2）通过div+float分列：float设置为left或right；

3）利用盒子模型设置行与列的空白间距；

4）局部布局使用定位：

子元素相对于父元素定位：父relative子absolute；

相对浏览器窗口：fixed。