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
- 生成相对定位的元素，相对于其正常位置进行定位。
