How to use CSS to quickly layout (a)--layout element details

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.

First, what is block-level elements and inline element 1, block-level elements: Display:block is characterized by a folded line, generally can contain block-level elements and inline elements; exceptions: P elements, which 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 element: Display:inline is not wrapped, the interior can contain only 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, you need to know that the inline element is span and a 3, the floating element is automatically set to "block" element, whether it is block or inline defined floating, you can define the height, width .<a> Normally can not define the height. Width can be defined, but only the text part of the mouse reaction if added float:left words, can define a high width, the whole block on the mouse response but it is 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-Snap To align block * dir-Table of Contents * div-Common block-level easy, is also the main tag 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 title * 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-format Text * Table-table * ul-Non-sorted list

* A-Anchor point * ABBR-abbreviation * acronym-FIRST word * B-bold (not recommended) * Bdo-bidi override* big-Big font * BR-line break * cite-reference * code-computer code (when referencing the source, you need to To) * DFN-Define field * em-accent * font-font settings (not recommended) * I-Italic * img-picture * input-input box * KBD-Define Keyboard text * label-table label * Q-Short reference * s-Medium dash (not recommended) * Samp-define Example computer code * Select-Project selection * Small-small Font text * span-common inline container, definition text within chunk * strike-Middle dash * strong-Bold Accent * sub-subscript * sup-superscript * TEXTAREA-Multiline text input box * TT-Telex text * U-underline * var-define Variable

4, variable elementA mutable element is a block element or an inline element that determines whether the element is in context. * Applet-java applet* button-button * del-delete text * iframe-inline frame* ins-Inserted text * Map-image chunk (map) * Object-object Object * s Cript-client Script 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 element and document flow display relationship 1, normal document flow between the inside and outside box display relationship:

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

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 <div> definition). As follows: The text wrapping phenomenon also occurs:

• 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 elements and external document flow internal element relationships: Floating elements overwrite 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 precedence relationship the Blue block is the absolute positioned element of the yellow inner block, and the div is set before the red block. The red block is a float positioned element and is absolute covered.

5, absolute positioning and precedence of document flow elements & relative positioning element Precedence relationship 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 sub-elements) and the Blue block (contains the green child element) is the sibling element) reversed the order, the Blue block first set Div,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.

Iv. How to center align 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 visible, the height is not set, and there is no content in the Div, 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 div in one div to be centered, 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. Set the Display:flex in the parent element, and set 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%);

Reference article: CSS centering that thing.

V. About style inheritance box model styles are not inheritable, such as width, height (width height), border (border), margin (margin), padding (padding), and background vertical-align inheritable inheritance 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

"Reproduced

How to use CSS to quickly layout (a)--layout element details