Briefly talk about the understanding of CSS box model? Introduction to the CSS box model

The content of this article is to briefly talk about the understanding of the CSS box model? An introduction to the CSS box model. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The construction of any web page is inseparable from the stacking of box models. It should be said that the CSS model is a foundation of the web. The difference in the final effect is nothing more than the difference in height and width, content and background deletion.

So what do you know about CSS models?

First of all, how many types of css box models are there? Two kinds.

1. Standard model 2. IE model

Let’s first talk about the difference between these two box models. Look at the pictures to speak:

The biggest difference between the standard model and the IE model is the difference in calculation methods. The height and width of the standard box model are the height and width of the content. The calculation of the height and width of the IE model includes the width and height of padding and border. When setting up, we can distinguish between the two by setting box-sizing.

The value of box-sizing

content-box: Standard box model.

border-box: IE box model.

So when should I use the IE box model? The author's feeling is not used in many places, but there is one situation where it is very necessary. When setting an element to hover and adding a border to it, if the standard box model is used at this time, the style will be confused. The look and feel is that the

element is squeezed into a 1px border. Unsightly. However, setting box-sizing:border-box can solve this problem very well.

Secondly, how to get the width and height of an element using js?

Let’s break out the methods first and then talk about the differences.

document.getElementById('id').style.width/height: Only limited to getting inline styles to get width and height.

document.getElementById('id').currentStyle.width/height: You can get the width and height after the browser renders it in time. This method is more accurate but only supports IE. (It must be accurate and everyone can use the method below)

window.getComputedStyle(dom).width/height: This method is compatible with chrome and firefox browsers.

document.getElementById('id').getBoundingClientRect().width/height: This method can also get the width and height of the element in time, calculate the absolute position of an element and get the top, left, and width at the same time , height four values.

When it comes to the css box model, we must introduce the concept of BFC (block-level formatting context). There is a more detailed introduction to this part of the content online, so I will not reinvent the wheel here. Yes, just to mention it briefly.

The principle of BFC

1. The vertical margins of the BFC element will overlap.

2. The BFC area will not overlap with the BOX of the floating element.

3. BFC is an independent container, and external elements will not affect the elements inside.

4. When calculating the BFC height, floating elements will also participate in the calculation.

How to create BFC

1. overflow: hidden, auto;

2. The value of float is not none;

3. The value of position is not the default or realative

4. display: inline-block, table-cell, table

The above is the detailed content of Briefly talk about the understanding of CSS box model? Introduction to the CSS box model. For more information, please follow other related articles on the PHP Chinese website!