盒子模型

css盒子模型
内容区content内边距padding边框border外边margin
1.盒子大小由content padding border决定
2.weight height 设置内容区大小

边框
设置边框必须指定的三个样式：
border-width 边框宽度
border-color 边框颜色
border-style 边框样式
none无 solid实线 dotted点状
dashed虚线 double 双线
大部分浏览器 width color有默认值 style默认none

若border-width：10px 20px 30px 40px
按上 右 下 左（顺时针）；上 左右 下； 上下 左右

border-xxx-width
xxx=top\right\bottom\left

简写： border：red 10px solid
（同时4个边，无顺序要求）
border-xxx： 只对一个边
•border： 三个边
•border-xxx：none

内边距
会影响盒子的可见框大小，元素的背景会延伸到内边距

外边距
不影响可见框的大小，会影响盒子的位置
margin-xxx 可以指定负值 反方向移动
可以设置 auto 一般只水平方向
•margin-left:auto 使子元素在父元素中居中
•margin-right:auto
margin:0 auto 同时四向

垂直外边距的重叠
兄弟元素之间的相邻外边距会取最大值而不是和
若父子元素的垂直外边距相邻，则子元素的外边距设置给父元素

去掉浏览器默认样式
*{
margin:0;
padding:0;
}

内联元素的盒模型
内联元素
不能设置width和height
可以设置水平方向的内边距 padding-left
可以设置垂直方向的内边距 但不影响布局 -top
可以设置边框，垂直的不影响页面布局
可以设置水平外边距，相邻不会重叠而会求和
不支持垂直外边距

display 可以修改元素的类型 可选值：inline 将一个元素作为内联元素显示 block 将一个元素作为块元素显示 inline-block 行内块元素 （可设宽高，不独占一行） none 此元素不会显示，不占位置 visibility 设置元素的隐藏和显示状态 可选值：visible 默认值 会显示 hidden 隐藏 但位置保持

overflow 父元素如何处理溢出内容
可选值：visible 默认值 不处理 在父元素外显示
hidden 溢出内容修剪不显示
scroll 为父元素添加滚动条
（是否溢出都添加水平和垂直滚动条）
auto 智能滚动条

文档流 网页最底层 表示一个页面中的位置
在文档流中
块元素：独占一行，自上向下排列；
默认宽度是父元素100%；
高度默认值被内容撑开。
内联元素：只占自身大小，从左向右排列；
宽高默认被内容撑开。

浮动
float
可选值：none 默认 在文档流中排列
left 脱离文档流，向页面左侧浮动
right 脱离文档流，向页面右侧浮动

1. 元素浮动以后会尽量向页面的↖或↗漂浮，直到遇到父元素边框或其他浮动元素
2. 若浮动元素上边是一个没有浮动的块元素，则浮动元素不超过块元素
3. 浮动元素不会超过它上边的兄弟元素，最多一边齐
4. 浮动元素不会盖住文字，文字会自动环绕浮动元素周围
   【通过浮动设置文字环绕图片效果】
5. 块元素脱离文档流后，宽高被内容撑开
   内联元素脱离文档流后，变成块元素

高度塌陷问题：

1.  zoom:1;
     overflow:hidden;
   

2. <style>
   . clear{clear:both;}
   </style>
    <div class="box1"> 框
             <div class="box2">       </div>方块
             <div class="clear">       </div>
    </div>
   

3. . clearfix:after{
   content:"";
   display:block;
   clear:both;
   }
   . clearfix{
   zoom:1;
   }

clear 可以清除其他浮动对当前元素的影响
可选值：none 默认值 不清除浮动
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧浮动元素对当前元素的影响