Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to define and use box-sizing attributes". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to define and use box-sizing attributes".

Definition and usage of box-sizing attribute

The box-sizing property is a new property in css3 that allows you to define certain elements in some way to fit the specified area (if you need to place two boxes with borders side by side, you can set the box-sizing property to "border-box", which causes the browser to render a box with a specified width and height, and put the border and inner margin in the box)

Internet Explorer, Opera, and Chrome browsers support the box-sizing attribute, which Firefox does not yet support, but supports the-moz-box-sizing attribute instead of the box-sizing attribute

Box-sizing attribute syntax format

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

Parameter description

Content-box: this is the width and height behavior specified by CSS2.1. The width and height are applied to the content box of the element, respectively, and the inner margin and border of the element are drawn outside the width and height.

Border-box: the width and height set for the element determines 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

Example:

Css3 box-sizing attribute note body {background-color: # aaa;} div.container {width:30em;border:1em solid;} .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;} this div occupies the left half. The div occupies the right half. Thank you for your reading, the above is the content of "how to define and use the box-sizing attribute". After the study of this article, I believe you have a deeper understanding of how to define and use the box-sizing attribute. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.