css和div们 [HTML] In Case Of
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
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> */ }
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.
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.
clear: left/right/both
完成某些内容的 float 之后需要停止 float效果 对后面 elements 的影响. 只需要停止一次即可.
Picture / Image Lazy Load
Picture / Image PlaceHolder
Endless / Pageless : No More "Next Page"