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- 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/p/2384164.html