CSS盒子模型

盒子

• margin 外边距
  横向相加，纵向重叠
  父子盒子合并（用 overflow:hidden 解决）
• border 边框

none /*无边框*/
dotted /*点线框*/
dashed /*虚线框*/
solid /*实线框*/
double /*两个边界*/
groove /*定义3D沟槽边界*/
ridge /*定义3D脊边界*/
inset /*定义3D嵌入边框*/
outset /*定义3D突出边框*/

• padding 内边框
• content 内容区
• width和height 设定的部分

参数个数：
1 上右下左
2 上下 左右
3 上 左右 下
4 上 右 下 左

overflow 内容超出范围时

visible 可见
auto 自动显示滚动条
scroll 总是显示滚动条
hidden 隐藏

边框效果

border-radius 圆角边框
参数个数：
1 四角
2 左上&右下 左下&右上
3 左上 右上&左下 右下
4 左上 右上 右下 左下

box-shadow 阴影
水平偏移 垂直偏移 模糊距离 阴影尺寸 颜色 inset(内阴影)

outline 轮廓线 不占用空间 在border外
宽度 样式 颜色

盒子摆放模式

标准流模式

块级盒子

div从上自下排列，宽度自动伸展占据整个浏览器，自动换行

行级盒子

span从上自下排列，从左到右，空间是内容所占据的空间，自动换行

非标准流模式

浮动与定位

浮动

使元素脱离常规文档流而表现为向右或向左浮动
float: /*right left none*/;

• 浮动盒子宽度不会自动伸展，宽度以内容为准
• 标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，但内容会受浮动盒子宽度的影响
• 可以设置clear属性使标准流中其他盒子不受之前盒子的浮动影响
• 父级盒子中的所有盒子都采用浮动形式，若父级盒子未指定高度则父级盒子的高度为0

在浮动元素后添加 clear: both; 元素清除浮动的影响

使用after伪类清除浮动

div:after{
  content:'';
  display:block;
  clear:both;
}

怪异盒子模型

box-sizing: /*
content-box 标准盒子模型(width=content)
border-box 怪异盒子模型(width=content+padding+border)
*/

定位

position: /*
static 默认
absolute 绝对定位
relative 相对定位
fixed 相对视图定位
 */

/* 偏移方向: 偏移距离 */
top: 10px;
left: 10%;
right
bottom

/*Z轴高度 数值大的元素放在上层 默认0*/
z-index

相对定位

div{
  position: relative;
}

• 相对于原始位置移动位置
• 依然占据原来的空间

绝对定位

div{
  position: absolute;
}

• 相对最近的已定位祖先元素，若没有则为body
• 不再占据原本空间

用绝对定位和负边距实现完全居中

无需考虑父容器大小

<style media="screen">
  #d1{
    width: 250px;
    height: 250px;
    background-color: red;
    position: relative;
  }
  #d2{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px;
    background-color: yellow;
  }
</style>
<div id="d1">
  <divid="d2"></div>
</div>

固定定位

div{
  position: fixed;
  right: 10px;
  bottom: 10px;
}

• 相对窗口原点偏移定位
• 不占据空间
• 不随滚动条滚动改变位置