1、標准盒子的尺寸計算
盒子自身的尺寸:內容的寬高+兩側內邊距+兩側邊框
盒子在頁面中占位的尺寸:內容的寬高+兩側內邊距+兩側邊框+兩側外邊距
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>盒子自身尺寸</title> 6 <style> 7 div.box1{ 8 width:200px; 9 height:200px; 10 padding:20px; 11 border:5px red solid; 12 } 13 /*盒子自身的寬度:200px + 20px*2 + 5px*2 = 250px*/ 14 /*盒子自身的高度:200px + 20px*2 + 5px*2 = 250px*/ 15 16 17 div.box2{ 18 width:200px; 19 height:200px; 20 padding:20px; 21 border:5px red solid; 22 margin:50px 100px; 23 margin-left:-100px;/*當左側外邊距變為負值:盒子的占位寬度:200px + 20px*2 + 5px*2 + (-100px) + 100px= 250px*/ 24 } 25 /*盒子占位的寬度:200px + 20px*2 + 5px*2 + 100px*2= 450px*/ 26 /*盒子占位的高度:200px + 20px*2 + 5px*2 + 50*2 = 350px*/ 27 28 /* 當盒子的外邊距為負值時，盒子占位的尺寸有可能小於盒子自身的尺寸*/ 29 </style> 30 </head> 31 <body> 32 <div class="box1"></div> 33 34 box2前面的文字 35 <div class="box2"></div> 36 box2后面的文字 37 </body> 38 </html>
2、框架盒子(怪異盒子)的尺寸計算
直接將寬/高屬性設定為盒子自身的整體尺寸，如果帶有內邊距或邊框，則通過縮小內容區域來實現
實現盒子類型的轉換
box-sizing:盒子類型設置
3、思考：當盒子無法確定具體的寬高數值時，怎么辦？
問題任務:需要設定一個帶有30px邊框的盒子，整體寬度為瀏覽器窗口的50%
解決辦法:將盒子轉換成為框架盒子！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>問題任務</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 12 .box{ 13 background-color:black; 14 color:white; 15 border:30px red solid; 16 width:50%; 17 box-sizing: border-box; 18 padding:30px; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="box"></div> 24 </body> 25 </html>
4、box-sizing的實際應用:
要求一:實現一個兩欄並列的網頁布局(提示:通過float屬性實現並列)
要求二:其中左列為30%寬，右列為70%寬
要求三:兩列盒子中的內容距離盒子邊緣有一定的空白距離
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>兩列布局</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 div{ 12 float:left; 13 height:300px; 14 padding:50px; 15 box-sizing:border-box; 16 } 17 18 19 .leftbox{ 20 background-color:#0d8ddb; 21 width:30%; 22 } 23 24 .rightbox{ 25 background-color: pink; 26 width:70%; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="leftbox">左邊的盒子內容</div> 32 <div class="rightbox">右邊的盒子</div> 33 </body> 34 </html>