This article introduces the problem of using the new attribute Box-sizing of CSS3 to solve the problem of setting Width: 100%before setting Padding or Margin to exceed the parent element. Friends in need can refer to reference.
grammarbox-sizing: content-box | border-box | inherit;Value 1. Content-box
This is a height of width specified by CSS2.1.
The width and height are applied to the content box of the element.
Draw the interior and frames of the element outside the width and height.
Value 2, border-boxThe width and height of the element determine the border box of the element.
That is to say, any interior distance and border 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 the interior distance from the set width and height.
Value III. InheritThe regulations should inherit the value of the Box-sizing attribute from the parent element.
example <! Doctype html> <html> <head> <Steyle> DIV.Container {width: 100%; border: 1EM solid; padding: 15px; box-sizing: border-box;} div.box {box-sizing: b order -Box; -moz-Box-sizing: Border-BOX; / * Firefox * /-WEBKIT-BOX-sizing: border-box; / * Safari * /width: 100%; border: 1em solid red; float: left; padding: 15px;} </style> </head> <body> <div class = container> <div class = box> This div takes the left half. </div> </div> </body> </html> SummarizeThe above is all the contents of this article. I hope that the content of this article will help everyone's learning or work. If you have any questions, you can leave a message to communicate.