box-sizing

爱被打了一巴掌 2022-06-03 09:17 140阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		div{
    			width: 160px;
    			height: 80px;
    			padding: 20px;
    			border: 8px solid red;
    			background: yellow;
    		}
    		.content-box{
    			box-sizing: content-box;
    		}
    		.border-box{
    			box-sizing: border-box;
    		}
    	</style>
    </head>
    <body>
    	<div class="content-box">Content box</div><br/>
    	<div class="border-box">Border box</div>
    
    	<script>
    		/*
    		 content-box:
    		 This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
    		 默认值。宽度和高度属性仅包括内容，不包含内边距，边框和外边距。
    
    		 border-box:
    		 The width and height properties include the content, the padding and border, but not the margin.
    		 宽度和高度属性包含内容，内边距和边框，但不包含外边距。
    		 */ 
    	</script>
    </body>
    </html>

![20171225095237971][]

参考链接：

[点击打开链接][Link 1]

[20171225095237971]: /images/20220603/9c876ae539c4446baff8f009ad059515.png
[Link 1]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing