盒子模型（CSS重點(diǎn)）
css學(xué)習(xí)三大重點(diǎn)： css 盒子模型 、 浮動(dòng) 桂敛、 定位
主題思路：
目標(biāo)：
- 理解：
- 能說出盒子模型有那四部分組成
- 能說出內(nèi)邊距的作用以及對(duì)盒子的影響
- 能說出padding設(shè)置不同數(shù)值個(gè)數(shù)分別代表的意思
- 能說出塊級(jí)盒子居中對(duì)齊需要的2個(gè)條件
- 能說出外邊距合并的解決方法
- 應(yīng)用：
- 能利用邊框復(fù)合寫法給元素添加邊框
- 能計(jì)算盒子的實(shí)際大小
- 能利用盒子模型布局模塊案例
1.看透網(wǎng)頁布局的本質(zhì)
網(wǎng)頁布局中嫩舟，我們是如何把里面的文字少态，圖片幻妓，按照美工給我們的效果圖排列的整齊有序呢帖鸦？
- 看透網(wǎng)頁布局的本質(zhì)：
- 首先利用CSS設(shè)置好盒子的大小芝薇，然后擺放盒子的位置。
- 最后把網(wǎng)頁元素比如文字圖片等等作儿，放入盒子里面洛二。
- 以上兩步 就是網(wǎng)頁布局的本質(zhì)
我們明白了，盒子是網(wǎng)頁布局的關(guān)鍵點(diǎn)攻锰，所以我們更應(yīng)該弄明白 這個(gè)盒子有什么特點(diǎn)晾嘶。
2. 盒子模型（Box Model）
-
所謂盒子模型：
- 就是把HTML頁面中的布局元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器娶吞。
總結(jié)：
- 盒子模型有元素的內(nèi)容垒迂、邊框（border）、內(nèi)邊距（padding）妒蛇、和外邊距（margin）組成机断。
- 盒子里面的文字和圖片等元素是 內(nèi)容區(qū)域
- 盒子的厚度 我們成為 盒子的邊框
- 盒子內(nèi)容與邊框的距離是內(nèi)邊距（類似單元格的 cellpadding)
- 盒子與盒子之間的距離是外邊距（類似單元格的 cellspacing）
標(biāo)準(zhǔn)盒子模型
3. 盒子邊框（border）
- 語法：
border : border-width || border-style || border-color
| 屬性 | 作用 |
|---|---|
| border-width | 定義邊框粗細(xì)，單位是px |
| border-style | 邊框的樣式 |
| border-color | 邊框顏色 |
- 邊框的樣式：
- none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
- solid：邊框?yàn)閱螌?shí)線(最為常用的)
- dashed：邊框?yàn)樘摼€
- dotted：邊框?yàn)辄c(diǎn)線
3.1 邊框綜合設(shè)置
border : border-width || border-style || border-color
例如：
border: 1px solid red; 沒有順序
3.2 盒子邊框?qū)懛偨Y(jié)表
很多情況下绣夺，我們不需要指定4個(gè)邊框吏奸，我們是可以單獨(dú)給4個(gè)邊框分別指定的。
| 上邊框 | 下邊框 | 左邊框 | 右邊框 |
|---|---|---|---|
| border-top-style:樣式; | border-bottom-style:樣式; | border-left-style:樣式; | border-right-style:樣式; |
| border-top-width:寬度; | border- bottom-width:寬度; | border-left-width:寬度; | border-right-width:寬度; |
| border-top-color:顏色; | border- bottom-color:顏色; | border-left-color:顏色; | border-right-color:顏色; |
| border-top:寬度 樣式 顏色; | border-bottom:寬度 樣式 顏色; | border-left:寬度 樣式 顏色; | border-right:寬度 樣式 顏色; |
3.3 表格的細(xì)線邊框
通過表格的
cellspacing="0",將單元格與單元格之間的距離設(shè)置為0陶耍，但是兩個(gè)單元格之間的邊框會(huì)出現(xiàn)重疊奋蔚，從而使邊框變粗
-
通過css屬性：
table{ border-collapse:collapse; }- collapse 單詞是合并的意思
- border-collapse:collapse; 表示相鄰邊框合并在一起。
<style>
table {
width: 500px;
height: 300px;
border: 1px solid red;
}
td {
border: 1px solid red;
text-align: center;
}
table, td {
border-collapse: collapse; /*合并相鄰邊框*/
}
</style>
4. 內(nèi)邊距（padding）
4.1 內(nèi)邊距：
? padding屬性用于設(shè)置內(nèi)邊距烈钞。 是指 邊框與內(nèi)容之間的距離旺拉。
4.2 設(shè)置
| 屬性 | 作用 |
|---|---|
| padding-left | 左內(nèi)邊距 |
| padding-right | 右內(nèi)邊距 |
| padding-top | 上內(nèi)邊距 |
| padding-bottom | 下內(nèi)邊距 |
當(dāng)我們給盒子指定padding值之后产上， 發(fā)生了2件事情：
- 內(nèi)容和邊框 有了距離棵磷，添加了內(nèi)邊距蛾狗。
- 盒子會(huì)變大了。
注意： 后面跟幾個(gè)數(shù)值表示的意思是不一樣的仪媒。
我們分開寫有點(diǎn)麻煩沉桌，我們可以不可以簡(jiǎn)寫呢？
| 值的個(gè)數(shù) | 表達(dá)意思 |
|---|---|
| 1個(gè)值 | padding：上下左右內(nèi)邊距; |
| 2個(gè)值 | padding: 上下內(nèi)邊距 左右內(nèi)邊距 算吩； |
| 3個(gè)值 | padding：上內(nèi)邊距 左右內(nèi)邊距 下內(nèi)邊距留凭； |
| 4個(gè)值 | padding: 上內(nèi)邊距 右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距 ； |
4.3 課堂案例： 新浪導(dǎo)航
新浪導(dǎo)航欄的核心就是因?yàn)槔锩娴淖謹(jǐn)?shù)不一樣多偎巢，所以我們不方便給寬度蔼夜，還是給padding ，撐開盒子的压昼。
4.4 內(nèi)盒尺寸計(jì)算（元素實(shí)際大星罄洹）
-
寬度
Element Height = content height + padding + border （Height為內(nèi)容高度）
-
高度
Element Width = content width + padding + border （Width為內(nèi)容寬度）
盒子的實(shí)際的大小 = 內(nèi)容的寬度和高度 + 內(nèi)邊距 + 邊框
4.5 內(nèi)邊距產(chǎn)生的問題
- 問題
會(huì)撐大原來的盒子
-
解決：
通過給設(shè)置了寬高的盒子，減去相應(yīng)的內(nèi)邊距的值窍霞，維持盒子原有的大小
課堂一練
- 一個(gè)盒子寬度為100匠题， padding為 10， 邊框?yàn)?像素但金，問這個(gè)盒子實(shí)際的寬度的是（）
[√] (A) 130
(B) 135
(C) 125
-
(D) 115
100 + 20 + 10
- 關(guān)于根據(jù)下列代碼計(jì)算 盒子寬高下列說法正確的是（）
div {
width: 200px;
height: 200px;
border: 1px solid #000000;
border-top: 5px solid blue;
padding: 50px;
padding-left: 100px;
}
- (A) 寬度為200px 高度為200px
- (B) 寬度為352px 高度為306px
- (C) 寬度為302px 高度為307px
- (D) 寬度為302px 高度為252px
w 200 + 150 + 2 = 352
h 200 + 100 + 6 = 306
4.6 padding不影響盒子大小情況
如果沒有給一個(gè)盒子指定寬度韭山， 此時(shí)，如果給這個(gè)盒子指定padding冷溃， 則不會(huì)撐開盒子钱磅。
5. 外邊距（margin）
5.1 外邊距
? margin屬性用于設(shè)置外邊距。 margin就是控制盒子和盒子之間的距離
5.2 設(shè)置：
| 屬性 | 作用 |
|---|---|
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
margin值的簡(jiǎn)寫 （復(fù)合寫法）代表意思 跟 padding 完全相同似枕。
5.3 塊級(jí)盒子水平居中
- 可以讓一個(gè)塊級(jí)盒子實(shí)現(xiàn)水平居中必須：
- 盒子必須指定了寬度（width）
- 然后就給左右的外邊距都設(shè)置為auto盖淡，
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}
常見的寫法菠净，以下下三種都可以禁舷。
- margin-left: auto; margin-right: auto;
- margin: auto;
- margin: 0 auto;
5.4 文字居中和盒子居中區(qū)別
- 盒子內(nèi)的文字水平居中是 text-align: center, 而且還可以讓 行內(nèi)元素和行內(nèi)塊居中對(duì)齊
- 塊級(jí)盒子水平居中 左右margin 改為 auto
text-align: center; /* 文字 行內(nèi)元素 行內(nèi)塊元素水平居中 */
margin: 10px auto; /* 塊級(jí)盒子水平居中 左右margin 改為 auto 就闊以了 上下margin都可以 */
5.5 插入圖片和背景圖片區(qū)別
- 插入圖片 我們用的最多 比如產(chǎn)品展示類 移動(dòng)位置只能靠盒模型 padding margin
- 背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片 背景圖片 只能通過 background-position
img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景圖片更改位置 我用 background-position */
}
5.6 清除元素的默認(rèn)內(nèi)外邊距(重要)
為了更靈活方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時(shí)毅往，我們需要將元素的默認(rèn)內(nèi)外邊距清除
代碼：
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
注意：
- 行內(nèi)元素為了照顧兼容性牵咙， 盡量只設(shè)置左右內(nèi)外邊距， 不要設(shè)置上下內(nèi)外邊距攀唯。
5.7 外邊距合并
使用margin定義塊元素的垂直外邊距時(shí)洁桌，可能會(huì)出現(xiàn)外邊距的合并。
(1). 相鄰塊元素垂直外邊距的合并
- 當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)侯嘀，如果上面的元素有下外邊距margin-bottom
- 下面的元素有上外邊距margin-top另凌，則他們之間的垂直間距不是margin-bottom與margin-top之和
- 取兩個(gè)值中的較大者這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）谱轨。
解決方案：盡量給只給一個(gè)盒子添加margin值。
(2). 嵌套塊元素垂直外邊距的合并（塌陷）
- 對(duì)于兩個(gè)嵌套關(guān)系的塊元素吠谢，如果父元素沒有上內(nèi)邊距及邊框
- 父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并
- 合并后的外邊距為兩者中的較大者
解決方案：
- 可以為父元素定義上邊框土童。給個(gè)boder：1px solid transparent（透明的）；
- 可以為父元素定義上內(nèi)邊距
- 可以為父元素添加overflow:hidden工坊。
還有其他方法献汗，比如浮動(dòng)、固定王污、絕對(duì)定位的盒子不會(huì)有問題罢吃，后面咱們?cè)倏偨Y(jié)。昭齐。尿招。
6. 盒子模型布局穩(wěn)定性
-
學(xué)習(xí)完盒子模型，內(nèi)邊距和外邊距阱驾，什么情況下用內(nèi)邊距就谜，什么情況下用外邊距？
- 大部分情況下是可以混用的啊易。 就是說吁伺，你用內(nèi)邊距也可以，用外邊距也可以租谈。 你覺得哪個(gè)方便篮奄，就用哪個(gè)。
我們根據(jù)穩(wěn)定性來分割去，建議如下：
按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）窟却。
width > padding > margin
- 原因：
- margin 會(huì)有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。
- padding 會(huì)影響盒子大小呻逆， 需要進(jìn)行加減計(jì)算（麻煩） 其次使用夸赫。
- width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做。
7. ps基本操作以及常用快捷鍵：
因?yàn)榫W(wǎng)頁美工大部分效果圖都是利用ps 來做的咖城，所以茬腿，以后我們大部分切圖工作都是在ps里面完成。
- 文件--打開 -- 可以打開 我們要測(cè)量的圖片
- ctrl+r 可以打開標(biāo)尺 或者 視圖 -- 標(biāo)尺
- 右擊標(biāo)尺宜雀， 把里面的單位改為 像素
- ctrl+ 加號(hào) 鍵 可以 放大 視圖 ctrl+ 減號(hào) 縮小視圖
- 按住空格鍵切平， 鼠標(biāo)可以 變成小手 ，拖動(dòng) ps 視圖
- 用選區(qū) 拖動(dòng) 可以 測(cè)量 大小
- ctrl+ d 可以取消選區(qū) 或者旁邊空白處點(diǎn)擊一下也可以取消選區(qū)
去掉列表默認(rèn)的樣式
無序和有序列表前面默認(rèn)的列表樣式辐董，在不同瀏覽器顯示效果不一樣悴品，而且也比較難看，所以，我們一般上來就直接去掉這些列表樣式就行了苔严。 代碼如下
li { list-style: none; }
拓展@
以下我們講的CSS3部分新屬性定枷， 但是我們遵循的原則是，以下內(nèi)容届氢，不會(huì)影響我們頁面布局欠窒， 只是樣式更好看了而已。
1.圓角邊框(CSS3)
- 語法：
border-radius:length;
其中每一個(gè)值可以為 數(shù)值或百分比的形式悼沈。
技巧： 讓一個(gè)正方形 變成圓圈
border-radius: 50%;
以上效果圖矩形的圓角贱迟， 就不要用 百分比了，因?yàn)榘俜直葧?huì)是表示高度和寬度的一半絮供。
而我們這里矩形就只用 用 高度的一半就好了。精確單位茶敏。
2. 盒子陰影(CSS3)
- 語法:
box-shadow:水平陰影 垂直陰影 模糊距離（虛實(shí)） 陰影尺寸（影子大腥腊小） 陰影顏色 內(nèi)/外陰影；
- 前兩個(gè)屬性是必須寫的惊搏。其余的可以省略贮乳。
- 外陰影 (outset) 是默認(rèn)的 但是不能寫 想要內(nèi)陰影可以寫 inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色 內(nèi)/外陰影恬惯； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
CSS書寫規(guī)范
開始就形成良好的書寫規(guī)范向拆，是你專業(yè)的開始。
空格規(guī)范
【強(qiáng)制】 選擇器 與 { 之間必須包含空格酪耳。
示例：
.selector {
}
【強(qiáng)制】 屬性名 與之后的 : 之間不允許包含空格浓恳， : 與 屬性值 之間必須包含空格。
示例：
font-size: 12px;
選擇器規(guī)范
強(qiáng)制】 并集選擇器碗暗，每個(gè)選擇器聲明必須獨(dú)占一行颈将。
示例：
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
【建議】 一般情況情況下，選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)言疗，位置靠后的限定條件應(yīng)盡可能精確晴圾。
示例：
```css
/* good */
#username input {}
.comment .avatar {}
## 屬性規(guī)范
【強(qiáng)制】 屬性定義必須另起一行。
示例：
```css
/* good */
.selector {
margin: 0;
padding: 0;
}
強(qiáng)制】 屬性定義后必須以分號(hào)結(jié)尾噪奄。
示例：
```css
/* good */
.selector {
margin: 0;
}