CSS3 border size

The box-sizing attribute

allows specific elements to be defined in a specific way to match a certain area.

Default value: Content-box

JavaScript syntax: object.style.boxSizing="border-box"

Syntax

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

content-box: Width and height are applied to the element's content box respectively. Draws the element's padding and borders outside of its width and height.

border-box: 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 are obtained by subtracting the border and padding from the set width and height respectively.

inherit: Specifies that the value of the box-sizing attribute should be inherited from the parent element.

If box-sizing: border-box; is set on the element, padding (padding) and border (border) are also included in width and height:

      
  
两个 div 现在是一样大小的!
 
 
php中文网
  

Do not use the CSS3 box-sizing property

By default, the width and height of an element are calculated as follows:

width(width) + padding(padding) + border(border) = actual width of element

height(height) + padding(padding) + border(border) = actual height of element

      
  
这个是个较小的框 (width 为 300px ，height 为 100px)。
 
 
这个是个较大的框 (width 为 300px ，height 为 100px)。