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

This article mainly shows you "how to use the box-sizing attribute in css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use the box-sizing attribute in css" this article.

CSS3box-sizing attribute

Purpose: allows you to define specific content that adapts to an area in an exact way.

Description: InternetExplorer, Chrome, Safari, and Opera support the box-sizing attribute. Firefox requires the prefix-moz-.

Syntax:

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

Value description

Content-box

This is the width height behavior specified by CSS2.1.

Width and height are applied to the content box of the element, respectively.

Draw the inner margins and borders of the element beyond the width and height.

Border-box

The width and height set for the element determine the bounding box of the element.

That is, any inner margins 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 inner margin from the set width and height, respectively.

Inherit specifies that the value of the box-sizing attribute should be inherited from the parent element.

An example of using the CSS3box-sizing attribute

Div.container

{

Width:30em

Border:1emsolid

Margin:100pxauto

}

Div.box

{

Box-sizing:border-box

-moz-box-sizing:border-box;/*Firefox*/

-webkit-box-sizing:border-box;/*Safari*/

Width:50%

Border:1emsolidred

Float:left

}

This div occupies the left half.

This div occupies the right half.

The above is all the content of the article "how to use the box-sizing attribute in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.