目录
一、盒模型
1.元素尺寸
设置元素尺寸
div { width: 200px; height: 200px; }
auto 自适应 是默认值，width 在 auto 下是 100%的值；height 在 auto 下是自适应，就是有立马内容所需要的高度决定。
百分比方式 是相对于父元素长度来衡定的。
一个css里面写两个width等，后面的取值就会把前面的代替掉。
限制元素尺寸
div {
min-width: 100px;
min-height: 100px;
max-width: 300px;
max-height: 300px; }
这一组主要是应对可能动态产生元素尺寸变大变小的问题，从而限制它最大和最小的值。比如div设置宽高过下，内容太多就会溢出，添加这组限定后，之前的宽高取值就不起作用了。
2.元素内边距
padding
指元素距四周边框的距离。
会扩充div宽高。如height:200px; padding-top:10px; 则整个div高度变成了210px;
简写：
① padding :10px ;
上下左右10px 。
② padding:10px 20px:
上下10px,左右20px。
③ padding:10px 20px 30px;
padding 上10px 左右20px 下30px;不常用。
④ padding:10px 20px 30px 40px
上 右 下 左 顺时针转。
3.元素外边距
元素距周围元素的距离，长度不会算到元素的总长度里面去 ，这个范围内不会存在其它东西。
简写：
① margin: 10px;
上下左右10px 。
② margin: 10px 20px;
上下10px,左右20px。
③ margin: 10px 50px 200px;
上10px 左右50px 下200px;不常用。
④ margin: 10px 10px 10px 10px;
上 右 下 左 顺时针转。
4.处理溢出
当设置了元素固定尺寸且内容过大时，就会出现溢出的问题。
溢出主要朝两个方向：右 侧和底部。我们可以通过 overflow 系列样式来控制它。
overflow-x 溢出值 设置水平方向的溢出
overflow-y 溢出值 设置垂直方向的溢出
overflow 溢出值 简写属性
5、元素可见性
visibility 属性可以实现元素的可见性，这种样式一般可以配合 JavaScript 来实现效果。
div { visibility: hidden; }
设置元素隐藏，但占位，原来多大的长宽，现在就会空出多大的长宽。
collapse
元素不可见，隐藏表格的行与列，但不占位， 如果不是表格，则和 hidden 一样。
6、元素盒类型
display 属性，可以更改元素本身盒类型。
①块级元素（区块）block
够设置元素尺寸、隔离其他元素功能的元素，即其它元素会换行。比如：<div>、<p> 等文档元素。
②行内元素（内联）inline
不能够设置元素尺寸，它只能自适应内容、无法隔离其他元素，其它元素会紧跟其后。
比如：<span>、<b>等文本元素。可以通过display转换成其它类型的元素，属性就会改变。
③行内-块级元素（内联块） inline-block
所谓行内-块元素，可以设置元素尺寸，但无法隔离其他元素的元素。其它元素会紧跟其后。可以实现两个块并列等，比如<img>。
④隐藏元素 none
div { display: none; }
将元素隐藏且不占位
7、元素的浮动
通过 float 属性建立盒子的浮动方向。
left 浮动元素靠左 ， right 浮动元素靠右， none 禁用浮动 。
使用时容易出现的问题：一个元素盒子被浮动后，会处于上一层，下面的元素会自动堆叠处理，导致 元素不可见或部分不可见。
可以使用 clear 属性来处理。后面的元素加上clear之后，就不会堆叠，向原来一样处于下一行或者排列在后面。
clear:none 允许两边均可浮动
left 左边界不得浮动
right 右边界不得浮动
both 两边都不得浮动
8、盒子的阴影
box-shadow: 5px 4px 10px 2px gray;
给元素盒子增加阴影效果。
box-shadow: 5px 4px 10px 2px gray inset;
实现内部阴影。
二、边框
盒模型的尺寸可以通过两种方式实现可见性，一种是边框，一种是背景。
div的外围，设置了边框宽度，总长度会改变。
1．声明边框
默认宽度3px,默认颜色黑色，border-style:
2．边框样式
破折线就是虚线。
槽线边框：像相框一样，有立体感。
也可以对四条边中某一条边单独进行设置：
border-top-width
border-top-style
border-top-color
一般用简写形式：border-top：solid 10px red;
四条一致可以简写成：
border: 10px solid red;
3、圆角边框
border-radius长度值或百分数 四条边角
border-top-left-radius 长度值或百分数 左上边角
三、背景
简写顺序也是上面这个标签顺序。
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] / [ background-size]
[background-origin]
[background-clip];
例如：background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;
transparent 设置背景颜色为透明色。
background-size 五个值
auto 默认值，图像以本尺寸显示
cover 等比例缩放图像，使图像至少覆盖容器，但有可能超出容器
contain 等比例缩放图像，使其宽度、高度中较大者与 容器横向或纵向重合。就像QQ更换头像的原理。
长度值 CSS 长度值，比如 px、em
百分数 比如：100%
background-attachment
scroll 默认值，背景固定在元素上，不会随着内 容一起滚动
fixed 背景固定在视窗上，内容滚动时背景不动。
四、表格与列表
表格样式
独有样式有五个：
border-collapse
collapse 单元格之间无缝隙。
separate 默认值，单元格边框独立，有缝隙；
border-spacing 单元格的间距
不设置的话默认间距为2px
table { border-spacing:10px; }
border-collapse: separate;的状态下才有效。因为要设置间距，不能合并。0px时候效果比collapse有立体感。
caption-side: bottom;
设置表格标题
top 默认值，标题在上方
bottom 标题在下方
empty-cells: hide;
单元格内容为空是隐藏边框。
show 默认值，显示边框 。
table-layout
table { table-layout: fixed; }
内容过长后，不会拉伸整个单元格。但会在下一行显示文字，一行的行高会变高。
auto 默认值，内容过长时，拉伸整个单元格 。
直接在table下面写border是指整个表格的外边框样式，内边框写table tr td，tr th{}等。
列表样式
独有的有如下四种：
简写方式：list-style: lower-alpha inside url(bullet.png);
五、其它样式
opacity，可以设置元素的透明度。
outline 轮廓样式，它和边框一样，只不过它可以在边框的外围再加一层。可以实现一些立体感的样式，按钮会用。
cursor 光标样式
有很多样式，具体查看CSS手册。
cursor: move;
设置当前元素的光标为移动光标。
垂直对齐
text-align 属性水平对齐
vertical-align 属性用于垂直对齐，可以用这种方式做上下标。
vertical-align ：middle;垂直中部对齐。