Deep Understanding div+css Layout nesting Box

1. Overview of page layouts

The concept of Web page layout is to locate all the elements that will appear in the Web page, and CSS Web page layout technology differs from the traditional page layout method, it will first use the <div> tag to block the whole page, and then for each CSS positioning and setting the display effect, Finally, add the appropriate content to each block. The CSS layout method makes it easier to control the effect of each element of the page, and even the topology of the page can be repositioned by modifying the corresponding CSS properties.

2. Box model

The box model is an important concept for CSS to control the page elements, so that the CSS can control every element of the page well and achieve whatever effect we want, only by mastering the box model.

In the box model, all the elements in the page are considered to be boxes, which occupy a certain amount of page space, in which certain content is placed. We can adjust the box's position and size by adjusting parameters such as the box's border and spacing. The pages are made up of large and small boxes that interact with each other, so we need to understand both the bodies inside each box and the relationship between the boxes and the effects of each other.

3. The composition of the box model

In the layout of the Web page, in order to make the elements of the Web page reasonable organization, through the study summed up a set of complete, effective principles and norms, this is the box model. The box model consists of a total of 4 parts (content), border (border), padding (padding), margin (margin). Such as:

The actual space occupied by a box is composed of "content + padding + margin + border", which can be used to achieve a variety of typesetting effects by setting the box's border, padding and margin. Also, the page element that is not defined with <div> is the box, and all the page elements can be considered as boxes. tables, pictures, text, etc. on a Web page are arranged or nested together from the angle of the box model.

4. Box Border Properties

The box border is the box border, which surrounds the box padding and contents, forming the border of the box. Border will occupy space, so in the typesetting calculation must take into account the impact of border.

There are 3 main properties of border, namely color, width, style. Setting border is the setting of these 3 properties, which are well matched to achieve good results. When you use CSS to set the box's border, you can set it separately using Border-color, Border-width, and Border-style.

Border-color: Specifies the color of the border, set method and color property, can be set in both color name and hexadecimal mode.

Border-width: Specifies the thickness of the border

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

There are 4 shorthand ways to set the properties of a border in CSS.

1. Set different property values for different borders

If two attribute values are given, the former represents the property of the upper and lower border, which represents the property of the left and right border, and if 3 attribute values are given, the former represents the property of the top border, the middle value represents the property of the border, the latter represents the property of the lower border, and, if 4 property values are given, the Sort in a clockwise direction. For example, the following code:

Border-color:red Blue;

Border-style:dotted solid double dashed;

2. Set the width, color, and style of the border at the same time in a row

BORDER:4PX Red Solid;

BORDER-TOP:2PX Blue Double;

3. Setting the properties of a border with other borders

BORDER:4PX Red Solid;

BORDER-TOP:2PX Blue Double;

The benefit of this is to avoid using 4 CSS rules to style the box's 4 borders individually, reducing the effort.

4. Set only one property of a border

Border-top-color:blue;

5. Box padding Properties

Box padding is the inner margin of the box, on one side is the box content side is the box boundary, namely the border and the content between the blank area is the inner margin padding.

Padding can also set 4 properties, the effect is as follows:

(1) Set 1 attribute values: Represents the value of the upper and lower left and right 4 padding.

(2) Set 2 attribute values: The former represents the value of the top and bottom padding, which represents the value of the left and right padding.

(3) Set 3 attribute values: The former represents the value of the upper padding, and the median value represents the values of the left and right padding, which represents the value of the bottom padding.

(4) Set 4 attribute values: The value of the upper right-left padding, in turn, in clockwise order.

If you need to set the padding in one direction individually, you can use Padding-top, Padding-right, Padding-bottom, Padding-left.

6. Box Margin Property

The box margin is the outer margin of the box, which does not touch the border of the box, referring to the direct distance of elements and elements on the page. The settings for margin and padding are the same, and you can set different number of attributes to represent the corresponding meanings.

7. Floating and positioning of the box (very important)

The CSS specification first determines a standard typesetting method, can guarantee the simplification of the setting, various page elements are laid out in this standard way, this is called "Standard Flow" way. However, only the standard flow mode is not flexible enough to achieve all the typography, so the CSS specification also gives other layout methods, such as "floating" property and "positioning" properties.

Standard flow

Standard file stream, referred to as standard flow, refers to the default arrangement rules for various page elements when other special CSS rules related to arranging and positioning are not used. Page elements can be divided into two categories:

Block-level elements: always in the form of a block, and arranged vertically with siblings of siblings. such as <li> tags, will not be in the same row, but with the adjacent <li> vertical arrangement, and the most commonly used block-level element Div.

Inline element: Arranges horizontally between adjacent elements, and automatically folds to the right end of the line. such as <a> tags,<p> tags,<span> tags.

The standard flow is the default block-level element for CSS and the arrangement of elements within the line. If there is no special arrangement in a page, then all the page elements will be arranged in a standard flow, that is, a box form a sequence, the same level of the box in the parent box in order to arrange in the form of block-level elements or elements in the row, sibling parent boxes are arranged in their parent box, And so on, the entire page is like a river and its tributaries, so it's called a "standard flow."

* What is the difference between an inline element and a block-level element?

Difference One:

Block-level: block-level elements will have a single row, and width automatically fills the width of its parent element by default

Inline: Inline elements do not monopolize a row, and adjacent inline elements are lined up in the same row. Its width changes depending on the content.

Difference Two:

Block-level: block-level elements can be set to a wide height

Inline: In-line elements cannot be set to width height

Difference Three:

Block level: block-level elements can be set margin,padding

In-line: the horizontal direction of the elements in the margin-left; Margin-right; Padding-left; Padding-right; can take effect. But the vertical direction of the margin-bottom; Margin-top; Padding-top; Padding-bottom, but not effective.

Difference Four:

Block level: Display:block;

In line :display:inline;

You can toggle block-level elements and inline elements by modifying the display property.

8. The positioning principle of the box

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

Horizontal positioning between elements within rows: Horizontal margin of row-level elements is the result of the addition of adjacent margin ;

Vertical positioning between block-level elements: the vertical margin of a block-level element is the maximum value of the adjacent margin ;

Positioning between nested boxes:

9. Float Float of the box

"Floating settings" refers to the setting of the float property in CSS, the default value is None, that is, by default, the float effect is off, using the standard flow mode. The floating box is separated from the standard stream and its width is no longer automatically stretched, depending on the contents of the box to determine its width. The other boxes in the standard flow will top up to the position of the floating box.

The basic interpretation of the float property:

The value of this property indicates whether the object floats and how it floats. When the property is not equal to none causing the object to float, the object will be treated as a block object, i.e. Display:block;

Parameters for the Float property:

None: Object does not float

Left: Object floats on

Right: The object floats to the left

How to make subsequent boxes unaffected by the front floating box: Clear:left/right/both

10. Positioning of the box

Positioning in CSS: Position the box to the specified place by using the position property in the CSS.

The Position property is located in the following way:

(1) Static: Static positioning, is the default value.

(2)relative: Relative positioning, the box relative to its original position, by specifying the offset (horizontal offset: lefth and right property values; vertical offset: top and bottom property values), to the new position. Relative positioning has no effect on the parent box and the Brother box.

(3)Absolute: absolute positioning, the box is offset by the nearest ancestor element that has been positioned, and if there are no ancestors that have been positioned, the browser is the baseline (already positioned means that the position property has been set).

(4) Fixed: Stationary positioning, which is similar to absolute positioning, only the browser window as the benchmark for positioning, that is, when dragging the browser window scroll bar, still keep the object position unchanged.

div tags vs. span tags

CSS layout often used in <div> and <span> tags, the use of these two tags, CSS can be very convenient to achieve a variety of page effects.

<div>, like the <span> tags, are widely used as containers in the HTML language, which can accommodate a wide variety of HTML elements, allowing you to divide a Web page into separate chunks. The difference between the two tags is that<div> is a block-level element that wraps itself, and <span> is an inline element that does not wrap before or after it. <span> has no structural meaning, it is purely a CSS style, and the <span> element can be used when other inline elements are not appropriate.

div+css Layout Page

DIV+CSS layout, use the page as a whole <div> block, then use CSS to layout the individual tiles, and finally add the corresponding content in each block. That is, the div container is loaded with content, and CSS is a style for decorating content.

Typical layout layout: fixed-width, centered layout, left-center-right layout.

DIV+CSS layout vs. Table layout:

By <table> each cell can be easily divided into various modules, easy to make, CSS through the div to divide the module, but also need to adjust the distance between the modules and the arrangement.

Table layouts are more difficult to maintain than div+css layouts. Table layout Code and content mix, poor readability, web file size, browser parsing slow.

Deep Understanding div+css Layout nesting Box