What does border-box mean in css3-Front-end Q&A-php.cn

What does border-box mean in css3

WBOY

Release： 2022-01-24 14:48:29

Original

13806 people have browsed it

In css3, "border-box" is the attribute value of "box-sizing", which means that the width and height set by the element determine the border box of the element; the "box-sizing" attribute specifies that it is defined in a specific way Match specific elements in a certain area, the syntax is "box-sizing:border-box".

What does border-box mean in css3

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What does border-box mean in css3

In css3 border-box is a value of the box-sizing attribute.

The box-sizing property allows you to define specific elements that match a certain area in a specific way.

For example, if you need to place two bordered 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 put the borders and padding into the box.

When the value of this attribute is set to border-box, the width and height set for the element determine the border box of the element.

That is, any padding and borders specified for the element will be drawn within the set width and height.

The width and height of the content can be obtained by subtracting the border and padding from the set width and height respectively.

The syntax is:

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

Copy after login

The attribute value of this attribute is as follows:

What does border-box mean in css3

##The example is as follows:

<html>
<head>
<style> 
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>
</body>
</html>

Copy after login

Output result :

What does border-box mean in css3

(Learning video sharing:

css video tutorial)

The above is the detailed content of What does border-box mean in css3. For more information, please follow other related articles on the PHP Chinese website!