Home >Web Front-end >CSS Tutorial >How to use the box-sizing attribute

How to use the box-sizing attribute

青灯夜游Original: 2019-01-31 10:01:256860browse

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;".

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;

##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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the resize attributeNext article：How to use the resize attribute

See more

How to use the box-sizing attribute

Related articles