CSS布局常用

margin :

顺序：顺时针，上右下左

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承外边距。

padding :

顺序：顺时针，上右下左。内边距，在宽度和高度之外绘制元素的内边距和边框。

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的外边距。
inherit	规定应该从父元素继承内边距。

box-sizing :

需要设置border: solid blue 10px;来设置

值	描述
content-box	类似padding，在宽度和高度之外绘制元素的内边距和边框。
border-box	通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

position :

定位的方式

值	描述
static	默认值,不会被特殊的定位.
relative	表现的和 static 一样，除非你添加了一些额外的属性。设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素则不会调整位置来弥补它偏离后剩下的空隙。
fixed	相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。
absolute	相对于祖先元素来定位

float :

定义元素在哪个方向浮动

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

clear :

定义了元素的哪边上不允许出现浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

overflow :

规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。