CSS小记
1、元素居中
（1）水平居中：指定宽度，然后margin auto 即可
.middle{ max-width:400px; //width:400px;//当浏览器被缩小，宽度小于元素宽度时，元素会被遮挡，所以应用max-width，会自动缩小元素以适应浏览器大小。这点对手机浏览器很有用 margin:0 auto; }
（2）垂直居中：
//先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是为0的），并且清除默认样式，即把margin和padding设置为0（如果不清除默认样式的话，浏览器就会出现滚动条) html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; position: relative; top: 50%; /*偏移*/ //margin-top: -150px; //上移元素宽度的一半，或用translateY transform: translateY(-50%); }
（3）水平垂直居中：
html,body { width: 100%; height: 100%; margin: 0; padding: 0; } .content { width: 300px; height: 300px; background: orange; //水平居中 margin:0 auto; //垂直居中 position: relative; top: 50%; /*偏移*/ transform: translateY(-50%); }
（4）使用弹性布局Flex实现居中（水平或垂直）：将祖先元素设置宽高100%，margin和padding设为0；设置直接父元素的display为flex，并设置居中方式（水平或垂直）
（关于Flex的直白文章：Flex布局的语法、Flex布局的实践、基于flexbox的栅格化布局库）
html,body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; /*定义body的元素垂直居中*/ justify-content: center; /*定义body的里的元素水平居中*/ } .content { width: 300px; height: 300px; background: orange; }
（5）其他比较次的方法
元素水平垂直居中：
#position { position: absolute; top: 50%; left: 50%; width: 150px; height: 40px; margin: -20px 0 0 -75px; padding: 0 10px; background: #eee; line-height: 2.4; }
元素固定在底部并居中：
height: 105px;
width: 100%;//使之居中
text-align: center;
position: absolute;//position和bottom使之居于底部
.center-vertical { position: relative; top: 50%; transform: translateY(-50%); }
2、把列表元素的display 设为行内元素样式 inline ，可以达到导航栏栏目的效果
3、box-sizing:border-box
对于盒子模型，IE早期版本将border和padding算在width内，而css标准则不算在内，这就造成个兼容问题。通过如上设置可以将盒子模型的border、padding算在width内，达到统一的目的；此外，也因而更容易设置盒子的尺寸，因为需要设的尺寸参数少了（少了border和padding）。
4、position:
inherent：从父元素继承 position 属性的值；
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative：生成相对定位的元素，相对于其正常位置进行定位。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位（未指明position时默认为static）
5、float:left 能够让被修饰的元素浮动在其后面一个元素的左边；clear:left 能够让被修饰的元素左边没有元素浮动
6、设置文本缩进
text-indent：value（2em）/*缩进两个文字*/
7、设置表格边框合并为单一边框：border-collapse;separate/collapse
<!doctype html> <html> <head> <title>表格样式</title> <meta charset="utf-8"/> <style type="text/css"> #t1 { width:200px; border:1px solid #f00; padding:10px; margin:30px auto; border-collapse: collapse; } #t1 td { border:1px solid #00f; padding:10px; } </style> </head> <body> <h1>1.表格适用box模型</h1> <table id="t1"> <tr> <td>aaa</td> <td>bbb</td> </tr> <tr> <td>ccc</td> <td>ddd</td> </tr> </table> </body> </html>
8、设置背景图片不随页面滚动：background-attachment: fixed
示例：http://www.w3school.com.cn/tiy/t.asp?f=csse_background-attachment
9、box-shadow: h-shadow v-shadow blur spread color inset;
参考：http://www.w3school.com.cn/cssref/pr_box-shadow.asp
10、CSS实时编辑显示：通过display:block让css文本显示出来，再加上contentEditable使文本可编辑
<!DOCTYPE html> <html> <body> <style style="display:block" contentEditable> body { color: blue } </style> </body> </html>
11、创建长宽比固定的元素：通过设置父级窗口的padding-bottom可以达到让容器保持一定的长度比的目的，这在响应式页面设计中比较有用，能够保持元素不变形。
<div style="width: 100%; position: relative; padding-bottom: 20%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
12、CSS做简单计算：通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。
.container{ background-position: calc(100% - 50px) calc(100% - 20px); }
