How to Use CSS for quick layout (1) -- layout element details, css layout elements

How to Use CSS for quick layout (1) -- layout element details, css layout elements

To quickly layout webpages, you must have a clear understanding of the layout elements to avoid errors in details. This article describes the layout factors as the basis: block-level and inline elements, box models, accurate positioning, element alignment, and style inheritance. The next article focuses on the idea of Rapid Layout.

1. What is block-level element and inline element 1? block-level element: display: block represents a line break. Generally, it can contain block-level elements and inline elements. Exceptions: the P element can only contain inline elements, but cannot contain block-level elements. The "form" block element is special. It can only accommodate other block elements. 2. inline element: display: inline indicates that the line break is not displayed, and only inline elements can be contained in the line. A row element such as span does not have its own independent space. It is attached to other block-level elements. Therefore, setting attributes such as the height, width, and internal and external margins of the row element is invalid. In fact, you need to know that the row elements are span and a 3. The floating element is automatically set to the "block" element. Whether it is a block or an inline element, the height and width can be defined. <a> under normal circumstances, the height cannot be defined. The width can be defined, but only the text part that reflects the mouse can be defined if float: left is added. The whole part reflects the mouse, but it is a horizontal menu. Set display: inline; this attribute can fix the famous IE Double Floating boundary. Explain (it seems that this problem only exists in IE6 ?) Http://www.zzzszy.com/a/2016/0927/896160.html

Block element)

Inline element)

* Address-address * blockquote-block reference * center-align block * dir-directory list * div-Easy to use block level, it is also the main label of css layout * dl-definition list * fieldset-form Control Group * form-interaction form * h1-Big title * h2-subtitle * h3-3 level title * h4-4 level title * h5-5 level title * h6-6 level title * hr-horizontal separator * isindex-input prompt * menu-menu list * noframes-frames optional content, (For browsers that do not support frame display the content of this block * noscript-) Optional script content (for browsers that do not support script display this content) * ol-sorting form * p-Section * pre-formatted text * table-table * ul-non-sorted list

* A-anchor * abbr-Abbreviation * acronym-initial character * B-bold (not recommended) * bdo-bidi override * big-font * br-line feed * cite-reference * code-computer code (required when referencing source code) * dfn-define field * em-emphasize * font-font setting (not recommended) * I-italic * img-image * input-input box * kbd-defines the keyboard text * label-Table label * q-short reference * s-strip (not recommended) * samp-definition example computer code * select-Project select * small-small font text * span-commonly used inline container, define the text block * strike-dashes * strong-bold to emphasize * sub-subscript * sup-supermark * textarea-multi-line text input box * tt-telex text * u-underline * var -Define Variables

  4. variable elementsThe variable element determines whether the element is a block element or an inline element based on the context. * Applet-java applet * button-button * del-delete text * iframe-inline frame * ins-inserted text * map-image block (map) * object-object * script-client script 5, display: inline-block;

To maintain block-level elements, you can set width and height, but place them in one row like inline elements and other inline elements.

 

Ii. Box Model

 

3. Positioning-relative positioning, absolute positioning, and floating

Relative positioning: it refers to positioning relative to other defined element locations in the Document Stream.

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

Absolute positioning: it will break away from normal document streams and no longer occupy space.

Absolute: Performs absolute positioning on a parent element that is not static. If the position of the parent element is not specified, absolute performs absolute positioning on the entire html document. The content is first displayed in normal document flow locating elements and float elements. Fixed: located relative to the browser window. No matter how the page is scrolled, this element stays at a certain position on the screen.

Floating: float

Off-Document Stream-adjust the position relative to the parent element. If the width of the parent element is 100 and the width of the two child elements is 200, the upper and lower layers are displayed, instead of left and right layers. External box -- the content is preferentially displayed on the positioning element of the normal document stream. Inner box-weaker than block-level elements and stronger than inline Elements

 

Important! Relationship Between Positioning element and Document Stream display 1. Relationship between internal and external boxes of normal document flows:

The code structure is as follows (rough display) <div> yellow Block Square <div> red block </div> <div> blue block square </div>

Yellow and blue are external document flows, and red are two internal document flows in yellow blocks. The external box is an external document stream, and the internal box has its own document stream, which does not interfere with each other. However, the external document stream (which is not its parent element) is preferentially displayed in the internal document stream.

 

2. Relationship between the floating element of the internal box and the element of the internal document stream:

• Priorities of inline and floating elements:

In a normal Document Stream, <a> Each inline element occupies one row and each block-level element occupies one row.

However, when it is set as a floating element, the inline element of the Document Stream is placed on the floating element (<a> same as the <div> definition result ). As shown in the following figure:

•  Priority of block-level elements and floating Elements

When a block-level element is defined before a floating element, the floating element is lined up with a line break. When a floating element is defined first, it is out of the Document Stream and does not affect the block-level elements of a normal document stream. 3. Relationship between the floating element of the internal box and the internal element of the external document stream: The floating element overwrites the flow element of the external document, but does not occupy space. The green block and image are the internal elements of the blue block. As you can see, the block-level elements are displayed as normal document streams, but the inline element img will still yield to the floating element, even the floating element of the external document stream.

 

4. The priority relationship between absolute positioning and floating of sibling elements. The blue block is the absolute positioning element of the yellow internal block, and the div is set before the red block. The red block is a Float positioning element and is overwritten by absolute.

5. The priority of absolute positioning and Document Stream elements & the priority of relative positioning elements; absolute positioning position: absolute. 1. Perform absolute positioning on a parent element that is not static. If the position of the parent element is not specified, absolute performs absolute positioning on the entire html document. 2. If top \ left \ bottom \ right is not set, the top and left of the top will be consistent with the original document stream position (that is, the same as the position is not set ), but it will overwrite the excess floating elements in the external document stream. Set position: absolute for the blue block. (Note: The Yellow block (containing red and green child elements) and the blue block (containing green child elements) are sibling elements, the blue block first sets div, position as absolute. The position is not set for the yellow block, that is, the default value is static. The absolute element is displayed first because it is out of the Document Stream. Set the position of the yellow block to relative. The yellow block overwrites the absolute position element. That is, when the relative positioning element is located after the absolute positioning element, the relative positioning element is displayed first.

 

Summary:

1. Normal document flow, the external box is preferentially displayed in the internal box that first defines the element (if exceeded, it will be overwritten ). The block-level and inline elements are not in the same row.

2. for internal and external document streams, floating elements are not included in the document stream. For the first defined elements, they are displayed in the normal Document Stream (Block-level, and inline is squeezed ), it does not affect the layout of the later defined elements, but affects the inline element display of the normal Document Stream. This means that the inline element will still be squeezed out by the floating element (no matter where the inline element is, will not be overwritten under the floating element)

3. Absolute positioning elements are preferentially displayed on floating elements.

4. If no specific value is set, the absolute positioning elements are arranged according to the normal document stream, but they are separated from the document stream. This does not affect the subsequent definition elements.

5. If the sibling element sets position: relative, when the absolute positioning element is defined first, the absolute positioning element is preferentially displayed as the relative positioning element.

When the absolute positioning element is defined later, the relative positioning element is preferentially displayed as the absolute positioning element.

 

4. Align and align horizontal center:

1. Center the element in the row. Method: Add text-align: center to the style of the block element outside the element in the row;

2. Implement horizontal center of block-level elements.

　　Method 1:Margin: 0 auto;

Note: If the block-level element is a direct sub-element of the body and the width is not set, the default value is 100%, which does not show the effect. If the height is not set, and no content exists in the div, the default height is 0. Therefore, you must set the block-level element width and height at the same time to see the effect. You can also use this method to Center Another div in one div, because the margin is relative to its parent element.

　　

　　Method 2:Use absolute position and negative margin.

Position: absolute;

Left: 50%; -- 50% width to the left of the parent Element

Margin-left:-50px; -- remove half of its width

 

Vertical center

1. Vertical center of elements in the row

　　Method 1:Center the font vertically, and set line-height to the height of the parent element.

　　Method 2:Set padding to center it vertically.

Method 3:Set line-height for the parent element and vertical-align for the row element: middle.

 

2. Vertical center of block-level elements.

Method 1:Use absolute position and negative margin.

Method 2:Add display: flex; align-items: center; to the parent element to implement vertical center.

 

Center horizontally and vertically

Method 1:Use absolute positioning and negative margin

Method 2:Use display: flex

Add "display: flex; align-items: center" to the style of the parent element to implement vertical center and "justify-content: center" to implement horizontal center..

Method 3:Similarly, use display: flex. Set display: flex in the parent element; Set margin: auto in the child element.

Method 4:Use the css3 attribute -- translate () deformation Function

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

Reference: css Center

 

 

5. style inheritance box model styles cannot be inherited, such as width, height (width and height), border (border), margin (margin), and padding (padding) vertical-align and background cannot inherit the color cursor direction font letter-spacing line-height list-style text-align text-indent text-shadow text-transform whitewhite-space word attribute. -break word-spacing word-wrap writing-mode

 Original article, reprinted please indicate the source!

2017-01-20