css和div们 [HTML] In Case Of

2013 - 04 - 20

Child
Pseudo class
CSS box model 盒子模型
Position: absolute
Position: relative
Overlapping 层叠次序
Problem of border-style
clear: left/right/both
Picture / Image Lazy Load
Picture / Image PlaceHolder
Endless / Pageless : No More "Next Page"

Child

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p></p>
</body>
</html>

Immediate child: div <span style="color: #ff00ff;">></span> p { /* Some CSS */ }

child: div div p { /* Some CSS */ }

Pseudo class

selector:<span style="text-decoration: underline; color: #000000;">pseudo-class_selector</span> { /*<span style="text-decoration: underline;">表状态 or 属性</span> */ property: value; }

a:hover {
color: #cc0000;
font-weight: bold;
text-decoration: none;
}

p:<span style="text-decoration: underline;"><span style="color: #ff0000; text-decoration: underline;">first-child</span></span> { /* 这个段落是parent的<span style="color: #ff0000;">首个child, 不仅仅是首个p-child</span> */ }

p:<span style="text-decoration: underline;">nth-child(2)</span> /* 同理, 是第二个child, 其他sibling无论种类, 大家平等. */

CSS box model 盒子模型

OBS: IE 的 "width" 包括 padding和border.

Position: absolute

相对于 逻辑关系上最近的, 且非static的 parent.

Set the #outer div to have absolute positioning. This means that when you position the#inner div, it will be relative to #outer. (If #outer had the default positioning of static, then #inner would get positioned relative to the entire HTML document.)

Position: relative

Relatively, compared with its "static" (the default/original position), not the parent.

Note: Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.
See here