Home >Web Front-end >Front-end Q&A >How to use css box-sizing property
How to use css box-sizing property
- 藏色散人Original
- 2019-05-29 11:04:342779browse
css The box-sizing attribute is used to define specific elements that match a certain area in a specific way. Its syntax is box-sizing: content-box|border-box|inherit.
How to use the css box-sizing property?
Function: The box-sizing attribute 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.
Syntax:
box-sizing: content-box|border-box|inherit
Description:
content-box This is the width and height behavior specified by CSS2.1. The width and height are applied separately to the element's content box. Draws the element's padding and borders outside of its width and height.
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 are obtained by subtracting the border and padding from the set width and height respectively.
inherit Specifies that the value of the box-sizing attribute should be inherited from the parent element.
Note: Internet Explorer, Opera, and Chrome support the box-sizing attribute. Firefox supports an alternative -moz-box-sizing property.
css box-sizing property example
<!DOCTYPE html>
<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>Effect output:
The above is the detailed content of How to use css box-sizing property. For more information, please follow other related articles on the PHP Chinese website!