CSS - div

text-align
虽然名字包含text，但它可作用于所有inline element。例如，你在div里有<p>和<img>，当你设置

div {
    text-align: center;
}

里面的<p>和<img>都会居中。

另外一点，text-align只能用在block element里，如果你直接把它使用在一个inline element（如：<img>），则不会产生任何效果。

---

Descendant Selectors

如果使用如下格式，风格则会应用到div下所有的h2，不管该h2是direct child还是grandchild。若有一个h2嵌套在<blockquote>里，一样会应用该风格。

div h2 { }

如果想只选择direct child，则需要使用

div > h2 { }

---

line-height属性：

当你使用em或者%的时候，line-height会找到最基础的font大小，然后计算，如：

body {
    font-size: 12px;
}

div {
    line-height: 1em;
}

div里各元素的line-height均为12px。

如果你喜欢div里各元素的line-height以各元素字体大小为基准的话，直接使用数字，如：

div {
    line-height: 1;
}

---

简单定义padding或margin：

原始方法：

padding-top: 0px;
padding-right: 20px;
padding-left: 30px;
padding-bottom: 10px;

简易方法：

padding: 0px 20px 30px 10px;

如果左右两边相同（前面top & bottom，后面是left & right）：

padding: 20px 40px

如果全部一样

padding: 20px;

 

border同样可以简写，原始：

border-width: thin;
border-style: solid;
border-color: #007e7e;

简写，而且border不需要排序，你可以按你喜好随便写：

border: thin solid #007e7e;

background一样可以简写（background-color, background-image, background-repeat）

background: white url(images/cocktail.gif) repeat-x;

font也可以： font: font-style font-variant font-weight font-size/line-height font-family

待续。。。

转载于:https://www.cnblogs.com/rexmzk/archive/2012/03/07/2384164.html