Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what is the use of box-sizing attributes in CSS". The content is simple and easy to understand and clearly organized. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn "what is the use of box-sizing attributes in CSS" this article.

This is because the size of the region does not contain the value of padding border.

Depending on the box-sizing property change settings, you can set padding and border in the area size. This allows the size of the box to be determined independently of padding and borders.

Let's look at how box-sizing works.

The box-sizing attribute can be written as follows

box-sizing：value;

You can write the value of value in content-box and border-box.

content-box: Width and height are applied to the element's content box, respectively; padding and borders are drawn outside of width and height.

border-box: The width and height you set for an element determine the bounding box of the element, that is, any padding and borders you specify for the element will be drawn within the width and height you set, and the width and height of the content will be obtained by subtracting the borders and padding from the width and height you set, respectively.

In addition, if you enter inherit, the value of the parent element is inherited.

Let's look at a specific example

code is as follows

HTML code

content-box(initial)

Padding and border are not included in width and height.

In the case of border-box, padding and border are included in width and height

Set two boxes of exactly the same width and height (width 400px, height 150px), the first box setting the initial value content-box, the second box setting the value border-box.

CSS code

p.content1{

width:400px;

height:150px;

background-color:#f0f8ff;

border:30pxsolid#4169e1;

padding:10px;

box-sizing:content-box;

}

p.content2{

width:400px;

height:150px;

background-color:#f0f8ff;

border:30pxsolid#4169e1;

padding:10px;

box-sizing:border-box;

}

The above is "CSS box-sizing attribute what to use" all the content 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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.