Let's talk about the css box model_html/css_WEB-ITnose

Css box model principle:

Commonly heard attribute names in web design: content, padding, border, margin (margin), CSS box mode all have these properties.

We can understand these attributes by transferring them to the boxes (boxes) in our daily life. The boxes we see in our daily life are also a kind of box that can hold things. They also have these attributes, so they are called It's box mode.

In CSS, Box Model is called box model (or box model). Box Model specifies the method of element content, padding, border and margin. . In HTML documents, every element has a box model, so in the Web world (especially page layout), Box Model is everywhere. The following is an illustration of the Box Model:

Understanding the css box model:

You can understand it as a box in daily life. Content is what is contained in the box. It has height and width. It can be a picture, text or small box nesting. In reality, the content cannot be larger than the box. If the content is larger than the box, the box will burst. , but in CSS, the box is elastic. At most, if the content is too large, it will expand the box, but it will not damage the box. Padding is filling, just like we fill something with something, such as foam or plastic film, in order to ensure that the things in the box are not damaged. The filling can be large or small, soft or hard, and the size of the padding is reflected in the web page. The outer layer is the border, because the border has size and color properties, which are equivalent to the thickness of the box and its color or material. Margin is the distance between our box and other boxes or other things. If there are a lot of boxes, the margin is the direct distance between the boxes, which can be ventilated, beautiful and easy to take out.

We understand the box model, which helps us understand how the final size of an element is determined, and also helps us understand how elements are positioned on the web page. The box model is mainly suitable for block level element.

Calculation of css box size:

We define the height and width of content by assigning values ​​to height and width. If no declaration is made, the default values ​​for height and width will be auto. That is, when assigning values ​​to the width and height attributes of a block-level element in CSS, such as div{width: 200px; height: 200px}, the width and height are only set for the content part, that is, the length and length of the content area in the above picture Width. rather than the sum of content, padding, and borders (but in early versions of IE, including IE6, the width and height of the box model are the sum of content, padding, and borders. Although it conforms to people's logical thinking habits, it does not comply with the specification. , causing a lot of compatibility issues)

Containing Block Comments

Containing Block is an important concept in the visual formatting model. It is similar to the box model and can also be understood as A rectangle, and the function of this rectangle is to provide a reference for the elements contained in it. The calculation of the size and position of the element is often determined by the containing block in which the element is located.

Simply put, a containing block is a positioning reference frame, or positioning coordinate reference system. Once an element is defined for positioning display (relative, absolute, fixed), it has the nature of a containing block, and the positioning elements it contains will be based on that Contains blocks for positioning and adjusting the coordinate system.

As shown in the code, div and table are both containing blocks. It can be said that div is the containing block of table, or table It is the containing block of the div, which is not absolute.

is defined as follows:

1. The user agent (such as the browser) selects the root element as the containing block (called the initial containing block).
2. For other elements, unless the element uses absolute positioning, the containing block consists of the content bounds of the nearest block-level ancestor element's box.
3. If the element has the attribute 'position:fixed', the containing block is created by the viewport.
4. If the element has the attribute 'position:absolute', the containing block is created from the nearest ancestor whose position is not static. Follow the steps below:
   1. If the ancestor is a block-level element, the containing block is created from the ancestor. The padding edge is formed.
   2. If the ancestor is an inline element, the containing block depends on the ancestor's direction property.
      1. If direction is ltr (left to right), the top and left content boundaries of the first box generated by the ancestor are the top and left of the containing block, and the bottom and right content boundaries of the last box of the ancestor are below and to the right of the containing block.
      2. If direction is rtl (right to left), the top and right content boundaries of the first box generated by the ancestor are above and to the right of the containing block, and the bottom and left content boundaries of the last box of the ancestor are below and to the left of the containing block.

If there is no ancestor, the content boundary of the root element box is determined to be the containing block. Today I will mainly explain the css box model, including blocks, I will post it separately.

For statically positioned elements with automatic width (i.e. no positioning) and relatively positioned elements, the width is calculated by subtracting the width of the element from the width of their containing block. All margins, padding, borders, scrollbars. In other words, the width of the element's horizontal margins, padding, borders, and scroll bars (if present) are removed from the width of the containing block, and the remaining value is content.

In CSS, width and height refer to the width and height of the content area. Increasing padding, borders, and margins will not affect the size of the content area, but it will increase the overall size of the element's box. Let's say the box has 10 pixels of margin and 10 pixels of padding on each side and a 5-pixel border. If you want this element box to be 100 pixels, you need to set the width of the content to 50 pixels. The following is the CSS code:

You can understand css from the above example The box model is calculated.

For floating and absolutely positioned elements (including fixedly positioned elements), the width of the automatic state will cause the box to shrink to the size of its content.

The following code and box diagram can be understood:

When we place a block-level element on the page , and if its positioning attributes (relative, absolute, fixed) are not set, that is, position:static, or if position:relative is set, the width of the block is extended to automatically fill the width area of ​​its parent element.

The following code and box diagram can be seen:

Pay attention to the margin overlay effect

Although In the above example of calculating the required area size of an element, the margins have been included in the calculation, but it should be noted that the adjacent margins of vertical non-positioned (static) elements will be superimposed into one of the larger widths. The value of the outer margin is not the sum of the two. This means that when calculating the size of the area that actually needs to hold an element, you don't start from the edge of the margin. Only the widest margin will take effect, and narrower margins will be stacked with larger ones. .

As can be seen from the above picture, the vertical margin of the two boxes is not the sum of the two margins, but the widest margin. If the margins are equal, one of them is taken. It’s 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 margins, inner margins spacing, or a border, which just makes the area where it's placed require a larger area. This is often ignored and disrupts the layout of the page, so that content either overflows or makes elements wider than they should be.

As you can see from the above code and renderings, the layout is destroyed and the parent element occupies an exclusive line, affecting the layout.

If the available area is a fixed width, you can simply add up the width of each attribute element (margin, padding, etc.) to match the available fixed width. For example, if the available area width is 100px and you need an element to have 20px padding, simply set the width of the element to 60px and the padding to 20px (20 60 20 = 100). The prerequisite for this method is that the width value and the element's box attribute are both in the same measurement unit, because you don't want to add up mixed units (100px 10%, just as an example, which does not make sense in the content of).

When the width of the available content area is unknown - such as in a fluid layout - this approach does not work because percentages and pixels cannot be added together. In this case, the solution should be to declare a 100% width value for the required element, and set the padding, border, and margin values ​​to a nested element. This nested element does not have any width values ​​declared, and can display the required padding, borders, and margins without interfering with the parent element.

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

This is to adjust the fit according to the screen size width. This nested element does not have any width values ​​declared, and can display the required padding, borders, and margins without interfering with the parent element.

Extension of css box: div css layout ideas
The traditional front-end web design is carried out like this: according to the requirements, first consider the main color and what type of pictures to use , what fonts, colors, etc. to use, and then draw them freely using software such as Photoshop, and finally cut them into small pictures, and then generate the page by designing HTML freely. After switching to CSS typesetting, we have to change this idea. At this time, our main consideration is the semantics and structure of the page content, because for a web page with strong CSS control, after the web page is completed, you can easily adjust the web page style you want. Moreover, another purpose of CSS typesetting is to make the code It is easy to read, has clear blocks, and strengthens code reuse, so the structure is very important. If you want to say that my web page design is very complicated, will it be possible to achieve that effect later? What I want to tell you is that if the effect cannot be achieved with CSS, it is generally difficult to achieve it with tables, because the control ability of CSS is too powerful. By the way, there is a very practical benefit of using CSS for typesetting. , if you are taking orders to build a website, if you use CSS to layout the web page, if the customer is not satisfied with it later, especially the color, then it is very easy to change it, and you can even customize several styles of CSS files. For customers to choose, or write a program to implement dynamic calls, so that the website has the function of dynamically changing the style.

Key point: Separate structure and presentation

Before you really start to practice layout, let’s get familiar with one more thing? Separate structure and presentation, which also uses CSS The characteristic of layout is that after the structure and performance are separated, the code will be concise and easy to update. Isn't this the purpose of learning CSS? For example, P is a structured tag. Where there is a P tag, it indicates that this is a paragraph block. Margin is a performance attribute. I want to make a paragraph right-indented by 2 characters. Some people will think of adding spaces and then continue Spaces are added, but now you can specify a CSS style for the P tag: P {text-indent: 2em;}, so that the resulting body content is as follows, without any additional performance control tags:

I’m very happy to share it with you all. That’s it for today. If there is anything you need to correct or add, please feel free to leave me a message! Thanks!