margin负值的用法及相关布局

相关概念

1. 文档流

指在网页中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。

定位类型包括三种：

包含三种类型:块级元素的块级格式、行内元素的行内格式以及两种元素的相对定位方式。

2.脱离文档流

要使一个元素脱离文档流有两种方式：

使用浮动（float）：值为 left、right 均会使元素脱离文档流，但不会脱离文本流，即利用float脱离文档流的时候，其他盒子元素会无视这个元素，但是其他盒子内的文字依然会为它让出位子，环绕在其周围）

对于float布局：

1.如果浮动元素的上一个元素也是浮动，那么该元素会与上一个元素排列在同一行，如果行宽不够，后面的元素会被挤到下一行

　　2.如果浮动元素的上一个元素不是浮动，那么该元素仍然处于上一个元素的下方，根据浮动设定在左或者在右，而其本身也脱离普通流，后边的元素会自动往上移动到上一个普通流元素下方为止

3 当给元素设置float后，元素将形成“块”，可以给该元素设置宽高，如span元素。而float属性被除去时，宽高就会失效

使用定位（position）：值为 absolute、fixed 的元素脱离文档流，其它不脱离文档流

3. 普通流的margin取负值

1.margin-left为负值（影响自身元素

div2: marigin-left:-50px

2.margin-right为负值

div2: marigin-right:-50px(设置宽度时，无影响

当不设置宽度时，

3.margin-top:-50px(偏移值相对于自身，其后元素受影响

4.margin-bottom:-50px(自身无偏移值,，其后元素向上偏移

可以看出

margin-left 和 margin-top：影响自身元素，自身元素将向指定方向偏移

margin-right在没有设置width属性时，宽度向右增加对应的像素

margin-bottom将影响后元素，使后元素向上偏移对应像素

所有偏移的元素位于z轴最上方，偏移量覆盖正常元素的对应位置

4.浮动流

margin-top:-50px（影响自身元素，元素将向上偏移

margin-left:-50px（影响自身元素，将向左偏移，并影响其后元素

margin-left:-500px(大于自身宽度

margin-right:-50px（对自身无影响，影响其后元素，其后元素将向左偏移对应像素

margin-bottom:-50px（无影响

可以看出

margin-top：影响自身元素，自身元素将向对应方向偏移

margin-left：影响自身元素，其后元素在遇到继续想左浮动直至遇到浮动元素后固定

margin-right:对自身无影响，影响其后元素，其后元素向对应方向偏移

margin-bottom:无影响

5.几个经典布局

1.圣杯布局

两边定宽，而中间自适应的一种布局：用到浮动、负边距、相对定位

              <div class = "head">head</div>

            <div class = "container">

                <div class = "left">left</div>

                <div class = "center">center</div>

                <div class = "right">right</div>

            </div>

            <div class = "foot">foot</div>

添加样式

.left , .center, .right {    position: relative;    }

.left    { float: left； width: 50px;    margin-left: -50px;     }

.center{     float: left;    width:100%; }

.right{    float: left;    margin-left: -50px; width:50px;     }