传送门：

• CSS 自学笔记（上）
• CSS 自学笔记（中）
• CSS 自学笔记（下）

---

代码简写

---

布局缩写

padding、border的缩写方法和margin是一致的，这里以 margin 为例。

• 如果上下左右的值都相同，可以省略：

margin:10px 10px 10px 10px;  ->  margin:10px;

• 如果上下、左右的值分别相同，可以省略：

margin:10px 20px 10px 20px;  ->  margin:10px 20px;

• 如果左右的值相同，可以省略：

margin:10px 20px 30px 20px;  ->  margin:10px 20px 30px;

颜色和字体缩写

• 可以省略两位相同的色码

p{color: #336699;}  ->  p{color: #369;}

• 缩写字体

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}

可以缩写为：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋体", sans-serif;
}

注意：

• 使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性可以使用默认值。
• 在缩写时 font-size 与 line-height 中间要加入/斜扛。

中文页面常用：

body{
    font:12px/1.5em  "宋体",sans-serif;
}

单位和值

---

颜色值

颜色值可以有许多定义方法：

p{color:red;}
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
p{color:#00ffff;}

像素

像素指的是显示器上的显示单位（CSS规范中假设“90像素=1英寸”），浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

缩进

1em = 两倍字体大小

当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。

局中布局

---

水平居中

• 行内元素：text-align:center;
• 定宽块状元素：将左右两边的 margin 设置为 auto margin:20px auto 30px;
• 不定宽块状元素有三种方法：

  • 利用表格的属性：display:table; margin:0 auto;

  • 设置为行内元素：display:inline;

  • 通过给父元素设置 position:absolute 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

        father {
          position:absolute;
          left:50%；
        }
    
        son {
          position:relative;
          left:-50%;
        }
    

垂直居中

单行

设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高(行间距 ))。

line-height 与font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

多行

• td 标签默认情况下默认设置了 vertical-align 为 middle，所以可以利用把内容放在 table 标签中来实现垂直居中。
• display:table-cell; 注：此方法只能在 IE8 以上及Chrome、Firefox 上会生效。