CSS布局

一、display

display属性主要有block, inline, inline-block,none

更多属性在https://developer.mozilla.org/en-US/docs/CSS/display

block 块级元素，一个块级元素会重新开始一行并且尽可能撑满容器，可以设置width,height,margin,padding。常用的块级元素有div,p,form,table,ul,dl,ol,h1~h6

inline行内元素，一个行内元素可以在段落中包裹一些文字而不会打乱段落布局，直到元素撑满一行才重新开始一行，不能设置宽高。margin,padding水平方向 有效果，竖直方向无效果。常用的有a.img.span,label,input,select

inline-block 就是将对象呈现为inline的样式，但对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。

inline-block使其具有block的宽高度特性又具有inline同行特性。

none  隐藏元素 

ps.display:none与visibility:hidden区别？

display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它的各边元素会合拢。

visibility:hidden 隐藏对应的元素，在文档布局中仍保留原来的空间。

二、margin

设置块级元素的width可以阻止它从左到右撑满容器，再设置margin:auto,则会居中显示。但是当浏览器过窄的时候会显示一个横向滚动条来容纳页面。

此时如果将width,改为max-width，则可使元素自适应窗口。

三、盒模型

盒模型有两种，一种是IE盒子，一种是w3c盒子

w3c盒子：margin,padding,border,content

Ie盒子：margin,content

当设置了元素的宽度，实际展现的元素却能够超出你的位置：因为元素的边框和内边距会撑开元素。

如果设置box-sizing:border-box，此元素内边距和边框不再会增加它的宽度。  

四、position

position属性有 static,relative,absolute,fixed四种

static是position的默认值，其元素不会被特殊的定位

relative是相对定位，如果不添加其他属性，其表现和static一样。如果在此元素上设置top、right、botton和left属性会使其偏离正常位置。其他元素不会调整位置来弥补它偏离后剩下来的空隙。

fixed:一个固定定位的元素会相对视窗来定位。即便页面滚动，它还是会停留在相同的位置。可以设置设置top、right、botton和left属性。

absolute:相对于最近的“positioned”祖先元素（即非static元素）。如果绝对定位的元素没有"positioned"祖先元素，那么它是相对于文档的body元素，并且它会随着页面滚动而滚动。

五、浮动

float 可用于实现文字环绕图片

clear 用于控制浮动。可以clear:left;clear:right;clear:both

当被包含的元素高过外层元素时，并且被包含的元素被设为浮动，则它会溢出到容器外面。

此时需要清除浮动。overflow:auto;

ps：浮动的工作原理，以及清除浮动的几种方法

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留

1、使用空标签清除浮动

这种方法是在所有浮动标签后面加一个空标签，定义其css,claer:both。弊端就是增加了无意义标签。

2、使用overflow

给包含浮动元素的父标签添加css属性 overflow:auto,zoom:1

3、使用after伪对象清除浮动

该方法只适用于非IE浏览器

.fix:after{

content:" ";

display:block;

clear:both;

height:0

}