HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
CSS3 box-sizing
property to set the width and height attributes contains padding (padding) and the border (border).
Figures in the table represent the first browser to support the property version number.
Immediately after the number -webkit- browser or -moz- specified prefix.
Attributes | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- | 8.0 | 29.0 2.0 -moz- | 5.1 3.1 -webkit- | 9.5 |
By default, the width and the way high-end computing element is as follows:
width (width) + padding (padding) + border (border) = actual width elements
height (height) + padding (padding) + border (border) = actual height of the element
This means that when we set the element's width / height, the element's display height and width would be bigger (because of border element with padding will calculate width / height in).
These two <div> element, although the width and height settings the same, but the size of the real show inconsistent because div2 specified padding:
If you want to use this method to get the smaller box and contains within the margins, you have to take into account the border and within the margin width.
The CSS3 box-sizing
property a good solution to this problem.
CSS3 box-sizing
attribute contains padding (padding) and the border (border) in width and height of an element.
If you set on the element box-sizing: border-box;
the padding (padding) and the border (border) is also included in the width and height of:
Here are two <div> element is added box-sizing: border-box;
properties of a simple example.
Judging from the results of box-sizing: border-box;
better results, it is also a lot of developers need.
The following code can make all the elements in a more intuitive way to display size. Many browsers already support box-sizing: border-box;
(but not all - which is why the input and text elements set width: 100%; the width of the post is not the same).
All elements using box-sizing is more recommended: