About the css box model and the css box

About the css box model and the css box
Css Box Model Principle: attribute names that are often heard in Webpage Design: content, padding, border, and margin ), CSS box mode has these attributes. These attributes can be transferred to the boxes in our daily life for understanding. The boxes we see in our daily life are a kind of boxes that can hold things. They also have these attributes, so it is called the box mode.

In CSS, the Box Model is called the Box Model (or the Box Model). The Box Model specifies the element content, padding, and border) and the margin (margin. In HTML documents, each element has a Box Model, so in the Web world (especially the page layout), the Box Model is everywhere. The following figure shows the Box Model:

The root element is called the initial containing block ).

For other elements, unless the element uses an absolute position, the containing block consists of the content boundary of the nearest block-level ancestor element box.

If the element has an attribute 'position: fixed', The containing block is created by the viewport.

If the element has an attribute 'position: absolute ', the containing block is created by the closest position not the static ancestor. follow these steps:

If no ancestor exists, the content boundary of the root element box is determined as a ining block. Today, I will mainly explain the css box model, including additional sections.

For static positioning elements whose width is automatic (that is, no positioning), and relative positioning elements, the method to calculate the width is to include the block (containing block) width minus all the outer margins, inner margins, borders, and scroll bars of the element. That is to say, to remove the horizontal margin, inner margin, border, and scroll bar width of the element from the width of the contained block (if any), the remaining value is content.

In CSS, width and height indicate the width and height of the content area. Adding the padding, border, and margin does not affect the size of the content area, but increases the total size of the element box. Assume that each side of the box has a 10-pixel margin, a 10-pixel margin, and a 5-pixel border. If you want the element box to reach 100 pixels, you need to set the content width to 50 pixels. The following is the CSS code:

 

The preceding code is visible and the layout is damaged. The parent element occupies only one row, affecting the layout.

If the available area is fixed in width, you can simply add the width of each attribute element (such as margin and padding) to match the available fixed width. For example, if the available area width is PX and you need an element with an internal margin of 20 PX, you can simply set the width of this element to 60px, the padding is 20px (20 + 60 + 20 = 100 ). In this method, the prerequisite is that the width value and the element box attribute use the same measurement unit, because you do not want to add the mixed unit (100px + 10%, just for example, this method is meaningless in the content ).

When the width of the available content area is unknown-for example, in fluid layout-this method does not work because the percentage and pixels cannot be added together. In this case, the solution should be to declare a 100% width value for the required elements, and set the padding, border, the value of the outer margin is set to an element nested in it. This nested element does not have any width value declaration, and can display the expected padding, border, and margin without interfering with the parent element.

For example, the adaptive effect. The specific code and image are as follows:

 

This is to adjust the appropriate width based on the screen size. This nested element does not have any width value declaration, and can display the expected padding, border, and margin without interfering with the parent element.

Css box Extension: the idea of div + css layout
The traditional front-end webpage design is like this: according to requirements, we should first consider the dominant colors, types of images to be used, fonts and colors, and so on, then we can use Photoshop and other software to draw them freely. Finally, we can cut them into small images. We can't design HTML to generate pages freely. After CSS is used, we need to change this idea, at this time, we mainly consider the semantics and structure of the page content, because a webpage with strong CSS control can easily adjust the webpage style you want after the webpage is completed, in addition, the CSS layout aims to make the code easy to read, clear blocks, and enhance code reuse. Therefore, the structure is very important. If you want to say that my webpage design is complex, can you achieve that later? What I want to tell you is that if CSS cannot be used to achieve the effect, it is difficult to use tables, because the CSS control capability is too powerful, by the way, CSS layout has a very practical advantage: if you are using a single website, and if you are using CSS to typeset webpages, what will the customer do later, if the color is special, it will be quite easy to change. You can even customize CSS files of several styles for customers to choose from, or write a program to achieve dynamic calling, allows websites to dynamically change their styles.

Key Point: separation of Structure and Performance

Before getting started with layout practice, let's get familiar with one thing-separation of structure and performance, which also uses the characteristics of CSS layout. After separation of structure and performance, the code is concise, updating is convenient. Isn't that the purpose of CSS learning? For example, P is a structured tag, where P labels indicate that this is a paragraph block, and margin is a performance attribute. I want to indent a paragraph to a 2-character high, some people may think of adding spaces and then constantly adding spaces, but now you can specify a CSS style for the P Tag: P {text-indent: 2em ;}, in this way, the content of the result body is as follows, without any labels for performance control:

I am very happy to share with you this. I will talk about it today. If you need to correct and supplement it, please leave a message for me! Thank you!