CSS 盒模型 属性 浮动 定位 显示

border之外是margin， border之内是padding ,padding之内是width & height.

margin 垂直外边距叠加，水平外边距不叠加。(上右下左，如圆形钟表，从半夜0点开始)

width，默认值 auto，会让元素的宽度与其父元素同宽 .

float:left or right;,创建多栏布局。

如果几个相邻的元素都具有设定的宽度，都是浮动的，而且水平空间也足以容纳它们，它们就会并列排在一行 ，

如果一个元素不想要上浮，

可以设置clear:both or left or right；

or 把上浮元素的父元素（如果父元素不同） overflow:hidden; （迫使父元素包含其浮动的子元素，这个属性是防止子元素冲出父元素的）

or 也浮动上浮元素的父元素； （这时父元素旁边不能有空间，否则下面的元素会挤上来，不过也可以或者把父元素下面的元素设置为clear:both；）

或者给父元素增加一个子元素，一个div，设置成clear:both;

如果没有父元素，就直接用伪元素 ，如果有，可以在父元素后面添加伪元素。

:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

position：relative;相对于原来的位置定位

static;

 fixed;相对于浏览器窗口定位

absolute; 绝对定位元素默认的定位上下文是 它的祖先元素。

（一般把父元素position设置为relative ,子元素 position为absolute，即把父元素设置为子元素的定位上下文）

display:

block;块级元素，比如段落、标题、列表等，在浏览器中上下堆叠显示。
inline;行内元素，比如 a、 span 和 img，在浏览器中左右并排显示，只有前一行没有空间时才会显示到下一行。

none;不会页面中显示，而且它们原先占据的所有空间也都会被“回收”，

而如果设置visibility:hidden,元素会隐藏，但占据空间存在。