A thorough study of CSS Design (iii) in-depth understanding of the box model

Chapter III in-depth understanding of the box model

　　The box model is the basis of the CSS control page. Need to be clear what the meaning of "box" is, and the composition of the box. In addition, you should understand the basic concepts of the DOM and how the DOM tree corresponds to an HTML document, on the basis of which the concept of "standard flow" is fully understood.

3.1 Inner structure of the box

The Padding-border-margin model is an extremely versatile way to describe the layout of a rectangular object. These rectangular objects are collectively referred to as "boxes" and English as "box". A model is an abstraction of an essential characteristic of something.

In CSS, a separate box model consists of content (contents), Border (border), padding (padding), and margin (margin) 4 parts.

The width (or height) that a box actually occupies is made up of content + padding + border + margin. In CSS, you can control the size of the rectangle that the content occupies by setting the value of width and height.

3.2 Border (border)

Border is generally used to separate different elements, the periphery of the border is the outermost part of the element, so the actual width and height of the calculated elements, it is necessary to include border.

There are 3 main attributes of the border, color, width (thickness), and style (style). When you use CSS to set borders, you can set them using Border-color, Border-width, and Border-style, respectively.

BORDER-COLOR Specifies the color of the border. Values that are typically set to 16, such as #336699, can be abbreviated as #369

BORDER-WIDTH Specifies the thickness of the border, which can be set to thin, medium, thick, and <length> (referring to specific values). The default value is "Medium", and the General browser resolves to 2px wide.

Border-style can be set to none, hidden, dotted, dashed, solid, double, groove, Ridge, inset, and outset. None and hidden do not display border, and hidden can be used to resolve border conflicts when using tables.

3.2.1 Experimental 1-border-style

　　

Abbreviated form of the 3.2.2 property value

1. Set different property values for different borders

Set the Border-color,border-width,border-style these 3 properties, is to the upper and lower left and right 4 borders at the same time to play a role. You can also set different property values:

A. If 2 attribute values are given, the former represents the upper and lower border properties, the latter representing the left and right border;

B. If 3 attribute values are given, the former represents the property of the top border, and the median value represents the property of the left and right border, which represents the property of the lower border;

C. If 4 attribute values are given, then the properties of the top, right, bottom, and left boxes, in turn, are sorted clockwise.

2. Set a border with a different border than other properties. If you set the color of the left border to red, you can write: border-left-color:red;

When there are multiple rules acting on the same border, a conflict occurs, and subsequent settings override the previous settings.

3.2.3 Experiment 2-abbreviated form of the attribute

3.2.4 Experiment 3-borders and backgrounds

When setting the Background-color background color for an element, IE has an area of content+padding, while Firefox is Content+padding+border.

3.3 Inner margin (padding)

Padding, also known as the padding, is used to control the distance between the content and the border.

When a box is set with a background image, by default the background image covers a range of padding and content, and tiles the background image as a datum point in the upper-left corner of padding.

IE Browser: background color overlay padding+ content; Firefox border+padding+ content.

3.4 Margin (margin)

Margin refers to the distance between elements and elements.

Visually, margin is used to control the distance between blocks and blocks. If the box model is compared to a painting exhibited in the exhibition hall, then content is the picture itself, padding is the picture and the picture frame between the white, border is the picture frame, and margin is the distance between the painting and painting.

3.5 The relationship between boxes

The idea of CSS specification is: First determine a standard typesetting mode, so as to ensure the simplification of settings, a variety of page elements of the box in accordance with this standard arrangement layout. This approach is the "standard flow" approach.

3.5.1 HTML and Dom

The DOM is the abbreviation for the Document Object model, which is the "Documentation objects models". All the elements of a Web page are organized together, forming a tree of "DOM".

An HTML document is not a simple text file, but a hierarchical logical document, and each HTML element exists as a node in the hierarchy. Each node response in the browser has a different form of expression, the specific form is determined by CSS.

The purpose of CSS is to make the form of Web page and content structure separate, CSS control the form of Web pages, HTML control the content structure of the page.

3.5.2 Standard Document Flow

"Standard document Flow" is referred to as "standard flow". Refers to the arrangement rules of various elements that are not applicable to other special CSS rules related to typesetting and positioning.

1. Block level elements

Always in the form of a block, and with siblings of the sibling block in order, left and right to fill.

2. In-line element (inline)

The mark itself does not occupy an independent area, but only on the basis of other elements it points out a certain range.

Inline elements are also a node in the DOM tree species. From the DOM point of view, there is no difference between the block-level element and the inline element, which is a node in the tree, and from the perspective of CSS, there is a big difference between the block-level element has its own area, the inline element is not.

The standard flow is the default block-level element and the arrangement of the elements in the line as defined by CSS.

3.5.3 <div> tags and <span> tags

<div> is a block-level element, and the elements he defends are automatically wrapped. <span> is just an inline element that doesn't wrap around it.

3.6 Positioning principle of box in standard flow

3.6.1 Experiment 1-horizontal margin between elements in rows

When two inline elements are adjacent, the distance between them is the margin-right of the first element plus the margin-left of the 2nd element.

3.6.2 Experiment 2-vertical margin between block-level elements

The distance between the two vertical block-level elements is not the sum of Margin-bottom and margin-top, but the larger of the two. This phenomenon is called the "collapse" phenomenon of margin.

3.6.3 Experiment 3-the margin between nested boxes

If the height value of the parent div is less than the height of the child block Div plus the value of margin, the IE browser expands automatically, preserving the margin-bottom space of the child element and the padding-bottom of the parent element itself. Firefox will ensure that the parent element's height is exactly the same, and the child elements go beyond the parent element's scope.

The CSS specification has four width and height related attributes: Min-height, Max-height, Min-width, Max-width. IE browser is not supported.

3.6.4 Experiment 4-set margin to a negative value

When margin is set to a negative number, the block that is set to a negative number moves in the opposite direction, even on another block.

3.7 Geometric problems in CSS

The width of the box actually occupies is the total width of the width+padding+border+margin.

　　　　　　

　　

Thorough study of CSS Design (iii) in-depth understanding of the box model