Css布局属性详解

display

1.块级 block

此元素前后会带有换行符

此元素可以设置width,height属性。

块级元素即使设置了宽度,仍然是独占一行（除非浮动或者position），这里设置的宽度是显现内容的宽度，缺省为父容器宽度

可以设置margin和padding属性

常用：div,form,table,p,pre,h1~h6,dl,ol,ul

块级元素水平居中：

margin：0 auto；

2.内联 inline

元素前后没有换行符

设置width,height属性无效，宽度就是它的文字或图片的宽度，不可改变

此元素水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。即内联元素行高固定，不受上下的内外边距影响。（！这里的内联指的是非替换元素）

2.1 非替换元素：指内容包含在文档中的元素。span,a,strong,em,label,select,textarea,br

2.2 替换元素:根据元素的标签和属性，来决定元素的具体显示内容。img（根据src属性判断图文信息），input（根据type属性显示输入框还是单选按钮）等

内联元素水平居中：

text-align：center；

3.行内元素 inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现，使其既具有block的宽度高度特性又具有inline的同行特性

注意，在导航栏使用li变成inline-block时，li之间的换行符会使li模型之间有间隙，最好用<–！–>把换行符替换

常用：button、script、iframe

float

使使用该布局的元素脱离文档流，后面的非float元素会无视该元素进行布局，而该元素会漂浮在原来的位置，有可能遮盖后来的非float元素。

这个大家应该都很熟悉，我就讲一讲元素坍塌。在一个元素里面，因为子元素设置了float脱离文档流，从而无法计算子元素的扩张高度，所以这个父元素会发生坍塌，高度为0，而子元素漂浮在父元素的位置上。

所以就有了很多种清除浮动的方法：

在子元素后面添加一个元素清除浮动。

<div style=”clear:both;”>

<br clear=”all” />

副作用是会在后面添加了DOM节点

触发浏览器重排，撑开元素重新计算布局

如：

父元素设置

*zoom：1，

*position: fixed/absolute，

*display: inline-block，

*float，

等都是可以触发

用after伪元素清除浮动

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;  //高度为0且hidden让该文本彻底隐藏
visibility: hidden;
}
.clearfix {
*zoom: 1;
}

position

1. static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

*

2. fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

3. absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位（常在父元素使用relative禁锢子元素absolute的范围）

若未指定left/top/right/bottom，则该元素仍处于正常文档流的定位点（就是相当于位置不变）

若指定left/top/right/bottom，则元素浮起，

3.1 会遮盖普通元素（这里的和float表现不一样，absolute是类似于index-z的漂浮，float是让文字文本环绕的漂浮）

3.2 会发生高度塌陷（都是因为脱离文档流计算不到高度）

!（absolute是绝对脱离文档流，float只是脱离了文档流的dom空间但是还占据着文字空间，所以float还有办法可以处理高度塌陷）

原生JS隐藏，使用display:none/block会影响原来的inline-block的元素，以及重排重绘开销大，这时可以使用

absolute + top:xxx

或

absolute + visibility:hidden

4. relative

生成相对定位的元素，相对于其正常位置进行定位。