CSS box model boundary (Box-model) problem in HTML

Elements in HTML we divide him into one box, boxes can be placed inside the box, you can also place text, by default, we set the box maring, padding and border, regardless of what unit set the value, these values will be calculated in the overall size of the box, Although this is a very basic CSS technology, but a lot of people who write code is not very understanding, resulting in web page dislocation but do not know how to solve.

CSS box model boundary (Box-model) problem in HTML

I've always been so uncomfortable with the relationship between CSS and padding-spacing borders, you're busy defining widths to fit your grid layout, and then you start adding text and setting the right amount of spacing and padding, and you notice that the layout of your box is messed up.
If I define a div, his width of 200px, and then I set him a 20PX margin, so that he and other elements of the space between, but at this point, the width of this div is not 200px, but 240px, this is a bad situation, in order to meet the previous layout effect , I have to modify this div to a width of 160px.

Box model boundary

CSS In fact has this kind of setting method, that is box-sizing he defines a particular element that allows you to define a particular area in a specific way, and if you need to place two border-bordered boxes, you can set the box-sizing to "Border-box". This allows the browser to render a box with the specified width and height, and place the border and inner margins in the box, which means that once the element is set Box-sizing:border-box, no matter how much padding and borders you give to the element, his width will never change. This is how it is set in many CSS frameworks.

HTML {
Box-sizing:border-box;
}
*, *:before, *:after {
Box-sizing:inherit;
}

This code sets the box model you want, especially the design of the top navigation, you need to set a width of 100%, but the left and right need a certain distance so that the content does not pull too far, if it is by default, the horizontal slider will appear.

Support for browsers

Thanks to browser support, this recommendation is only to support IE8 and above the Internet Explorer, other browsers need to add browser vendor prefix, Firefox version less than 28 browser needs to add-moz-prefix, Android mobile browser needs to add-webkit-prefix, You can find more information about a box size Polyfill IE6 and 7 in html5please.com/#box-sizing.

Is it safe?

It can be said that using this method is very safe, the jquery project is quite large, as mentioned earlier, the browser support is good. And some projects using the default layout model, including the WebKit Web Inspector, I heard from the Dutch Yathura Thorn Front-End development experience:

We ' ve been using *{box-sizing:border-box;} In one's My projects (deployed in production, averaging over 1mln visits a mo Nth) at work for about a and it seems to is holding up just fine. The project has been tested in IE8 & 9 and the latests Firefox and Chrome versions and we ' ve had no problems. All JQuery (+ui) offset calculations and animations run fine, even in any element we ' ve displayed as Inline-block. As of late we ' ve started testing the project on mobile devices (IPhone, IPad and Android) and we ' ve had no issues Regardin G box-sizing with any of the them yet, so it seems to work just.

One of my favorite use cases, the bounding box solves the problem of grid layout, I would like to put my lattice 50% or 20% columns, but to add padding through px or em without css the upcoming calc () It is impossible unless you use the bounding box so easily) another good use of 100% Width and then want to add a fill element.
Run Performance
for this property, you may have heard of all the elements set, may reduce the rendering of their browser, increase the time to render the page, in fact, the current computer Configuration and browser upgrade, you do not need to worry about how much trouble it will bring to your Web page, if you want to improve the performance of the Web page, You only need to compress your CSS and JS documents, open the page gzip compression, these methods will be more effective.
Hopefully you'll find that this is a more natural layout model.
Adjustment of third party content
any third-party controls adding content directly into the page may require additional attention. Any part of the IFRAME (such as Disqus's new theme) is naturally insulated from the layout style of the parent page. If you need to make adjustments, third party content you can apply for Box-sizing:content-box to the widget and its descendants. This may be extraordinary, especially if the form control's bounding box is by default, so you should also consider it.