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 > p { /* Some CSS */ }
child: div div p { /* Some CSS */ }
Pseudo class
selector:pseudo-class_selector { /*表 状态 or 属性 */ property: value; }
a:hover {
color: #cc0000;
font-weight: bold;
text-decoration: none;
}
p:first-child { /* 这个段落是parent的首个child, 不仅仅是首个p-child */ }
p:nth-child(2) /* 同理, 是第二个child, 其他sibling无论种类, 大家平等. */
CSS box model 盒子模型
OBS: IE 的 “width” 包括 padding和border.
Position: absolute
相对于 逻辑关系上最近的, 且非static的 parent.
<div id=”outer”>asdf <div id=”inner”>1234</div> </div>
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.
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative2
Overlapping 层叠次序
z-index (数字)大者在上, (内容)后来居上. 文字可理解为 -0.5, 不可调整.
Problem of border-style
Without knowing the assumption of light-direction, it could be just a mess for a normal user.
http://www.w3schools.com/css/css_border.asp
clear: left/right/both
完成某些内容的 float 之后需要停止 float效果 对后面 elements 的影响. 只需要停止一次即可.
http://www.codecademy.com/courses/web-beginner-en-6merh/2/4#
Picture / Image Lazy Load
http://www.appelsiini.net/projects/lazyload
Picture / Image PlaceHolder
http://imsky.github.io/holder/
Endless / Pageless : No More “Next Page”
http://stackoverflow.com/questions/183782/loading-content-as-the-user-scrolls-down?rq=1