CSS盒模型是HTML元素的矩形布局范例，由以下内容组成:

• Content -显示文本和图像的框的内容
• Padding -内容周围的透明区域(例如.e.(边框与内容之间的空间)
• Border -围绕填充(如果有的话)和内容的边框
• Margin -边界周围的透明区域(例如.e.(边框与相邻元素之间的间距)

这些属性中的每一个都可以为元素的每一面独立指定(例如.e.(上、右、下、左)或更少的值可以指定应用于多个边. For example:

/*右上左下*/
Padding: 25px 50px 75px 100px;

/*所有4面相同的填充:*/
padding: 25px;

/* top/bottom padding 25px; right/left padding 50px */
padding: 25px 50px;

/* top padding 25px; right/left padding 50px; bottom padding 75px */
padding: 25px 50px 75px;

1. div, p - Selects all
   elements and all

   elements

2. div p - Selects all

   元素中的任何位置

   element
3. div > p - Selects all

   元素，其中直接父元素是

   element
4. div + p - Selects all

   元素后面紧接的元素

   element
5. div ~ p - Selects all

   的元素

   element

• cm - centimeters
• em - elements (i.e., relative to the font-size of the element; e.g.(2 em表示当前字体大小的2倍)
• in - inches
• mm - millimeters
• PC - picas (1pc = 12pt = 1/6英寸)
• Pt -点(1 Pt = 1/72英寸)
• Px -像素(1px = 1/96英寸)

Select every 其href属性值以" http "开头的元素:

a[href^="http"]

Select every 元素的href属性值以".pdf”:

a[href$=".pdf"]

Select every 元素的href属性值包含子字符串" css ":

a[href*="css"]

以下CSS将实现这种类型的自动编号:

#page {
  counter-reset: heading;
}

h1:before {
  content: counter(heading)") ";
  counter-increment: heading;
}

h1 {
  counter-reset: subheading;
}

h2:before {
  content: counter(heading)"." counter(subheading)") ";
  counter-increment: subheading;
}