黑马程序员pink老师_CSS学习笔记
關(guān)于CSS具體屬性：CSS參考手冊(cè)網(wǎng)址
目錄
目錄
一、CSS字體樣式屬性
font-size：字號(hào)
font-family：字體樣式?
?CSS Unicode字體
font-weight：字體粗細(xì)
font-style：字體風(fēng)格
?二、選擇器【重點(diǎn)】
標(biāo)簽選擇器（元素選擇器）
類(lèi)選擇器
CSS命名規(guī)范
多類(lèi)名選擇器
?id選擇器
通配符選擇器【一般用不到，僅作了解】
偽類(lèi)選擇器
（1）鏈接偽類(lèi)選擇器
（2）結(jié)構(gòu)偽類(lèi)選擇器
(3)目標(biāo)偽類(lèi)選擇器
三、CSS外觀屬性
顏色屬性
line-height:行間距
text-align: 水平對(duì)齊方式
text-indent：首行縮進(jìn)
letter-spacing：字間距
word-spacing：單詞間距
顏色半透明（CSS3新增）
文字陰影（CSS3）
?Hbuilder快捷方式
四、引入CSS樣式表
內(nèi)部樣式表
行內(nèi)樣式（內(nèi)聯(lián)樣式）
外部樣式表
??三種樣式對(duì)比
塊級(jí)元素（block-level）
行內(nèi)元素（inline-level）
行內(nèi)塊元素（inline-block）
標(biāo)簽?zāi)Ｊ睫D(zhuǎn)換display
五、CSS復(fù)合選擇器?
交集選擇器
并集選擇器
后代選擇器
子元素選擇器
?屬性選擇器
偽元素選擇器（CSS3）
六、CSS書(shū)寫(xiě)規(guī)范
空格規(guī)范
選擇器規(guī)范
屬性規(guī)范?
七、CSS背景（background）
背景圖片（image）
背景平鋪（repeat）
背景位置（position）
背景附著
背景簡(jiǎn)寫(xiě)
背景透明（CSS3）
背景縮放（CSS3）
多背景（CSS3）
凹凸文字
八、CSS三大特性
CSS層疊性
CSS繼承性
CSS優(yōu)先級(jí)?
九、CSS盒子模型（重點(diǎn)）
盒子邊框（border）
表格的細(xì)線邊框
圓角邊框（CSS3）
內(nèi)邊距（padding）
外邊距（margin）
外邊距實(shí)現(xiàn)盒子居中
清除元素默認(rèn)外邊距
外邊距合并?
相鄰塊元素垂直外邊距合并
嵌套元素垂直外邊距合并
content寬度和高度
盒子模型布局穩(wěn)定性
CSS3盒模型（CSS3新增屬性）
十、浮動(dòng)（float）
普通流
浮動(dòng)
浮動(dòng)特性（重難點(diǎn)）?
清除浮動(dòng)
額外標(biāo)簽法?
其他方法?
一、CSS字體樣式屬性
font-size：字號(hào)
| 相對(duì)長(zhǎng)度單位 | 說(shuō)明 |
| em | 相當(dāng)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸 |
| px | 像素【最常用，推薦使用】 |
| 絕對(duì)長(zhǎng)度單位 | 說(shuō)明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 點(diǎn) |
font-family：字體樣式?
p {font-family: "宋體"；／＊可以寫(xiě)多個(gè)字體，用英文逗號(hào)隔開(kāi)，表示找不到１字體去找２字體，等等＊／font-size: 14px;／＊ctrl＋／是注釋快捷鍵＊／color: pink; }?CSS Unicode字體
在CSS中設(shè)置字體名稱(chēng)可以直接寫(xiě)中文，但是在文字編碼（GB2312? ?UTF-8等）不匹配時(shí)會(huì)產(chǎn)生亂碼的錯(cuò)誤，ｘｐ系統(tǒng)不支持類(lèi)似微軟雅黑的中文。
解決方案一：使用英文代替。font-family：“Microsoft Yahei”；
解決方案二：在CSS中直接使用Unicode編碼字體
【建議:Unicode字體只用“宋體”和“微軟雅黑”】
font-weight：字體粗細(xì)
除了HTML中的的＜ｂ＞和＜strong＞標(biāo)簽外，還可以使用CSS完成字體加粗效果，但是CSS是沒(méi)有語(yǔ)義的。
font-wieght屬性定義字體的粗細(xì)，屬性值有normal，bold，bolder，lighter，數(shù)字１００～９００
【一般更喜歡用數(shù)字表示，數(shù)字４００＝normal，數(shù)字７００＝bold】
strong{font-weight: normal;/* 讓標(biāo)簽包裹的粗體不加粗 */ }font-style：字體風(fēng)格
除了HTML中的的＜i＞和＜em＞標(biāo)簽外，還可以使用CSS完成字體傾斜效果，但是CSS是沒(méi)有語(yǔ)義的。
normal：指定文本字體樣式為正常的字體
italic：指定文本字體樣式為斜體。對(duì)于沒(méi)有設(shè)計(jì)斜體的特殊字體，如果要使用斜體外觀將應(yīng)用oblique
oblique：指定文本字體樣式為傾斜的字體。人為的使文字傾斜，而不是去選取字體中的斜體字【不常用】
em {
font-style：normal；／＊讓標(biāo)簽包裹的斜體變得不傾斜， ＊／
}
font：綜合式樣式【重點(diǎn)】
h1 {font: italic bold 14px "microsoft yahei";/*前兩項(xiàng)可以省略，后兩項(xiàng)必須保留，順序不能改變*/ }使用Chrome調(diào)試
?二、選擇器【重點(diǎn)】
想要CSS樣式應(yīng)用于特定的HTML元素，首先要拿到這項(xiàng)元素，在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則的部分被稱(chēng)為選擇器
標(biāo)簽選擇器（元素選擇器）
標(biāo)簽選擇器是指以HTML標(biāo)簽為選擇器，按標(biāo)簽分類(lèi)，為頁(yè)面中同類(lèi)型的標(biāo)簽快速統(tǒng)一樣式，缺點(diǎn)是不能設(shè)計(jì)差異化樣式
標(biāo)簽{屬性1:屬性值1;屬性2:屬性值2; } 元素{屬性1:屬性值1;屬性2:屬性值2; }類(lèi)選擇器
?以元素為對(duì)象定義單獨(dú)或相同樣式
<head><style>h1 {color:palevioletred;}.yinshi { /* 加 “.”聲明類(lèi)樣式 */color: blue;}.shenle {color: orangered;}.xinba {color: gray;}</style> </head> <body><div class="yinshi">銀時(shí)</div><!-- 此處引用類(lèi)樣式 --><div class="shenle">神樂(lè)</div><div class="xinba">新八</div>CSS命名規(guī)范
類(lèi)選擇器命名規(guī)范
?web前端開(kāi)發(fā)規(guī)范手冊(cè)pdf下載
多類(lèi)名選擇器
給標(biāo)簽添加多個(gè)類(lèi)名，實(shí)現(xiàn)多種目的選擇
<head><style>.c-blue { /* 加 “.”聲明類(lèi)樣式 */color: blue;}.c-orange {color: orangered;}.c-gray {color: gray;}.font20 {font-size: 20px;}</style> </head> <body><div class="c-blue font20">銀時(shí)</div><!-- 此處引用類(lèi)樣式 --><div class="c-orange">神樂(lè)</div><div class="c-gray font20">新八</div><!-- 多類(lèi)名之間用空格隔開(kāi) ，此時(shí)可以既變顏色又加粗--> </body>?id選擇器
和類(lèi)選擇器結(jié)合記憶
#black {color: black; } <div id="black">土方十四郎</div> <!--區(qū)別于類(lèi)選擇器的“.”開(kāi)始，id選擇器以“#”開(kāi)頭命名，在下方標(biāo)簽處引用-->類(lèi)選擇器和id選擇器的區(qū)別
類(lèi)選擇器可以重復(fù)多次使用，被多個(gè)標(biāo)簽引用，相當(dāng)于人名
id選擇器是唯一的，相當(dāng)于身份證號(hào)，只允許使用一次
通配符選擇器【一般用不到，僅作了解】
通配符選擇器用“*”表示，是所有選擇器中適用范圍最廣的，能匹配頁(yè)面中所有元素，基本語(yǔ)法格式如下
* {屬性1:屬性值1;屬性2:屬性值2; } <head><style>* { /*星號(hào)代表所有選擇器*/color: #0000FF;font-size: 20px;} </style> </head> <body><p>銀魂</p><div>銀魂</div><strong>銀魂</strong><i>銀魂</i><span>銀魂</span><!--這是最近正在重刷銀魂的博主--> </body>偽類(lèi)選擇器
傾向于給某些選擇器添加效果，如給鏈接添加效果
（1）鏈接偽類(lèi)選擇器
?改變順序可能造成效果全部無(wú)法實(shí)現(xiàn)的后果。
<head><style>a:link {/* 未訪問(wèn)的鏈接 */color: cornflowerblue;font-size: 20px;font-weight: 700;}a:visited {/* 訪問(wèn)過(guò)一次的鏈接 */color: darkorchid;font-size: 20px;font-weight: 700;}a:hover {/* 鼠標(biāo)移動(dòng)到連接上時(shí)鏈接的變化 */color: tomato;font-size: 20px;font-weight: 700;}a:active {/* 選定的鏈接，我們按住鼠標(biāo)別松開(kāi)時(shí)的狀態(tài) */color: green;font-size: 20px;font-weight: 700;}</style></head><body><div><a href="#">零元購(gòu)</a></div></body>?以下是鏈接偽類(lèi)選擇器的簡(jiǎn)寫(xiě)方式【最常用寫(xiě)法】
<head><style>a {/* a是標(biāo)簽選擇器，指所有的鏈接 */color: cornflowerblue;font-size: 20px;font-weight: 700;}a:hover {/* ：hover是鏈接偽類(lèi)選擇器 */color: tomato; /* 鼠標(biāo)經(jīng)過(guò)，由藍(lán)色變紅色 */}</style></head><body><div><a href="#">零元購(gòu)</a></div></body>（2）結(jié)構(gòu)偽類(lèi)選擇器
<head><style>li:first-child { /* 第一個(gè)孩子 */color: orangered;}li:last-child { /* 最后一個(gè)孩子 */color: green;}li:nth-child(3) { /* 第三個(gè)孩子，括號(hào)寫(xiě)幾就是第幾個(gè)孩子 */color: mediumpurple;}</style></head><body><ul type="square"><li>長(zhǎng)虹劍</li><li>冰魄劍</li><li>紫云劍</li><li>奔雷劍</li><li>青光劍</li><li>雨花劍</li><li>旋風(fēng)劍</li></ul></body>其他用法
li:nth-child(even) {/* 可以選擇所有偶數(shù)（even）孩子標(biāo)簽 */color: orange;} li:nth-child(odd) {/* 可以選擇所有奇數(shù)（odd）孩子標(biāo)簽 */color: skyblue;} li:nth-child(n) {color: aqua;/* 選擇全部孩子 ，里邊還可以寫(xiě)2n，3n等等*/}(3)目標(biāo)偽類(lèi)選擇器
target目標(biāo)偽類(lèi)選擇器：選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素
:target {color: red; }三、CSS外觀屬性
顏色屬性
line-height:行間距
用于設(shè)置行間距，也稱(chēng)行高。一般比字號(hào)大7，8個(gè)像素，即px。
p {line-height: 40px; }text-align: 水平對(duì)齊方式
center：居中
left：左對(duì)齊
righ：右對(duì)齊
text-indent：首行縮進(jìn)
所有段落都會(huì)縮進(jìn)，建議使用em，作為單位，1em=一個(gè)字的寬度
p {text-indent: 2em;/* 此時(shí)2em就是兩個(gè)字的寬度 */}letter-spacing：字間距
字符之間的空白，允許使用負(fù)數(shù)，默認(rèn)為normal
div {letter-spacing: 2px; }word-spacing：單詞間距
對(duì)中文無(wú)效
顏色半透明（CSS3新增）
color:rgba(r,g,b,a)，a指alpha，即透明度，取值在[0,1]之間，參數(shù)不能省略
div {color: rgb(0,200,173,0.5); }/*測(cè)試下來(lái)rgb和rgba效果一樣，不知道是不是兼容度提高了，為了規(guī)范依然使用rgba*/文字陰影（CSS3）
text-shadow：水平位置，垂直位置，模糊距離，陰影顏色；【共計(jì)四個(gè)參數(shù)】前兩個(gè)參數(shù)必寫(xiě)，最后兩個(gè)可以省略
h1{text-shadow: 1px 2px 4px rgba(183,23,48,0.5);/* 參數(shù)之間用“空格”隔開(kāi)，而不是逗號(hào)前兩個(gè)參數(shù)必須有，后兩個(gè)可以省略 */ }?Hbuilder快捷方式
| div*10快速生成10個(gè)標(biāo)簽 |
| ul>li快速生成父子類(lèi)標(biāo)簽 |
| div+p快速生成兄弟標(biāo)簽，同一級(jí)的標(biāo)簽 |
| .red+tab鍵快速生成帶類(lèi)名的div |
| #red+tab快速生成帶id名的div |
| 例：.nav+.header+.main>.left+.right |
四、引入CSS樣式表
內(nèi)部樣式表
內(nèi)部樣式是集中將代碼卸載HTML文檔的head頭部，用style標(biāo)簽定義。也可也將style標(biāo)簽放在文檔任何地方。
type=“text/CSS”在HTML5中可以省略，但寫(xiě)上也比較規(guī)范。
行內(nèi)樣式（內(nèi)聯(lián)樣式）
內(nèi)聯(lián)樣式，又稱(chēng)行內(nèi)樣式，內(nèi)嵌樣式，通過(guò)標(biāo)簽的style屬性來(lái)設(shè)置元素的樣式。只適合樣式比較少的情況
<標(biāo)簽名 style=“屬性1：屬性值1；屬性2：屬性值2”>? ? 內(nèi)容? ?</標(biāo)簽名>
外部樣式表
外部樣式奧是將所有樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，通過(guò)link標(biāo)簽連接到HTML文檔中。【link是單標(biāo)簽】
完全實(shí)現(xiàn)了結(jié)構(gòu)與樣式分離。
<head><link rel="stylesheet" href="style.css"/> </head>?三種樣式對(duì)比
塊級(jí)元素（block-level）
每個(gè)元素通常會(huì)獨(dú)自占據(jù)一整行或者多行，可以對(duì)其設(shè)置高度，寬度，對(duì)齊屬性
常見(jiàn)塊級(jí)元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
?關(guān)于塊級(jí)元素的特點(diǎn)，要能口述?
行內(nèi)元素（inline-level）
?不占獨(dú)立區(qū)域，僅靠自身大小和圖像尺寸來(lái)支撐結(jié)構(gòu)。一般不可設(shè)置寬度、高度、對(duì)齊屬性。
常見(jiàn)行內(nèi)元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
?關(guān)于行內(nèi)元素的特點(diǎn)，要能口述??
注意：
? ? ? ? 1.只有文字才成段落，因此p標(biāo)簽里不能放塊級(jí)元素，同理<h1>~<h6><dt>內(nèi)都不能放其他塊級(jí)元素。
????????2.鏈接<a>里邊不能再放鏈接。
行內(nèi)塊元素（inline-block）
標(biāo)簽?zāi)Ｊ睫D(zhuǎn)換display
五、CSS復(fù)合選擇器?
交集選擇器
交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器。第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格。
交集選擇器表示既...又...，使用相對(duì)較少
例如：p.one 表示的是類(lèi)名為one的段落標(biāo)簽
并集選擇器
如果某些選擇器定義的樣式完全相同，或者部分相同，就用并集選擇器為它們定義相同的CSS樣式 。
只要逗號(hào)隔開(kāi)，所有選擇器都會(huì)執(zhí)行后面的樣式。
<head> <style>p,h1,.toshi {color: aliceblue;} </style> </head><body><p>春江花月夜</p><h1>春江潮水</h1><div class="toshi">海上明月</div> </body>后代選擇器
又稱(chēng)包含選擇器，用來(lái)選擇元素或者元素組的后代。
寫(xiě)法是把外層標(biāo)簽寫(xiě)在前面，內(nèi)層標(biāo)簽寫(xiě)在后邊，中間用空格分隔
<head><style>.songyang div {color: darkcyan;font-size: 16px;}/*只有.songyang下的div才由效果，外邊的div不變*/</style></head><body><div class="songyang"><div>坂田</div><div>桂</div><div>高杉</div></div><div>近藤</div></body>子元素選擇器
只能選擇某元素的子元素，再下一級(jí)孫子，重孫子不能選。寫(xiě)法是：父級(jí)標(biāo)簽 > 子級(jí)標(biāo)簽，符號(hào)左右一般各留一個(gè)空格
<head><style>.nav>li{color: pink;} /*不知道為什么單獨(dú)寫(xiě)這個(gè)不成功*/.nav > li > .two > li{color: black;}/*必須加上這個(gè)才能區(qū)分一二級(jí)菜單*/</style></head><body><ul class="nav"><li>一級(jí)菜單<ul class="two"><li>二級(jí)菜單</li><li>二級(jí)菜單</li><li>二級(jí)菜單</li></ul></li><li>一級(jí)菜單<ul class="two"><li>二級(jí)菜單</li><li>二級(jí)菜單</li><li>二級(jí)菜單</li></ul></li></ul></body>?屬性選擇器
<head><meta charset="utf-8"><title></title><style>a[title] {/* 屬性選擇器用中括號(hào)來(lái)表示，選出有title的 */color: #008000;}input[type=text]{color: red;/* 只有type是text的才顯示紅色 */}</style></head><body><a href="#" title="瀏覽器">Chrome</a><a href="#" title="瀏覽器">edge</a><a href="#">firefox</a><a href="#">Safari</a><a href="#">QQ</a><input type="text"value="這是一個(gè)文本框"><input type="submit"><input type="reset"></body> <head><meta charset="utf-8"><title></title><style>div[class^=font]{ /* class^=font表示以font開(kāi)始 */color: deeppink;}div[class$=nav]{ /* class$=nav表示以nav結(jié)束 */color: aquamarine;}div[class*=TB]{ /* class*=TB表示TB在任意位置都行 */color: orange;}</style></head><body><div class="font12">屬性選擇器</div><div class="font12">屬性選擇器</div><div class="font24">屬性選擇器</div><div class="font24">屬性選擇器</div><div class="pdd-nav">屬性選擇器</div><div class="jd-nav">屬性選擇器</div><div class="news-TB-heater">屬性選擇器</div><div class="news-TB-footer">屬性選擇器</div></body>偽元素選擇器（CSS3）
::first-letter，選擇文本第一行的單詞或字（如中文日文韓文）
::first-line，選擇文本第一行，不固定，根據(jù)瀏覽器窗口大小而變動(dòng)
::selection，可以改變選中文本樣式，比如藍(lán)底白字變顏色變成粉色之類(lèi)的
? <style>p{line-height: 35px;}::first-letter{color: aquamarine;/*英文是一個(gè)單詞，中文是一個(gè)字，日文是一個(gè)假名*/}</style></head><body><p>なまりの空(そら)【陰霾的天空】重(おも)く垂(た)れ込(こ)み【垂下凝重的幕簾】真白(ましろ)に淀(よど)んだ【沉入蒼白之中】太陽(yáng)(たいよう)が砕(くだ)けて【將太陽(yáng)斬碎】耳鳴(みみな)りを尖(とが)らせる【讓我大聲尖叫】</p></body>?.dome：類(lèi)選擇器
first-child：偽類(lèi)選擇器
first-letter：偽元素選擇器
::before 和 ::after?
<head><style>div::before{content: "門(mén)前";/* 必須和content一起使用，記得加引號(hào)“” */color: #FF0000;}div::after{content: "游過(guò)一群鴨";color: skyblue;}</style></head><body><div>大橋下</div></body>六、CSS書(shū)寫(xiě)規(guī)范
空格規(guī)范
選擇器與“ { ”之間必須有空格?。
屬性名與之后的 ：之間不允許有空格，：與屬性值之間必須有空格。
舉例：
.nav a {
?? ??? ??? ??? ?color: red;
?? ??? ??? ?}
選擇器規(guī)范
當(dāng)一個(gè)rule里邊包含多個(gè)選擇器時(shí)，每個(gè)選擇器聲明比需獨(dú)占一行。?
舉例：
????p,
? ? h1,
? ? .toshi {
?? ??? ??? ??? ?color: aliceblue;
?? ??? ??? ?}?
屬性規(guī)范?
屬性定義必須另起一行。
舉例：
div::after{
?? ??? ??? ?content: "游過(guò)一群鴨";
?? ??? ??? ?color: skyblue;
?? ??? ?}?
七、CSS背景（background）
背景圖片（image）
?必須引用在同一個(gè)項(xiàng)目下的圖片，可以不在同一個(gè)文件夾中，引用不同項(xiàng)目下的圖片會(huì)失敗
背景圖片更改大小只能用background-size
? div {height: 800px;width: 600px;background-color: pink;background-image: url("圖片/1.png");}?/*問(wèn)題：1、地址路徑按理說(shuō)不用加引號(hào)，加了反倒會(huì)引起瀏覽器兼容性問(wèn)題，但是必須要加引號(hào)才能在我的瀏覽器上顯示出來(lái)*/?背景平鋪（repeat）
默認(rèn)平鋪，取消平鋪要no-reprat。
背景位置（position）
語(yǔ)法：
background-position：length || length
background-position：position || position?
參數(shù)：
length：百分?jǐn)?shù)、浮點(diǎn)數(shù)和單位標(biāo)識(shí)組成的長(zhǎng)度值。參閱長(zhǎng)度單位
position：top、center、bottom、left、center、right
設(shè)置檢索對(duì)象的背景圖像位置必須先指定background-image屬性。默認(rèn)為（0% 0%）。如果只指定了一個(gè)值，該值應(yīng)用于橫坐標(biāo)，縱坐標(biāo)默認(rèn)50%，如果有兩個(gè)值，第二個(gè)值應(yīng)用于縱坐標(biāo)。
?利用方位名詞更改圖片位置，位置默認(rèn)左上角
方位名詞沒(méi)有順序，誰(shuí)在前都行，如果只有一個(gè)方位詞另一個(gè)默認(rèn)是center
div {height: 800px;width: 700px;background-color: pink;background-image: url("女兒.png");background-repeat: no-repeat;background-position: right top;}??利用精確單位更改圖片位置
第一個(gè)值一定是x坐標(biāo)，第二個(gè)值一定是y坐標(biāo)。
div {height: 800px;width: 700px;background-color: pink;background-image: url("女兒.png");background-repeat: no-repeat;background-position: 15px 30px;}??混合使用
div {height: 800px;width: 700px;background-color: pink;background-image: url("女兒.png");background-repeat: no-repeat;background-position: center 30px;}?背景附著
默認(rèn)是scroll
語(yǔ)法：
background-attachment：scroll | fixed?
參數(shù)：
scroll：背景圖像是隨對(duì)象內(nèi)容滾動(dòng)的
fixed：背景圖像固定
背景簡(jiǎn)寫(xiě)
和字體簡(jiǎn)寫(xiě)類(lèi)似，但是順序沒(méi)有強(qiáng)制標(biāo)準(zhǔn)，一般建議如下
background：背景顏色 、背景圖片地址，背景平鋪，北京滾動(dòng)，背景位置
background: pink url("女兒.png") no-repeat fixed center 30px;背景透明（CSS3）
語(yǔ)法：
background：rgba(0，0，0，0.3);
背景半透明是指盒子背景半透明，對(duì)于盒子里邊的內(nèi)容不受影響。
給文字和邊框（border） 設(shè)置半透明都可以用rgba。
背景縮放（CSS3）
語(yǔ)法：
background-size：***px | ***% | contain | cover
一般使用px時(shí)，只更改一個(gè)值，防止縮放實(shí)真。使用%時(shí)，表示圖片整體縮小為原圖的百分之多少。
?
?cover：自動(dòng)調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如果有溢出會(huì)被隱藏，圖片等比縮放并保證寬高同時(shí)滿足盒子大小。
contain：自動(dòng)調(diào)整縮放比例，但保證圖片始終完整顯示在背景區(qū)域。只要寬度和高度有一樣曼珠盒子大小，就不再縮放。保證了圖片的完整性，不會(huì)有缺失，但是盒子會(huì)有一部分裸露，沒(méi)有背景圖片覆蓋。
多背景（CSS3）
- ?一個(gè)元素可以設(shè)置多重背景圖像
- 每組屬性之間使用逗號(hào)分隔
- 如果設(shè)置的背景圖片之間存在重疊關(guān)系，前面的背景圖片會(huì)覆蓋在后面的背景圖片之上
- 為了避免背景色將圖片給蓋住，背景色通常定義在最后一組
?
div {height: 800px;width: 700px;background: url("女兒.png") no-repeat 10px 20px/300px,url(001.jpg) no-repeat right 20px/300px,/*位置/大小*/url(troye.jpg) no-repeat 10px bottom/300px pink;}?凹凸文字
<head><style>body {background-color: #ccc;}div {color: #CCCCCC;font: 700 80px "微軟雅黑";}div:first-child {/* text-shadow:水平位置 垂直位置 模糊距離 陰影顏色 */text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;}div:last-child {text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;}</style></head><body><div ><div>我是凸起的文字</div><div class="second">我是凹下的文字</div></div> </body>此處產(chǎn)生了 :last-child 未成功調(diào)用問(wèn)題
解決方法：兩個(gè)div必須在父類(lèi)div下才能成使用 :last-child ，否則只能使用 :first-child 。
??????????????????使用時(shí)必須選擇父類(lèi)下的最后一個(gè)元素。
另外：可以成功使用nth-child(n)，不必在父類(lèi)標(biāo)簽下
?text-decoration:通常用于給鏈接修改裝飾效果。
?使用技巧：在一行內(nèi)，設(shè)定行高等于盒子高度，可以使文字垂直居中。
八、CSS三大特性
CSS層疊性
所謂層疊性是指多種CSS樣式的疊加。
是瀏覽器處理沖突的一種能力，如果一個(gè)屬性通過(guò)兩個(gè)相同的選擇器設(shè)置到了同一個(gè)元素上，那么此時(shí)一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉，此為樣式?jīng)_突。如果出現(xiàn)樣式?jīng)_突，以最后的樣式為準(zhǔn)。
1、樣式?jīng)_突，遵循就近原則。哪個(gè)樣式離著結(jié)構(gòu)近，就執(zhí)行哪個(gè)樣式。
2、樣式不沖突，不會(huì)層疊。
CSS繼承性
所謂繼承性就是指，書(shū)寫(xiě)CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，比如文本顏色和字號(hào)。
恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜性，子元素可以繼承的父元素樣式：以text-，font-，line-這些元素開(kāi)頭的，以及color屬性。
CSS優(yōu)先級(jí)?
在定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在一個(gè)元素上，這時(shí)會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題。
關(guān)于CSS權(quán)重，用一套公式來(lái)計(jì)算，是衡量CSS優(yōu)先級(jí)的一個(gè)標(biāo)準(zhǔn)，具體規(guī)范如下：
四個(gè)級(jí)別從左到右，一級(jí)大于一級(jí)，數(shù)位之間沒(méi)有進(jìn)制，級(jí)別之間不可超越。
繼承樣式權(quán)重為0，不管父類(lèi)元素權(quán)重多大，它被子類(lèi)繼承時(shí)權(quán)重都為0，子元素定義的元素會(huì)覆蓋繼承樣式。
?
九、CSS盒子模型（重點(diǎn)）
所謂盒子模型，就是把html頁(yè)面中的元素看作是一個(gè)矩形的盒子，每個(gè)矩形都有元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。
所有文檔元素（標(biāo)簽）都會(huì)生成一個(gè)矩形框，我們稱(chēng)之為元素框（element box)，它描述了一個(gè)文檔元素在網(wǎng)頁(yè)布局匯總所占的位置大小。因此，每個(gè)盒子除了有自己的大小和為之外，還影響著其他盒子的大小和位置。
盒子邊框（border）
語(yǔ)法：
border：border-width || border-style || border-color
邊框?qū)傩砸?#xff1a;設(shè)置邊框樣式（border-style）
邊框樣式用于定義頁(yè)面中的邊框風(fēng)格，常用如下：
none：沒(méi)有邊框，忽略所有邊框的寬度（默認(rèn)值）?
solid：邊框?yàn)閱螌?shí)線（最常用）
dashed：邊框?yàn)樘摼€
dotted：邊框?yàn)辄c(diǎn)線
double：邊框?yàn)殡p實(shí)線（用得少）
border-style，border-width，border-color，設(shè)置四邊屬性時(shí)是按照上右下左的順時(shí)針順序。
div {border-color: red blue springgreen black;border-style: dashed double solid dotted;border-width: 1px 5px 10px 30px;}一起寫(xiě)的時(shí)候中間用空格隔開(kāi)。
div:nth-child(4) {border-top: 3px solid orangered;/*上邊框，寬度 樣式 顏色*/border-bottom: blueviolet 3px solid;/*下邊框 顏色 寬度 樣式*//*樣式順序不影響表現(xiàn)*/}?border屬性不繼承，可以繼承的屬性回看關(guān)于繼承的部分。
cellspacing和cellpadding的區(qū)別：
前者為兩個(gè)單元格之間的距離，后者為單元格內(nèi)文字與邊框的距離。
cellspacing表示表格各單元格之間的空隙，參數(shù)值是數(shù)字
cellpadding表示表格內(nèi)文字和表格邊框的距離
兩個(gè)屬性都應(yīng)用在<table>標(biāo)簽內(nèi)部
表格的細(xì)線邊框
?table {
???????????border-collapse: collapse;
}
?border-collapse: collapse表示邊框合并到一起。
圓角邊框（CSS3）
語(yǔ)法：
border-radius：左上角? 右上角? 右下角? 左下角；
順時(shí)針順序
<style>div {height: 400px;width: 400px;border: 1px solid red;}div:first-child {border-radius: 10px;/* 一個(gè)數(shù)值表示四個(gè)角都是相同的10px */}div:nth-child(2) {border-radius: 50%;/*取寬度和高度的50%，會(huì)變成一個(gè)圓形*/}div:nth-child(3) {border-radius: 10px 40px;/* 取對(duì)角線，左上角和右下角是10px，右上角和左下角是40px */}div:nth-child(4) {border-radius: 10px 40px 80px;/* 左上角10 右上角和左下角40 右下角80 */}</style>內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距，是指內(nèi)容與邊框之間的距離。
padding后跟的數(shù)值個(gè)數(shù)不同表達(dá)意思也不同，padding兩個(gè)值代表的方向要和radius分開(kāi)
| 數(shù)值個(gè)數(shù) | 表達(dá)意思（邊距都指內(nèi)邊距） |
| 1個(gè)值 | 上下左右邊距 |
| 2個(gè)值 | 前一個(gè)代表上下邊距，后一個(gè)代表左右邊距 |
| 3個(gè)值 | 上邊距，左右邊距，下邊距 |
| 4個(gè)值 | 上邊距，右邊距，下邊距，左邊距 |
外邊距（margin）
margin屬性用于設(shè)置外邊距。設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”，這段空白通常不能用來(lái)放置其他內(nèi)容。
margin：上外邊距? 右外邊距? 下外邊距? 左外邊距?
取值順序和內(nèi)邊距（padding）一樣。
外邊距實(shí)現(xiàn)盒子居中
讓一個(gè)盒子實(shí)現(xiàn)水平居中需要滿足兩個(gè)條件?：
1、必須是塊級(jí)元素
2、盒子必須指定了寬度（width）
然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。
header {width: 900px;height: 120px;background-color: black;margin: 0 auto;/* 上下不管，左右是auto就能居中 */}實(shí)際案例中，制作導(dǎo)航欄高度應(yīng)選擇奇數(shù)高度，行高用偶數(shù)就會(huì)出現(xiàn)邊框像素留白的問(wèn)題，使用a:hover時(shí)行內(nèi)塊不能全部變色，上下邊緣會(huì)有1px的空白區(qū)域
注意：
“margin:0 auto;” 對(duì)于inline-block不起作用。
即使可以首先使用數(shù)值指定“inline-block”，使用“margin：0 auto;”居中也不起作用。
“text-align：center;”不會(huì)使父元素成為選擇器
“text-align：center;”的基本規(guī)則是“selector是父元素”。
如果要將其居中，則必須創(chuàng)建父元素。?
在行內(nèi)塊元素中使用margin：0 auto時(shí)，應(yīng)同時(shí)對(duì)其父元素使用text-aline：center才能實(shí)現(xiàn)居中?
插入圖片<img>也可也看作一個(gè)盒子，可以用margin和padding更改位置，但是背景圖片更改位置只能用background-position。
一般情況下背景圖片適合做一些小圖標(biāo)使用，產(chǎn)品展示類(lèi)用的就是插入圖片
清除元素默認(rèn)外邊距
* {
? ? ? padding: 0;? ? ? ? ?/*清除內(nèi)邊距*/
? ? ? margin: 0;? ? ? ? ? /*清除外邊距*/
}
行內(nèi)元素只有左右外邊距，沒(méi)有上下外邊距。我們盡量不要給行內(nèi)元素指定上下外邊距。
外邊距合并?
使用margin定義塊級(jí)元素的垂直外邊距時(shí)沒(méi)可能會(huì)出現(xiàn)外邊距的合并（也稱(chēng)外邊距的塌陷）。?
相鄰塊元素垂直外邊距合并
?
解決方法：
只設(shè)定一個(gè)margin值?
嵌套元素垂直外邊距合并
?解決方案：
①為父元素定義1像素上邊框（可以用透明邊框，transparent）
②為父元素定義1像素上內(nèi)邊距（padding）
③為父元素添加overflow：hidden
content寬度和高度
?使用寬度屬性width和高度屬性height可以對(duì)盒子大小進(jìn)行控制。
width和height屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比，但最常用的還是像素px
/*外和尺寸計(jì)算（元素空間尺寸）*/
元素空間高度=? height? +? padding? ＋? border? +? margin
元素空間寬度=? width? +? padding? +? border? +? margin
/*內(nèi)盒尺寸計(jì)算（元素大小）*/
元素內(nèi)容高度=? height? +? padding? +? border
元素內(nèi)容寬度=??width? +? padding? +? border
注意：
1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)于行內(nèi)元素?zé)o效（img和input標(biāo)簽除外）
2、計(jì)算盒子模型總高度時(shí)，應(yīng)該考慮上下兩個(gè)盒子垂直外邊距合并的情況。
盒子模型布局穩(wěn)定性
根據(jù)穩(wěn)定性區(qū)分使用優(yōu)先級(jí)
width? ?>? ?padding? ?>? ?margin
?原因：
1、margin會(huì)有外邊距合并問(wèn)題，所以最后使用
2、padding會(huì)影響盒子大小，需要進(jìn)行加減計(jì)算后使用，比較麻煩
3、width沒(méi)有問(wèn)題，經(jīng)常使用寬度 / 高度剩余法來(lái)做。
CSS3盒模型（CSS3新增屬性）
CSS3中可以用box-sizing 來(lái)指定和模型，可指定為content-box，border-box，這樣計(jì)算盒子大小的方式會(huì)分為兩種情況
1、content-box：傳統(tǒng)盒子模型，盒子大小為：width + padding + border。content-box為默認(rèn)值，維持W3C的標(biāo)準(zhǔn)Box Mode
2、border-box：CSS3新增盒子模型，盒子大小為：width，就是說(shuō)padding和border是包含在width里邊的，不會(huì)撐大盒子。
十、浮動(dòng)（float）
普通流
?簡(jiǎn)單理解就是傳統(tǒng)div盒子，行內(nèi)元素啊，塊級(jí)元素啊，行內(nèi)塊元素的，就是普通流，也叫標(biāo)準(zhǔn)流
浮動(dòng)
元素浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)流控制，也就是飄起來(lái)
語(yǔ)法
選擇器 { float：屬性值；}
| 屬性值 | 描述 |
| left | 元素向左浮動(dòng) |
| right | 元素向右浮動(dòng) |
| none | 元素不浮動(dòng)（默認(rèn)） |
浮動(dòng)元素首先找離自己最近的父元素對(duì)齊（左上角，或右上角對(duì)齊，取決于left和right），但是不會(huì)超過(guò)padding和border，只靠近內(nèi)測(cè)對(duì)齊?
浮動(dòng)特性（重難點(diǎn)）?
1、浮動(dòng)脫標(biāo)（脫離標(biāo)準(zhǔn)流），不占位置，會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只會(huì)左右浮動(dòng)
2、浮動(dòng)的盒子不再保留原先的位置
3、?如果多個(gè)盒子都設(shè)置了浮動(dòng)，則它們會(huì)按照屬性值一行內(nèi)顯示并且頂端對(duì)齊排列。
?注意： 浮動(dòng)的元素是互相貼靠在一起的（不會(huì)有縫隙），如果父級(jí)寬度裝不下這些浮動(dòng)的盒子， 多出的盒子會(huì)另起一行對(duì)齊。
4、浮動(dòng)元素會(huì)具有行內(nèi)塊元素特性?
- 如果塊級(jí)盒子沒(méi)有設(shè)置寬度，默認(rèn)寬度和父級(jí)一樣寬，但是添加浮動(dòng)后，它的大小根據(jù)內(nèi)容來(lái)決定
- 浮動(dòng)的盒子中間是沒(méi)有縫隙的，是緊挨著一起的
- 行內(nèi)元素同理
浮動(dòng)常常和父級(jí)標(biāo)準(zhǔn)流一起使用，即標(biāo)準(zhǔn)流父盒子內(nèi)是浮動(dòng)的子盒子?
?一個(gè)元素浮動(dòng)了，理論上其余的兄弟元素也要浮動(dòng)。
如果不浮動(dòng)會(huì)出問(wèn)題
浮動(dòng)的盒子只會(huì)影響浮動(dòng)盒子后面的標(biāo)準(zhǔn)流，不會(huì)影響前面的標(biāo)準(zhǔn)流.
清除浮動(dòng)
清除浮動(dòng)本質(zhì)：解決父級(jí)元素因?yàn)樽釉馗?dòng)引起的內(nèi)部高度為0的問(wèn)題。【本來(lái)子盒子是可以把父親撐開(kāi)的，但是浮動(dòng)相當(dāng)于飄起來(lái)，沒(méi)法撐開(kāi)了，父親如果不設(shè)置高度，高度就會(huì)變成0】
清除浮動(dòng)之后，父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度。
清除浮動(dòng)語(yǔ)法
選擇器{clear:屬性值;}
| 屬性值 | 描述 |
| left???????? | 清除左側(cè)浮動(dòng)的影響 |
| right | 清除右側(cè)浮動(dòng)的影響 |
| both | 同時(shí)清除 |
?我們實(shí)際工作中， 幾乎只用 clear: both;
額外標(biāo)簽法?
額外標(biāo)簽法也稱(chēng)為隔墻法，是 W3C 推薦的做法。?
額外標(biāo)簽法會(huì)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽，例如 <div style=”clear:both”></div>?
注意： 要求這個(gè)新的空標(biāo)簽必須是塊級(jí)元素。?
其他方法?
1、父級(jí)添加 overflow 屬性
????????給父級(jí)添加 overflow 屬性，將其屬性值設(shè)置為 hidden、 auto 或 scroll 。
2、父級(jí)添加after偽元素
?????????:after 方式是額外標(biāo)簽法的升級(jí)版。也是給父元素添加
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專(zhuān)有 */ *zoom: 1; }3、 父級(jí)添加雙偽元素
?????????也是給給父元素添加
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }總結(jié)
以上是生活随笔為你收集整理的黑马程序员pink老师_CSS学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [软技能] 现如今面对如层出不穷的类库
- 下一篇： Baymard Institute：基于