Shallow into the deep out of the understanding of the box model, hahaha

CSS Box Model principle: The property names that are often heard in web design: content, fill/padding (padding), Border (border), margin (margin), CSS box mode has these properties. These properties we can transfer it to our daily life in the box (box) to understand that the daily life of the box is a box that can be loaded, but also have these properties, so call it box mode.

In CSS, box model is called Box models (or box models), and the box model specifies the way elements (element content), padding (padding), Borders (border), and margin (margin) are. In the HTML document, each element has a box model, so in the Web world (especially the page layout), the box model is everywhere. Here is a diagram of the box model:

Understanding CSS Box Models:

It can be understood as a box in everyday life. Content is a box of things, it has height (height) and width (width), can be a picture, can be text or a small box nested, in reality, the content can not be larger than the box, the contents of the box will burst the box, but in CSS, the box is flexible, The content is too big to hold the box, but it will not damage the box. Padding is filled, as if we are in order to ensure that the contents of the box is not damaged, filled with something, such as foam or plastic film, filled with a lot of small, soft and hard, the response in the Web page is the size of padding. and the outer layer is the border border, because the border has the size and color properties, the equivalent of the box thickness and its color or material. Margin is the distance between our box and other boxes or other things. If there are many boxes, margin is the direct distance of the box heap code, can be ventilated, but also beautiful and convenient to remove.

We understand the box model, which helps us understand how the final dimensions of an element are determined, and also helps us understand how elements are positioned on the page, and the box model is primarily for block-level elements.

Calculation of CSS box size:

We define the height and width of the content by assigning a value to aspect. If you do not make any declarations, the default value for height and width will be automatic (auto). That is, when the width and height property of a block element is assigned a value in CSS such as div{width:200px; height:200px}, the width and height are only set for the Content section, which is the length and width of the content area. Instead of the contents, padding, and the sum of the borders (but in earlier versions of IE including IE6, the width and height of the box model are the sum of the contents + padding + borders), although they conform to the logical habit of thinking, but do not conform to the specifications, resulting in many compatibility issues. ）

Include block comments

The containing block is an important concept of a visual formatting model that is similar to a box model and can be understood as a rectangle that provides a reference for the elements contained within it, and the size and position of the element is often determined by the containing block where the element resides.

The inclusion block is simply the positioning of the reference frame, or the positioning of the coordinate reference system, once the element defines the positioning display (relative, absolute, fixed) has the inclusion block nature, it contains the positioning elements will be in the containing block for the coordinate system to locate and adjust.

As the code shows, the Div and table are all containing blocks, which can be said that the div is the containing block of the table, or that table is the DIV's containing block, which is not absolute.

It is defined as follows:

1. A user agent (such as a browser) chooses the root element as the containing block (known as the initial containing block).
2. For other elements, the containing block consists of the content boundary of the nearest block-level ancestor element box, unless the element uses an absolute position.
3. If the element has the attribute ' position:fixed ', the containing block is established by the viewport.
4. If the element has the attribute ' Position:absolute ', containing block is established by the nearest position not the static ancestor, as follows:
   1. If the ancestor is a block-level element, the containing block is formed by the padding edge of the ancestor .
   2. If the ancestor is an inline element, the containing block depends on the ancestor's direction attribute.
      1. If the direction is ltr (left to right), the upper and left content boundaries of the first box generated by the ancestor are above and to containing block, and the bottom and right content boundaries of the last box of the ancestors are below and to the bottom of the containing block.
      2. If the direction is RTL (right to left), the upper and right content boundaries of the first box generated by the ancestor are above and to the left of the containing block, and the lower and lower content boundaries of the last box of the ancestors are below and to the ieft of the containing block.

If there is no ancestor, the content boundary of the root element box is determined to be containing block. Today, we mainly explain the CSS box model, including the block in addition to the paste.

For statically positioned elements with a width of automatic states (that is, no positioning), and relative positioning elements, the method for calculating widths is to subtract the width of the block (containing block) from all margins, padding, borders, and scrollbars of this element's landscape. That is, the width of the element's horizontal margin, padding, border, scroll bar (if present) is removed from the width of the containing block, and the remaining value is the content.

In CSS, width and height refer to the widths and heights of the content area. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box. Assume that each edge of the box has 10 pixels of margin and 10 pixels of padding and 5 pixel borders. If you want this element box to reach 100 pixels, you need to set the width of the content to 50 pixels, and the following is the CSS code:

The above example can understand the calculation of the CSS box model.

For floating and absolute positioning elements (including fixed positioning elements), the width of the auto state causes the box to shrink to its content size.

The following code and boxes are understandable:

When we place a block-level element on the page and do not set its positioning property (relative,absolute,fixed), that is, position:static, or if position:relative is set, The width of the block is an extension that fills the width area of its parent element automatically.

The following code and box shows:

Pay attention to the outer margin superposition effect

Although the margin is already included in the calculation in the example of the area size required for the calculated element above, it is important to note that the adjacent margins of the longitudinal no-positioning (static) element are superimposed into the value of one of the larger outer margins of the width, not the sum of the two. This means that when the calculation actually needs to hold the size of an element's area, it does not start with the edge of the margin, only the widest margin will take effect, and the narrower margins will overlap with the larger ones.

From the known, two boxes of vertical margin, not two margin add, but the widest margin is the same, if the equal margin is one of the OK.

Note that when the width of an element is set to 100% (that is, the content width of the parent element is 100%), it should not have any margin, padding, or border, which will only make the area where it is placed needs to be larger. This is often ignored and disrupts the layout of the page so that the content either overflows or makes the elements wider than they should be.

The above code as well as visible, the layout is broken, the parent element exclusive row, affects the layout.

If the available area is fixed width, you can simply add the width of each attribute element (margin,padding, etc.) to match the available fixed width. For example, if the width of the available area is 100px, and you need an element with a 20px padding, simply set the width of the element to 60px and the padding to 20px (20+60+20=100). The prerequisite for this approach is that the width value and the element box properties are used in the same unit of measurement, because you don't want to add the blending units (100px + 10%, just for example, it's meaningless in the content).

When the width of the available content area is unknown-for example, in streaming layouts (fluid layout)-this method is not feasible because percentages and pixels cannot be added together. In this case, the workaround should be to declare a 100% width value for the required element, and set the value of the padding, border, and margin to a nested element. This nested element does not have any width value declarations and can show the required padding, borders, and margins without interfering with the parent element.

For example, the adaptive effect, specific code and pictures are as follows:

This is based on the screen size, adjust the appropriate width. This nested element does not have any width value declarations and can show the required padding, borders, and margins without interfering with the parent element.

The extension of the CSS box: The idea of div+css layout
The traditional front page design is carried out in this way: according to the requirements, first consider the main color, what type of picture, with what font, color, and so on, and then use Photoshop this kind of software free to draw out, and then cut into small pictures, and then not free through the design of HTML generation page, instead of CSS layout, We want to change this idea, at this time we mainly consider the content of the page semantics and structure, because a strong CSS control of the Web page, and so on, you can easily adjust the page style you want, and the other CSS layout is to make the code easy to read, block clear, strengthen code reuse, so the structure is very important. If you want to say that my web page design is very complex, to later can achieve that effect? What I want to tell you is that if you do not use CSS to achieve the effect, the general table is also difficult to achieve, because the control of the CSS is too powerful, by the way, there is a very useful CSS layout has a very practical advantage is, if you are to do Web site, if you use a CSS layout page, To do what the customer is not satisfied, non-general tone words, then change it is quite easy, even you can customize several styles of CSS files for customers to choose, or write a program to implement dynamic calls, so that the site has a dynamic change the style of the function.

Key points: separating structure from performance

Before really starting the layout practice, and then to familiar with one thing-the structure and performance of the separation, which also uses the CSS layout features, structure and performance after separation, the code is concise, update is convenient, this is not the purpose of our learning CSS? For example, p is a structured label, there is a P tag place that is a paragraph block, margin is a performance attribute, I want to make a paragraph right indent 2 characters high, some people will think of adding a space, and then continue to add space, but now you can give the P tag to specify a CSS style: p {text-indent: 2EM;}, so the result body content part is as follows, this does not have any performance control tag:

Shallow into the deep out of the understanding of the box model, hahaha