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