CSS复习
CSS復(fù)習(xí)
CSS 語(yǔ)法結(jié)構(gòu)
-
基本語(yǔ)法：
選擇器{屬性:屬性值; 屬性:屬性值;… } -
代碼示例：
h1{color:red; }代碼解釋如下：
1）h1：選擇器，表示要選擇所有的 h1 標(biāo)簽。
2）color：屬性名，表示要對(duì)字體顏色屬性進(jìn)行設(shè)置。
3）red：屬性值，表示要設(shè)置字體顏色為紅色。
4）屬性與屬性值組成了一個(gè)聲明，屬性與屬性值之間用冒號(hào)分隔。
使用 CSS 時(shí)，注意事項(xiàng)如下：
1）CSS 是大小寫(xiě)不敏感的，但規(guī)范的寫(xiě)法是全部小寫(xiě)。
2）規(guī)范性要求，每一行只寫(xiě)一個(gè)聲明。
3）規(guī)范性要求，每個(gè)聲明后邊需要添加分號(hào)作為結(jié)束符。
4）所有符號(hào)均為英文，切勿使用中文符號(hào)。
5）注意代碼的縮進(jìn)，用 HBuider 編寫(xiě)代碼會(huì)有提示，避免拼寫(xiě)錯(cuò)誤。
CSS 注釋
- 為樣式表添加注釋有助于標(biāo)記樣式的作用范圍以及復(fù)雜樣式的作用等，便于進(jìn)行后期的維護(hù)。/*設(shè)置 h1 標(biāo)簽的樣式*/ h1{ /*設(shè)置字體顏色為紅色*/color:red; }
HTML與CSS關(guān)聯(lián)方式
行內(nèi)樣式表
- 將 CSS 代碼放置在 HTML 代碼內(nèi)部，作為 HTML 標(biāo)簽的屬性存在。<a href="#" style="color:red;font-size:10px;">日用百貨</a> <!--產(chǎn)生一個(gè)紅色的，字號(hào)是 10px 的超鏈接-->
行內(nèi)樣式表的特點(diǎn)如下：
1）將 CSS 代碼與 HTML 代碼糅合在一起，不符合 W3C 關(guān)于“內(nèi)容與表現(xiàn)分離”的基
本規(guī)范，不利于后期維護(hù)。
2）可以單獨(dú)定義某個(gè)元素的樣式，靈活方便。
3）優(yōu)先級(jí)最高，但是不推薦使用，僅在測(cè)試時(shí)可以采用。
內(nèi)部樣式表
- CSS 代碼內(nèi)嵌到 HTML 代碼中，二者處于同一個(gè)文件中。<head> <!--charset="UTF-8"表示當(dāng)前文檔采用字符集中 utf-8,支持中文--><meta charset="UTF-8"><title>內(nèi)部樣式表</title> <!--內(nèi)部樣式表 代碼要放置在 style 標(biāo)簽內(nèi)--><style type="text/css">div{color:red;}</style> </head>
內(nèi)部樣式表的特點(diǎn)如下：
1）寫(xiě)在標(biāo)簽中，一定程度地將 CSS 代碼與 HTML 代碼進(jìn)行了分離，但是分離不
夠徹底，無(wú)法應(yīng)用于其他 HTML 文件，實(shí)現(xiàn)樣式復(fù)用。
2）優(yōu)先級(jí)低于行內(nèi)樣式表。
外部樣式表
- CSS 代碼單獨(dú)放置在擴(kuò)展名為.css 的文件中，在 HTML文件中，將 CSS 文件引入進(jìn)來(lái)，形成關(guān)聯(lián)。<head><meta charset="UTF-8"><title>外部樣式表</title><link rel="stylesheet" type="text/css" href="css/ch05.css" /> </head>
外部樣式表的特點(diǎn)如下：
1）與內(nèi)部樣式表一樣，寫(xiě)在標(biāo)簽中，實(shí)現(xiàn)了 CSS 代碼與 HTML 代碼的徹底分
離，方便樣式復(fù)用與后期維護(hù)，符合 W3C 規(guī)范。
2）優(yōu)先級(jí)要低于內(nèi)部樣式表。
3）后續(xù)開(kāi)發(fā)中推薦使用此種方式。
CSS 選擇器
CSS 選擇器是指 CSS 選擇要修飾的元素，對(duì)指定元素進(jìn)行修飾美化。
-
通用選擇器
*{padding: 0px;margin: 0px;font-family: "微軟雅黑",sans-serif;font-size: 12px; }
寫(xiě)法：*{}。
作用：選中頁(yè)面中的所有標(biāo)簽，一般用于定義最通用的屬性，設(shè)置默認(rèn)值。
優(yōu)先級(jí)：最低，低于所有選擇器。 -
標(biāo)簽選擇器
div{width: 100%;height: 90px;background-color: red; } <!-- HTML body 部分代碼 --> <div>這是一個(gè) div</div>
寫(xiě)法： HTML 標(biāo)簽名{樣式屬性:樣式屬性值;……}。
作用：選中頁(yè)面中所有的對(duì)應(yīng)標(biāo)簽，當(dāng)需要對(duì)某類標(biāo)簽進(jìn)行統(tǒng)一設(shè)置樣式時(shí)采用。
優(yōu)先級(jí)：高于通用選擇器。 -
類選擇器
.first{width: 200px;color: #F00; } <!-- HTML body 部分代碼 --> <div><ul><li class="first">家用電器</li><li>洗衣機(jī)</li><!-- …… --></ul> </div>
寫(xiě)法：.類名稱{}。
調(diào)用：在需要改變樣式的標(biāo)簽上，使用 class=“選擇器名稱” 調(diào)用對(duì)應(yīng)選擇器。
作用：修改所有調(diào)用選擇器的標(biāo)簽。
優(yōu)先級(jí)：高于標(biāo)簽選擇器。注意事項(xiàng)如下：
1）類名稱是可以隨意取名的，但通用做法是只能包含字母、數(shù)字、下畫(huà)線，并且不以
數(shù)字開(kāi)頭，否則可能會(huì)產(chǎn)生樣式不能應(yīng)用的問(wèn)題。
2）類名稱應(yīng)該能表示一定意義，不能起毫無(wú)意義的名字，如 a。
3）當(dāng)頁(yè)面需要對(duì)多個(gè)元素應(yīng)用相同樣式，則采用類選擇器。
4）類選擇器可以應(yīng)用不同標(biāo)簽。 -
id 選擇器
#list{width: 200px;height: 200px;background-color: #CCC; } <!-- HTML body 部分代碼 --> <div id="list"><ul><li>家用電器</li><li>洗衣機(jī)</li><!-- …… --></ul> </div>
寫(xiě)法：#id 名稱{}。
作用：在需要改變樣式的標(biāo)簽上，使用 id=“選擇器名稱” 調(diào)用對(duì)應(yīng)選擇器。
優(yōu)先級(jí)：大于類選擇器。注意事項(xiàng)如下：
1）id 是唯一的，同一頁(yè)面不能出現(xiàn)多個(gè)相同的 id 定義。
2）id 名稱要求與類選擇器相同。(可以不一樣)
3）通常當(dāng)頁(yè)面中有唯一樣式時(shí)，采用 id 選擇器。 -
后代選擇器與子代選擇器
-
后代選擇器
div .li{color: yellow; }
寫(xiě)法：選擇器 1 選擇器 2 選擇器 3……{} ，每個(gè)選擇器之間用空格分隔。div.li{}表示選中的元素包括 div 里面的 class="li"的元素，其中 class="li"的元素可以是
div 的子代，也可以是 div 的后代，也就是孫代及往后。 -
子代選擇器
div>ul{ color: blue; }
寫(xiě)法：選擇器 1>選擇器 2>選擇器 3……{} ，每個(gè)選擇器之間用大于號(hào)分隔。div>ul{}表示 ul 必須是 div 的直接子代，孫代以后不選中。
-
交集選擇器與并集選擇器
-
交集選擇器
.list#li{color: red; }
寫(xiě)法：選擇器 1 選擇器 2……{} ，選擇器之間沒(méi)有分隔符。.list#li{} 元素必須**同時(shí)具備 **class="list"并且 id="li"樣式才能生效。
-
并集選擇器
寫(xiě)法：選擇器 1,選擇器 2,……{} ，選擇器之間用逗號(hào)分隔。 .li,#li{color: red;
} -
偽類選擇器
a:hover{color: red; }
寫(xiě)法：選擇器名稱:偽類狀態(tài){}。常見(jiàn)的偽類狀態(tài)如下：
link：未訪問(wèn)狀態(tài)。
visited：已訪問(wèn)狀態(tài)。
hover：鼠標(biāo)指向時(shí)，即懸停在元素上方時(shí)。
active：激活選定狀態(tài)（鼠標(biāo)點(diǎn)下去沒(méi)松開(kāi)）。
focus：獲得焦點(diǎn)時(shí)（input 常用）。
超鏈接多種偽類共存時(shí)的順序如下：link→visited→hover→active。 -
選擇器的命名規(guī)則及優(yōu)先級(jí)
- 選擇器的命名規(guī)則
- 只能由字母、數(shù)字、下畫(huà)線組成，不能有其他任何特殊字符。
- 開(kāi)頭不能是數(shù)字，即只能以字母、下畫(huà)線開(kāi)頭。
- 選擇器的優(yōu)先級(jí)
-
第一原則“近者優(yōu)先”，最內(nèi)層選擇器永遠(yuǎn)比外層優(yōu)先。例如：div ul li > div #ul，li在 ul 內(nèi)層，所以 li 標(biāo)簽選擇器能覆蓋外層 id 選擇器。
-
標(biāo)簽選擇器優(yōu)先級(jí)為 1，class 選擇器優(yōu)先級(jí)為 10，id 選擇器優(yōu)先級(jí)為 100。例如：div #li > div ul .li > div ul li，優(yōu)先級(jí)權(quán)重依次為：1+100 > 1+1+10 > 1+1+1。
-
當(dāng)優(yōu)先級(jí)權(quán)重完全相同時(shí)，寫(xiě)在后面的選擇器會(huì)覆蓋前面的選擇器。
div li{ color:red; } div li{ color:blue; } /* 完全相同的選擇器，寫(xiě)在后面的生效 */ -
!important 的作用是將當(dāng)前 CSS 語(yǔ)句提升到最高權(quán)重，即可以覆蓋任何選擇器的 CSS 語(yǔ)句。但是并不推薦使用!important，因?yàn)樗鼤?huì)使你的頁(yè)面難以修改調(diào)試。
div li{color:red !important ; /* 使用!important 會(huì)將此行語(yǔ)句提升到最高權(quán)限 */ }
.li,#li{} 元素只要具備 class="li"或者 id=“l(fā)i”，樣式即可生效。
- CSS 選擇器練習(xí)
-
代碼
<!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: 500px;height: auto;background-color: antiquewhite;}#title{font-weight: 700;color: indianred;}#title>span{font-size: 45px;}ul{font-family: '微軟雅黑';font-size: 30px;}.always{color: darksalmon;}</style> </head> <body><div><ul><li id="title"><span >常用插件</span></li><li>Auto Rename Tag</li><li>Bracket Pair Colorizer</li><li class="always">Chinese</li><li>Code Runner</li><li>HTML CSS Support</li></ul><ul><li>JavaScript(ES6) code snippets</li><li class="always">Live Server</li><li class="always">open in browser</li><li>Path Intellisense</li><li>px-to-vw</li></ul></div> </body> </html> -
成圖
-
CSS 常用屬性
CSS 常用文本屬性
使用 CSS 屬性不僅可以控制文字的大小、顏色和字體等，還可以設(shè)置整個(gè)段落的行高、對(duì)齊方式等屬性，大大提高網(wǎng)頁(yè)的可讀性。
字體、字號(hào)與顏色屬性
-
字體
-
font-family：字體族，設(shè)置字體
可以同時(shí)設(shè)置多個(gè)字體，多個(gè)字體樣式間用逗號(hào)分隔，瀏覽器解析時(shí)，會(huì)從左往右依次查找。選擇可用字體，當(dāng)瀏覽器找不到可用字體時(shí)，將使用系統(tǒng)默認(rèn)字體。
font-family:Arial, 'Microsoft Yahei', sans-serif;名稱說(shuō) 明 Serif 字體在末端擁有額外的裝飾 體 Sans-serif（常用） 字體在末端沒(méi)有額外的裝飾 Monospace 所有字符具有相同的寬度，等寬字體僅針對(duì)西文字 -
font-style：設(shè)置字體樣式
font-style: italic;
通常使用其中的兩個(gè)屬性值：正常(normal) 和斜體(italic)。 -
font：縮寫(xiě)形式（了解）
font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
font 的縮寫(xiě)形式依次為 font-style、font-weight、font-size/line-height、font-family，分別是字體樣式、字體粗細(xì)、字號(hào)/行高、字體族。在使用 font 屬性時(shí)須注意以下問(wèn)題：
1）使用時(shí)必須嚴(yán)格按照上述順序。
2）多個(gè)樣式之間用空格分隔，且 font-size/line-height 必須作為一對(duì)用/分隔。
3）font-size 和 font-family 必須指定，其他樣式不指定將采用默認(rèn)樣式顯示。
-
-
字號(hào)
- font-weight：設(shè)置字體粗細(xì)
可選屬性值：bold 加粗、lighter 細(xì)體或者填寫(xiě) 100～900 的數(shù)字（其中 400 為正常，700 為加粗）。 - font-size：設(shè)置字體大小
屬性值通常為px 或%（其中百分比代表瀏覽器默認(rèn)字體大小的百分比，絕大部分瀏 覽器默認(rèn)為16px）。
- font-weight：設(shè)置字體粗細(xì)
-
字體顏色
- color：設(shè)置字體顏色
- 直接寫(xiě)顏色的英文名字：red、green、blue 等。
- 十六進(jìn)制寫(xiě)法：#FFFFFF，#后每位可選值為數(shù)字 0～9 以及英文的 a～f，每?jī)晌槐硎疽环N顏色，分別對(duì)應(yīng)紅綠藍(lán)的比例（最常用，推薦）。
- rgb 寫(xiě)法：
rgb(0～255,0～255,0～255)
rgba(0～255,0～255,0～255,0～1) 第 4 位數(shù)表示透明度，0 表示全透明，1 表示不透明。
- opacity：設(shè)置透明度
屬性值為 0～1 的數(shù)字。注意：使用 opacity 時(shí)當(dāng)前元素以及子元素均會(huì)透明；而使用 rgba 調(diào)整時(shí)，只會(huì)使當(dāng)前元素透明，不會(huì)改變子元素透明度。
文本屬性
-
line-height
- 像素單位，如 48px。
- 純數(shù)值，表示正常行高的倍數(shù)。
- 百分?jǐn)?shù)，表示正常行高的百分?jǐn)?shù)。 height:100px;line-height:100px; /* 設(shè)置行高等于高度，則當(dāng)前元素中文字垂直居中 */
-
text-align
/* 左對(duì)齊 */text-align: left;/* 居中 */text-align: center;/* 右對(duì)齊 */text-align: right;
設(shè)置塊級(jí)元素中文字的水平對(duì)齊方式，屬性值有 left、center、right。 -
letter-spacing
設(shè)置字符間距，即字與字之間的間距，屬性值通常為**px。 -
text-decoration
/* 上畫(huà)線 */text-decoration: overline;/* 刪除線 */text-decoration: line-through;/* 下畫(huà)線 */text-decoration: underline;
常用屬性值有四個(gè),下畫(huà)線 underline、刪除線 line-through、上畫(huà)線 overline、不做修飾 none。 -
overflow（overflow-x 和 overflow-y）
控制超出范圍文本的顯示方式 - auto：根據(jù)文字多少自動(dòng)顯示滾動(dòng)條。
- scroll：始終顯示滾動(dòng)條。
- hidden：超出范圍文本隱藏，可以通過(guò) overflow-x 和 overflow-y 分別設(shè)置水平垂直方向的隱藏。
-
text-overflow
設(shè)置多余文字的顯示方式,常用屬性值: - clip：裁剪文本；(多余的不顯示，刪去)
- ellipsis：使用省略號(hào)代替多余文字。
-
white-space
設(shè)置元素內(nèi)的空白符怎樣處理。常見(jiàn)屬性值如下 - normal：默認(rèn)，空白會(huì)被瀏覽器忽略。
- nowrap：設(shè)置中文行末不斷行顯示。（一段話不會(huì)分成兩段話）
- pre：空白會(huì)被瀏覽器保留。作用類似 HTML 中的標(biāo)簽。
- 如何讓每行多余文字顯示省略號(hào) white-space：nowrap;/* 如果是中文，需設(shè)置行末不斷行。 */overflow：hidden; /* 設(shè)置控件超出范圍隱藏。 */text-overflow：ellipsis; /* 設(shè)置多余文本省略號(hào)顯示。 */
-
text-shadow
- 水平陰影距離：必寫(xiě)，數(shù)值越大，陰影右移。
- 垂直陰影距離：必寫(xiě)，數(shù)值越大，陰影下移。
- 陰影模糊距離：可寫(xiě)，數(shù)值越大，陰影越模糊。默認(rèn)為 0，不模糊。
- 陰影顏色：可寫(xiě)，默認(rèn)為黑色。 text-shadow: 5px 5px 2px red;
-
text-indent
text-indent:32px; // 首行縮進(jìn) 32px，默認(rèn)字體大小 16px 的情況下，將首行縮進(jìn)兩個(gè)字
首行縮進(jìn)，可以使用像素值調(diào)整段落文字的首行縮進(jìn)大小。 -
text-stroke
-webkit-text-stroke: 3px rgb(69, 131, 245);font-size: 140px;color: rgb(255, 100, 100);
text-stroke 只能在 webkit 內(nèi)核瀏覽器中使用，所以必須使用“-webkit-”前綴，共接收兩個(gè)屬性值分別為描邊的粗細(xì)，描邊的顏色。
文本陰影可以同時(shí)設(shè)置多個(gè)陰影，每個(gè)陰影效果之間以逗號(hào)分隔即可。
text-shadow: 5px 3px 3px blue,-5px -3px 3px red;CSS 常用背景屬性
背景顏色屬性
設(shè)置網(wǎng)頁(yè)背景顏色的是 background-color，其屬性值為顏色值，表達(dá)方式與字體顏色的三種設(shè)置方法相同。
背景圖像屬性
-
background-image
background-image: url(圖片地址的相對(duì)路徑);
設(shè)置背景圖像，背景圖和背景色同時(shí)存在時(shí)，背景圖會(huì)覆蓋背景色。 -
background-repeat
當(dāng)背景圖大小小于元素實(shí)際區(qū)域大小時(shí)，會(huì)默認(rèn)將背景圖進(jìn)行平鋪展示。 - no-repeat：不平鋪。
- repeat：平鋪（默認(rèn)）
- repeat-x：水平方向平鋪。
- repeat-y：垂直方向平鋪。
-
background-size
- 指定寬度和高度
第一種是直接寫(xiě)帶像素單位的數(shù)值；第二種是寫(xiě)百分比（即寬高為父容器寬高的百分比）。 - 當(dāng)只有一個(gè)屬性值時(shí)，默認(rèn)為寬度與高度等比縮放。
- 當(dāng)有兩個(gè)屬性值時(shí)，會(huì)按照指定的高度與寬度進(jìn)行壓縮或拉伸顯示。
- 指定寬度和高度
- 等比縮放
- contain：圖片等比縮放，縮放到寬或高的某一邊等于父容器的寬高，另一邊按照?qǐng)D片大小縮放（可能導(dǎo)致部分區(qū)域無(wú)法覆蓋）。
- cover：圖片等比縮放，使背景圖像完全覆蓋背景區(qū)域（可能導(dǎo)致背景圖部分區(qū)域無(wú)
法顯示）。
background-position
設(shè)置背景圖像的起始位置。
1.當(dāng)只寫(xiě)一個(gè)屬性值時(shí)，默認(rèn)為水平方向，垂直設(shè)為居中。
2.當(dāng)使用像素時(shí)，數(shù)值表示圖片的左上角往各個(gè)方向移動(dòng)的實(shí)際距離。
3.當(dāng)使用百分?jǐn)?shù)時(shí)，一般只能是正數(shù)。百分?jǐn)?shù)表示去掉圖片的大小后，元素中剩余空白距離的分布比例。
background-attachment
設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。
background
屬性值的順序:
CSS 其他常用屬性
CSS 其他常用屬性
-
list-style 規(guī)定列表的樣式，即每個(gè)列表項(xiàng)前的標(biāo)志。
屬性值方 式示 例 none 無(wú)樣式 刷牙 disc 實(shí)心圓（ul默認(rèn)類型） ● 刷牙 circle 空心圓 ○ 刷牙 square 實(shí)心正方形 ■ 刷牙 decimal 數(shù)字（ol默認(rèn)類型） 1.刷牙 還可以直接使用圖像作為列表的標(biāo)志
ul li {list-style-image : url(xxx.png);}
超鏈接樣式屬性
-
超鏈接與其他標(biāo)簽相比有些特殊，可以有多種狀態(tài)，如“未訪問(wèn)狀態(tài)”“已訪問(wèn)狀態(tài)”等，而用于表示超鏈接不同狀態(tài)樣式的選擇器就稱為“偽類選擇器”。
a:link {color:#FF0000;} /* 未被訪問(wèn)的鏈接 */ a:visited {color:#00FF00;} /* 已被訪問(wèn)的鏈接 */ a:hover {color:#FF00FF;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */ a:active {color:#0000FF;} /* 正在被單擊的鏈接 */當(dāng)為鏈接的不同狀態(tài)設(shè)置不同樣式時(shí)，請(qǐng)按照如下次序（規(guī)則）使用：
1）a:hover 必須位于 a:link 和 a:visited 之后。
2）a:active必須位于 a:hover之后。
實(shí)現(xià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>body{background-color: black;}div{color: rgb(160, 160, 160);margin-left: 30px;}h1{color: rgb(189, 189, 189);}th{width: 30px;height: 40px;}#tu1{background-image: url(img/tubiao.png);background-size: 10vw;background-position: -18px 10px;}#tu2{background-image: url(img/tubiao.png);background-size: 10vw;background-position: -50px 10px;}#tu3{background-image: url(img/tubiao.png);background-size: 10vw;background-position: -82px 10px;}#tu4{background-image: url(img/tubiao.png);background-size: 10vw;background-position: -114px 10px;}#tu5{background-image: url(img/tubiao.png);background-size: 10vw;background-position: -146px 10px;}</style> </head> <body><div><h1>聯(lián)系我們</h1><table><tr><th id="tu1"></th><td>總機(jī)：202203192051</td></tr><tr><th id="tu2"></th><td>傳真：1593706154</td></tr><tr><th id="tu3"></th><td>報(bào)名：13797946815</td></tr><tr><th id="tu4"></th><td>郵箱：email@qq.com</td></tr><tr><th id="tu5"></th><td>官網(wǎng)：www.guanwang.com</td></tr></table></div> </body> </html>
CSS3 新增屬性與選擇器
CSS3 的過(guò)渡與變換
-
transition：過(guò)渡屬性
CSS 的transition允許 CSS 的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被單擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫(huà)效果改變 CSS 的屬性值。屬性名介 紹屬 性 值 transition-delay 過(guò)渡開(kāi)始前的延遲時(shí)間 默認(rèn)值是 0，以秒或毫秒為單位，可以省略 transition-duration 過(guò)渡開(kāi)始到過(guò)渡完成的時(shí)間 默認(rèn)值是 0，意味著不會(huì)有效果，以秒或毫秒為單位 transition-property 參與過(guò)渡的屬性 可以單獨(dú)指定某個(gè) CSS 屬性，也可以寫(xiě) all/none transition-timing-function 過(guò)渡的樣式函數(shù) linear（勻速）、ease（逐漸變慢）默認(rèn)值、ease-in（加速）、ease-out（減速）、ease-in-out（加速然后減速），默認(rèn)值是ease -
簡(jiǎn)寫(xiě)屬性 transition
transition: all .3s ease 2s;-
實(shí)例
#Transition{width: 100px;height: 20px;background-color: blue; /* 寬度屬性過(guò)渡效果，過(guò)渡時(shí)長(zhǎng) 2s，延時(shí) 0.2s 開(kāi)始執(zhí)行 */transition:width 2s .2s; -moz-transition:width 2s .2s; /*兼容 Firefox 瀏覽器，詳見(jiàn)注解說(shuō)明 */-webkit-transition:width 2s .2s; /*兼容 Safari 瀏覽器 */ } #Transition:hover{width: 200px; } <div id="Transition"> </div>
-
-
-
transform：變換屬性
通過(guò)使用變換屬性可以對(duì)元素進(jìn)行旋轉(zhuǎn)、拉伸、翻轉(zhuǎn)、縮放等操作。- transform：定義元素向 2D 或 3D 變換。
| none | 元素不進(jìn)行變換 |
| translate(x,y) | 定義 2D 平移變換 |
| translate3d(x,y) | 定義 3D 變換 |
| translateX(x) | 定義沿 X 軸平移變換，Y 軸與 Z 軸同理 |
| scale(x,y) | 定義 2D 縮放變換 |
| scale3d(x,y,z) | 定義 3D 縮放變換 |
| scaleX(x) | 通過(guò)設(shè)置 X 軸的值來(lái)進(jìn)行縮放，Y 軸與 Z 軸同理 |
| rotate(angle) | 通過(guò)設(shè)置 X 軸的值來(lái)進(jìn)行縮放，Y 軸與 Z 軸同理 |
| skew(x-angle,y-angle) | 定義沿著 X 軸和 Y 軸的 2D 傾斜轉(zhuǎn)換 |
-
實(shí)例
- 代碼
-
效果圖
-
transform-origin：改變轉(zhuǎn)換元素的位置。
transform-origin 設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置，2D 轉(zhuǎn)換元素可以改變?cè)氐?X 軸和 Y 軸；對(duì)于 3D 轉(zhuǎn)換元素還可以更改元素的 Z 軸。- transform-origin 的屬性值
- x-axis，可以使用的值有：left、right、center、**px、百分比。
- y-axis，可以使用的值有：left、right、center、**px、百分比。
- z-axis，可以使用的值有：**px。
- 實(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 type="text/css">#exm{margin: 100px ;}#testTransform1{position: absolute;width: 200px;height: 100px;background-color: red;transform: rotate(30deg);}#testTransform2{width: 200px;height: 100px;background-color: red;transform: rotate(30deg);transform-origin: 0 0;/*變換基點(diǎn)到左上角位置,不加此行代碼效果如圖 7-5 所示，加此行代碼效果如圖 7-6 所示，讀者可自行嘗試注釋此行代碼，來(lái)確認(rèn)效果*/}.textback{margin:100px ;width: 200px;height: 100px;border: 3px solid black;}</style> </head> <body ><div id="exm"><div class="textback"><div id="testTransform1"></div></div><div class="textback"><div id="testTransform2"></div></div></div> </body> </html> -
效果圖
-
CSS3 動(dòng)畫(huà)
CSS3 動(dòng)畫(huà)是指使用 CSS 代碼讓網(wǎng)頁(yè)中的元素運(yùn)動(dòng)起來(lái)形成的動(dòng)畫(huà)。
CSS3 動(dòng)畫(huà)的@keyframes 和 animation
-
使用@keyframes 創(chuàng)建關(guān)鍵幀動(dòng)畫(huà)
@keyframes 動(dòng)畫(huà)名稱{階段 1{CSS 樣式}階段 2{CSS 樣式}階段 3{CSS 樣式} }
@keyframes 用于創(chuàng)建動(dòng)畫(huà)。- 動(dòng)畫(huà)中階段的寫(xiě)法有兩種方式：
- 每個(gè)階段用百分比表示，從 0%到 100%（起止必須設(shè)置，即 0%和 100%）。
- 使用 from 和 to 表示從某階段到某階段。 <style type="text/css"> /* 使用 0%到 100%表示（起止必須設(shè)置，即 0%和 100%）*/@keyframes myFrame1{0%{top: 0px;}30%{top: 50px;}100%{top: 100px;}}/* 使用 from-to 直接表示開(kāi)始結(jié)尾，樣式會(huì)勻速變化*/@keyframes myFrame2{from{top:0px;}to{top: 100px;}} </style>
使用 animation 調(diào)用關(guān)鍵幀動(dòng)畫(huà)
動(dòng)畫(huà)屬性中必須有動(dòng)畫(huà)名稱和時(shí)長(zhǎng)，否則動(dòng)畫(huà)不生效。
CSS3 animation 動(dòng)畫(huà)屬性
-
animation
除 animation-play-state 之外的所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性，可以設(shè)置多個(gè)動(dòng)畫(huà)，每個(gè)動(dòng)畫(huà)之間用空格分隔。 -
animation-name.
規(guī)定 @keyframes 動(dòng)畫(huà)的名稱。 -
animation-duration
規(guī)定完成一個(gè)動(dòng)畫(huà)所需的秒或毫秒，默認(rèn)是 0。 -
animation-timing-function
- linear：動(dòng)畫(huà)從頭到尾的速度是相同的。
- ease：默認(rèn)值，動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前開(kāi)始變慢。
- ease-in：動(dòng)畫(huà)以低速開(kāi)始，然后逐漸加快至勻速直到結(jié)束。
- ease-out：動(dòng)畫(huà)以勻速開(kāi)始到低速結(jié)束。
- ease-in-out：動(dòng)畫(huà)以低速開(kāi)始和結(jié)束。
animation-delay
規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始，默認(rèn)是 0。
animation-iteration-count
規(guī)定動(dòng)畫(huà)被播放的次數(shù)，默認(rèn)是 1。 使用 infinite 表示無(wú)限次播放。
animation-direction
animation-play-state
animation-fill-mode
實(shí)例
CSS3 其他常用屬性
CSS3 多列屬性
-
columns
列的寬度與列數(shù)的簡(jiǎn)寫(xiě)屬性。 -
column-count
規(guī)定元素被分隔的列數(shù)。屬性值可以設(shè)為 auto，由其他屬性決定列數(shù)，如 columnwidth，或自定義列數(shù)。 -
column-width
規(guī)定每個(gè)列的寬度。屬性值可以為帶像素單位的數(shù)值或 auto。 -
column-rule
設(shè)置每個(gè)列之間邊框的寬度、樣式和顏色，為簡(jiǎn)寫(xiě)屬性。 -
column-rule-width
規(guī)定兩列間邊框的寬度。可選屬性值有四個(gè)，分別為 thin（細(xì)邊框）、medium（中等邊框）、thick（粗邊框），還有自定義邊框?qū)挾?*px。 -
column-rule-style
規(guī)定兩列間邊框的樣式。常見(jiàn)屬性值有六個(gè)，分別為 none（無(wú)樣式）、hidden（隱藏樣式）、dotted（點(diǎn)狀線）、dashed（虛線）、solid（實(shí)線）、double（雙線）。 -
column-rule-color
規(guī)定兩列間邊框的顏色。 -
column-gap
設(shè)置每個(gè)列之間的距離。屬性值可設(shè)為 normal（W3C 建議的值是 1em）或帶像素單位的數(shù)值。 -
實(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>.columns{border: ridge 5px #ffd3c7;width: 400px;margin: 20px;column-count: 2;column-rule: ridge 5px #ffd3c7;}</style> </head> <body><div class="columns">CSS 的漸變效果可以在兩個(gè)及以上指定的顏色之間顯示平穩(wěn)地過(guò)渡。過(guò)去可能使用圖像才能實(shí)現(xiàn)這些效果，但現(xiàn)在通過(guò)使用 CSS3 的漸變就可以輕松完成。此外，擁有漸變效果的元素在放大時(shí)看起來(lái)效果更好，這是由瀏覽器生成的。漸變包括線性漸變和徑向漸變，有四個(gè)屬性可以設(shè)置：1）linear-gradient：用線性漸變創(chuàng)建圖像。2）radial-gradient：用徑向漸變創(chuàng)建圖像。3）repeating-linear-gradient：用重復(fù)的線性漸變創(chuàng)建圖像。4）repeating-radial-gradient：用重復(fù)的徑向漸變創(chuàng)建圖像。1．線性漸變的屬性值1）point：設(shè)置漸變的起始位置，可以使用的值有 left、right、top、bottom 以及角度值，在不同瀏覽器內(nèi)核中屬性值的寫(xiě)法有所不同，具體寫(xiě)法參考下面的基本語(yǔ)法。2）color-stop：設(shè)置漸變的起始顏色，可以寫(xiě)多個(gè)。3）color-stop：設(shè)置漸變的終點(diǎn)顏色。</div> </body> </html>
CSS3 新增選擇器
這些選擇器可能不是必須使用的，但是熟練地使用這些選擇器，可以少寫(xiě)很多的 class 名稱以及 id 名稱，極大地提高了代碼整潔度。
屬性選擇器
| E[att] | 選擇具有 att 屬性的 E 元素 |
| E[att=“val”] | 選擇具有 att 屬性且屬性值等于 val 的 E 元素 |
| E[att^=“val”] | 選擇具有 att 屬性且屬性值為以 val 開(kāi)頭的字符串的 E 元素 |
| E[att$=“val”] | 選擇具有 att 屬性且屬性值為以 val 結(jié)尾的字符串的 E 元素 |
| E[att*=“val”] | 選擇具有 att 屬性且屬性值為包含 val 的字符串的 E 元素 |
結(jié)構(gòu)偽類選擇器
| E:nth-child(n) | 匹配父元素的第 n 個(gè)子元素 E |
| E:first-of-type | 匹配同類型中的第一個(gè)同級(jí)兄弟元素 E |
| E:only-child | 匹配父元素僅有的一個(gè)子元素 E |
| E:empty | 匹配沒(méi)有任何子元素（包括 text 節(jié)點(diǎn)）的元素 E |
狀態(tài)偽類選擇器
| E:enabled | 匹配用戶界面上處于可用狀態(tài)的元素 E |
| E:disabled | 匹配用戶界面上處于禁用狀態(tài)的元素 E |
| E:checked | 匹配用戶界面上處于選中狀態(tài)的元素 E |
其他選擇器
| E～F | 兄弟選擇器，選擇 E 元素所有兄弟元素 F |
| E:not(s) | 否定偽類選擇器，匹配不含有 s 選擇符的元素 E |
| E:after/E::after | 設(shè)置在對(duì)象后發(fā)生的內(nèi)容。用來(lái)和 content 屬性一起使用，并且必須定義 content 屬性 |
實(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>#div p[title] {/*選擇具有 title 屬性的 p 元素。*/color: blue;}#div option[selected="selected"] {/*選擇具有 selected 屬性且屬性值等于 selected 的 option 元素。*/color: white;}#div option[selected^="sel"] {/*選擇具有 selected 屬性且屬性值為以 sel 開(kāi)頭的字符串的 option 元素。*/background-color: pink;}#div option[disabled$="led"] {/*選擇具有 disabled 屬性且屬性值為以 led 結(jié)尾的字符串的 option 元素。*/background-color: greenyellow;}#div option[disabled*="ed"] {/*選擇具有 disabled 屬性且屬性值包含 ed 結(jié)尾的字符串的 option 元素。*/font-weight: bold;} /* ---------------------------------------------------------------------- */#div1 p:nth-child(2) {/*選中父元素中的第二個(gè)子元素 p*/font-weight: bold;/*加粗*/}#div1 p:first-of-type {/*選中父元素中第一個(gè)同類型子元素*/font-style: italic;/*傾斜*/}a:only-child {/*選中父元素僅有的子元素 a*/text-decoration: underline;/*下畫(huà)線*/}#div1 p:empty {/*選中沒(méi)有任何子元素的 p 標(biāo)簽*/height: 20px;width: 200px;background-color: yellow;} /* --------------------------------------------------------------------------- */input:enabled {/*選中可以操作的 input*/font-weight: bold;height: 30px;}input:disabled {/*選中被禁用的 input*/width: 30px;background-color: red;}input:checked {width: 30px;} /* --------------------------------------------------------------------------- */#div2 p～span {/* 兄弟選擇器 */font-weight: bold;}#div2 p:not(span) {/* 否定偽類選擇器 */text-decoration: line-through;}#span::after {/* 偽對(duì)象選擇器 */background: #fff;color: #000;content: " 這是寫(xiě)在 p 標(biāo)簽后的內(nèi)容";font-size: 14px;}</style> </head> <body><div id="div"><p title="study">前端學(xué)習(xí)</p><select name="kuangjia"><option>框架</option><option selected="selected">Bootstrap</option><option disabled="disabled">JQuery</option><option>AngularJS</option></select></div> <!-- ----------------------------------------------------------------------- --><div id="div1"><p>第一個(gè) p 標(biāo)簽</p><p>第二個(gè) p 標(biāo)簽</p><p></p><!--沒(méi)有子元素的 p 標(biāo)簽--></div><div><a>父元素中僅有子元素的 a</a></div> <!-- ----------------------------------------------------------------------- -->第一個(gè)輸入框：<input type="text" /> <br /><br />第二個(gè)輸入框：<input type="button" disabled="disabled" /> <br /><br />第三個(gè)選擇框：<input type="checkbox" checked="checked" style="vertical-align: middle;" /> 選中項(xiàng)<input type="checkbox" style="vertical-align: middle;" /> 未選中項(xiàng) <!-- ----------------------------------------------------------------------- --><div id="div2"><p>第三個(gè) p 標(biāo)簽</p><p>第四個(gè) p 標(biāo)簽</p><span id="span">第一個(gè) span</span></div> </body></html>動(dòng)畫(huà)實(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>#dance{width: 700px;height: 700px;animation: dance 1.5s ease-in-out alternate infinite ;background-repeat: no-repeat;}@keyframes dance {0%{background-image: url(img/嗨起來(lái)1.png);}16%{background-image: url(img/嗨起來(lái)1.png);}17%{background-image: url(img/嗨起來(lái)2.png);}33%{background-image: url(img/嗨起來(lái)2.png);}34%{background-image: url(img/嗨起來(lái)3.png);}50%{background-image: url(img/嗨起來(lái)3.png);}51%{background-image: url(img/嗨起來(lái)4.png);}67%{background-image: url(img/嗨起來(lái)4.png);}68%{background-image: url(img/嗨起來(lái)5.png);}84%{background-image: url(img/嗨起來(lái)5.png);}85%{background-image: url(img/嗨起來(lái)6.png);}100%{background-image: url(img/嗨起來(lái)6.png);}}</style> </head> <body><div id="dance"></div> </body> </html>CSS 盒模型與浮動(dòng)定位
盒模型
任何一個(gè)元素都可以理解成為一個(gè)盒子，CSS 盒模型主要用來(lái)設(shè)計(jì)和布局。
打開(kāi)開(kāi)發(fā)者模式（F12），選擇元素，選擇樣式，該圖為盒子模型
margin：外邊距
-
外邊距的屬性
圍繞在元素周圍的空白區(qū)域就是外邊距，外邊距是透明的，因此不會(huì)遮擋其后面的元素。
外邊距有四個(gè)屬性可以設(shè)置，對(duì)應(yīng)上、下、左、右四個(gè)方向，可以使用 margin-top、margin-bottom、margin-left、margin-right 來(lái)分別設(shè)置，也可以使用簡(jiǎn)寫(xiě)形式 margin 來(lái)設(shè)置。屬性值可以是帶單位的數(shù)值（如像素、厘米等），也可以是百分比，還可以設(shè)為 auto。簡(jiǎn)寫(xiě)形式的 margin 可以有 1～4 個(gè)值。
寫(xiě)一個(gè)數(shù)值：上、下、左、右四個(gè)方向數(shù)值相等。
寫(xiě)兩個(gè)數(shù)值：第一個(gè)數(shù)等于上下外邊距，第二個(gè)數(shù)等于左右外邊距。
寫(xiě)三個(gè)數(shù)值：上、右、下邊距，左邊默認(rèn)等于右邊。
寫(xiě)四個(gè)數(shù)值：上、右、下、左 4 個(gè)方向的邊距。
當(dāng)設(shè)置 margin: 0 auto; 時(shí)，代表塊級(jí)盒子在父容器中水平居中。 -
多個(gè)盒子之間的外邊距影響
-
行內(nèi)盒子水平排放的外邊距
結(jié)論：水平排放的盒子，水平間距是 margin 的累加。
-
塊級(jí)盒子垂直排放的外邊距
結(jié)論：垂直排放的盒子，垂直間距是合并的（取最大值）。
-
父、子盒子的垂直外邊距合并
未設(shè)置子盒子的上外邊距和為子盒子添加 30px 的上外邊距后的效果
在給子盒子添加上外邊距后，父、子盒子同時(shí)下移，這說(shuō)明父、子盒子的外邊距合并了。為子盒子添加的上外邊距也就是為父盒子添加了上外邊距，這對(duì)網(wǎng)頁(yè)排版造成了一定影響。
- 三種解決方式
- 父盒子添加 overflow：hidden。
- 父盒子添加 padding。
- 父盒子添加 border。
border：邊框
-
border-style
border-style:dotted solid dashed double; /*分別設(shè)置四個(gè)邊框的樣式*/
當(dāng)使用 border-style 設(shè)置邊框樣式時(shí)，可以寫(xiě) 1～4 個(gè)值。（與margin相同）border-style 的常用屬性值有以下幾個(gè)。
none：無(wú)邊框。
hidden：與 none 相同。
dotted：設(shè)置為點(diǎn)狀邊框。
dashed：設(shè)置為虛線邊框。
solid：設(shè)置為實(shí)線邊框。
double：設(shè)置為雙線邊框。雙線的寬度等于 border-width 的值。 -
border-width
border-width:thin medium thick 10px; /*分別設(shè)置 4 個(gè)邊框的寬度*/
border-width 用于為元素的邊框設(shè)置寬度，可以單獨(dú)設(shè)置一個(gè)邊框，也可以設(shè)置所有邊框。border-width 的屬性值通常有以下四種。
thin：設(shè)置為細(xì)邊框。
medium：默認(rèn)，設(shè)置為中等邊框。
thick：設(shè)置為粗邊框。
length：使用帶單位的數(shù)值自定義邊框?qū)挾?#xff0c;不可設(shè)置為負(fù)值。 -
border-color
border-color:red green blue yellow; /*分別設(shè)置四個(gè)邊框的顏色*/
border-color 屬性設(shè)置四條邊框的顏色，可以單獨(dú)設(shè)置一個(gè)邊框，也可以設(shè)置所有邊框。
padding：內(nèi)邊距
padding 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置內(nèi)容與邊框之間的填充區(qū)域，可以寫(xiě) 1～4 個(gè)值，同 margin。
盒模型相關(guān)屬性
-
overflow：內(nèi)容溢出控制
- overflow 屬性規(guī)定了內(nèi)容溢出盒子時(shí)如何處理。
- Visible（默認(rèn)值）：內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
- auto：根據(jù)內(nèi)容多少選擇顯示滾動(dòng)條，文字多的時(shí)候顯示滾動(dòng)條。
- scroll：無(wú)論文字多少，都會(huì)顯示垂直和水平兩個(gè)滾動(dòng)條。
- hidden：超出區(qū)域的文字直接隱藏，無(wú)法看到。
outline：外圍線
outline 是顯示在邊框邊緣外圍的一條線，起到突出元素的作用。外圍線的屬性寫(xiě)法與邊框相同，外圍線不會(huì)占用空間。
box-shadow：盒子陰影
- box-shadow 是給元素周圍添加陰影效果，該屬性有六個(gè)屬性值。
- X 軸陰影距離：必寫(xiě)，可正可負(fù)，正值右移，負(fù)值左移。
- Y 軸陰影距離：必寫(xiě)，可正可負(fù)，正值下移，負(fù)值上移。
- 陰影模糊半徑：可寫(xiě)，只能為正，默認(rèn)值為 0。數(shù)值越大，陰影越模糊。
- 陰影擴(kuò)展半徑：可寫(xiě)，可正可負(fù)，默認(rèn)值為 0。數(shù)值增大，陰影擴(kuò)大；數(shù)值減小，陰影縮小。
- 陰影顏色：可寫(xiě)，默認(rèn)為黑色。
- 內(nèi)外陰影：可寫(xiě)，可選值：inset（內(nèi)陰影），不選默認(rèn)為外陰影。
border-radius：邊框圓角
- border-radius 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，可以設(shè)置一個(gè)元素四個(gè)邊框的圓角。
-
基本用法
border-radius: 40px 30px 20px 10px/40px 30px 20px 10px;
border-radius 的屬性值有兩種寫(xiě)法，一種是使用帶單位的數(shù)值；另一種是使用百分比設(shè)置。border-radius 可設(shè)置的值有八個(gè)，基本語(yǔ)法如下：代碼含義：“/”前后各有四個(gè)值，依次對(duì)應(yīng)的是左上角、右上角、右下角、左下角。而
“/”前表示四頂點(diǎn)沿 X 軸移動(dòng)的距離，“/”后表示四頂點(diǎn)沿 Y 軸移動(dòng)的距離。移動(dòng)完成后，用弧線連接，即為圓角， -
簡(jiǎn)寫(xiě)形式
-
只寫(xiě) X 軸，Y 軸將默認(rèn)等于 X 軸?；菊Z(yǔ)法如下：
border-radius:50px 20px 50px 20px; //只寫(xiě) X 軸。 Y 軸=X 軸 -
4 個(gè)角寫(xiě)不全，默認(rèn)對(duì)角相等。基本語(yǔ)法如下：
border-radius:50px 20px; // 只寫(xiě)左上角，右上角。 右下角=左上角；左下角=右上角 -
只寫(xiě)一個(gè)值，默認(rèn) 8 個(gè)數(shù)均等。基本語(yǔ)法如下：
border-radius:50p; //只寫(xiě)一個(gè)值，默認(rèn) 8 個(gè)數(shù)均等
-
border-image：圖片邊框
- border-image 表示為當(dāng)前盒子設(shè)置一個(gè)圖片邊框，也就是使用圖片進(jìn)行裁切作為邊框顯示
-
圖片路徑（border-image-source）
border-image-source: url(img/border.png);
用于當(dāng)作邊框的圖片地址，使用 url()引入圖片路徑。 -
圖片切片寬度（border-image-slice）
border-image-slice:27 27 27 27; border-image-slice:27; // 表示 4 條切線都是 27px
有 4 個(gè)值，代表上、右、下、左 4 條切線，通過(guò) 4 條切線切割，可以將圖片分為 9 宮格。
-
邊框?qū)挾?#xff08;border-image-width）
border-image-width: 10 10 10 10; border-image-width: 10; // 表示 4 條邊框的寬度都是 10px
邊框?qū)挾缺硎緢D片邊框的寬度大小，使用規(guī)則與 border 類似。 -
圖片重復(fù)方式（border-image-repeat）
border-image-repeat:stretch; // 拉伸 border-image-repeat:round; // 鋪滿 border-image-repeat:repeat; // 重復(fù)
設(shè)置邊框區(qū)域圖片的重復(fù)方式。 -
簡(jiǎn)寫(xiě)方式（border-image）
border-image: url(img/border.png) 27/10px stretch;縮寫(xiě)時(shí)的順序必須按照?qǐng)D片路徑、切片寬度、邊框?qū)挾?、重?fù)方式。其中，切片寬度和邊框?qū)挾戎g用“/”分隔，且只能在邊框?qū)挾群髱в幸粋€(gè) px 單位。
心型實(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>#center{width: 1040px;height: 90vh;margin: 0 auto;}#heart{float: left;width: 520px;height: 1050px;}#left-up{width: 100%;height: 30%;background-color: crimson;border-radius: 70% 30% 0 0/90% 70% 0 0;}#right-up{width: 100%;height: 30%;background-color: crimson;border-radius: 30% 70% 0 0/ 70% 90% 0 0;}#left-down{width: 100%;height: 70%;background-color:crimson ;border-radius: 0 0 0 100%;}#right-down{width: 100%;height: 70%;background-color:crimson ;border-radius: 0 0 100% 0;}</style> </head> <body><div id="center"><div id="heart"><div id="left-up"></div><div id="left-down"></div></div><div id="heart"><div id="right-up"></div><div id="right-down"></div></div></div> </body> </html>浮動(dòng)與清除浮動(dòng)
float：浮動(dòng)
float 屬性使元素脫離了常規(guī)文檔流而表現(xiàn)為向右或向左浮動(dòng)，由于浮動(dòng)的元素不在文檔流中，所以在文檔流中浮動(dòng)的元素就像不存在一樣，其周圍的元素也會(huì)重新排列。
clear：清除浮動(dòng)
浮動(dòng)只能打破文檔流，不能打破文字流
當(dāng)給 div1 添加浮動(dòng)以后，div2 受到 div1 的影響，給第二個(gè) div 添加“clear:both”后如圖一
子盒子浮動(dòng)造成父盒子高度塌陷
子元素全部浮動(dòng)后，父元素的高度將會(huì)塌陷為 0
在父元素中添加一個(gè)新的元素，為新元素設(shè)置 clear:both
.clear{clear:both; height: 0; } <div class="outer"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="clear"></div> </div>為父元素添加 overflow: hidden 屬性
.outer{overflow:hidden; } <div class="outer"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div> </div>為父元素添加偽類：after，對(duì)偽類設(shè)置 clear:both（推薦）
.outer :after {clear:both;content:'';display:block;width: 0;height: 0; } <div class="outer"><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div> </div>定位
定位與浮動(dòng)一樣，都是改變?cè)卦谡Ｎ臋n流中的位置，對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行重新排版。
relative：相對(duì)定位
元素重新定位后，之前元素所在的空間并沒(méi)有再被其他元素占據(jù)，即元素原來(lái)的空間沒(méi)有被釋放。
absolute：絕對(duì)定位
fixed：固定定位
固定定位是一種特殊的絕對(duì)定位，它與普通絕對(duì)定位的區(qū)別是無(wú)論父元素是否定位，子元素如果采用固定定位，都將相對(duì)于瀏覽器左上角定位，且固定在指定位置，不隨瀏覽器滾動(dòng)條的滾動(dòng)而滾動(dòng)。
以上三種定位方式均使用 top、left、bottom、right 調(diào)整位置。當(dāng) left 和 right 同時(shí)存在，left 生效；當(dāng) top 和 bottom 同時(shí)存在，top 生效。
static：沒(méi)有定位，默認(rèn)值。
沒(méi)有定位
使用定位實(shí)現(xiàn)元素的絕對(duì)居中
z-index
設(shè)置定位元素的層疊順序。
后來(lái)者居上，即寫(xiě)在后面的元素在上一層。
布局實(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>*{margin: 0;padding: 0;font-size: 2.667vw;}#center{width: 93.333vw;height: 100vh;margin: 0 auto;background-color: antiquewhite;}#head{position: relative;width: 100%;height: 20vh;background-color: aqua;}#head div:first-child{float: left;width: 20%;height: 100%;margin-right: 1%;background-color: blueviolet;}#head div:nth-child(2){float: left;width: 58%;height: 100%;background-color: aquamarine;}#head div:last-child{float: right;width: 20%;height: 100%;background-color:chartreuse;}#nav{width: 100%;height: 5vh;background-color: cornflowerblue;margin: 0.5% 0;}#body{width: 100%;height: 70%;background-color:thistle;}#left{float: left;width: 80%;height: 100%;background-color: silver;}#right{float: right;width: 19%;height: 100%;background-color: violet;}.hang1{width: 100%;height: 49%;margin-bottom: 0.9%;background-color:darkgoldenrod;}.hang2{width: 100%;height: 49%;background-color: darkgoldenrod;}.xiao{float: left;width: 30%;height: 100%;background-color: coral;}.da{float: right;width: 69%;height: 100%;background-color: tomato;}</style> </head> <body><div id="center"><div id="head"><div></div><div></div><div></div></div><div id="nav"></div><div id="body"><div id="left"><div class="hang1"><div class="xiao"></div><div class="da"></div></div><div class="hang2"><div class="xiao"></div><div class="da"></div></div></div><div id="right"></div></div></div> </body> </html>移動(dòng)開(kāi)發(fā)與響應(yīng)式
媒體設(shè)備常用屬性
媒體設(shè)備，即各種不同的展示設(shè)備，每個(gè)設(shè)備的大小、尺寸、分辨率都將影響網(wǎng)頁(yè)展示的實(shí)際效果。
設(shè)備寬度（device-width）指當(dāng)前設(shè)備的屏幕寬度。通常，每個(gè)設(shè)備的屏幕寬度是固定不變的，而不同設(shè)備的屏幕寬度又是各不相同的。設(shè)備高度（device-height）同理。
寬度（width）指瀏覽器窗口的寬度。對(duì)于桌面操作系統(tǒng)來(lái)說(shuō)，就是當(dāng)前瀏覽器的寬度（并且是包括滾動(dòng)條的）。最小寬度（min-width）表示當(dāng)前元素允許的最小寬度，最大寬度（max-width）表示當(dāng)前元素允許的最大寬度。高度（height）、最小高度（min-height）、最大高度（max-height）同理。
設(shè)備方向表示當(dāng)前設(shè)備所處的方向是水平方向還是垂直方向。但是，取值并不是用水平或垂直表示，只有兩個(gè)可選值：portrait 和 landscape。
設(shè)備分辨率表示當(dāng)前設(shè)備的分辨率大小，可以使用整數(shù)表示分辨率的取值，單位為dpi。該特性接受 min 和 max 前綴，因此可以派生出 min-resolution 和 max-resolution 兩個(gè)媒體特性。resolution:960dpi; /* 屏幕分辨率為 960dpi */ min-resolution:300dpi; /* 屏幕最小分辨率為 300dpi */ max-resolution:1080dpi; /* 屏幕最大分辨率為 1080dpi */
網(wǎng)頁(yè)的布局方式
-
固定布局
固定布局是指網(wǎng)頁(yè)中每塊內(nèi)容的寬高都是由固定的像素寬度值確定，同時(shí)這些內(nèi)容區(qū)塊的位置也是固定的，所以不管屏幕大小如何變化，用戶看到的都是固定寬度的內(nèi)容。960px 已經(jīng)成為現(xiàn)代 Web 設(shè)計(jì)的標(biāo)準(zhǔn)，因?yàn)榇蠖鄶?shù)用戶被假定為使用1024px*768px 分辨率。
-
流體布局
流體布局也稱為流動(dòng)布局，是自適應(yīng)布局的一種。其實(shí)現(xiàn)方法就是將大多數(shù)元素區(qū)塊都設(shè)成百分比寬度，而不是用具體的像素單位，這樣可以讓頁(yè)面根據(jù)用戶的屏幕和瀏覽器窗口大小自適應(yīng)調(diào)整。 -
響應(yīng)式布局介紹
響應(yīng)式布局就是一個(gè)網(wǎng)站能夠兼容多種終端，而不是為每種終端做一個(gè)對(duì)應(yīng)的網(wǎng)站。這種布局主要是為改善移動(dòng)互聯(lián)網(wǎng)的瀏覽體驗(yàn)而誕生的。 - 響應(yīng)式布局優(yōu)點(diǎn)
- 面對(duì)不同分辨率設(shè)備，展示不同效果的網(wǎng)站，靈活性強(qiáng)。
- 能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題，而不需要做計(jì)算機(jī)站與手機(jī)站。
- 響應(yīng)式布局缺點(diǎn)
- 兼容各種設(shè)備工作量大，效率低下（但相比于制作計(jì)算機(jī)站+手機(jī)站，還是快速很多）
- 代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，使頁(yè)面加載時(shí)間變長(zhǎng)。
- 響應(yīng)式的實(shí)現(xiàn)方式
響應(yīng)式布局沒(méi)有固定的要求，只要能實(shí)現(xiàn)計(jì)算機(jī)站與手機(jī)站的不同效果顯示，都可以稱為響應(yīng)式網(wǎng)站。 - 媒體查詢。
- 流體布局。
- 彈性布局。
- 通過(guò) JavaScript、JQuery 進(jìn)行判斷來(lái)顯示不同的布局頁(yè)面。
- Bootstrap 等第三方框架。
-
媒體查詢的基本語(yǔ)法
@media[not|only] type [and][expr]{rules }
媒體查詢主要是使用@media 關(guān)鍵字來(lái)實(shí)現(xiàn)，通過(guò)檢測(cè)媒體類型是否符合要求，而確定是否執(zhí)行這段 CSS 代碼。 - and、not、only：邏輯關(guān)鍵字
邏輯關(guān)鍵字配合緊跟的媒體類型發(fā)揮作用，如 not screen 表示不檢測(cè)屏幕寬度；onlyscreen 表示只檢測(cè)屏幕寬度而不關(guān)心其他媒體設(shè)備的屬性。 - type：媒體類型
媒體設(shè)備的類型有很多，大家可以參考幫助文檔自行了解。網(wǎng)頁(yè)開(kāi)發(fā)中最常用的有 all和 screen，all 表示檢測(cè)所有媒體設(shè)備；screen 表示只檢測(cè)媒體設(shè)備的屏幕寬度而不關(guān)心是哪種設(shè)備。 - expr：媒體表達(dá)式
媒體表達(dá)式中用的屬性就是 9.1.1 節(jié)講解的各種媒體設(shè)備常用屬性，比如最常用的就是檢測(cè)屏幕的寬度處于某個(gè)范圍之間：(min-width:640px) and (max-width: 980px)。 - rules：CSS 代碼
當(dāng)上述設(shè)置的媒體設(shè)備查詢語(yǔ)句生效以后，需要執(zhí)行的 CSS 代碼。與普通的 CSS 選擇器、語(yǔ)句寫(xiě)法完全相同，只是如果媒體設(shè)備查詢不符合要求將不執(zhí)行。@media only screen (min-width:640px) and (max-width: 980px) {body{background-color: red;} } -
使用媒體查詢的三種方式
-
直接在 CSS 文件中使用
<style type="text/css">// 沒(méi)有經(jīng)過(guò)媒體查詢限制的 CSS@media 類型 and (條件 1) and (條件 2){// 媒體查詢生效才會(huì)執(zhí)行的 CSS } </style> -
使用 import 導(dǎo)入
@import url("css/media.css") all and (max-width:980px); // 當(dāng)所有設(shè)備的寬度小于 980px 時(shí)，才會(huì)使用 import 導(dǎo)入 CSS 文件 -
使用 link 鏈接，media 作為屬性用于設(shè)置查詢方式
<link rel="stylesheet" href="css/media.css" media="all and (max-width:980px)" /> // 當(dāng)所有設(shè)備的寬度小于 980px 時(shí)，才會(huì)使用 link 鏈接 CSS 文件
多媒體查詢語(yǔ)法
@media not|only mediatype and (expressions) {CSS 代碼...; }- not: not是用來(lái)排除掉某些特定的設(shè)備的，比如 @media not print（非打印設(shè)備）。
- only: 用來(lái)定某種特別的媒體類型。對(duì)于支持Media Queries的移動(dòng)設(shè)備來(lái)說(shuō)，如果存在only關(guān)鍵字，移動(dòng)設(shè)備的Web瀏覽器會(huì)忽略only關(guān)鍵字并直接根據(jù)后面的表達(dá)式應(yīng)用樣式文件。對(duì)于不支持Media Queries的設(shè)備但能夠讀取Media Type類型的Web瀏覽器，遇到only關(guān)鍵字時(shí)會(huì)忽略這個(gè)樣式文件。
- all: 所有設(shè)備，這個(gè)應(yīng)該經(jīng)?？吹健?/li>
CSS3 多媒體類型
| all | 用于所有多媒體類型設(shè)備 |
| 用于打印機(jī) | |
| screen | 用于電腦屏幕，平板，智能手機(jī)等。 |
| speech | 用于屏幕閱讀器 |
多媒體查詢簡(jiǎn)單實(shí)例
在屏幕可視窗口尺寸小于 480 像素的設(shè)備上修改背景顏色:
@media screen and (max-width: 480px) {body {background-color: lightgreen;} }在屏幕可視窗口尺寸大于 480 像素時(shí)將菜單浮動(dòng)到頁(yè)面左側(cè)：
@media screen and (min-width: 480px) {#leftsidebar {width: 200px; float: left;}#main {margin-left:216px;} }媒體查詢實(shí)例練習(xí)
<!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>*{margin: 0;padding: 0;}#med{width: 100vw;height: 100vh;text-align: center;font-size: 3vw;}#header{width: 100%;height: 15%;background-color: thistle;line-height: 15vh;}#header ul{list-style-type: none;}#header li{float: left;width: 15%;height: 100%;color: azure;}#header div{display: none;}#body{width: 100vw;height: 69vh;margin: 0.5vh 0;line-height: 69vh;}#body div{float: left;}#left{width: 17%;height: 100%;background-color: bisque;}#center{width: 65%;height: 100%;background-color: bisque;margin: 0 0.5%;}#right{width: 17%;height: 100%;background-color: bisque;}#footer{width: 100%;height: 15vh;background-color: thistle;color: azure;line-height: 15vh;}@media screen and (max-width:560px) {#header ul{display: none;}#header div{display: block;float: right;width: 20%;height: 100%;}#body div{width: 100%;}#left,#right{height: 17%;line-height: 11.73vh;}#center{height: 65%;margin: 0.5% 0;line-height: 44.85vh;}}</style> </head> <body><div id="med"><div id="header"><ul><li>Head1</li><li>Head2</li><li>Head3</li><li>Head4</li><li>Head5</li></ul><div>icon</div></div><div id="body"><div id="left">left</div><div id="center">center</div><div id="right">right</div></div><div id="footer">footer</div></div> </body> </html>CSS3 彈性布局
彈性布局的基本概念
容器（box）：需要添加彈性布局的父元素。
項(xiàng)目（item）：彈性布局容器中的每一個(gè)子元素，稱為項(xiàng)目。
主軸（principal axis）：在彈性布局中，通過(guò)屬性規(guī)定水平或垂直方向?yàn)橹鬏S。
交叉軸（intersecting axle）：與主軸垂直的另一方向，稱為交叉軸。
使用彈性布局需要注意的問(wèn)題
作用于容器的屬性
-
flex-direction：主軸方向
- row（默認(rèn)值）：主軸為水平，方向從左到右。
- row-reverse：主軸為水平，方向從右到左。
- column：主軸為垂直，方向從上到下。
- column-reverse：主軸為垂直，方向從下到上。
-
flex-wrap：控制換行
- nowrap（默認(rèn)）：不換行。當(dāng)容器寬度不夠時(shí)，每個(gè)項(xiàng)目會(huì)被擠壓寬度。
- wrap：換行顯示，并且第一行在容器最上方。
- wrap-reverse：換行顯示，并且第一行在容器最下方。
-
flex-flow：縮寫(xiě)形式
該屬性是 flex-direction 屬性和 flex-wrap 屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為 row nowrap。 -
justify-content：主軸對(duì)齊
- flex-start（默認(rèn)值）：項(xiàng)目位于主軸起點(diǎn)。
- flex-end：項(xiàng)目位于主軸終點(diǎn)。
- center：居中。
- space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等（開(kāi)頭和最后的項(xiàng)目，與父容器邊緣沒(méi)有間隔）。
- space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。同時(shí)項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍（開(kāi)頭和最后的項(xiàng)目，與父容器邊緣有一定的間隔）。
-
align-items：交叉軸單行對(duì)齊
- flex-start：與交叉軸的起點(diǎn)對(duì)齊。
- flex-end：與交叉軸的終點(diǎn)對(duì)齊。
- center：與交叉軸的中點(diǎn)對(duì)齊。
- baseline：根據(jù)項(xiàng)目的第一行文字的基線對(duì)齊（文字的行高、字體大小會(huì)影響每行的基線）。
- stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為 auto，則將占滿整個(gè)容器的高度。
-
align-content：交叉軸多行對(duì)齊
- flex-start：與交叉軸的起點(diǎn)對(duì)齊。
- flex-end：與交叉軸的終點(diǎn)對(duì)齊。
- center：與交叉軸的中點(diǎn)對(duì)齊。
- space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。
- space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為 auto，則將占滿整個(gè)容器的高度（占滿整個(gè)交叉軸）。
作用于項(xiàng)目的屬性
-
order：項(xiàng)目排序
該屬性規(guī)定項(xiàng)目的排列順序，使用整數(shù)設(shè)置，數(shù)值越小越靠前，可以為負(fù)值。
前，可以為負(fù)值。
-
flex-grow：項(xiàng)目放大比
該屬性規(guī)定項(xiàng)目的放大比例，默認(rèn)為 0，即如果存在剩余空間，也不放大。
-
flex-shrink：項(xiàng)目縮小比
該屬性規(guī)定項(xiàng)目的縮小比例，默認(rèn)為 1，即如果空間不足，該項(xiàng)目將縮小。
-
flex-basis：伸縮基準(zhǔn)值
該屬性規(guī)定項(xiàng)目的伸縮基準(zhǔn)值。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間來(lái)分配空間。
-
flex：縮寫(xiě)形式
該屬性是 flex-grow、flex-shrink 和 flex-basis 的簡(jiǎn)寫(xiě)，默認(rèn)值為 flex:0 1 auto。后兩個(gè)屬性可選，除默認(rèn)值外，還有 none（0 0 auto）和 auto（1 1 auto）兩個(gè)快捷設(shè)置值。 -
align-self：自身對(duì)齊
- flex-start：與交叉軸的起點(diǎn)對(duì)齊。
- flex-end：與交叉軸的終點(diǎn)對(duì)齊。
- center：與交叉軸的中點(diǎn)對(duì)齊。
- baseline：與項(xiàng)目的第一行文字的基線對(duì)齊（文字的行高、字體大小會(huì)影響每行的基線）。
- stretch：如果項(xiàng)目未設(shè)置高度或設(shè)為 auto，則將占滿整個(gè)容器的高度。
- auto（默認(rèn)值）：表示繼承父元素的 align-items 屬性。如果沒(méi)有父元素，則等于stretch。
本文為作者學(xué)習(xí)web前端學(xué)習(xí)筆記后所作筆記
總結(jié)
- 上一篇： 强人工智能和弱人工智能
- 下一篇： css3左右滑动不显示滚动条,隐藏滚动条