css

1,元素命名：应该根据“它们是什么”来为元素命名，而不应该根据“它们的外观如何”来命名。

2,Box model
Padding is applied around the content area. If you add a background to an element, it will be
applied to the area formed by the content and padding.

In CSS, width and height refer to the width and height of the content area. Adding padding,
borders, and margins will not affect the size of the content area but will increase the overall size
of an element’s box.

#myBox { 
  margin: 10px; 
  padding: 5px; 
  width: 70px; 
} 

　　

Margin collapsing only happens with the vertical margins of block boxes in the normal flow of the
document. Margins between inline boxes, floated, or absolutely positioned boxes never collapse.

 

Inline boxes are laid out in a line horizontally. Their horizontal spacing can be adjusted using
horizontal padding, borders, and margins (see Figure 3-9). However, vertical padding, borders,
and margins will have no effect on the height of an inline box.

Similarly, setting an explicit height
or width on an inline box will have no effect either. The horizontal box formed by a line is called a
line box, and a line box will always be tall enough for all the line boxes it contains. There is
another caveat, though—setting the line height can increase the height of this box. Because of
these reasons, the only way you can alter the dimensions of an inline box is by changing the line
height or horizontal borders, padding, or margins.

Relative positioning 

With relative positioning, the element continues to occupy the original space, whether or not it is
offset. As such, offsetting the element can cause it to overlap other boxes.