Summary of css properties-CSS Tutorial-php.cn

- Attributes that only apply to block-level elements

width, height (these two can be used to replace elements)

text—align, text—indent, vertical —align (can also be used for table cells and replacement elements such as input/img)

background-position (note the difference between percentage and absolute value, and this attribute will affect the tiling effect)

[Basic visual formatting]

1. Box model:
- background includes content box, inner margin and border. The outer margin is usually transparent, showing the parent The background of the element;

2. Horizontal attributes:

-left (right) margin, left (right) padding, left (right) border and content of the child element The sum of the values of the box width must be equal to the content box width of the parent element;

-If two of the margin-left, margin-right, and width (only these three values can be set to auto) are set, Specific value, the remaining one is auto, then the attribute value set to auto will be automatically calculated to fill the width of the parent element:

 ＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto；
 ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0；
 ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！

Copy after login

- The padding of the parent element will overlap with the margin of the child element;

- The default width of a non-replaced element is determined by its content; if the width of the replaced element is set to auto (such as img), then its value will be its original width; if only the width is set, the height will change proportionally, and vice versa. Likewise.

3. Vertical attribute:

is similar to the horizontal attribute, the difference/note is:

- If you change margin-top or margin-bottom If set to auto, it will be defaulted to 0, so it cannot be vertically centered unless it is set with a specific value;
- When using a percentage to set the height of a child element, if the height value of the parent element is not set explicitly, then the height of the child element will be It will default to auto;
- If the parent element only contains child block-level elements, then the height of the parent element will not include the margin of the child element, unless the parent element has border or padding! ! Why, because the margins in the vertical direction overlap. From this point of view, to avoid overlap, you need to use border and padding to separate adjacent margins;

Inline elements:
- line-height (line box height ) for a replaced element, the height of its content. Therefore, the replaced element has no line spacing (line-height - font-size); for non-replaced elements, it is the height of its content box plus the line spacing;
- For lines that only contain text, the inter-line spacing can be changed Only line-height, font-size, vertical-align.

Non-replacement elements:

- When the line-height value is smaller than font-size, text overlap may occur. To avoid this phenomenon, set line-height to 1 em (font-size needs to be set) or 1 (scaling factor based on font-size), in addition it will inherit the calculated value of the parent element rather than the literal value, unless explicitly defined;

- the content of the inline element Margins, margins, and borders do not affect line height. The outer margins are only valid on the left and right, not the top and bottom; but if there are positive padding and a background, it may cover adjacent rows (it still does not affect the row height and layout, that is, the row height will not change if the padding is set) height);

Replace elements:

- The padding, margins and borders of inline elements will affect the line height, and the upper and lower margins are valid.
- Setting a height value for img will affect the line height, but the effective value of line-height will not change. Some properties such as vertical-align still use the effective value of line-height for calculation;
- If A replacement element that is the only descendant of a block-level element or table cell will be placed on the baseline, such as img in p. Solution: Use negative margin to pull it down or set display to block to avoid generating line boxes.

4. Others

- display attribute:

   * 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余；
   * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。
   * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。

Copy after login

［border, margin, padding］

margin
- If using percentage, the calculated value is relative to the width value (not height) of the parent element. Even if it’s margin-top!
border
- Values that are not specified will use the default value, e.x.:
```
{ border: solid 1px dotted;
  border: 1px;
}
```
Copy after login
Copy after login
The second border setting here will overwrite the first one, because in The border-style is not set in the second article, and the default is none, so there will be no border;

[Floating and positioning]

Floating:

The margins of floating elements will not be merged;
If you want to make a non-replacement element float, you need to specify it A width, otherwise it will float according to the minimum width specified by the browser;
The floating element will generate a block-level box, regardless of what the element itself is;
The top of a floating element cannot be higher than the top of its parent element or all previous floating elements;
When a floating element overlaps an element in the document flow:
(1) If it is a block-level element, its content will be above the floating element, and the border and background will be below;
(2) If it is an inline element, its content, border, and background will all be floating. element, that is, it will not be overwritten.
This has nothing to do with the order in which elements appear in the document flow.
Floating elements must contain all their floating child elements;
使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。

定位：
绝对定位

*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。

持续更新中。。。。。

本文参考《css权威指南》

- Attributes that only apply to block-level elements

width, height (these two can be used to replace elements)

text—align, text—indent, vertical —align (can also be used for table cells and replacement elements such as input/img)

background-position (note the difference between percentage and absolute value, and this attribute will affect the tiling effect)

[Basic visual formatting]

1. Box model:
- background includes content box, inner margin and border. The outer margin is usually transparent, showing the parent The background of the element;

2. Horizontal attributes:

-left (right) margin, left (right) padding, left (right) border and content of the child element The sum of the values of the box width must be equal to the content box width of the parent element;

 ＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto；
 ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0；
 ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！

Copy after login

- The padding of the parent element will overlap with the margin of the child element;

3. Vertical attribute:

is similar to the horizontal attribute, the difference/note is:

Non-replacement elements:

Replace elements:

4. Others

- display attribute:

   * 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余；
   * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。
   * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。

Copy after login

［border, margin, padding］

margin
- If using percentage, the calculated value is relative to the width value (not height) of the parent element. Even if it’s margin-top!
border
- Values that are not specified will use the default value, e.x.:
```
{ border: solid 1px dotted;
  border: 1px;
}
```
Copy after login
Copy after login
The second border setting here will overwrite the first one, because in The border-style is not set in the second article, and the default is none, so there will be no border;

[Floating and positioning]

Floating:

The margins of floating elements will not be merged;
If you want to make a non-replacement element float, you need to specify it A width, otherwise it will float according to the minimum width specified by the browser;
The floating element will generate a block-level box, regardless of what the element itself is;
The top of a floating element cannot be higher than the top of its parent element or all previous floating elements;
When a floating element overlaps an element in the document flow:
(1) If it is a block-level element, its content will be above the floating element, and the border and background will be below;
(2) If it is an inline element, its content, border, and background will all be floating. element, that is, it will not be overwritten.
This has nothing to do with the order in which elements appear in the document flow.
Floating elements must contain all their floating child elements;
使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。

定位：
绝对定位

*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。