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

This article mainly introduces how CSS uses box-sizing attributes, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Correct use of CSS box-sizing attribute CSS Custom attribute (variable)

The CSS box-sizing attribute allows us to include fills and borders in the total width and height of the element.

No CSS box-sizing attribute

By default, the width and height of the element are calculated as follows: width + padding + border = the actual width of the element height + padding + border = the actual height of the element, which means that when you set the width / height of the element, the element usually looks larger than you set (because the border and fill of the element are added to the specified width / height of the element). The following illustration shows two elements with the same specified width and height:

Ccs .div1 {width: 300px; height: 100px; border: 1px solid blue;} .div2 {width: 300px; height: 100px; padding: 50px; border: 1px solid red;} this div is smaller (width is 300px, height is 100px).

This div is larger (the width is also 300px and the height is also 100px).

The box-sizing attribute solves this problem.

Use the CSS box-sizing property

The box-sizing attribute allows us to include fills and borders in the total width and height of the element. If box-sizing: border-box; is set on the element fill and the border is contained in the width and height:

.div1 {width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box;}. Div2 {width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box;}

Try it online.

Because the result of using it, box-sizing: border-box;, is very good, many developers want all the elements on their pages to work this way. The following code ensures that all elements are resized in a more intuitive manner. Many browsers already use box-sizing: border-box; for many form elements (but not all-which is why input and text areas look different in width: 100%;). It is safe and wise to apply it to all elements:

* {box-sizing: border-box;} CSS Box resize attribute

Box-sizing defines how to calculate the width and height of an element: whether fills and borders should be included

Thank you for reading this article carefully. I hope the article "how CSS uses box-sizing properties" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.