盒模型的构成
从外到得分别由
Margin、Border、Padding、及内容组成
盒模型的分类
标准盒模型（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 固定定位
