盒子模型
1.内边距padding
指定了高宽，再指定内边距，则会撑开盒子。
盒子未指定高宽（继承算未指定），则不会撑开盒子。
2.外边距margin
用于控制盒子之间的距离。同padding的简写方式。
margin-left左外边距 right top bottom
块级盒子水平居中，需满足两个条件：①盒子必须指定了宽度 ②盒子左右的外边距都设置auto.
EG-------------> width: 298px margin: 100px auto;
z注：以上是让块级元素水平居中，行内或行内块元素水平居中给其父元素添加text-align:center即可。
外边距合并：对于嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷（增大）较大的外边距值。
解决方案：
①可以为父元素定义上边框。border：1px solid red/transparent
②可以为父元素定义上内边距。padding：1px
③可以为父元素添加overflow：hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。
清除内外边距
*{
padding：0；//清除内边距
margin：0；//清除外边距
}
注：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转化为块级和行块元素就可以了。
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
PS的使用
border-radius:切面圆的半径值；半径越大，圆角越大。
盒子阴影（重点）
box-shadow：h-shadow v-shadow blur spread color inset;
h-shadow和v-shadow是必须写的。
默认的是外阴影（outset），但是不可写这个单词，否则导致阴影失效。
盒子阴影不占空间，不影响其他盒子排列。
文字阴影 text-shadow
浮动最典型的应用：可以放多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素 纵向排列找标准流，多个块级元素 横向排列找浮动。
float：属性值； 创建浮动框 将其移动到一边，直到左/右边缘触及包含块或另一个浮动框的边缘 eg.如果都设置向左浮动，则从左贴着呈现。
none（默认） left（元素向左浮动） right
如果行内元素有了浮动，则不需要转块、行内块元素就可以直接给高宽度。
浮动让行内元素、块级元素，都变成了 行内块 元素拥有的特性，宽高可控，且多个浮动特性元素，都会在一行上（不管你原先是什么元素）。未指定宽高的，由文字内容决定。
浮动布局注意点：
1.先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置。
2.元素横着排的，一个元素浮动，理论上兄弟也浮动，如果未浮动，说明哪个少加float了。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。---------------自己的理解：如果加了浮动，那么这个元素就相当于漂起来了并且定在这个位置的上面的漂，后面的标准流就随着它的变化而变化了。
1
2
3
设置：1浮动2不浮动3浮动，效果：1在2的上面，3自己一行
1不浮动2浮动3不符动，效果：1自己一行，2在3上面。
总结，浮动盒子，会浮动在后面紧跟的标准流上。（原因：浮动盒子不占有位置。。）
清除浮动：父级盒子在很多情况下，不能给写死的高度，但子盒子浮动不占有位置，最后父级盒子高度就为0，影响下面的标准流盒子（他会处于浮动盒子的下面）。
①额外标签法：
语法： 选择器{clear:属性值} -----left（清除左侧漂动的影响）--right --both 漂动元素最后一个添加块级标签调用选择器 清除浮动的策略是：闭合浮动 缺点：加了代码
②添加overflow:hidden、auto、scroll 缺点 无法显示溢出部分
③after伪元素
④before和after双伪元素清除浮动
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/content: "";display: block;height: 0;clear:both;visibility: hidden;}.clearfix{*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/}块级元素，调用一下这个clearfix类选择器
---------------------------------------------------------
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
