How to use CSS to quickly layout-layout elements Detail

For a quick page layout, you must have a clear understanding of the elements of the layout so that you do not always make mistakes in the details. This article first detailed the layout of the factors as the basis for the layout: block-level elements and inline elements, box model, accurate positioning, element alignment, style inheritance. The next article focuses on quick layout ideas.

I. What are block-level elements and inline elements

1, block-level elements:

Display:block is characterized by the folding of the line, generally can contain block-level elements and inline elements;

Exception:

The P element can contain only inline elements, not block-level elements.

The block element of "form" is special, and it can only be used to accommodate other block elements.

2, inline elements:

Display:inline shows that it does not wrap, and the interior can only contain inline elements.

Inline elements like "span" do not have their own independent space, it is attached to other block-level elements exist, therefore, to set the height, width, internal and external margins of the elements in the row are not valid. In fact, what you need to know about the inline element is span and a.

3, floating element is automatically set to "block" element

The height and width can be defined after the float has been defined by block or inline.

<a> under normal circumstances, height cannot be defined. The width can be defined, but only the text part that responds to the mouse

If you add Float:left, you can define a high width, the whole block responds to the mouse but it's a horizontal menu,

Set Display:inline; This property can fix the famous IE double floating boundary problem. ↓ (It seems that this problem only exists in IE6?) ）

Http://www.zzzszy.com/a/2016/0927/896160.html

Block element

Inline elements (inline element)

* Address-addresses * blockquote-block reference * Center-for aligning * Dir-directory list * P-Common block-level easy, is also the main label of CSS layout * DL-definition list * Fieldset-form control group * form-Interactive form * H1-Big title * H2-subtitle * h3-3-level title * H4-4 level title * H5-5 level title * h6-6 Level header * hr-Horizontal divider * isindex-input prompt * Menu-Menu list * Noframes-frames Optional content (for browsers that do not support frame, display this Chunk content * noscript-) Optional script content (this content is displayed for browsers that do not support script) * ol-Sort form * P-paragraph * pre-formatted text * Table- Table * ul-non-sorted list

* A-Anchor point * ABBR-abbreviation * Acronym-First word * B-Bold (not recommended) * Bdo-bidi Override * Big-Large font * BR-line break * Cite-citation * Code-computer code (required when referencing the source) * DFN-Define Fields * EM-emphasis * Font-typeface settings (not recommended) * I-Italic * img-Images * Input-Enter box * KBD-Define keyboard text * Label-table label * Q-Short reference * S-Medium dash (not recommended) * Samp-Define sample computer code * Select-Project selection * Small-Small font text * span-a common inline container that defines chunks within a text * Strike-Medium dash * Strong-Bold Emphasis * Sub-subscript * SUP-Superscript * TEXTAREA-multi-line text input box * TT-Telex text * U-Underline * var-Define Variables

4, variable element

A mutable element is a block element or an inline element that determines whether the element is in context.

* Applet-java Applet

* Button-Buttons

* Del-delete text

* Iframe-inline Frame

* INS-Inserted text

* Map-image block (map)

* Object-object Object

* Script-client-side scripting

5,display:inline-block;

Maintaining block-level elements can be set to a wide height, but can be placed on one line like inline elements and other inline elements.

Second, box model

Third, how to locate-relative positioning, absolute positioning, floating

relative positioning: refers to positioning relative to other defined element locations in the document flow.

Static (default): If the default value is used, the top,left,right,bottom.z-index defined for the element in the CSS will not take effect.

Relative: Moves relative to the element itself.

absolute Positioning: out of normal document flow, no longer occupies space.

Absolute: Absolute positioning relative to a parent element that is not static, and if the position,absolute of the parent element is not specified, it will be absolutely positioned relative to the entire HTML document. The normal document flow positioning element and the float element are displayed first.

Fixed: Positioning relative to the browser window, regardless of how the page scrolls, the element always stays somewhere on the screen.

float: Float

Out-of-document flow-positions relative to the parent element's sizing. If the parent element has a width of 100 and two child elements with a width of 200, then the upper and lower levels are still displayed instead of left and right.

Outer box--will show priority in the normal document flow positioning element. Inner box--weaker than block level element, stronger than inline element

Focus! positioning elements and document flow display relationships

1, the internal and external box display relationship between normal document flow:

The code structure is as follows (rough display) <p> Yellow block square <p> red block </p> <p> Red block </p></p><p> Blue Block Square </p>

Yellow and blue for the external document flow, red for the yellow block of two internal document flows.

External boxes are external document flows, internal boxes have their own document flow, which does not interfere with each other, but external document flows (not their own parent elements) are prioritized in the internal document flow.

2, inner box floating element and internal document flow element relationship:

• Precedence of inline elements and floating elements:

,<a> inline elements and block-level elements in a normal document flow.

However, when set to a floating element, the document flow inline element allows the floating element to be located (<a> has the same result as the <p> definition). As follows:

There will also be text wrap around the phenomenon:

• block-level elements and floating-element precedence

When a block-level element is defined before a floating element, a floating element is wrapped in a row. When a floating element is defined first, it is detached from the document stream and does not affect the block-level elements of the normal document flow.

3, inner box floating element and external document flow inner element relationship:

Floating elements override external document flow elements, but do not occupy space.

The green block and picture are the inner elements of the blue block, visible, block-level elements are displayed as normal document flow, but inline element img will still give way to floating elements, even the floating elements of the external document flow.

4, sibling element absolute positioning and floating priority relationship

The blue block is a absolute positioned element for the yellow inner block, and P is set before the red block. The red block is a float positioned element and is absolute covered.

5, absolute positioning and document flow element precedence relationship & relative positioning element precedence

Absolute positioning Position:absolute.

1, absolute positioning relative to a parent element that is not static, if the position,absolute of the parent element is not specified, it will be absolutely positioned relative to the entire HTML document.

2, if Top\left\bottom\right is not set, then its top and left side will be the same as the original document flow position (that is, not set as position), but will overwrite the external document flow inside the floating elements of the extra part.

Set the Position:absolute for the Blue block;

(Note: The Yellow block (contains red and green child elements) and the Blue block (contains the green child element) is the sibling element)

Replace the next order, the blue block first set P,position to absolute. The yellow block is not set position, which is the default static. The absolute element is first displayed because it is out of the document flow.

Sets the yellow block position to relative, and the yellow block overrides the absolutely positioned element. That is, when the relative positioning element is positioned on an absolutely positioned element, the relative positioning element is first displayed.

Summarize:

1, the normal document flow, the external box first display in the first definition of the inner box of the element (if the outside will be overwritten). Block-level elements and inline elements are not on the same line.

2, internal and external document flow, floating elements out of the flow of the document, for the first defined elements in normal document flow display (give way block level, squeeze open the inline), the element after the definition does not cause layout impact, but it affects the normal flow of the inline elements display, as the inline elements will still be floating elements "squeezed" (regardless are not covered by the floating element)

3, the absolute positioning element is first displayed in the floating element.

4, an absolutely positioned element that does not set a specific value is arranged in normal document flow, but out of the document flow, and does not affect subsequent definition elements.

5, if the sibling element is set to position:relative, the absolute positioning element takes precedence over the relative positioning element when the yourselves is defined in an absolutely positioned element.

Relative positioning elements take precedence over absolutely positioned elements when they are later defined with an absolutely positioned element.

Four, how to align the center

Center horizontally:

1. Implement the center of the inline element. method: Add the style of the block element outside the element in the row: Text-align:center;

2. Implement horizontal centering of block-level elements.

　　method One:margin:0 auto;

Note: If the block-level element is a direct child of the body, does not set the width, the default is 100%, the effect is not seen, the height is not set, and there is no content in P, the high default is 0. Therefore, be sure to set the block-level element width and height at the same time, so as to see the effect. You can also use this method for another p in one P, because the margin is relative to its parent element.

　　

　　method Two: use absolute positioning and negative margins.

Position:absolute;

left:50%; --Move 50% width to the left relative to the parent element

margin-left:-50px; --move back half of its width

Center vertically

1. Vertical centering of inline elements

　　method One: the font is centered vertically, and the line-height is set to the parent element height.

　　method Two: set the padding to center vertically.

　 method Three: the parent element is set line-height, and the inline element is set Vertical-align:middle.

2. Vertical centering of block-level elements.

　　 method One: use absolute positioning and negative margins.

　　method Two: add display:flex;align-items:center to the parent element, and you can center vertically.

achieve horizontal and vertical centering

method One: use absolute positioning and negative margins

method Two: use Display:flex

Adding a display:flex;align-items:center to the parent element's style is centered vertically, justify-content:center, and horizontally centered .

method Three: also use Display:flex. sets the Display:flex in the parent element, and sets the margin:auto in the child element.

method Four: use the CSS3 attribute--translate () transform function

Position:absolute; top:50%; left:50%; Transform:translate ( -50%,-50%);

V. About style inheritance

Box model styles are not inheritable, such as width, height (width height), border (border), margin (margin), padding (padding), background, etc.

Vertical-align not inheritable

Inheritable Properties

Color

Cursor

Direction

Font

Letter-spacing

Line-height

List-style

Text-align

Text-indent

Text-shadow

Text-transform

Whitewhite-space

Word-break

Word-spacing

Word-wrap

Writing-mode