How to use box-sizing in css

This article mainly shows you "how to use box-sizing in css". The content is simple and easy to understand, and the organization is clear. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn this article "how to use box-sizing in css".

box-sizing

Attributes allow you to define specific elements that match a region in a specific way.

For example, if you want to place two framed boxes side by side, you can do this by setting box-sizing to "border-box." This causes the browser to render a box with the specified width and height, and to place the border and padding inside the box.

syntax

box-sizing: content-box|border-box|inherit;

content-box: w3c standard (default)

border-box: IE traditional standard

content-box:

.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

The width 200px in test1 refers to the width of the content, and the same is true for the height.

border-box:

.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

The width 200px in test2 refers to the width of the border, and the height is the same.

Padding-box can be understood with the help of the above example

The above is "how to use box-sizing in css" all the contents of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!