css和div们 [HTML] In Case Of

css和div们 [HTML] In Case Of

2013-04-20. Category & Tags: Web Web

Child #

<!DOCTYPE html>
<html> <!–The root of the tree!–>
<head> <!–Child of html, parent of title, sibling of body–>
<title></title> <!–Immediate child of head, child of head AND html–>
</head>
<body> <!–Child of html, parent of p, sibling of head–>
<p></p> <!–Immediate child of body, child of body AND html–>
</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