目錄
一、CSS簡介
1.CSS是什么？
2.CSS的作用
3.CSS的構(gòu)成
二、CSS選擇器
1.基礎(chǔ)選擇器
（1）.標(biāo)簽選擇器
（2）類選擇器
（3）標(biāo)簽選擇器
(4) 通配符選擇器
2.復(fù)合選擇器
（1）后代選擇器（包含選擇器）
（2）子選擇器
（3）并集選擇器
（4）偽類選擇器
?三、基本屬性
1.字體屬性?
?1.1 字體系列?font-family
1.2 字體大小 font-size
?1.3 字體粗細(xì) font-weight
? ? 1.4 文字樣式 font-style
?1.5? ?字體符合屬性
2. 文本屬性?
2.1 文本顏色
? ? 2.2 文本對齊
? ? 2.3 裝飾文本
? ? 2.4 文本縮進(jìn)?（首行縮進(jìn)）
? ? 2.5 行間距
3.背景
3.1 背景顏色
3.2? 背景圖片
?3.3? ?背景平鋪
3.4? 背景圖片位置
?3.5?背景圖片固定(背景附著)
?3.6?背景復(fù)合寫法
?? ?背景色半透明
四、引入方式
1.行內(nèi)樣式表（行內(nèi)式）
2.內(nèi)部樣式表（嵌入式）
?3.外部樣式表（鏈接式）
?五、元素顯示模式
1.塊元素
2.行內(nèi)元素
3. 行內(nèi)塊元
? 4. 元素顯示模式轉(zhuǎn)換
?六、三大特性
1.層疊性
?2. 繼承性
?2. 優(yōu)先級
?七、盒子模型
1. 組成
?1.1 boder邊框
? 1.2? padding內(nèi)邊距
?? ?1.3margin外邊距
2. 圓角邊框
?3. 盒子陰影
4. 文字陰影
?八、浮動
?1.格式
?2. 浮動的特性
九、清除浮動?
一、CSS簡介
1.CSS是什么？
CSS是層疊樣式表（Cascading Style Sheet ）的簡稱
是一種標(biāo)記語言，用于設(shè)置頁面的外觀樣式
實(shí)現(xiàn)結(jié)構(gòu)與樣式分離，便于開發(fā)維護(hù)
2.CSS的作用
用于美化頁面布局頁面
3.CSS的構(gòu)成
CSS有選擇器和一條及多條聲明組成
二、CSS選擇器
CSS選擇器：根據(jù)不同需求把不同的標(biāo)簽選出來（選擇標(biāo)簽用的）
CSS選擇器分為兩類：基礎(chǔ)選擇器和符合選擇器
1.基礎(chǔ)選擇器
（1）.標(biāo)簽選擇器
也稱為元素選擇器，用html標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類型標(biāo)簽指定統(tǒng)一的CSS樣式
- ?? ?作用：標(biāo)簽選擇器可以把某一類標(biāo)簽全部選擇出來，如所有的<div>標(biāo)簽
- ?? ?優(yōu)點(diǎn)：能快速為頁面同類型的標(biāo)簽統(tǒng)一設(shè)置格式
- ?? ?缺點(diǎn)：不能設(shè)計(jì)差異化樣式，只能選擇全部的當(dāng)前標(biāo)簽
（2）類選擇器
差異化選擇不同的標(biāo)簽，單獨(dú)選一個(gè)或者某幾個(gè)標(biāo)簽
書寫格式：
- CSS: ? "."+"自定義的類名"
- HTML:“class” 引用
- 類選擇器使用'."進(jìn)行表示，后面緊跟類名（自定義）
多類名選擇器?
可以給一個(gè)標(biāo)簽指定多個(gè)類名
1.書寫格式
- ?? ??? ?在標(biāo)簽class中寫多個(gè)類名
- ?? ??? ?多個(gè)類名用空格分開
- ?? ??? ?這個(gè)標(biāo)簽可以分別具有這些類名的樣式
2.使用場景
- ?? ??? ?可以把標(biāo)簽元素相同的樣式放到一個(gè)類中
- ?? ??? ?這些標(biāo)簽可以調(diào)用這個(gè)公共類，在單獨(dú)調(diào)用獨(dú)有的類
- ?? ??? ?節(jié)省CSS代碼，方便統(tǒng)一修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
</body>
</html>
（3）標(biāo)簽選擇器
HTML：設(shè)置id選擇器 ，CSS： “#”來定義
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 150px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
#blue {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box" id="blue"></div>
</body>
</html>
?? 與類選擇器的區(qū)別
- 類選擇器（class）可多次使用，好比一個(gè)人可以有多個(gè)名字，同個(gè)名字可以被多個(gè)人使用
- id選擇器相當(dāng)于身份證，具有唯一性，不可重復(fù)
- d選擇器和類選擇器區(qū)別在于使用次數(shù)上
- 類選擇器用的最多，id選擇器一般用于頁面唯一性的元素上，和JavaScript搭配使用?
(4) 通配符選擇器
? ? ? ?“ * ”定義，表示選取頁面中所有元素,通配符選擇器不需要調(diào)用，自動給所有的元素使用樣式
?? ??? ?特殊情況才使用?
* {
margin: 0;
padding: 0;
}
?用于設(shè)置頁面的內(nèi)外邊距
2.復(fù)合選擇器
由兩個(gè)或者多個(gè)基礎(chǔ)選擇器通過不同方式組合而成（更準(zhǔn)確，高效的選擇目標(biāo)元素）
（1）后代選擇器（包含選擇器）
元素1 ? 元素2 ? {樣式聲明}
- ? ? ? ? 元素1和元素2中間用空格隔開
- ?? ??? ?元素1時(shí)父級，元素2時(shí)子級，最終選擇的是元素2
- ?? ??? ?元素2 可以是兒子也可以是孫子，是元素1的后代即可
- ?? ??? ?元素1 和元素2可以是任意基礎(chǔ)選擇器?
h1 span {
color: blue;
font-size: 12px;
font-weight: 400;
}
（2）子選擇器
? ? ? ? 只能選擇最近一級的子元素
元素1>元素2 {樣式聲明}
- 元素1和元素2中間用大于號隔開
- 元素1是父級，元素2是子級，最終選擇的是元素2
- 元素2只能是親兒子?
h1>span {
color: blue;
font-size: 12px;
font-weight: 400;
}
<h1> 沁園春·長沙 <span>【毛澤東】</span> </h1>
?
（3）并集選擇器
可以選擇多組標(biāo)簽，同時(shí)為他們定義相同的樣式
元素1 ， 元素2{樣式聲明}
- 元素1和元素2中間用逗號隔開
- 逗號為“和”的意思
- 通常用于集體聲明?
.p1,
.p3,
.p5,
.p7 {
color: blue;
font-size: 20px;
}
<p class="p1">獨(dú)立寒秋， <span>湘江北去</span> ，橘子洲頭。</p>
<p class="p3">鷹擊長空 ， <span>魚翔淺底</span> ，萬類霜天競自由。</p>
<p class="p5">攜來百侶曾游，憶往昔崢嶸歲月稠。</p>
<p class="p7">指點(diǎn)江山，激揚(yáng)文字，糞土當(dāng)年萬戶侯。</p>
?
（4）偽類選擇器
向選擇器添加特殊的效果
用“：”表示——例? ?a:hover
a:hover {
background-color: #ff6700;
}偽類選擇器
鏈接偽類選擇器
- ?a:link? ???選擇所有未被訪問的鏈接
- ?a:visited? ?選擇所有已被訪問的鏈接
- ?a:hover選擇鼠標(biāo)指針位于其上的鏈接
- ?a:active選擇活動鏈接（鼠標(biāo)按下未彈起的鏈接）
注意事項(xiàng)
- ?按照LVHA順序：link，visited，hover，active
- ?鏈接在瀏覽器中有默認(rèn)樣式，需要給鏈接單獨(dú)指定樣式
:focus 偽類選擇器
- 選取獲得焦點(diǎn)的表單元素
- 一般來說用于<input>類表單?
?三、基本屬性
1.字體屬性?
?1.1 字體系列?font-family
?body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}
- 各種字體之間必須使用英文的逗號隔開
- ?多個(gè)單詞組成的字體加引號
- 常見的字體：body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}
1.2 字體大小 font-size
font-size:16px;
- ?px（像素）大小是常用單位
- ?谷歌默認(rèn)大小16px
- 不同瀏覽器默認(rèn)值不同，盡量給一個(gè)明確的值
- body指定整個(gè)頁面文字大小，標(biāo)題除外
?1.3 字體粗細(xì) font-weight
font-weight: 400;
- normal? ? ? ? ? 默認(rèn)值，不加粗
- ?bold? ? ? ? ? ? ?加粗
- 100-900? ? ? ?400等同于normal，700等同于bold，數(shù)字后面不跟單位
? ? 1.4 文字樣式 font-style
font-style:normal;
- ?normal? ? ? ? 默認(rèn)值，不傾斜
- ? italic? ? ? ? ??顯示斜體字樣
?1.5? ?字體符合屬性
格式：font : font-style ?font-weight ?font-size/line-height ? font-family;
- ?使用font屬性時(shí)，不能更換順序，以空格隔開
- 不需要設(shè)置的屬性可以省略，但必須保留font-size和font-family，否則font屬性不起作用
2. 文本屬性?
2.1 文本顏色
color： red ；
- 預(yù)定義的顏色值 ：black，skyblue等
- 十六進(jìn)制
- RGB代碼
? ? 2.2 文本對齊
?text-align：center;
? ? ? ? ? ? ? ? ? ? ?屬性：?
| left |
?文本左對齊 |
| right? | 文本右對齊 |
| center? | 文本居中 |
? ? 2.3 裝飾文本
text-decoration
? ? ? ? ? ? ? ? ? ? ? 屬性：?
| none? | 默認(rèn)沒有下劃線 |
| underline | 下劃線 |
| overline | 上劃線 |
| line-through | 刪除線 |
? ? 2.4 文本縮進(jìn)?（首行縮進(jìn)）
text-indent：2em;
? ? ? ? ? ? ? ? ? ? 屬性：
| ?px | 長度可以時(shí)負(fù)值 |
| ?em | 相對單位，相當(dāng)于當(dāng)前元素的1個(gè)文字大小 |
? ? 2.5 行間距
line-height：20px；
- ?行間距為上間距+文本高度+下間距
3.背景
給頁面元素添加背景樣式
3.1 背景顏色
- ? background-color：red；
- ? 默認(rèn)背景顏色transparent(透明)
3.2? 背景圖片
background-image：url(鏈接)；
div {
background: url(images/1.png);
}- ?none? ? ? ? ? ? ?無背景圖（默認(rèn)）
- ?url? ? ? ? ? ? ? ? ?使用相對或絕對地址指定背景圖像
?3.3? ?背景平鋪
?background-repeat：no-repeat；
- repeat? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?背景圖片平鋪（默認(rèn)）
- no-repeat? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 不平鋪
- repeat-x? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 橫向上平鋪
- repeat-y? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 縱向上平鋪
3.4? 背景圖片位置
?background-position：top center；
| 方位名詞 | 兩個(gè)值的順序無關(guān) 指定一個(gè)方位名詞，另一個(gè)值省略，則第二個(gè)值默認(rèn)居中對齊 |
| 精確單位 | 參數(shù)值有精確的坐標(biāo)，順序一定是x在前 只指定一個(gè)數(shù)值，該數(shù)值為x坐標(biāo)，另一個(gè)默認(rèn)垂直居中 |
| 混合單位 | 參數(shù)值是精確單位和方位名詞混合使用 第一個(gè)值是x坐標(biāo)，第二個(gè)值是y坐標(biāo) |
?3.5?背景圖片固定(背景附著)
? background-attachment：fixed；
- ?scroll? ? ? ? ? ? ? ? ? ? ? ? ?背景圖片隨著對象內(nèi)容滾動
- ?fixed? ? ? ? ? ? ? ? ? ? ? ? ? 背景圖像固定
?3.6?背景復(fù)合寫法
background：背景顏色 背景圖片 背景平鋪 背景圖像固定 背景圖片位置
body {
background: url(images/bg.jpg) no-repeat center top fixed;
}
?? ?背景色半透明
?background：rgba（0，0，0，0.3）
.subnav {
float: left;
width: 190px;
height: 421px;
background: rgba(0, 0, 0, .3);
}- rgba（red，green，blue，alpha）
- 最后參數(shù)為alpha（透明度），取值范圍：0~1
- 可以把0.3寫成.3
- 盒子背景半透明，盒子內(nèi)容不受影響?
四、引入方式
1.行內(nèi)樣式表（行內(nèi)式）
?在元素標(biāo)簽內(nèi)部的style屬性中設(shè)定CSS樣式（適合修改簡單樣式）
<div class="red" style="background-color: red;">123</div>- ?? ??? ??? ?style其實(shí)就是標(biāo)簽的屬性
- ?? ??? ??? ?雙引號，符合CSS規(guī)范
- ?? ??? ??? ?可以控制當(dāng)前的標(biāo)簽樣式
- ?? ??? ??? ?結(jié)構(gòu)樣式混亂
2.內(nèi)部樣式表（嵌入式）
? 將CSS代碼抽取出來單獨(dú)放到<style>標(biāo)簽中
<style>
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
</style>- ? ? ? ? ? ? 一般放在<head>標(biāo)簽中，理論上可以放到任何地方
- ?? ??? ??? ?控制整個(gè)頁面的元素樣式設(shè)置
- ?? ??? ??? ?部分結(jié)構(gòu)和樣式相分離
?3.外部樣式表（鏈接式）
?新建一個(gè)后綴為.css的樣式文件，把CSS代碼都放入此文件中
<link rel="stylesheet" href="style.css">
- ?? ??? ?在HTML頁面中，使用<link>標(biāo)簽引入這個(gè)文件
- ?? ??? ?<link ?rel="stylesheet" ?href="css文本路徑">
- ? ? ? ??結(jié)構(gòu)和樣式分離?
?五、元素顯示模式
1.塊元素
?<h1~h6>,<p>,<div>,<ul>,<ol>,<li>
- ? ? ? ? ? ? ? ? 一行只能放一個(gè)塊元素
- ?? ??? ??? ??? ?可以設(shè)置寬度，高度
- ?? ??? ??? ??? ?默認(rèn)寬度是容器的100%
- ?? ??? ??? ??? ?可以包含任何標(biāo)簽
?? ??注意：
- ?? ??? ??? ??? ?<p>標(biāo)簽里面不能放塊級元素，特別不能放<div>
- ?? ??? ??? ??? ?h1~h6也是文字類塊級標(biāo)簽，不能放其他塊級元素
2.行內(nèi)元素
?<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<u>,<span>
- ? ? ? ? ? ? ? ?? 一行可以放多個(gè)行內(nèi)元素
- ?? ??? ??? ??? ?不能直接設(shè)置寬度高度
- ?? ??? ??? ??? ?本身內(nèi)容的寬度
- ?? ??? ??? ??? ?只能容納文本或者其他行內(nèi)元素
? ?注意：
- ?? ??? ??? ??? ?鏈接里面不能再放鏈接
- ?? ??? ??? ??? ?特殊情況鏈接<a>里面可以放塊級元素
- ? ? ? ? ? ? ? ? 但是給<a>轉(zhuǎn)換一下會計(jì)模式最安全
3. 行內(nèi)塊元素
<img/>,<input/>,<td>
- ? ? ? ? ? ? ? ?同時(shí)具有塊元素和行內(nèi)元素的特點(diǎn)
- ?? ??? ??? ??? ?一行可以放多個(gè)行內(nèi)元素
- ?? ??? ??? ??? ?可以設(shè)置寬度，高度,外邊距及內(nèi)邊距
- ?? ??? ??? ??? ?本身內(nèi)容的寬度
? ? ? ? ? ??
? ?4. 元素顯示模式轉(zhuǎn)換
- ?display:block;?轉(zhuǎn)換為塊元素
- ?display:inline;轉(zhuǎn)化為行內(nèi)元素
- display:inline-block;轉(zhuǎn)化為行內(nèi)塊
?六、三大特性
1.層疊性
相同選擇器設(shè)置相同的樣式（解決樣式?jīng)_突）
- ?? ??? ?遵循就近原則
- ?? ??? ?樣式不沖突不會層疊
?兩個(gè)相同的樣式會遵循就近原則執(zhí)行更靠近元素的哪一個(gè)樣式，下面代碼中skyblue更靠近div，所以現(xiàn)實(shí)的顏色為藍(lán)色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div {
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
?2. 繼承性
（1）? ?子標(biāo)簽會繼承父標(biāo)簽的某些樣式
?? ??? ?子元素繼承父元素的樣式（例：text- ，font- ，line-等元素開頭及color元素
（2）? 行高的繼承性
?font ：12px/1.5 ?microsoft yahei;
- ? ? ? ? ? ? 行高可以跟單位也可以不跟單位
- ?? ??? ??? ?子元素沒有設(shè)置行高會繼承父元素的行高
- ?? ??? ??? ?當(dāng)前子元素的文字大小*1.5
- ?? ??? ??? ?body行高設(shè)為1.5，最大的優(yōu)勢是子元素可以根據(jù)自己的文字大小自動調(diào)節(jié)行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
font: 12px/1.5 'microsoft yahei';
}
</style>
</head>
<body>
<div>
<p>123</p>
</div>
</body>
</html>
?
?2. 優(yōu)先級
?同一個(gè)元素指定多個(gè)選擇器，會有優(yōu)先級產(chǎn)生 。
? ? ? ? 選擇器相同，執(zhí)行層疊性
?? ??? ?選擇器不同，根據(jù)選擇器權(quán)重執(zhí)行
- 選擇器權(quán)重
| ?繼承 或者“ * ” | 0，0，0，0 |
| 元素選擇器 | 0，0，0，1 |
| 類選擇器，偽類選擇器 | ?0，0，1，0 |
| ID選擇器 | 0，1，0，0 |
| 行內(nèi)樣式style="" | 1，0，0，0 |
| ?！important | 無窮大 |
?注意點(diǎn)
- ?? ??? ?權(quán)重由4位數(shù)字組成，不會進(jìn)位
- ?? ??? ?等級判斷從左到右
- ?? ??? ?繼承的權(quán)重是0
- ?? ??? ?如果元素沒有直接選中，不管父元素權(quán)重多高，子元素繼承的權(quán)重都為0權(quán)重疊加
權(quán)重疊加
復(fù)合選擇器，會有權(quán)重疊加，需要計(jì)算權(quán)重
- ?? ??? ??? ?dix ul li? ? ? ? ? ? ?0,0,0,3
- ?? ??? ??? .nav ul il? ? ? ? ?? ?0,0,1,2
- ?? ??? ??? ?a:hover? ? ? ? ? ? 0,0,1,1
- ?? ??? ??? ?.nav a? ? ? ? ? ? ? 0,0,1,1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
background-color: skyblue;
}
div {
width: 200px;
height: 200px;
background-color: pink;
font: 12px/1.5 'microsoft yahei';
}
</style>
</head>
<body>
<div class="box">
<p>123</p>
</div>
</body>
</html>
?七、盒子模型
? 網(wǎng)頁布局本質(zhì)——利用css擺盒子
??準(zhǔn)備好相關(guān)的網(wǎng)頁元素，基本上是盒子，利用css設(shè)置好盒子樣式，擺到相應(yīng)位置，往盒子裝內(nèi)容
1. 組成
?1.1 boder邊框
| ?border-width | 邊框粗細(xì) | 單位 px |
| border-style | 邊框樣式 | ?soild ?實(shí)線邊框? ?dashed ? 虛線邊框??dotted ?點(diǎn)線邊框 |
| border-color | 邊框顏色 |
?復(fù)合寫法：border: 1px solid red; ?沒有順序
邊框分開寫法
- ?border-top: 1px solid red;? ? ? ? ? ? ? ? ? ? ? ? ? ?只設(shè)定上邊框
- ?border-bottom: 1px solid red;? ? ? ? ? ? ? ? ? ? ?只設(shè)定下邊框
- ?border-left: 1px solid red;? ? ? ? ? ? ? ? ? ? ? ? ? ?只設(shè)定左邊框
- ?border-right: 1px solid red;? ? ? ? ? ? ? ? ? ? ? ? ?只設(shè)定右邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border-top: 2px solid pink;
border-bottom: 2px solid red;
border-left: 2px solid greenyellow;
border-right: 2px solid blueviolet;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
表格的細(xì)線邊框：
border-collapse:collapse;? ? ? ??? ? ? ?表示相鄰邊框合并在一起
注意：
?? ??? ?邊框影響盒子實(shí)際大小測量盒子時(shí)要減去邊框?qū)挾?/p>
? 1.2? padding內(nèi)邊距
| padding-left | 左內(nèi)邊距 |
| padding-right | 右內(nèi)邊距 |
| padding-top | 上內(nèi)邊距 |
| padding-bottom | 下內(nèi)邊距 |
?復(fù)合格式：
| padding:5px; | 代表上下左右都有5像素內(nèi)邊距 |
| padding:5px 10px; | 代表上下有5像素，左右有10像素 |
| padding:5px 10px 20px; | 代表上內(nèi)邊距5像素，左右內(nèi)邊距10像素 ?下內(nèi)邊距20像素 |
| padding:5px 10px 20px 30px; | 代表上內(nèi)邊距5像素，右內(nèi)邊距10像素，下內(nèi)邊距20像素，左內(nèi)邊距30像素? ? ? ? 順時(shí)針 |
? ? ?盒子受影響情況：
- 會影響盒子大小
盒子已經(jīng)有了高度和寬度，再指定內(nèi)邊距，會撐大盒子，內(nèi)邊距padding影響盒子實(shí)際大小
解決方法：要保證盒子和效果圖像大小保持一致，則讓width/height減去多出來的內(nèi)邊距大小
- 不會影響盒子大小的情況
盒子本身沒有設(shè)置width/height屬性，此時(shí)padding不會撐開盒子
?? ?1.3margin外邊距
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
復(fù)合格式：
| margin:5px; | 代表上下左右都有5像素外邊距 |
| margin:5px 10px; | 代表上下有5像素，左右有10像素 |
| margin:5px 10px 20px; | 代表上外邊距5像素，左右外邊距10像素 ?下內(nèi)邊距20像素 |
| margin:5px 10px 20px 30px; | 代表上外邊距5像素，右外邊距10像素，下外邊距20像素，左外邊距30像素? ? ? ? 順時(shí)針 |
塊級盒子水平居中
- ?? ??? ??? ?盒子必須指定寬度
- ?? ??? ??? ?盒子左右的外邊距都設(shè)置為auto
- ?? ??? ??? ?行內(nèi)元素或者行內(nèi)塊元素水平居中給父元素添加text-align:center即可
寫法：? ??? margin: 0 auto ;
?外邊距合并
? ? ?1.相鄰塊元素垂直外邊距的合并
上下兩個(gè)塊元素都設(shè)置了外邊距，取兩個(gè)值中的較大者
解決方案：盡量只給一個(gè)盒子添加margin值
2. 嵌套塊元素垂直外邊距的塌陷
對于兩個(gè)嵌套關(guān)系（父子關(guān)系）的塊元素，父元素有上外邊框，子元素也有上外邊框，此時(shí)父元素會塌陷較大的外邊距值
?解決方案：
- ?? ??? ??? ??? ??? ??? ?可以為父元素定義上邊框
- ?? ??? ??? ??? ??? ??? ?可以為父元素定義上內(nèi)邊框
- ?? ??? ??? ??? ??? ??? ?可以為父元素添加overfiow:hidden
- ?? ??? ??? ??? ??? ??? ?浮動盒子沒有外邊距合并問題
?清除內(nèi)外邊距
?不同瀏覽器帶有不同的默認(rèn)內(nèi)外邊距，清除網(wǎng)頁元素的內(nèi)外邊距
? * {
? ? ? ? ? ? margin: 0; ? /* ?清除外邊距 */
? ? ? ? ? ? padding: 0; /* ?清除內(nèi)邊距 */
}
?注意：
?? ??? ??? ??? ?行內(nèi)元素為了照顧兼容性，盡量只設(shè)置左右內(nèi)外邊距，不設(shè)置上下內(nèi)外邊距
?? ??? ??? ??? ?但是轉(zhuǎn)化為塊級或者行內(nèi)塊元素就行
2. 圓角邊框
?border-radius:lenght;
- ?? ??? ?參數(shù)值可以是數(shù)值也可以是百分比形式
- ?? ??? ?矩形：設(shè)置為高度的一半
- ?? ??? ?簡寫：? ? ? ?? ? ? ? ? ?左上角? ? ? ? ? ? ? ? ? border-top-left-radius
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 右上角? ? ? ? ? ? ? ? ? ?border-top-right-radius
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 右下角? ? ? ? ? ? ? ? ? ?border-bottom-right-radius
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 左下角? ? ? ? ? ? ? ? ? ?border-bottom-left-radius
?3. 盒子陰影
box-shadow
| h-shadow | 必需，水平陰影 |
| v-shadow | 必需。垂直陰影的位置。允許負(fù)值 |
| blur | 可選。模糊距離（虛實(shí)） |
| ?spread | 可選。陰影的尺寸 |
| color | ?可選。陰影的顏色 |
| inset | 可選。將外部陰影（outset）改為內(nèi)部陰影 |
?注意：
- ?默認(rèn)的是外部陰影（outset），但是不可以寫這個(gè)單詞，否則導(dǎo)致陰影無效
- 盒子陰影不占用空間，不會影響其他盒子排列
4. 文字陰影
?text-shadow
| ?h-shadow | 必需，水平陰影 |
| v-shadow | 必需。垂直陰影的位置。允許負(fù)值 |
| blur | 可選。模糊距離（虛實(shí)） |
| color | 可選。陰影的顏色? |
?八、浮動
?1.格式
? 準(zhǔn)則：多個(gè)塊級元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級元素橫向排列找浮動
float ：屬性
- none元素不浮動
- left向左浮動
- right向右浮動
?2. 浮動的特性
? ?1.浮動元素會脫離標(biāo)準(zhǔn)流?
- ?? ??? ?脫標(biāo)
- ?? ??? ?浮動的盒子不再保留原先的位置
? ? 2.浮動的元素會一行內(nèi)顯示并且元素頂部對齊?
- ?? ??? ?浮動的元素是互相貼靠在一起（沒有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊
? ?3. 浮動的元素會具有行內(nèi)塊元素的特性?
- ?? ??? ?任何元素都可以浮動
- ?? ??? ?如果塊級盒子沒有設(shè)置寬度，默認(rèn)寬度和父級一樣寬，但是添加浮動后，他的大小? ?根據(jù)內(nèi)容來決定
浮動元素經(jīng)常和標(biāo)準(zhǔn)流父級搭配使用
- 第一準(zhǔn)則：多個(gè)塊級元素縱向排列找標(biāo)準(zhǔn)流，多個(gè)塊級元素橫向排列找浮動
- 第二準(zhǔn)則：先設(shè)置盒子大小，之后設(shè)置盒子位置?
注意點(diǎn)
- ?? ?浮動和標(biāo)準(zhǔn)流的父盒子搭配
- ?? ?一個(gè)元素浮動，理論上其余兄弟元素也需要浮動
- ? ??浮動的盒子指揮影響浮動盒子后面標(biāo)準(zhǔn)流，不會影響前面的標(biāo)準(zhǔn)流?
九、清除浮動?
本質(zhì)
清除浮動的本質(zhì)是清除浮動元素脫離標(biāo)準(zhǔn)流造成的影響?
語法
?clear：left；
- left? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 不允許左側(cè)有浮動
- right? ? ? ? ? ? ? ? ? ? ? ? ? ? 不允許右側(cè)有浮動
- both? ? ? ? ? ? ? ? ? ? ? ? ? ? 同時(shí)清除左右兩邊浮動的影響用的最多?
策略
?閉合浮動：?只讓浮動在父盒子內(nèi)部影響，不影響父盒子外面的其他盒子?
方法
?1. 額外標(biāo)簽法（隔離法）
?在最后一個(gè)浮動的子元素后面添加一個(gè)額外的標(biāo)簽，添加清除浮動樣式
- ?? ??? ??? ?優(yōu)點(diǎn)：簡單易懂，書寫方便
- ?? ??? ??? ?缺點(diǎn)：1.添加許多無意義標(biāo)簽，結(jié)構(gòu)化比較差
? ? ? ? ? ? ? ? ? ? ? ?2.新的空標(biāo)簽必須為塊級元素
?2. 父級元素添加overflow屬性
屬性值設(shè)為hidden，auto，scroll
overflow:hidden；
- 優(yōu)點(diǎn)：代碼簡潔
- 缺點(diǎn)：無法顯示溢出部分
?? 3. 父級添加after偽元素
?. clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibil ity: hidden;
}
.clearfix { /* IE6、7專有*/
*zoom: 1;
}
- ?? ??? ??? ?缺點(diǎn)：照顧低版本瀏覽器
- ?? ??? ??? ?優(yōu)點(diǎn)：沒有增加標(biāo)簽，結(jié)構(gòu)更簡單
?4.? 父級添加雙偽元素文章來源：http://www.zghlxwxcb.cn/news/detail-490934.html
? ?. clearfix:before, .clearfix:after {
content:"";
display:table;
}
. clearfix:after {
clear :both;
}
. clearfix {
*zoom: 1;
}文章來源地址http://www.zghlxwxcb.cn/news/detail-490934.html
- ? ? ? ? ? ?優(yōu)點(diǎn)：代碼更簡潔
- ?? ??? ??? 缺點(diǎn)：照顧低版本瀏覽器
- ?? ??? ??? 代表網(wǎng)站：小米，騰訊?
到了這里，關(guān)于CSS基礎(chǔ)——看這一篇就夠了的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
