- 首先咱们最简单的就是 居中
这是一个很重要的基础，在很多时候会用到。
- 块级水平居中可以使用margin:0 auto
- text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- 作用：水平居中；
- 作用在块级元素上；
- 能够使inline元素和inline-block元素水平居中。
上面两个是相对用的比较多，还可以用flex布局，定位等等
- 定位 position
| 值 | 属性 |
|---|---|
| inherit | 规定应该从父元素继承 position 属性的值 |
| static | 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明） |
| relative | 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px会向元素的 left 位置添加20px |
| absolute | 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right以及 bottom属性进行规定 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top,right以及 bottom属性进行规定 |
| sticky | CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置 |
普通流与相对定位
-
CSS有三种基本的定位机制：普通流，相对定位和绝对定位
-
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式
-
相对定位比较简单，对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变
-
绝对定位与固定定位
-
相对定位可以看作特殊的普通流定位，元素位置是相对于它在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样
-
绝对定位的元素的位置是相对于距离最近的非static祖先元素位置决定的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块儿（body或html神马的）元素。
-
因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。
-
最后要说的就是fixed属性了，应用fixed也叫固定定位，固定定位是绝对定位的一种，固定定位的元素也不包含在普通文档流中，差异是固定元素的包含块儿是视口（viewport）
总结：
- absolute偏移的参考点是具有position属性（除了static属性）的最近的祖先元素。
- relative偏移的参考点是元素本身的初始位置。（不脱离文档流）
- fixed偏移的参考点是浏览器窗口。
浮动 float（脱离文档流）
浮动元素的特征：
-
浮动元素将脱离文档流，不会再占据空间;
-
无论是块元素还是内联元素，没有宽度时默认内容撑开宽度;
-
内联元素支持宽高；
-
设置宽高和float后，相当于悬浮的inline-block。
浮动元素对其他元素的影响：
-
对其他浮动元素的影响：后浮动的元素永不会超过先浮动元素;
-
对普通元素的影响，普通元素会占据浮动元素原来所在的文档位置;
-
对文字而言，除了自身的文字外，其他元素中的文字一律环绕浮动元素周围；
BFC清理浮动
-
BFC的全称是 Block Format Content，有三个特性
-
BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
- 按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠
-
BFC不会重叠浮动元素
-
BFC可以包含浮动
我们可以利用BFC的第三条特性来“清浮动”，这里其实说清浮动已经不再合适，应该说包含浮动。也就是说只要父容器形成BFC就可以，简单看看如何形成BFC
- float为 left|right
- overflow为 hidden|auto|scroll
- display为 table-cell|table-caption|inline-block
- position为 absolute|fixed
我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果
通用的清除浮动法案
- 总而言之清除浮动两种方式：
- 利用 clear属性，清除浮动
- 使父容器形成BFC
plan1:
.clearfix:after{ /*在class属性名是clearfix的元素的子元素的最后再添加一个子元素*/
content: ''; /*内容是空*/
display: block; /*设置为块级元素*/
clear: both; /*这个元素左右两边不允许有浮动元素*/
}
.clearfix{ /*设置class属性是clearfix的元素*/
*zoom: 1; /*设置缩放比例为1。这是IE专有属性。火狐和老版本的webkit核心的浏览器都不支持这个属性。*/}
plan2:
.clearfix{
*zoom:1;
}
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
plan3
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
负margin
负边距即margin属性的值设为负值，在CSS布局中是一个很有用的技巧。值为正的场景很常见，大家都很熟悉其表现
- 当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同
- 当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会上移、左移
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
区别：
-
负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
-
相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。
z-index 有什么作用
z-index用于设置元素的堆叠顺序，z-index的值越高，则其堆叠顺序越前，则是显示在较低z-index的值的前面。
- z-index仅对定位元素有效（position:relative||absolute||fixed）
- z-index只可比较同级元素
布局
感觉自己还是没能理解透，没法自己写，只能复制这篇先放着
http://www.jianshu.com/p/be7a452bf707
还有flex布局
还有bootstrap
还有。。。
网友评论