Tips - CSS Layout

*{margin: 0px;} // 去缝隙
header_t_l{... float:left;} // 对齐方式
header_t_r{... float:left;} // 用display:inline?
header_b{... float:left;}  // (?)<div>是block级别的
@reference_1

The Old Way - using {float: left;}{clear: left;}
The New Way - using {display: inline-block;}

@reference_2

...CSS box model中，width/height不算入padding和border...

@reference_3

img{vertical-align:middle;} //图片和input输入框水平对齐

:nth-child & :nth-of-type

.first span:nth-child(2n+1),

.second span:nth-child(2n+1), 

.third span:nth-of-type(2n+1) { 

background-color: lime; 

}

@reference_0

--------------------
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

@reference_1

------------------------
display: block;
display: inline;
display: none;
visibility: hidden;
@reference_2

position: static;

position: relative;
position: fixed;
position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: A "positioned" element is one whose position is anything except static.
@reference_3