盒子模型
盒子模型
- 盒子模型有元素內容、邊框（border）、內邊距（padding）、外邊距（margin）組成；
- 盒子里面的文字和圖片等元素是內容區域；
- 盒子的厚度 我們稱為 盒子的邊框；
- 盒子內容與盒子之間的距離是內邊距；
- 盒子與盒子之間的距離是外邊距；
標准盒子模型
盒子邊框（border）
border: border-width || border-style || border-color
| 屬性 | 作用 |
|---|---|
| border-width | 定義邊框粗細，單位是 px |
| border-style | 邊框的樣式 |
| border-color | 邊框顏色 |
border-style ：
- none：沒有邊框即忽略所有邊框的寬度（默認值）
- solid：邊框為單實線；
- dashed：邊框為虛線；
- dotted：邊框為點線；
表格細線邊框
- 通過表格的
cellspacing="0"，將單元格與單元格之間的距離設為 0 - 但是兩個單元格之間的邊框會出現邊框，從而使邊框變粗；
- 通過設置 css 屬性
table {border-collapse: collapse;}表示相鄰邊框合並在一起；
<style>
table,
th,
td {
border: 1px dashed #ccc;
border-collapse: collspase;
}
</style>
內邊距（padding）
| 屬性 | 作用 |
|---|---|
| padding-top | 上內邊距 |
| padding-bottom | 下內邊距 |
| padding-left | 左內邊距 |
| padding-right | 右內邊距 |
當我們為盒子添加了內邊距之后
- 內容和邊框有了距離；
- 盒子變大了；
復合寫法
padding: 10px 20px 30px 40px;
- 一個值 ： 上下左右 10 px；
- 兩個值 ： 上下10px，左右20px；
- 三個值 ： 上10px，左右20px，下30px；
- 四個值 ： 上10px，右20px，下30px，左40px；順時針
內盒尺寸計算 （元素實際大小）
- 寬度：ElementHeight = content height + padding + border
- 高度：ElementWidth = content width + padding + border
- 盒子實際大小 = 內容的寬度和高度 + 內邊距 + 邊框
padding不影響盒子大小的情況
如果沒有給一個盒子指定寬度，此時如果給這個盒子指定 padding，則不會撐開盒子。
外邊距
| 屬性 | 作用 |
|---|---|
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
復合寫法
margin 值的簡寫代表含義，與 padding 值完全一致
塊級盒子水平居中
- 讓一個塊級盒子實現水平居中，必須：
- 盒子必須指定寬度；
- 然后給左右的外邊距設置為 auto
- 實際工作中常用
.container {width: 960px; margin: 0 auto;} - 常見的寫法包含：
- margin-left：auto；margin-right：auto；
- margin：auto；
- margin：0 auto；
文字居中與盒子居中的區別
- 文字水平居中是
text-align: center;，而且還可以讓行內元素和行內塊元素居中對齊 - 盒子水平居中是 左右 margin 改為 auto；
插入圖片和背景圖片區別
- 插入圖片 用的最多的是比如產品類 移動位置只能靠盒模型 padding margin
- 背景圖片我們一般用於小圖標或者超大背景圖片，背景圖片只能通過 background-position
img {
width: 200px; /* 更改插入圖片的大小 */
height: 210px;
margin-top: 30px; /* 更改插入圖片的位置 可以用 padding 或 margin 盒模型 */
margin-left: 50px;
}
div {
width: 400px;
height: 400px;
border: 1px dashed #ccc;
background: #fff url(image/image.png) no-repeat scroll;
background-position: 30px 50px; /* 背景圖片更改位置 */
}
清除元素默認的內外邊距
* {
margin: 0;
padding: 0;
}
注意：行內元素為了照顧兼容性，盡量只設置左右內外邊距，不要設置上下內外邊距；
外邊距合並
使用 margin 定義塊元素的垂直外邊距時，可能會出現外邊距合並
相鄰塊元素垂直外邊距的合並
- 當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距 margin-bottom 下面的元素有上外邊距 margin-top，則他們之間的垂直間距是取兩者值中較大者，這種現象稱為相鄰塊元素垂直外邊距合並（也稱外邊距塌陷）
嵌套塊元素垂直外邊距合並（塌陷）
- 對於兩個嵌套關系的塊元素，如果父元素沒有上邊距及邊框，父元素的上外邊距會與子元素的上外邊距發生合並；合並后取兩者中較大者；
- 解決方案：
- 可以為父元素定義上邊框
- 可以為父元素定義上內邊距
- 可以為父元素添加overfolw：hidden
- 還有其他的方法比如浮動、固定、絕對定位的盒子不會有問題；
圓角邊框 （CSS3）
border-radius: length;
/* 數值也可以為百分比形式，如果需要一個盒子變成圓 可以指定 50% */
盒子陰影 （CSS3）
box-shadow: 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內外陰影
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
| 值 | 描述 |
|---|---|
| h-shadow | 必須。水平陰影位置。允許負值 |
| v-shadow | 必須。垂直陰影位置。允許負值 |
| blur | 可選，模糊距離 |
| spread | 可選，陰影的尺寸 |
| color | 可選，陰影的顏色。十六進制 |
| inset | 可選，將外部陰影（outset）改為內部陰影 |