css

最新推荐文章于 2025-03-18 00:30:00 发布

转载最新推荐文章于 2025-03-18 00:30:00 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/joe-yang/archive/2013/02/18/2915698.html

本文深入探讨了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.

转载于:https://www.cnblogs.com/joe-yang/archive/2013/02/18/2915698.html