关于盒模型的那些事

盒模型的构成

从外到得分别由

Margin、Border、Padding、及内容组成

image

盒模型的分类

标准盒模型（w3c标准盒模型）

Content=width+height

内容 = 宽+高

怪异盒模型（ie盒模型）

Content=width+reight+padding+border

盒模型转换

Box-sizing：content-box； w3c标准盒模型

正常文档流 自上而上 自作而右

脱离文档流：非正常文档流

父元素的高度由子元素的高度和内容撑开

浮动：float：/eft/right/none;

浮动特性：1、不占位

会影响其后面的相邻元素

父元素高度塌陷

可以使块元素并排显示

隐式的将行内元素转换为块级元素

清除浮动 解决父元素高度塌陷的问题

设置父元素高度，设置高度值为子元素的最大元素

父元素的高度取决于高度最大的子元素

缺点：子元素高度不定

设置父元素overflow：hidden；

overflow：visible；默认值溢出显示

Hidden；隐藏

Auto ；自动显示滚动条

Scroll；显示滚动条

缺点：兼容性不好

给父元素后面添加一个子元素，并设置clear：both

clear：清除浮动
left；清除左边浮动
right；清除右边浮动
both；清除左右浮动
缺点：扰乱结构
页面会增加哦无用的div
增加页面负担

给父元素设置浮动

缺点：需要给所以的父元素设置浮动

给父元素加伪类清除浮动

           Arr.clearfix:after {

                 display：block；

                content:””;

                 width：0；

                 height：0;

                clear:beth:

              }

为了兼容性，还好再加一个

        Arr.clearfix {

                zoom: 1;

            }

Margin 外边距

margin重叠效应

两个相邻元素

下外边距

正正：去最大值

正负：margin正负相加值

负负：取绝对值最大的

Margin溢出

子元素margin-top，导致父元素向下移动

解决方案

    给父元素设置overflow：hidden；

    形成结界：BFC（block formatting context）

    块级格式化上下文，形成独立的块级区域

    给父元素设置padding-top

    给父元素设置边框border

Padding：内边距

语法

Padding：10px 20px 30px 40px；

                       上      下    左    右

position定位

position:fixed;

固定定位

相当于窗口的定位

四个方向：top/right/left/bottom

脱离定位

    position：static；

静态定位（默认值）

不可移动

   position：relative；

相对定位

相对于自己定位

四个方向：top/bottom/right/left

半脱离文档流：占位，但移动的时候不影响其他元素

 position：absolute；

绝对定位

相对于有定位属性的父元素

有定位属性的元素：不带静止定位的定位

当所有的父元素都没有定位属性的时候，则相对于根元素定位

position；stickg；粘性定位

relatlve+fixed

当在窗口显示区域的是relative

当在超出窗口的区域内的时候fixed 固定定位

image