Deep understanding of div + css layout nested box, divcss

Deep understanding of div + css layout nested box, divcss

1. webpage layout Overview

The concept of web page layout is to locate all the elements that are about to appear in the web page. CSS web page layout technology is different from the traditional web page layout method, it first blocks the page by using the <div> flag as a whole, then locates and sets the display effect for each quick CSS, and finally adds the corresponding content to each block. The CSS layout method makes it easier to control the effect of each element on the page and update the page. Even the page topology can be relocated by modifying the corresponding CSS attributes.

2. Box Model

The box model is an important concept of CSS controlling page elements. Only by mastering the box model can CSS well control every element on the page to achieve any effect we want.

In the box model, elements on all pages are considered as boxes, occupying a certain page space and containing specific content. You can adjust the box's position and size by adjusting the box's border and spacing. Pages are composed of many boxes, large and small. These boxes affect each other. Therefore, we need to understand the internal structure of each box, you also need to understand the direct relationship between boxes and their mutual influences.

3. Composition of the Box Model

In the webpage layout, in order to make every element in the webpage reasonably organized, a set of complete and effective principles and norms are summarized through research. This is the box model. The box model consists of four parts: content, border, padding, and margin. For example:

The actual space occupied by a box on the page is composed of "content + padding + margin + border, you can set the border, padding, and margin of the box to achieve various typographical effects. In addition, the web page elements defined by <div> are not boxes. All web page elements can be viewed as boxes. From the perspective of the box model, tables, images, and texts on the Web page are arranged or nested in boxes of both sizes.

4. Box border attributes

The box border is the border of the box. It is surrounded by the box padding and content to form the boundary of the box. Border occupies space, so the influence of border must be considered during typographical computing.

Border has three attributes: color, width, and style ). Setting border is to set these three attributes. They can work together to achieve good results. When you use CSS to set the border of a box, you can use border-color, border-width, and border-style respectively.

Border-color: Specifies the border color. The setting method is the same as the color attribute. You can set the border color by using the color name or hexadecimal format.

Border-width: Specifies the border width.

Border-style: Specifies the border type. You can set the values of none, hidden, dotted, dashed, solid, and double.

You can set border attributes in CSS in the following four shorthand methods.

1. Set different attribute values for different borders

If two attribute values are given, the former indicates the attributes of the upper and lower border, and the latter indicates the attributes of the left and right border. If three attribute values are given, the former indicates the attributes of the upper border, the Intermediate Value indicates the attribute of the left and right border, and the latter indicates the attribute of the bottom border. If four attribute values are given, the attributes of the top, right, and bottom border are sorted clockwise. For example, the following code:

Border-color: red blue;

Border-style: dotted solid double dashed;

2. Set the Border width, color, and style in a row.

Border: 4px red solid;

Border-top: 2px blue double;

3. Set attributes of a border and other borders

Border: 4px red solid;

Border-top: 2px blue double;

The advantage of doing so is to avoid using four CSS rules to set styles for the four borders of the box, reducing the workload.

4. Set only one attribute of a border

Border-top-color: blue;

 5. Box padding attributes

The box padding is the inner margin of the box, while the content is the boundary of the box, that is, the blank area between the border and the content is the inner margin padding.

You can also set four attributes for padding. The effect is as follows:

(1) set one property value: the value of the top, bottom, and left margins.

(2) set two property values: the former indicates the top and bottom margins, and the latter indicates the left and right margins.

(3) set three property values: the former indicates the top and bottom margins, and the middle value indicates the left and right margins. The latter indicates the bottom margins.

(4) set four attribute values: Values of the top right bottom left margin are sorted clockwise.

You can use padding-top, padding-right, padding-bottom, and padding-left to set the padding in a specific direction.

6. Box margin attributes

The box margin is the margin of the box. It does not touch the boundary of the box. It refers to the direct distance between elements on the page and the elements. The settings of margin and padding are the same. You can also set different numbers of attributes to indicate their meanings.

 7. Box floating and positioning (important)

CSS standards first determine a standard typographical method, which can ensure the simplicity of the settings, and various web elements are arranged in accordance with this standard method. This is the so-called "Standard stream" method. However, only the standard stream method is not flexible enough to implement all the typographical methods. Therefore, the CSS specification also provides other layout methods, such as the "floating" attribute and "positioning" attribute.

Standard stream

"Standard file stream" is referred to as "Standard stream". It refers to the default arrangement rules for various page elements when no special CSS rules related to arrangement and positioning are used. There are two types of page elements:

 

Block element: it is always displayed in the form of a block and arranged vertically with siblings at the same level. For example, the <li> label is not always arranged in the same row, but vertically arranged with the adjacent <li>, and the most commonly used block-level element div.

Inline element: the adjacent elements are arranged horizontally and automatically folded to the rightmost end. For example, <a> tag, <p> tag, and <span> tag.

The standard stream is the default arrangement of block-level elements and In-row elements in CSS. If there is no special arrangement in a page, all the page elements will be arranged in the form of a standard stream, that is, a sequence is formed by boxes, the boxes at the same level are arranged in the parent box according to the arrangement of block-level elements or in-row elements. The boxes at the same level are arranged in the parent box, and so on, the whole page is like a river and its tributary, so it is called a "Standard Flow ".

* What are the differences between intra-row elements and block-level elements?

Difference 1:

Block-level: a block-level element occupies only one row. By default, the width of the parent element is automatically filled with the width.

In-row: an element in a row does not exclusive to a row, and an element in an adjacent row is placed in the same row. The width varies with the content.

Difference 2:

Block level: You can set the width and height of block level elements.

Intra-row: Intra-row elements cannot be set in width or height.

Difference 3:

Block level: You can set margin and padding for block level elements.

In-row: margin-left in the horizontal direction of row elements; margin-right; padding-left; padding-right; can take effect. However, margin-bottom; margin-top; padding-bottom; in the vertical direction cannot take effect.

Difference 4:

Block level: display: block;

Intra-row:Display: inline;

You can change the display attribute to block-level and intra-row elements.

 8. box positioning principles

Understanding the positioning principle of the box in the standard stream requires a deep understanding of margin, because padding is only inside the box and does not affect the outside of the box. margin is the outer margin of a box, it directly affects the direct relationship with other boxes.

Horizontal positioning between elements in a row: horizontal margin of Row-level elements isAddition of adjacent margin;

Vertical positioning between block-level elements: the vertical margin of block-level elements isReturns the maximum value of an adjacent margin.;

Positioning between nested boxes:

9. Floating float of the box

"Floating Settings" refer toFloat attributesThe default value is none, that is, the floating effect is disabled by default, and the standard stream mode is used. The width of a floating box is determined based on the content in the box. The other boxes in the standard stream are positioned as floating boxes.

Basic description of the float attribute:

The value of this attribute indicates whether the object is floating and how it is floating. When this attribute is not equal to none, the object is considered as a block object, that is, display: block;

Parameters of the float attribute:

None: the object is not floating.

Left: the object is floating on the left.

Right: The object is floating on the right.

How to prevent subsequent boxes from being influenced by floating boxes: clear: left/right/both

 10. Positioning of the box

Position in CSS: throughPosition attributeTo locate the box to the specified place.

The position attribute is located as follows:

(1) static: static positioning, which is the default value.

(2)Relative: Relative positioning: the box is located relative to its original position. It is located by specifying the offset (horizontal offset: lefth and right attribute values; vertical offset: top and bottom attribute values. Relative positioning has no effect on the parent box and brother box.

(3)Absolute:Absolute positioning: the box is offset based on a recently located ancestor element. If no ancestor has been located, the browser is used as the benchmark (the position attribute has been set ).

(4) fixed: fixed positioning. It is similar to absolute positioning. It is positioned based on the browser window, that is, when you drag the browser window scroll bar, the object location remains unchanged.

 11. div labels and span labels

<Div> and <span> labels are often used in CSS layout. With these two labels, CSS can easily achieve various page effects.

Like <span> labels, <div> is widely used as containers in html languages. They can all contain a variety of html elements, the web page can be divided into multiple independent blocks. The difference between the two labels is:<Div> is a block-level element that automatically wraps a line. <span> is an element in a row and does not wrap the line before or after it.<Span> it has no structural significance. It applies CSS styles. When other elements in the row are not suitable, you can use the <span> element.

 12. DIV + CSS layout webpage

DIV + CSS layout: Use the <div> block on the page as a whole, use CSS to layout each block, and add the corresponding content to each block. That is to say, the DIV container is loaded with content, while CSS is used as the decoration content style.

Typical layout: for example, fixed-width and centered layout and left-right layout.

Comparison between DIV + CSS layout and table layout:

You can use <table> cells to easily divide various modules. CSS uses div to divide modules. You also need to adjust the Location Distance and arrangement between modules.

Table layout is more difficult to maintain than DIV + CSS layout. The table layout code is mixed with the content, with poor readability, a large number of webpage files, and slow browser resolution.