- CSS一共分爲三大模塊：盒子模型、浮動、定位；其餘都是細節。
CSS盒子模型
- 所謂盒子模型就是把HTML頁面中的元素看作是一個矩形盒子，也就是一個盛裝內容的容器。
- 盒子模型共由四部分組成：
- 外邊距 margin
- 邊框 border
- 內邊距 padding
- 內容 content
盒子模型共分爲兩種：
- W3C盒子模型（標準盒模型）
- W3C盒子模型中 width = 內容區域content的寬度；height = content的高度
- 盒子的大小 = margin + border + padding + content
- IE盒子模型（怪異盒模型）
- IE盒子模型中 width = border + padding + content；height = border + padding + content；
- 盒子的大小 = margin + width（border + padding + content）
- 區別在於盒子的寬高
盒子模型如下圖所示：
盒子邊框（border）
- 邊框即所謂的那層皮，橘子皮、柚子皮、、、
- 語法：
border：border-width || border-style || border-color
- border-style：設置邊框樣式；常用屬性值如下：
- border-width：邊框寬度
- border-color：邊框顏色
盒子邊框寫法總結表
border邊框綜合設置
border: 四邊寬度 四邊樣式 四邊顏色；
表格的西線邊框
border-collapse: collapse;
圓角邊框
border-radius: 左上角 右上角 右下角 左下角;
內邊距：padding
padding-top: px 或 %; padding-right: px 或 %; padding-bottom: px 或 %; padding-left: px 或 %; /* 內邊距綜合寫法 */ padding: padding-top padding-right padding-bottom padding-left;
外邊距：margin
margin-top: px 或 %; margin-right: px 或 %; margin-bottom: px 或 %; margin-left: px 或 %; /* 外邊距綜合寫法 */ margin: margin-top margin-right margin-bottom margin-left;
- 外邊距可以實現盒子居中，需要滿足兩個條件
- 必須是塊級元素
- 盒子必須指定了寬度（width）
- 將盒子左右的外邊距 margin 都設置爲 auto ，就可以使塊級元素水平居中。
div { /* 使盒子水平居中 */ margin: 0 auto; width: 500px; }
清除盒子的內外邊距
- 只需要將值設爲0即可
/* 清除盒子內邊距 */ padding: 0; /* 清除盒子外邊距 */ margin: 0;
- 儘量不要給行內元素指定 上下 內外邊距
外邊距合併
- 相鄰塊元素 垂直邊距，以最大的的外邊距爲主，儘量避免掉
- 嵌套塊元素 外邊距會發生合併，解決方案：
- 爲父元素定義1px 的上邊框或上內邊距
- 爲父元素添加overflow：hidden
盒子模型佈局穩定性
width > padding > margin /* 優先使用寬度 */
原因：
- margin 會有外邊距合併，在低版本中還有margin 加倍的bug
- padding 會影響盒子的大小，需要進行加減計算
- width 寬度剩餘法：指定一定的寬度，剩下的不使用即可
CSS3盒模型
CSS3中可以通過box-sizing 來指定盒模型，即可指定爲content-box、border-box，這樣計算盒子大小的方式就可以分爲兩種情況：
- box-sizing：content-box 盒子大小爲 width + padding + border；content-box 爲默認值，讓元素維持W3C的標準盒模型
- box-sizing：border-box 盒子大小爲 width；而padding 和 border 是包含在 width 裏面的。
盒子陰影
語法格式：
box-shadow：水平位置 垂直位置 模糊距離 陰影尺寸 陰影顏色 內/外陰影；
屬性值：
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .border { width: 800px; height: 50px; border: 1px solid red; /* 圓角邊框：border-radius */ border-radius: 10px; /* 行高等於高度可使文字垂直居中 */ line-height: 50px; /* 使盒子水平居中 */ margin: 0 auto; } table{ width: 500px; height: 100px; border: 1px solid red; /* 合併細線表格：border-collapse */ border-collapse: collapse; } td { border: 1px solid orange; } .border-box{ width: 500px; height: 50px; border: 1px solid #ccc; padding: 20px; box-sizing: border-box; } .content-box{ width: 500px; height: 50px; border: 1px solid #ccc; padding: 20px; box-sizing: content-box; } .box-shadow{ width: 200px; height: 100px; border: 2px solid black; box-shadow: 5px 5px 6px 5px rgba(255, 0, 0, 0.4) inset; } </style> </head> <body> <div class="border">盒子邊框：border 圓角邊框：border-radius margin實現盒子水平居中：margin: 0 auto;width: 800px;</div> <br/><br/> <table> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> </table> <br/> <div class="border-box">CSS3新增特性：設置padding 和 border 值不會將盒子的width變大</div> <div class="content-box">標準盒模型：W3C</div> <br/> <div class="box-shadow">盒子陰影：box-shadow </div> </body> </html>
頁面效果
