【css布局】display、position、float、overflow

css布局主要有两种方式：传统的布局方式是基于盒状模型，目前广泛使用的是基于flex布局。本文主要介绍盒状模型的三个最基本的概念display、position、float，这算是盒状模型的基础中的基础了。

 

一、块级元素与行内元素：

1、块级元素：p、ul、form、div

2、内联元素（行内元素）：span、input

3、两者区别：块级元素会从上到下垂直排列，内联元素在一行中水平排列。

 

二、display常用属性：

1、none：隐藏

2、block：元素被指定为块级元素，占一行

3、inline：元素被指定为行内元素，不自带换行符

4、inline-block：拥有block元素的width、height、padding、margin、border，而且可以水平排列。

 

三、position常用属性：

1、relative：相对定位（相对自身进行定位）

自身是指在没有设置position时的位置。

通过设置left、top等属性，确定距离自身的偏移量。

适用于大多数场景。

2、absolute：绝对定位（相对父控件定位）

适用于悬浮布局等场景。

如上图，假设蓝色框是body部分，要想给绿色框布局，只需要把绿色框设置为relative布局，并且设置top和left值；而要把绿色框中的红色方框放在绿色框中间，就要以绿色框为基准，设置top和left值。这就是absolute的典型应用场景：悬浮布局。

此外，由于absolute可以设置层叠布局，zIndex常常与其配合使用，以确定层级的高低。

 

四、float常用属性：

1、待研究清楚后再做记录

 

五、overflow常用属性：

1、hidden：超出父控件的部分会被隐藏

2、visible：超出父控件的部分会显示出来。这常用于设置“角标”tag，这样超出父控件的部分就仍会显示出来。

 

六、补充：

1、IE中，width和height值是包括border的值；其他浏览器中，不包括border的值；在ReactNative中，width和height包含border！