CSS 布局

CSS模型概述

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
一些常用词汇：
- padding : 内边距，也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距，也有资料将其翻译为空白或空白边。

CSS定位

相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
设置相对定位：

position ：relative

注意点：

    1.不影响元素的本身特性
    2.会破坏当前的文档流，但是不会脱离文档流
    3.如果说没有设置偏移量，元素是不会动的。
    4.left right，top，bottom

postion：四个值 ，relative、static（默认），fixed（固定定位）、absolute（绝对定位）

固定定位

设置固定定位：

position: fixed;

固定定位：设置了偏移量后固定在屏幕上，脱离文档流，不会受到文档流的控制

默认定位

设置默认定位：

position:static;

static ：遵循标准的文档流

绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
设置绝对定位：

position : absolute;

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
注意：

1.设置绝对定位要脱离文档流,而且默认漂浮在页面左上角
2.文档的范围要大于body（文档>html>body）
3。设置绝对定位后，元素不会占据原来的空间，也不会影响标准文档流继续排列。
4.会默认给元素一个display： inline-block，这里就把空白区域考虑了，不用自己考虑了

说法的方式简单点！
就是：
如果设置父类或者是父类的父类为相对定位，他要以定位父级作为父类
如果div1和div2都没有定位，那么就以div2作为父级
如果div2啥都没有设置，div1设置了定位，那么就要相对于div1进行移动。
如果一个元素父类比较多，找定位父级的时候，离他最近的是他的移动的标准。

有一个属性：

z-index
z-index设置定位层级 值越大层级越高。一般是整数，最大没有限制

浮动

浮动：
float 浮动可以让块级元素在一行显示，left左right 右
语法：

     float:left;
     float:right;

注意：
1.他脱离文档流
2.后面元素碰到前面元素的边界就停止下来，或者碰到父类的边界就停止下来
3。默认加上display : inline-block

清除浮动

语法：

.clear{
            clear: both;

        }

清除浮动
clear：left/ right/ both
相当于加了一个分割线，没有任何样式。
清除浮动不是取消浮动，只是分隔上面浮动对下面元素的影响