How to use the box-sizing attribute-CSS Tutorial-php.cn

How to use the box-sizing attribute

青灯夜游

Release： 2021-04-20 14:41:37

Original

6876 people have browsed it

The box-sizing attribute allows you to define specific elements that match a certain area in a specific way. The syntax for using this attribute is "box-sizing: content-box|border-box|inherit;".

How to use the box-sizing attribute

The operating environment of this article: Windows 7 system, CSS3 version, Dell G3 computer.

CSS3 box-sizing property

Function: Allows you to define specific content that adapts to a certain area in an exact way.

Note: Internet Explorer, Chrome, Safari and Opera support the box-sizing attribute. Firefox requires the prefix -moz-.

Syntax:

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

Copy after login

##content-boxborder-boxinheritSpecifies that the value of the box-sizing attribute should be inherited from the parent element.

Value	Description
	This is the width and height behavior specified by CSS2.1. The width and height are applied separately to the element's content box. Draw the element's padding and borders outside the width and height.
	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.

CSS3 box-sizing property usage example

<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
width:30em;
border:1em solid;
margin: 100px auto;
}
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

Rendering:

How to use the box-sizing attribute

The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

The above is the detailed content of How to use the box-sizing attribute. For more information, please follow other related articles on the PHP Chinese website!