周总结

一.清除浮动

主要有四种方法

1.CSS设clear:both/left/right，表示左右两边或者左边，右边不能有浮动元素

2.父元素结束标签之前，插入空白块级元素来清除浮动

3.利用伪元素，对伪元素清除浮动，达到清除浮动的目的

4.利用overflow清除浮动，属性值可以是除visible以外任意值（不推荐，有时会出现问题，如Firefox使用overflow:auto会产生focus）

二.CSS栅格系统

1.Bootstrap栅格的容器有两种，.container（固定像素值的宽度）和.container-fluid（100%的宽度），row（.row）必须位于container的内部，column（如.col-md-6）必须位于row的内部。container、row、column必须保持特定的层级关系，栅格系统才可以正常工作。

2.container和container-fluid

（1）.container类出现内边距和外边距，.container-fluid类没有。

（2）.container类左右内边距一直是15px，屏幕小于等于767px的时候没有margin值，屏幕大于767px开始有左右margin值，屏幕宽度为768px和1000px的时候，margin值相对最小，分别是9px和15px，其他时候margin值随着屏幕的增大而增大（container容器不止有15px的padding，还有一个会随着浏览器宽度变化而变化的margin）。.container-fluid类宽度不管屏幕宽度大小，一直是100%。

注意事项：

  1.一行中列数超过12，自动换行

  2.栅格类属性可以向上兼容，但向下不兼容，栅格类适用于与屏幕宽度大于或等于分界点大小的设备。比如设小屏幕四列一个元素，中屏，大屏都为四列一个元素，超小屏幕会一个元素占满一行。有时候，会需要将多种断点类型组合使用，以实现更细致的响应式设计。设计时，断点像素值越大的，对应代码越靠后。 例：

<div class="col-sm-6 col-lg-3">1</div> 

 

在上面这样视口宽度由小变大的过程中，首先是保持默认的竖直堆叠，然后超过了sm的断点，sm的样式生效，变为一行两列的排版，再继续超过lg的断点后，lg的样式也生效，由于lg的样式代码定义在sm之后，所以会覆盖掉sm的样式，从而得到一行四列的排版。

 

3.Bootstrap栅格不应过度使用。例如，需要一个占据一整行宽度的元素时，不要加入类似.col-xs-12这样的元素。而是加一个块元素。

三.z-index视轴

html -> z-index负值盒子（绝对定位） -> 块状盒子 -> float 盒子 ->inline或者inline-block盒子-> z-index auto或者0的盒子（绝对定位） -> z-index正值盒子（绝对定位），视轴越来越高。

四.像素px

设备像素是一种物理概念，是设备中的物理像素。

CSS像素是web编程中的概念，指的是CSS样式代码中使用的逻辑像素。

CSS像素是根据设备像素比换算的。