1.1盒子模型的組成
image.png
image.png
1.2邊框border
border：border-width|border-style|border-color
| 參數(shù)值 | 說明 |
|---|---|
| border-width | 定義邊框粗細(xì)，單位是px |
| border-style | 邊框樣式 |
| border-color | 邊框顏色 |
border-style: solid 實(shí)線| dashed 虛線 | dotted 點(diǎn)線邊框
- 邊框的簡(jiǎn)寫
border:1px solid red;沒有順序 - 只設(shè)定上邊框
border-top:1px solid red;其他同理
注意事項(xiàng)：要先寫大邊框再寫小邊框
/*正確*/
border:1px solid red;/*4條邊*/
border-top:1px solid blue;/*1條邊*/
/*錯(cuò)誤*/
border-top:1px solid blue;/*1條邊*/
border:1px solid red;/*4條邊*/
1.3內(nèi)邊距padding
padding屬性用于設(shè)置內(nèi)邊距遭顶，即邊框與內(nèi)容之間的距離
| 參數(shù)值 | 說明 |
|---|---|
| padding-left | 左內(nèi)邊距 |
| padding-right | 右內(nèi)邊距 |
| padding-top | 上內(nèi)邊距 |
| padding-bottom | 下內(nèi)邊距 |
padding的復(fù)合寫法
| 值的個(gè)數(shù) | 說明 |
|---|---|
| padding：5px | 1個(gè)值张峰，代表上下左右5像素內(nèi)邊距 |
| padding：5px 10px | 2個(gè)值，代表上下5像素內(nèi)邊距,左右10像素內(nèi)邊距 |
| padding：5px 10px 20px | 3個(gè)值棒旗，代表上5像素內(nèi)邊距,左右10像素內(nèi)邊距喘批，下20像素內(nèi)邊距 |
| padding：5px 10px 20px 30px | 4個(gè)值，代表上5像素內(nèi)邊距,右10像素內(nèi)邊距，下20像素內(nèi)邊距饶深，左30像素內(nèi)邊距 |
- 當(dāng)盒子沒有指定width和height值時(shí)餐曹，padding不會(huì)撐開盒子
1.4案例：新浪導(dǎo)航欄
image.png
.nav{
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
color:#4c4c4c;
line-height: 41px;
}
.nav a{
/* a屬于行內(nèi)元素 此時(shí)必須要轉(zhuǎn)換行內(nèi)塊元素 */
display:inline-block;
/* 給a一個(gè)高度就行 */
height: 41px;
/* 設(shè)置左右內(nèi)邊距 */
padding: 0 20px;
font-size: 14px;
color:#4c4c4c;
text-decoration: none;
}
.nav a:hover{
background-color: #eee;
color:chocolate;
}
<div class="nav">
<a href="#">設(shè)為首頁</a>
<a href="#">手機(jī)新浪網(wǎng)</a>
<a href="#">移動(dòng)客戶端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">關(guān)注我</a>
</div>
1.5案例：小米導(dǎo)航欄修改
padding內(nèi)邊距可以撐開盒子，有時(shí)候也會(huì)讓我們?nèi)バ薷膶挾鹊欣澹淖志嚯x左側(cè)的距離不應(yīng)該用text-indent這樣不精確凸主。
實(shí)際開發(fā)的做法是給padding值這樣更加精確。
image.png
/*1额湘、 把a(bǔ)設(shè)置成塊級(jí)元素 */
a{
display:block;
width: 200px;
height: 40px;
background-color: #617172;
font-size: 14px;
color:#fff;
text-decoration: none;
padding-left:30px;
line-height: 40px;
}
/* 2、鼠標(biāo)經(jīng)過a給鏈接設(shè)置背景顏色 */
a:hover{
background-color: orange;
}
<a href="#">手機(jī) 電話卡</a>
<a href="#">電視 盒子</a>
<a href="#">筆記本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 兒童</a>
<a href="#">耳機(jī) 音響</a>
1.6外邊距margin
即控制盒子與盒子之間的距離
| 參數(shù)值 | 說明 |
|---|---|
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
- margin簡(jiǎn)寫方式與padding一樣
1.7外邊距典型應(yīng)用
image.png
外邊距可以讓塊級(jí)盒子水平居中旁舰，但必須滿足兩個(gè)條件
1锋华、盒子必須指定了寬度（width）
2、盒子左右的外邊距都設(shè)置為auto
.header{width:960px;margin:0 auto;}
常見的寫法箭窜，以下三種都可以：
- margin-left:auto;margin-right:auto;
- margin:auto;
- margin:0 auto
注意：以上的方法是讓塊級(jí)元素水平居中毯焕，行內(nèi)元素或者行內(nèi)塊元素水平居中給其父元素增加text-align:center即可。
1.8嵌套快元素垂直外邊距的塌陷
image.png
1.9消除內(nèi)外邊距
網(wǎng)頁元素很多都帶有默認(rèn)的內(nèi)外邊距磺樱，而且不同瀏覽器默認(rèn)的也不一致纳猫。因此我們?cè)诓季智笆紫纫宄幌戮W(wǎng)頁元素的內(nèi)外邊距。
*{
padding:0;/*消除內(nèi)邊距*/
margin:0;/*消除外邊距*/
}
- 這句話也是我們寫css的第一句話
注意：行內(nèi)元素為了照顧兼容性竹捉，盡量只設(shè)置左右內(nèi)外邊距芜辕，不要設(shè)置內(nèi)外邊距，但是轉(zhuǎn)換為塊級(jí)和行內(nèi)塊元素就可以块差。
2.0綜合案例：產(chǎn)品模塊
image.png
盒子結(jié)構(gòu)
image.png
*{
padding: 0;
margin:0;
}
body{
background-color:#f5f5;
}
.box{
width: 298px;
height: 415px;
background-color: #fff;
/* 讓塊級(jí)的盒子水平居中對(duì)齊 */
margin:100px auto;
}
.box img{
/* 讓盒子里的圖片和盒子一樣寬 */
width: 100%;
}
.review{
height: 70px;
font-size: 14px;
/* 因?yàn)檫@個(gè)段落沒有width屬性 所以padding不會(huì)撐開盒子 */
padding: 0 28px;
margin-top:30px;
}
.appraise{
font-size:12px;
color:#b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info{
font-size:14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4{
display:inline-block;
/* 文字取消加粗 */
font-weight:400;
}
a{
color:#333;
text-decoration: none;
}
.info span{
color:coral;
}
.info em{
font-style: normal;
color:darkslategrey;
margin:0 6px 0 15px;
}
<div class="box">
<img src="images/img.jpg" alt="耳機(jī)">
<p class="review">快遞牛整體不錯(cuò)藍(lán)牙可以說秒連</p>
<div class="appraise">來自于117384232的評(píng)價(jià)</div>
<div class="info"><h4><a href="#">Redmi AirDots真無線藍(lán)...</a></h4>
<em>|</em>
<span>99.9圓</span>
</div>
</div>
2.1案例2：快報(bào)模塊
image.png
盒子布局
image.png
*{
padding: 0;
margin: 0;
}
li{
/* 去掉li標(biāo)簽前面的小圓圈 */
list-style: none;
}
.box{
width:248px;
height: 163px;
border:1px solid #ccc;
margin:100px auto;
}
.box h3{
height: 32px;
border-bottom:1px dotted #ccc;
font-size: 14px;
font-weight: 400;
line-height: 32px;
padding-left:15px ;
}
.box ul li a{
font-size: 12px;
color:#666;
text-decoration: none;
}
.box ul li a:hover{
text-decoration: underline;
}
.box ul li{
height: 23px;
line-height: 23px;
padding-left: 20px;
}
.box ul{
margin-top: 5px;
}
<div class="box">
<h3>品優(yōu)購快報(bào)</h3>
<ul>
<li><a href="#">【特惠】爆款耳機(jī)5折秒侵续！</a></li>
<li><a href="#">【特惠】母親節(jié)，健康好禮低至5折憨闰！</a></li>
<li><a href="#">【特惠】爆款耳機(jī)5折秒状蜗！</a></li>
<li><a href="#">【特惠】9.9元洗100張照片！</a></li>
<li><a href="#">【特惠】長(zhǎng)虹智能空調(diào)立省1000鹉动！</a></li>
</ul>
</div>
