#css3 # box-sizing

The Box-sizing property makes CSS layouts easier and more intuitive. But why is it effective and loved, let's first look at its history.

Box model History

Since the advent of CSS, the box model has done so by default:

width + padding + border = The element is rendered/actually visible

Height + padding + border = The element is rendered/actually visible

This may be a violation of intuition, because once you add padding or border to the element, the height/width you set will run out of window.

Recalling the web design, the early version of IE (<ie 6) in the Quirks mode processing box model is different:

width == The height of the element being rendered/actually visible

The value of the border/padding is placed in the element box by reducing the width/height of the box, rather than extending it.

Some people prefer this quirky box model and think it is more intuitive.

However, in the era of fixed-width design, once you understand the default box model, it is less complex to use. You can calculate how wide and how high you need to set by simple math. The problem for developers today is that the absolute px lengths are not translated into adaptive design I, so the same math problem no longer applies.

Adaptive design became popular, and developers and designers wanted to update the box model. Jon Hicks, the great designer, is known for his excellent flow-width design, adding this theme to the CSS wishlist:

I want a different box model. I find it strange to add padding/border to the width of the element, hoping to give a way, such as textarea 100% wide, 3px padding, without worrying about how it will be laid out. Maybe it could be a built-in padding?

Modern box-sizing

These ideas facilitated the box-sizing attribute being introduced into the CSS3. Even if box-sizing has three values: Content-box,padding-box,border-box, the most common is border-box.

The latest version of all browsers now uses the original: Width/height + padding + border = actual wide/high box model. With Box-sizing:border-bbox, we can change the box model to the once quirky way, and this way the specific width of the element is not affected by Padding/border. This has proven to be useful in adaptive design.

So, you might ask yourself, "isn't the old version of IE doing the right thing?" "Some people think so.

Good,better,and (probably) best box-sizing Reset Methods

# the "old" Border-box reset

* {  box-sizing:border-box;}

# Universal Box Sizing

*, *:before, *:after {  box-sizing:border-box;}
This method contains pseudo-class elements. But the selector makes it more difficult for developers to use content-box/padding-box elsewhere.

# Universal Box Sizing with inheritance

HTML {  Box-sizing:border-box;} *, *:before, *:after {  box-sizing:inherit;}
This reset method gives you more flexibility than the previous method-you can use Content-box/padding-box without worrying about the wildcard selector covering your CSS.

　　

#css3 # box-sizing