Introduction to the use of CSS box-sizing properties (box model)

This article brings you the content of CSS in the Text-transform property to implement string conversion code, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

1. About box-sizing: property is used to change the default CSS box model used to calculate the width and height of an element.
Values are: Content-box (default value), Border-box,inherit.
A, Content-box: The width and height are applied to the element's content box, respectively. The 宽度和高度之外 inner margin and border of the drawing element.
B, Border-box: 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.

<! DOCTYPE html>


, the P property of Figure 1 Border-box the inner box size (excluding margin) to 200*50, 盒子的长=width including border, paddind, content, content=width-border*2-padding*2=170(蓝色框) ;
The P property of Figure 2 Content-box the inner box size (excluding margin) to 230*80, 盒子的长=width+border*2+padding*2=230 width=content(蓝色框) ;
C, Inherit: Specifies that the value of the Box-sizing property should be inherited from the parent element.

. box2{    width:200px;    height:50px;    padding:5px;    border:10px solid red;    Float:left;    Box-sizing:inherit;} <p class= "box" >    <p class= "Box2" > This P occupies part. </p></p>

The. Box2 inherits the property value of Box's Border-box.