CSS布局-基础

布局

浮动

浮动元素只会影响后边的标准流元素，不会影响前边的标准流元素。
如果一个盒子内有浮动元素，那么其他的兄弟元素也应该浮动，防止出现问题。

清除浮动

因为父盒子很多请款项，不方便给高度，如果子盒子浮动不占位置，就会造成父盒子高度为0，影响了下面标准流盒子

子盒子是标准流，父盒子虽然没有高度，但是也会通过子盒子撑开父盒子，进而获得高度。
子盒子浮动，脱标，父盒子没有撑开高度就是0，那么下面的标准流盒子就会移上去。

清除浮动的本质

清除浮动就是为了解决父级元素因为子级浮动引起的内部高度为0的问题。清楚浮动之后，父级就可以根据浮动的盒子自动检测高度。父级有了高度就不会影响下面的标准流了。

隔墙法

在最后添加一个标签，设置其clear属性为both。
优点通俗易懂，书写方便，w3c推荐
缺点增加许多无意义标签，结构化较差

给父级添加overflow属性

优点代码简洁
缺点内容增多的时候，容易造成不会自动换行导致内容被隐藏掉，无法显示出要溢出的元素

父级after伪元素

:after 方式为空元素额外标签法的升级版，好处是不用额外单独添加标签了。
优点符合闭合浮动思想，结构语义化正确
缺点由于IE6、IE7不支持:after，使用zoom:1触发hasLayout。
代表网站 百度、淘宝、网易等

父级双伪元素

.clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

优点代码简洁
缺点由于IE6、IE7不支持:after，使用zoom:1触发hasLayout。
代表网站 小米、腾讯等

推荐最后两种伪元素的方法清除浮动

定位

四种模式

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

relative 相对定位

相对于自己原来在标准流中的位置移动的
原来在标准流的区域继续占有，后面的盒子任然以标准流的方式对待它
示例图：

absolute 绝对定位

如果父级没有定位绝对定位子盒子以浏览器为准定位
如果父级有定位绝对定位子盒子以父级为准移动位置，即将元素依据最近的已经定位（相对、绝对、固定）的父级元素进行定位
示例图：

不保留原来的位置，完全是脱标的

子绝父相 子盒子用绝对定位，父级用相对定位

居中对齐
绝对定位完全脱标，无法直接用margin让其水平居中
所以需要先用left偏移元素的center，然后再减去自身宽度的一半

fixed 固定定位

固定定位是绝对定位的一种特殊形式

完全脱标
只认浏览器的可视窗口--浏览器可视窗口+边偏移来设置元素的位置
* 跟父元素没有任何关系，单独使用的
* 不随滚动条滚动
IE6等低版本的浏览器不支持固定定位

堆叠顺序（z-index）

在使用定位布局时，可能出现盒子重叠的情况。
加了定位的盒子，默认后来者居上，后面的盒子会覆盖在前面的盒子上。
应用z-index层叠等级属性可以调整盒子的堆叠顺序。

未设置定位时，标准流的布局

z-index默认都是0

z-index依次是2、1、0

属性值：正整数或负整数，默认是0。数值越大，盒子越靠上。
数值相等，则按照代码顺序排布。
注意：z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

display是显示模式，可以改变显示模式有以下方式，

可以用inline-block转换为行内块
可以用浮动float默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位、固定定位和浮动类似，默认转换为行内块所以说，一个行内块的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。 行内块的宽度和高度会根据盒子内容自适应显示宽高。

注意

ul默认padding-left是40px margin-top、margin-bottom是16px，在开发中要先清除这些属性。

* {
     margin: 0;
     padding: 0;
  }

定位模式	是否脱标占有位置	移动位置基准	模式转换（行内块）	使用情况
静态static	不脱标，正常模式	正常模式	不能	几乎不用
相对定位 relative	不脱标，占有位置	相对自身位置移动	不能	基本单独使用
绝对定位 absolute	完全脱标，不占有位置	相对于定位父级移动位置	能	要和定位父级元素搭配使用
固定定位 fixed	完全脱标，不占有位置	相对于浏览器移动（注意移动区域是可视窗口范围）	能	单独使用，不需要父级