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:;
            padding:;
        }
        .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:;
            padding:;
        }
        .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:;
            padding:;
        }

        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);
}