盒模型
margin border padding content(width height)
标准盒模型（加doctype）
宽度 = 内容宽度
IE盒模型（不加doctype）
宽度 = 边框 + 内边距 + 内容宽度
box-sizing
- content-box; 标准盒模型
- border-box; IE盒模型
border
border: 1px solid red;
margin
外边距可以为负值。
水平居中
margin: 0 auto;
外边距合并
两个或多个块级元素的
上外边距和下外边距有时候会发生合并
注意：
- 水平外边距不会合并。
- 浮动元素和绝对定位元素的外边距不会合并。
相邻元素
解决方法
- float
- 相邻元素合并可以不用特地解决外边距合并问题，注意设置好margin值就可以
父子元素
父子元素上下外边距发生合并
解决方法
- border
- padding（推荐使用）
- overflow: hidden;
自己合并(空元素)
前提条件：有一个空元素，它有外边距，但是没有边框或填充。
注意：
- div无相邻盒模型存在时，本身的margin并不会发生重叠。
- 有了相邻盒模型存在，发生了外边距重叠。
display
块级元素：block list-item table
行内元素：inline inline-table inline-block
display: table;
display: flex; 弹性布局
display: grid;
outline
- 轮廓不占据空间，它们被描绘于内容之上。
- 轮廓可以是非矩形的，opera中绘制的是非矩形轮廓
outline: width style color;
box-shadow
水平偏移 垂直偏移 模糊半径 color inset;
overflow
overflow: visible; //不会被裁减
overflow: hidden; //会被裁减
overflow: scroll; //表示内容会被裁剪，滚动条
单行文本溢出加 ...实现
white-space: nowrap;
overflow: hidden;
*text-overflow: ellipsis;
多行文本溢出加 ...实现
*-webkit-line-clamp:2;//指定行数，2行之后会被限制
display: -webkit-box; //将对象作为弹性伸缩盒子模式显示
-webkit-box-orient:vertical; //设置或检索伸缩盒对象的子元素的排列方式
overflow:hidden;
text-overflow: ellipsis;
块级元素和行内元素
块级元素
p hr h1~h6 div table th td tr form ul ol li dd dt dl
- 可以包括其他block和inline元素。
- 可以设置宽高、padding、margin属性。
- 特例：
<p>只能包含 inline 元素
行内元素
img a input em strong br span button label select textarea
- 设置宽高无效(img除外)。
示例1：jsbin.com/yikeqic/edi…
- 水平padding、margin有效。
示例2：jsbin.com/vivetin/edi…
- 垂直padding、margin无效。
inline-block
既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)，又呈现 block 特性 (可设置宽高，内外边距)
缝隙问题
给父元素设置font-size: 0;
inline-block 元素上设置新的font-size
解决方法
对齐问题
解决方法
设置vertical-align: top/middle/bottom;
