是w3c規定乙個瀏覽器如何渲染、顯示乙個元素，根據元素的種類分為塊級元素盒模型和行內元素盒模型
1.width/height（content box 內容區)
.content box
存放塊級元素的內容
塊級元素的width和height值在標準盒模型下，定義了乙個塊級元素能夠存放內容的區域大小，元素的內容從width和height的左上角原點開始排列內容
2.border（border box 邊框區）
border-color:顏色; 預設與color樣式一致
/* 顏色值: 十六進製制, rgb, 關鍵字, transparent(使用父元素的顏色)*/
border-width邊框寬度
border-style:種類; 預設是none 就是沒有邊框
/*dotted圓點邊框, double雙邊框, dashed虛線邊框,solid實線邊框 */
塊級元素的border的作用是在元素的內容區外加上乙個邊框線
邊框樣式的格式為:broder:寬度 種類 顏色;/復合寫法/
3.border（border box 邊框區）
元素的邊框可以單獨給某一方向設定
比如:設定頂部邊框:border-top:寬度 種類 顏色;
設定底部邊框:border-bottom:寬度 種類 顏色;
設定左部邊框:border-left:寬度 種類 顏色;
設定右部邊框:border-right:寬度 種類 顏色
4.padding（padding box 內邊距區
塊級元素的padding的作用是在元素的內容區與邊框線之間加乙個內部間距,用
來隔開元素內容和邊框線, 使得元素內容更加突出明顯, 預設情況下, padding區域的顏色和內容區的顏色保持一致
padding也可以單獨設定四個方向不同的值, 具體的概念與border相似
標準盒模型的整體概念:
塊元素在網頁內容中實際佔據空間的大小是:
實際佔據寬度=width+左padding+右padding+左border+右border
實際佔據高度=height+上padding+下padding+上border+下borde
尺寸資料詳解
外邊距的簡寫規則:
margin:10px;
/* 元素的上右下左四個外邊距的值都是10px*/
margin:10px 20px;
/* 元素的上下兩個外邊距的值都是10px , 左右兩個都是20px*/
margin:10px 20px 30px;
/* 元素的上外邊距的值是10px , 左右兩個都是20px, 下外邊距是30px*/
margin:10px 20px 30px 40px;
/* 元素的上外邊距的值是10px , 右是20px, 下外邊距是30px,左外邊距是40px*/
內邊距的簡寫規則與外邊距相同
塊元素在網頁內容中實際佔據空間的大小在兩種不同的盒模型下的表現結果是:
標準盒模型：
實際寬尺寸=width+左padding+右padding+左border+右border
內容區寬尺寸=width
怪異盒模型：
實際寬尺寸=width
內容區寬尺寸=width-左border-右border-左padding-右padding
高度同理可得…
父子元素外邊距合併解決方案(給父元素加乙個邊框或是padding)
03 CSS盒模型概念及企業應用規則
border top width style color 寬度 種類 顏色 border right width style color 寬度 種類 顏色 border bottom width style color 寬度 種類 顏色 border left width style color 寬...
CSS 盒模型應用
預設情況下，width和height設定的是內容盒寬高 矛盾 衡量設計稿的時候往往使用的是邊框盒，但設定weight和height，則設定的是內容盒 方法 精確計算 css3屬性 box sizing 預設情況下，背景覆蓋邊框盒 可以通過background clip進行修改 background ...
css盒模型 css核心概念
頁面中所有元素都被看成是乙個矩形盒子，盒子包含元素內容 內邊距 padding 邊框 border 和外邊距 margin 計算盒子大小方式 box sizing 預設計算方式 width 寬 padding 內邊距 border 邊框 元素實際寬度 height 高 padding 內邊距 bor...