CSS authoritative guide (bottom)

The seventh chapter is the basic visual format

Normal flow (no floating and positioning elements), non-replacement elements (included in the document), substitution elements (placeholders for other content, such as IMG), block-level elements (and other elements that form line breaks, such as Div), inline elements (elements such as spans), and root elements (elements at the top of the document tree, The HTML document is the element HTML)

Horizontal formatting

<p style= "width:200px;" >wideness?</p>/*200px refers to the width of the content area */

Seven properties of horizontal formatting: Margin-left, Border-left, Padding-left, Width, padding-right, border-right, and Margin-right, There are 3 properties that can be set to auto: The width of the element content and the left and right margins

If you set a value of width, margin-left, or margin-right to auto, and the remaining two properties are specified for a specific value, the property set to auto automatically determines the desired length so that the element box is equal to the width of the parent element

If these 3 properties are set to a specific value (the value is unreasonable and too restrictive), the margin-right is forced to auto

A margin and width is set to auto, and the margin set to auto is reduced to 0

3 values are set to auto, and two margins are automatically filled with 0,width fully populated with their containing blocks

Margin can be set to negative (offset in opposite direction)

If the width, padding, and margin are set to a percentage value, the same basic rule applies

The substitution element, all rules for non-replacement elements also apply to the replacement element, with one exception: if width is auto, the width of the element is the intrinsic width of the content, you can set a specific value for width to override this rule, change proportionally

Vertical formatting

Vertical formatting Seven properties: Margin-top, Border-top, padding-top, height, padding-bottom, Border-bottom, and Margin-bottom, There are 3 properties that can be set to auto: the height of the element content and the upper and lower margins. The top and bottom padding and border must be a specific value or 0, if Margin-top or Margin-bottom is set to auto, it is automatically calculated as 0, two is auto, 0 (no margin)

Percent height, calculated as a percentage containing the block height

If the block-level normal flow element is set to Height:auto, it will be displayed at exactly the height of the row containing its contents, the bottom border is below the last line of the text, and the top border is above the first line of text

Merge vertical margins: The merging of vertically adjacent margins, which apply only to margins

For negative margins, two vertical margins are negative, whichever is greater, if one is negative, minus the absolute value of the negative value.

In-line elements

span{border:1px dashed black;}

Basic Terminology and concepts

Anonymous text: String not included in the inline element; EM box: The value of font-size determines the height of the em box; The content area: the box in which the EM box of each character in the element is strung together; line spacing: The difference between the values of Font-size and line-height is 2; inline box: For non-replacement elements, The height of the inline box is equal to Line-height, and for the replacement element, the height of the inline box is equal to the content area height; line box: Contains the highest and lowest points of the inline box

Change element display

Display,none, inline, block, inline-block (inline block elements, like an image placed in text, bottom at a text baseline)

The run-in property makes certain block-level elements the inline part of the next element

Eighth. Inner margin, border, and margin

width, height, margin

Border-style,none (None), hidden (hidden), dotted (dashed line), dashed (thicker dashed line), solid (solid), double (dual), outset (raised button)

Border-top-style, Border-right-style, Border-bottom-style, Border-left-style

Border-top-width, Border-right-width, Border-bottom-width, Border-left-width,thin, Medium (default), thick, <length> , Inherit

Border-top-color, Border-right-color, Border-bottom-color, Border-left-color

Abbreviated Border-top, Border-right, Border-bottom, Border-left

H1{border-bottom:thick solid Gray;}

Padding-top, Padding-right, Padding-bottom, Padding-left

Nineth Chapter Colors and backgrounds

Background-color

Background-image:a.grid{background-image:url (small.gif);}

Background-repeat,repeat (tiled vertically and horizontally), Repeat-x, Repeat-y, No-repeat, inherit

Background-image:body{background-image:url (small.gif); background-repeat:repeat-x;}

Background-position,<percentage>, <length>, left, center, right

P{background-position:top right;} /* Also available percentages in the upper left corner are 0%, 0%, the first number represents the left and right, the second indicates up/down */

Background-attachment,scroll, fixed (relative to the viewable area), inherit

Summary background

Body{background:white URL (yinyang.gif);}

Tenth chapter floating and positioning

Float,left, right, none (initial value, block float), inherit

The floating element is removed from the normal flow of the document, the other content "wraps around" the element, and the containing block of the floating element is its nearest block-level ancestor element

Sets the margin of a floating element to a negative value, which will exceed the limit of the most recent block-level parent element

Floating elements, content, and overlap

When the inline box (strong) overlaps a floating element, its border, background, and contents are displayed on top of the floating element

When a block box (p element is also a block-level element) overlaps with a floating element, its border, background is displayed below the floating element, and the content is displayed above the floating element

Clear, the element is set to prevent floating elements from appearing next to it, left, right, both, none (initial value), and inherit

H3{clear:left}/* Prevents floating elements on the left side of H3 */

Positioning

Position property, static (initial value, static), relative (relative, save original position in document flow), absolute (absolute, completely removed from document flow), fixed, and inherit

Offset property, top (distance to the top of the block), right, bottom, left

Limit width and height

Min-width, Min-height, Max-width, max-height define a minimum maximum attribute for an element

Content overflow and clipping

Overfiow,visible (initial value, also visible outside the element), hidden (hidden), scroll (scrolling), auto, and inherit

Element visibility visibility,visible (initial value, visible), hidden (hidden, invisible), collapse (collapsed), and inherit

P.clear{visibility:hidden;}

Absolute positioning

When an element is absolutely positioned, it is completely removed from the document flow and then positioned relative to its containing block, whose bounds are placed according to the offset property (top, left, etc.), and the anchor element does not flow into the contents of other elements

Z-index, which can be used to change the order in which elements overlap, Z represents the axis in the past, and elements with a higher Z-index value override elements with lower Z-index values