關於padding值不包含在width裏面的問題，可能和box-sizing有關

時間 2019-11-09

標籤關於 padding 包含 width 裏面問題可能 box sizing 有關简体版

原文原文鏈接

這個是w3school對box-sizing的解釋：css

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

值	描述
content-box	這是由 CSS2.1 規定的寬度高度行爲。html 寬度和高度分別應用到元素的內容框。瀏覽器在寬度和高度以外繪製元素的內邊距和邊框。學習
border-box	爲元素設定的寬度和高度決定了元素的邊框盒。測試就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。spa 經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。ssr
inherit	規定應從父元素繼承 box-sizing 屬性的值。

值

描述

content-box

這是由 CSS2.1 規定的寬度高度行爲。html

寬度和高度分別應用到元素的內容框。瀏覽器

在寬度和高度以外繪製元素的內邊距和邊框。學習

border-box

爲元素設定的寬度和高度決定了元素的邊框盒。測試

就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。spa

經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。ssr

inherit

規定應從父元素繼承 box-sizing 屬性的值。

當box-sizing: centent-box時：code

盒子的width = css中設置的width值htm

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>CSS box-sizing屬性學習</title>
</head>
<style type="text/css">
div{
	width: 80px;
	border: 2px solid green;
	margin: 20px;
	padding: 20px;
	font-size: 20px;
	color: red;
	font-family: "Microsoft YaHei";

	box-sizing: content-box;
}
</style>
<body>
<div>
	這是文字
</div>
</body>
</html>

當box-sizing: border-box時：blog

盒子的width = css中設置的width值 - 左右padding值 - 左右border值

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>CSS box-sizing屬性學習</title>
</head>
<style type="text/css">
div{
	width: 80px;
	border: 2px solid green;
	margin: 20px;
	padding: 20px;
	font-size: 20px;
	color: red;
	font-family: "Microsoft YaHei";

	box-sizing: border-box;
}
</style>
<body>
<div>
	這是文字
</div>
</body>
</html>

不設置box-sizing屬性時，在標準模式下，應該默認爲box-sizing: centent-box的形式解析盒子模型；在某些瀏覽器（如IE）的怪異模式下，會致使box-sizing: border-box的效果。（此句僅爲猜想，目前手頭的電腦找不到各類低版本的瀏覽器進行測試了）

參考（有些參考僅爲網上博主的言論，勿全信）：

http://www.w3school.com.cn/cssref/pr_box-sizing.asp【w3school介紹box-sizing屬性】
http://blog.sina.com.cn/s/blog_877284510101kt87.html【CSS3 Box-sizing屬性以及解決兼容性的一些作法】
http://www.cnblogs.com/jenry/archive/2013/01/05/2846557.html【瀏覽器的標準模式和怪異模式】
https://www.zhihu.com/question/20691294【爲何「box-sizing:border-box」沒有被普遍採用？】

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。