一爆安、簡介
參考CSS 教程和CSS 參考手冊，對里面內(nèi)容進行了優(yōu)化與總結胰挑。
若設置屬性后在瀏覽器中沒有作用，可能需要添加前綴瘤礁。
適配IE: -ms-谓娃。
適配Safari、Chrome: -webkit-替劈。
適配火狐: -moz-寄雀。
適配opera: -o-。
二抬纸、選擇器
標簽選擇器
直接對同標簽的所有元素生效咙俩。使用方式：div {}耿戚。id選擇器
對相同id的元素生效湿故。
使用方式：#test {}阿趁；如只針對某一種元素，則需在前加上標簽名坛猪，如：p#test {}脖阵。class選擇器
對相同類名的元素生效。
使用方式：.testClass {}墅茉；如只針對某一種元素命黔，則需在前加上標簽名，如：p.testClass {}就斤。內(nèi)聯(lián)樣式
只對該元素生效悍募。
使用方式：<p style="color: red">Hello World!</p>
<body>
<div>Hello World!</div>
<div id="test">Hello World!</div>
<p id="test">Hello World!</p>
<p class="testClass">Hello World!</p>
<!-- 只對該元素生效 -->
<p style="color: red">Hello World!</p>
</body>
<style type="text/css">
/* 對所有div生效 */
div {
color: #ff0000;
}
/* 對id="test"的p生效 */
p#test {
color: #0000FF;
}
/* 對class="testClass"的元素生效 */
.testClass {
color: #FFFF00;
}
</style>
注意：
不論是id或class，第一位最好不要是數(shù)字洋机。
多種選擇器可同時起作用坠宴。
優(yōu)先級：內(nèi)聯(lián)樣式 > id 選擇器 > class選擇器 = 偽類選擇器 = 屬性選擇器 > 標簽選擇器。若為相同權限選擇器绷旗，后出優(yōu)先級大于先出喜鼓。
!important聲明，強制某條語句為最高優(yōu)先級衔肢。如p { color: red !important; }庄岖，表示p的字體顏色紅色為最高優(yōu)先。該聲明建議少用角骤。
對多種元素同時生效隅忿，用逗號分割。如p,div {}表示對所有p和div元素生效启搂。
其他常用選擇器
后代選擇器
對該元素的后代元素(不論是子類還是孫子類)生效硼控。
使用方式：div p {}，表示對div中的所有元素p生效胳赌；也可使用上面的形式牢撼，如：#div1 #p1 {}，表示對id="div1"的元素中的所有id="p1"的后代元素生效疑苫。屬性選擇器
對所有某屬性等于某值的元素生效熏版。
使用方式：a[target=_blank]，表示對所有target="_blank"的a元素生效捍掺。也可寫成a[target] {}撼短，表示對所有設置了target屬性的a元素生效。
<body>
<div><p>Hello World!</p></div>
<div id="div1">
<p id="p1">Hello World!</p>
</div>
<a target="_blank">Hello World!</a>
<a target="_self">Hello World!</a>
</body>
<style type="text/css">
/* 對div中的所有p元素生效 */
div p {
color: aqua;
}
/* 對id="div1"的元素的所有id="p1"的元素生效 */
#div1 #p1 {
color: antiquewhite;
}
/* 對所有target="_blank"的a元素生效 */
a[target=_blank] {
color: #FFFF00;
}
/* 對所有設置了target屬性的元素生效 */
[target] {
color: #0000FF;
}
</style>
更多選擇器查看 CSS 參考手冊 - 選擇器挺勿。
三曲横、背景
背景 background
語法順序為background:background-color background-image background-position/background-size background-repeat background-origin background-clip background-attachment。
若只想顯示圖像中某一部分，詳見圖像拼合技術禾嫉。
設置多重背景灾杰，每個值用逗號隔開。如background-image: url(""), url("");熙参，下面的屬性除了background-color都支持這種寫法艳吠。背景顏色 background-color
屬性可用值：
color顏色。
transparent透明色孽椰，默認值昭娩。
inherit繼承父類。
color類型：
#FF000016進制顏色黍匾，分別為紅綠藍栏渺，范圍為00-FF。
rgb(255, 0, 0)RGB顏色锐涯，分別紅綠藍迈嘹，范圍為0-255。
rgba(255, 0, 0, 1)RGBA顏色全庸，分別紅綠藍和透明度秀仲，透明度范圍為0-1。
hsl(120,100%,100%)HSL顏色壶笼，分別色相神僵、飽和度、亮度覆劈。
色相范圍為0-360保礼，0（或360）是紅色，120是綠色责语，240是藍色炮障；飽和度范圍為0%-100%，0％為灰色坤候，100％為全彩胁赢；亮度范圍為0%-100%，0％是黑色白筹，100％是白色智末。
hsla(120,100%,100%,1)HSLA顏色，分別色相徒河、飽和度系馆、亮度、透明度顽照，透明度范圍為0-1由蘑。
red預定義顏色。查看顏色參考 CSS 參考手冊 - 顏色名稱。
背景圖像 background-image
默認情況下尼酿，圖像放置在元素的左上角下隧，并重復垂直和水平方向平鋪。
請同時設置一種background-color谓媒，假如background-image不可用，也可以使用背景顏色代替何乎。
屬性可用值：
url("")url地址句惯，可使用絕對或相對路徑。
none無圖像支救，默認值抢野。
linear-gradient()創(chuàng)建一個線性漸變的背景色，從上到下各墨。參考 CSS 參考手冊 - 函數(shù)指孤。
radial-gradient()創(chuàng)建一個徑向漸變的背景色，從中心到邊緣贬堵。
repeating-linear-gradient()創(chuàng)建重復的線性漸變的背景色恃轩。
repeating-radial-gradient()創(chuàng)建重復的徑向漸變的背景色。
inherit繼承父類黎做。背景圖像的起始位置 background-position
需要設置background-repeat:no-repeat叉跛，該屬性才有效。默認情況起始位置是在元素的左上角附鸽。
background-attachment: fixed時該屬性不生效椅野。
屬性可用值：
left top驼修、left center、left bottom酥艳、right top、right center爬骤、right bottom充石、center top、center center霞玄、center bottom若只指定一個值赫冬，則第二個值默認為center。
10% 10%第一個值是水平位置溃列，第二個值是垂直位置劲厌，默認值為0% 0%。
左上為0% 0%听隐，右下為100% 100%补鼻，若只指定一個值，則第二個值默認為50%。
10px 10px第一個值是水平位置风范，第二個值是垂直位置咨跌。若只指定一個值，則第二個值默認為50%硼婿⌒堪耄可以混用，如0px 50%寇漫】常可使用其他單位，參考 CSS 參考手冊 - 單位州胳。
inherit繼承父類记焊。背景圖像的大小 background-size
默認為圖像原始大小。
屬性可用值：
10px 10px分別為寬度和高度栓撞。如果只指定一個值遍膜，第二個為auto(自動)∪肯妫可使用其他單位瓢颅，參考 CSS 參考手冊 - 單位。
100% 100%相對于元素的寬高弛说。100% 100%表示寬高與元素相同惜索，如果只指定一個值，第二個為auto(自動)剃浇。
contain保持原有尺寸比例巾兆，內(nèi)容被縮放。
cover保持原有尺寸比例虎囚，但部分內(nèi)容可能被剪切角塑。背景圖像的平鋪方式 background-repeat
默認情況下，圖像在水平和垂直方向平鋪淘讥。
屬性可用值：
repeat背景圖像將向垂直和水平方向重復圃伶，默認值。
repeat-x只在水平方向重復平鋪蒲列。
repeat-y只在垂直方向重復平鋪窒朋。
no-repeat不會重復，只顯示一次蝗岖，此時可用background-position調(diào)整圖像的位置侥猩。
inherit繼承父類。背景圖像的定位區(qū)域 background-origin
設置background-position定位時的參考點抵赢。默認為填充框欺劳，即background-position:0% 0%時圖像位于填充框外邊左上角唧取。
屬性可用值：
border-box相對于元素邊界框。
padding-box相對于元素填充框划提，默認值枫弟。
content-box相對于元素內(nèi)容框。背景的繪畫區(qū)域 background-clip
該屬性對background-color和background-image都生效鹏往。background-origin只對background-image生效淡诗。
屬性可用值：
border-box相對于元素邊界框，默認值伊履。
padding-box相對于元素填充框韩容。
content-box相對于元素內(nèi)容框。背景圖像的固定方式 background-attachment
屬性可用值：
scroll背景圖像會隨頁面的滾動而滾動湾碎，默認值。
fixed背景圖像不會隨著頁面的滾動而滾動奠货。
local背景圖像會隨元素內(nèi)容的滾動而滾動介褥。
initial重置為默認值，即scroll递惋。
inherit繼承父類柔滔。
<body>
<div class="bg">Hello World!</div>
<div class="scroll">Hello World!</div>
</body>
<style type="text/css">
.bg {
/* 背景顏色 */
background-color: orange;
/* 背景圖像 */
background-image: url(../123.jpg);
/* 背景圖像位置,需要background-repeat: no-repeat */
background-position: center;
/* 背景圖像大小 contain為長邊等于元素 */
background-size: contain;
/* 背景圖像平鋪方式 */
background-repeat: no-repeat;
/* 背景圖像定位區(qū)域 content-box為相對于內(nèi)容框 */
background-origin:content-box;
/* 背景繪畫區(qū)域 padding-box為相對于填充框 */
background-clip: padding-box;
/* 背景圖像的固定方式 scroll為跟隨界面滾動 */
background-attachment: scroll;
/* 邊距與填充 */
margin: 20px;
padding: 20px;
height: 500px;
/* 邊框設置 */
border-width: 10px;
border-style: dotted;
border-color: #0000FF;
}
.scroll {
height: 1000px;
}
</style>
四、文本
文本顏色 color
屬性可用值：參考 背景顏色 background-color萍虽。文本方向 direction
默認為從左到右睛廊。若文本結尾有標點，ltr時標點會放置在右邊杉编，rtl時標點會放置在左邊超全。
屬性可用值：
ltr從左到右，默認值邓馒。即left to right嘶朱。
rtl從右到左。
inherit繼承父類光酣。文本的字符間距 letter-spacing
屬性可用值：
normal字符間沒有額外的空間疏遏，默認值。
10px固定值救军，允許使用負值财异。可使用其他單位唱遭，參考 CSS 參考手冊 - 單位戳寸。
inherit繼承父類。文本高度 line-height
指的是每行文本的高度拷泽。若要設置整個元素的高度庆揩，請使用height俐东。
單行文本時，同時設置line-height與height并且兩值相等订晌，可讓文本垂直居中顯示虏辫。
屬性可用值：
normal合理的高度值，默認值锈拨。
1數(shù)字砌庄，font-size的倍率，font-size默認為16px奕枢，2則表示32px娄昆。
20px固定值》毂颍可使用其他單位萌焰，參考 CSS 參考手冊 - 單位。
100%百分比谷浅。100%相當于1扒俯。
inherit繼承父類。文本的水平對齊方式 text-align
若direction: ltr一疯，則默認值為left撼玄；若direction: rtl，則默認值為right墩邀。
屬性可用值：
left文本靠左掌猛。
right文本靠右。
center文本居中眉睹。
justify文本兩端對齊荔茬。
inherit繼承父類。元素的垂直對齊方式 vertical-align
屬性可用值：
baseline元素放置在父元素的基線上竹海，默認值兔院。
sub元素對齊父元素文本的下標。
super元素對齊父元素文本的上標站削。
top元素的頂端與行中最高元素的頂端對齊坊萝。
text-top元素的項端與父元素字體的頂端對齊。
middle元素放置在父元素的中部许起。
bottom元素的底端與行中最低元素的底端對齊十偶。
text-bottom元素的底端與父元素字體的底端對齊。
10px將元素升高或降低一個固定值园细，可以是負數(shù)惦积。
100%將元素升高或降低一個line-height的百分比的值，可以是負數(shù)猛频。
inherit繼承父類狮崩。文本的修飾線 text-decoration
設置文本修飾屬性蛛勉。
語法順序：text-decoration: text-decoration-line text-decoration-style text-decoration-color。
文本的修飾線類型 text-decoration-line
大多數(shù)瀏覽器不支持單獨使用睦柴，僅用做text-decoration的第一個參數(shù)诽凌。
屬性可用值：
none沒有線條，默認值坦敌。
underline下劃線侣诵。
overline上劃線。
line-through中劃線狱窘。
initial重置為默認值杜顺，即none。
inherit繼承父類蘸炸。
可以同時使用多個值躬络，text-decoration: underline overline表示同時有上劃線和下劃線。文本的修飾線樣式 text-decoration-style
大多數(shù)瀏覽器不支持單獨使用搭儒，僅用做text-decoration的第二個參數(shù)穷当。
屬性可用值：
solid單線，默認值仗嗦。
double雙線膘滨。
dotted點狀線甘凭。為.......稀拐。
dashed虛線。為_ _ _丹弱。
wavy線條將顯示為波浪線德撬。
initial重置為默認值，即solid躲胳。
inherit繼承父類蜓洪。文本的修飾線顏色 text-decoration-color
大多數(shù)瀏覽器不支持單獨使用，僅用做text-decoration的第三個參數(shù)坯苹。
屬性可用值：
color參考 背景顏色 background-color隆檀。
initial重置為默認值，即transparent粹湃。
inherit繼承父類恐仑。
文本的首行縮進 text-indent
就像中文首行時前面要空兩個字。
屬性可用值：
10px固定值为鳄，可為負數(shù)裳仆。默認值：0px」虑眨可使用其他單位歧斟，參考 CSS 參考手冊 - 單位纯丸。
10%相對于父元素寬度的百分比。
inherit繼承父類静袖。文本陰影 text-shadow
若要設置元素的陰影觉鼻，請使用box-shadow。
語法順序：text-shadow: h-shadow v-shadow blur color
- h-shadow 水平陰影的位置
10px必須值勾徽，允許負值滑凉。 可使用其他單位，參考 CSS 參考手冊 - 單位喘帚。 - v-shadow 垂直陰影的位置
10px必須值畅姊，允許負值。 - blur 模糊的距離
10px可選值吹由。 - color 陰影的顏色
#FF0000可選值 若未。參考 背景顏色 background-color冈爹。
文本大小寫 text-transform
屬性可用值：
none可同時有大寫與小寫磷斧，默認值。
capitalize每個單詞以大寫字母開頭幅垮。
uppercase全部大寫乌昔。
lowercase全部小寫隙疚。
inherit繼承父類。文本重寫 unicode-bidi
需要與direction一起使用磕道，來設置文本是否重寫供屉。
查看示例。
屬性可用值：
normal不使用附加的嵌入層面溺蕉。默認值伶丐。
embed創(chuàng)建一個附加的嵌入層面。
bidi-override創(chuàng)建一個附加的嵌入層面疯特。重新排序取決于direction屬性哗魂。
initial重置為默認值，即normal漓雅。
inherit繼承父類录别。文本的空格處理 white-space
默認情況下，多個空格只會保留一個邻吞，回車也被看成一個空格组题。
屬性可用值：
normal默認值。
pre多個空格和回車會被保留吃衅，但不會自動換行往踢。其行為類似<pre>標簽。
pre-wrap多個空格和回車會被保留徘层，但會自動換行峻呕。
nowrap多個空格和回車視為一個空格利职，不會自動換行，遇到<br>才會換行瘦癌。
pre-line多個空格視為一個空格猪贪，回車會換行。也會自動換行讯私。
inherit繼承父類热押。文本的段落間距 word-spacing
letter-spacing指每個漢字間或字母間的間距。該屬性指每個單詞間或一段漢字間的間距斤寇。
屬性可用值：
normal標準空間桶癣，默認值。
10px固定值娘锁⊙滥可使用其他單位，參考 CSS 參考手冊 - 單位莫秆。
inherit繼承父類间雀。文本溢出 text-overflow
文本寬度大于元素寬度時如何處理溢出文本。
屬性可用值：
clip裁剪溢出的文本镊屎，默認值惹挟。
ellipsis使用省略符號來替代被裁剪的文本。
" "使用給定的字符串來替代被裁剪的文本缝驳。長單詞的換行 word-wrap
當一個單詞過長连锯，大于元素寬度，默認情況下党巾，單詞出溢出元素顯示萎庭∷剑可設置成break-word強制換行齿拂。
屬性可用值：
normal只在允許的斷字點(如空格)換行，默認值肴敛。
break-word在長單詞或URL地址內(nèi)部進行換行署海。單詞的換行 word-break
默認情況下，當行尾的單詞過長導致溢出元素時医男，該單詞會放在下一行的前面砸狞，上一行后面則顯示空格。設置為break-all則會強制顯示在第一行镀梭，超出元素寬度的部分字母則會放在下一行刀森。
normal瀏覽器默認的換行規(guī)則，默認值报账。
break-all允許在單詞內(nèi)換行研底。
keep-all只能在半角空格或連字符處(如_ -)換行埠偿。文本的水平對齊 text-align-last
text-align對文本的所有行都生效，該屬性只對文本的最后一行有效榜晦。
需要設置text-align: justify該屬性才有效冠蒋。
屬性可用值：
auto自動對齊，默認值乾胶。
left文本靠左抖剿。
right文本靠右。
center文本居中识窿。
justify文本兩端對齊斩郎。
start若text-direction: ltr，則向左對齊喻频；若text-direction: rtl孽拷，則向右對齊。
end與start相反半抱。
initial重置為默認值脓恕，即auto。
inherit繼承父類窿侈。文本的排布方式 writing-mode
查看示例炼幔。
屬性可用值：
horizontal-tb水平方向自上而下的書寫方式。即從左到右史简，從上到下乃秀，默認值。
vertical-lr垂直方向自左向右的書寫方式圆兵。即從上到下跺讯，從左到右。
vertical-rl垂直方向自右向左的書寫方式殉农。即從上到下刀脏，從右到左。
sideways-rl內(nèi)容垂直方向從上到下排列超凳。
sideways-lr內(nèi)容垂直方向從下到上排列愈污。
<body>
<!-- 文本顏色 -->
<div style="color: red;">color</div>
<!-- 文本方向 當文本最后有標點時，rtl標點會顯示在左邊 -->
<div style="direction: rtl;">direction!</div>
<!-- 文本重寫 文本書寫方式也會從右向左-->
<div style="direction: rtl; unicode-bidi: bidi-override;">unicode-bidi!</div>
<!-- 文本的字符間隔 -->
<div style="letter-spacing: 10px;">letter-spacing</div>
<!-- 文本每行的高度 -->
<div style="background-color: #00FFFF;line-height: 2;">
line-height<br/>line-height
</div>
<!-- 文本的對齊方式 -->
<div style="text-align: left;">
text-align text-align text-align text-align text-align text-align text-align text-align
</div>
<!-- 文本的對齊方式 justify時會將每個單詞的間隔均分-->
<div style="text-align: justify;">
text-align text-align text-align text-align text-align text-align text-align text-align
</div>
<!-- 文本修飾 下劃線和上劃線 -->
<div style="text-decoration: underline overline;">text-decoration</div>
<!-- 文本縮進 第一行距左100px -->
<div style="text-indent: 100px;">text-indent</div>
<!-- 文本陰影 -->
<div style="text-shadow: 2px 2px 1px red;">text-shadow</div>
<!-- 文本大小寫方式 capitalize表示所有單詞的首字母大寫-->
<div style="text-transform: capitalize;">text transform</div>
<!-- 元素垂直對齊方式 text-top表示元素的項部與文字頂部對齊-->
<div style="background-color: #00FFFF;">
一個
<span style="font-size: 30px;background-color: red; vertical-align: text-top;">vertical-align</span>
默認對齊的圖像轮傍。</div>
<!-- 對空格回車的處理 pre表示保留空格與回車換行-->
<div style="white-space: pre">white-space white-space white-space
white-space white-space
</div>
<!-- 文本的段落間距 -->
<div style="word-spacing: 20px">
測試 測試 測試 test test
</div>
<!-- 單詞寬度大于元素寬度 則強制換行 -->
<div style="word-wrap:break-word;width: 100px;border: 1px solid red;">aaaaaaaaaaaaaaaa</div>
<!-- 行尾單詞溢出元素時 強制使單詞換行 -->
<div style="word-break:break-all;width: 100px;border: 1px solid red;">hello hello hello hello</div>
<!-- 最后一行右對齊 -->
<div style="width: 150px;text-align: justify;text-align-last: right;">最后一行右對齊最后一行右對齊</div>
</body>
五暂雹、文本字體
font語法順序為 font: font-style font-variant font-weight font-size/line-height font-family
font-size和font-family是必須值。
若要使用本地字體创夜，參考 CSS 參考手冊 - @font-face杭跪。
- 字體樣式 font-style
屬性可用值：
normal標準的字體樣式，默認值。
italic斜體的字體樣式涧尿。
oblique傾斜的字體樣式桨醋。
inherit繼承父類。
關于italic和oblique
一些不常用的字體现斋，可能就只有標準樣式喜最，如果使用italic，就沒有效果庄蹋。
可以理解成italic是使用文字的斜體瞬内，oblique是讓沒有斜體的文字傾斜！
字體變體 font-variant
該屬性只對小寫字母有作用限书。small-caps會將小寫字母轉(zhuǎn)換成大寫字母虫蝶，但尺寸比正常的大寫字母小。
屬性可用值：
normal標準的字體倦西，默認值能真。
small-caps小型大寫字母的字體。
inherit繼承父類扰柠。字體寬度 font-weight
即字體的粗細粉铐。
屬性可用值：
normal標準寬度的字符，默認值卤档。
bold粗體字符蝙泼。
bolder更粗的字符。
lighter更細的字符劝枣。
100-900從細到粗的字符汤踏。400為normal，而700為bold舔腾。
inherit繼承父類溪胶。字體大小 font-size
屬性可用值：
xx-small、x-small稳诚、small哗脖、medium、large采桃、x-large懒熙、xx-large從++小到++大丘损。默認為medium普办，即16px。
smaller比父元素更小的尺寸徘钥。
larger比父元素更大的尺寸衔蹲。
10px固定值。可使用其他單位舆驶，參考 CSS 參考手冊 - 單位橱健。
100%默認字體大小的百分比值。相當于16px * 100%
inherit繼承父類沙廉。字體名稱 font-family
可設置多種字體拘荡，用逗號隔開。若前面的字體不能使用撬陵，則自動使用后面的字體珊皿。請保證有一定能使用的字體，可查看 CSS 參考手冊 - Web安全字體巨税。
若字體是一個單詞蟋定，可以不加引號；若為幾個單詞草添，必須加引號驶兜。
<!-- 字體樣式 italic為斜體 -->
<div style="font-style: italic;">italic</div>
<!-- 字體變體-->
<div style="font-variant: normal;">測試 italic ABC</div>
<div style="font-variant: small-caps;">測試 italic ABC</div>
<!-- 字體粗細 700相當于bold -->
<div style="font-weight: 700;">font-weight</div>
<!-- 字體尺寸 默認為16px 2em相當于16*2 -->
<div style="font-size: 16px;">font-size</div>
<div style="font-size: 2em;">font-size</div>
<!-- 字體名稱 -->
<div style="font-family: 'arial black';">font-family</div>
六、列表和表格
ul 無序列表 列表前面標記有特殊圖形（如小黑點远寸、小方框等）抄淑。
ol 有序列表 列表前面標記有數(shù)字或字母。
- 列表樣式 list-style
語法順序為list-style: list-style-type list-style-position list-style-image
列表項的標記類型 list-style-type
查看示例驰后。
屬性可用值：
none無標記蝇狼。
ul可用
disc標記是實心圓，默認值倡怎。
circle標記是空心圓迅耘。
square標記是實心方塊。
ol可用
decimal標記是數(shù)字监署，默認值颤专。
decimal-leading-zero0開頭的數(shù)字標記。(01, 02, 03)钠乏。
lower-roman小寫羅馬數(shù)字(i, ii, iii, iv, v)栖秕。
upper-roman大寫羅馬數(shù)字(I, II, III, IV, V)。
lower-alpha小寫英文字母The marker is lower-alpha (a, b, c, d, e)晓避。
upper-alpha大寫英文字母The marker is upper-alpha (A, B, C, D, E)簇捍。
lower-greek小寫希臘字母(alpha, beta, gamma,)。
lower-latin小寫拉丁字母(a, b, c, d, e,)俏拱。
upper-latin大寫拉丁字母(A, B, C, D, E)暑塑。
hebrew傳統(tǒng)的希伯來編號方式。
armenian傳統(tǒng)的亞美尼亞編號方式锅必。
georgian傳統(tǒng)的喬治亞編號方式(an, ban, gan)事格。
cjk-ideographic簡單的表意數(shù)字。
hiragana日文平假名字符（：a, i, u, e, o, ka, ki）。
katakana日文片假名字符（標記是：A, I, U, E, O, KA, KI）驹愚。
hiragana-iroha日文平假名序號（i, ro, ha, ni, ho, he, to）远搪。
katakana-iroha日文片假名序號（I, RO, HA, NI, HO, HE, TO）。-
列表項標記的位置 list-style-position
屬性可用值：
inside標記放置在文本內(nèi)部逢捺。
outside標記放置在文本左側(cè)谁鳍，默認值。
inherit繼承父類劫瞳。
列表項的標記圖像 list-style-image
若url不可用棠耕，當相于none。
屬性可用值：
url("")圖像的路徑柠新。
none無圖像窍荧，默認值。
inherit繼承父類恨憎。
也可設置list-style-type: none蕊退，給<li>添加background-image來設置未提供的標記。
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(xxx.png);
background-repeat:no-repeat;
padding-left:14px;
}
-
表格邊框折疊 border-collapse
默認情況下憔恳，表格和單元格有單獨的邊框瓤荔，所以顯示兩條邊框。設為collapse后兩條會合并成一條钥组。
屬性可用值：
collapse合并為單一的邊框输硝。會忽略border-spacing和empty-cells屬性眶俩。
separate邊框會被分開痴昧，默認值癞松。
inherit繼承父類煮甥。
默認
collapse時 表格邊框間距 border-spacing
表格邊框與單元格邊框的間距，若border-collapse: collapse則無效瓷炮。
屬性可用值：
0px 0px前面為水平間距肩刃，后面為垂直間距豁护。只設置一個值時挺份，水平間距與垂直間距相同褒翰。
inherit繼承父類。表格標題位置 caption-side
屬性可用值：
top表格上方匀泊，默認值优训。
bottom表格下方。
inherit繼承父類各聘。空單元格 empty-cells
屬性可用值：
hide空單元格隱藏邊框揣非。
show空單元格顯示邊框，默認值伦吠。
inherit繼承父類妆兑。表格布局算法 table-layout
默認情況下魂拦，是根據(jù)單元格內(nèi)容計算每列的寬度毛仪，從而得出表格的寬度搁嗓。
設置為fixed后，則使用width屬性來設定每列寬度和表格寬度箱靴，如<td width="50%">腺逛、<table width="100%">。
屬性可用值：
automatic每列寬度由單元格內(nèi)容設定衡怀，默認值棍矛。
fixed每列寬度由表格寬度和列寬度設定。
inherit繼承父類抛杨。
<body>
<table class="table1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<table class="table2">
<caption>Table2</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td></td>
</tr>
</table>
</body>
<style type="text/css" scoped="scoped">
table.table1 {
/* 雙邊框變?yōu)閱芜吙?*/
border-collapse: collapse;
}
table,th,td {
border: 1px solid black;
}
table.table2 {
margin-top: 10px;
border-collapse: separate;
/* 表格邊框與單元格邊框的間隔為10px collapse時無效 */
border-spacing: 10px;
/* 標題放在下方 */
caption-side: bottom;
/* 單元格無數(shù)據(jù)時隱藏單元格邊框 */
empty-cells: hide;
/* 列寬由內(nèi)容決定 */
table-layout: auto;
}
</style>
七够委、盒子
元素實質(zhì)上是一個盒子，它包括：Margin(外邊距) 怖现，Border(邊框)茁帽，Padding(內(nèi)邊距)，和Content(內(nèi)容)屈嗤。
margin - 外邊距是透明的潘拨，調(diào)整數(shù)值后會向外部擴張。
border - 實際意義上的邊框饶号，調(diào)整后元素的實際寬高會變化铁追。
padding - 內(nèi)邊距是透明的，調(diào)整后元素的實際寬高會變化茫船。
content - 盒子的內(nèi)容琅束，顯示文本和圖像。元素的
width算谈、height即為content的寬高狰闪。默認情況下，元素的實際寬高與
margin無關濒生，是border+padding+content(通過width埋泵、height設置)的大小之和。
- 外邊距 margin
可設置4個值罪治，分別表示 上右下左丽声。
當設置3個值時，表示 上右下觉义，左與右相等雁社。
當設置2個值時，表示 上右晒骇，左與右相等霉撵，下與上相等磺浙。
當設置1個值時，表示 上徒坡，右下左與上相等撕氧。
屬性可用值：
auto自動計算外邊距。若設置了width喇完，元素會居中顯示在父元素內(nèi)伦泥。
10px固定值，默認值是0px锦溪〔桓可使用其他單位，參考 CSS 參考手冊 - 單位刻诊。
10%父元素的寬度的百分比防楷。
inherit繼承父類。
可設置單邊
margin-top上则涯、margin-right右复局、margin-bottom下、margin-left左是整。屬性值與margin相同肖揣，但只能設置一個值。
- 邊框 border
語法順序：border: border-width border-style border-color
可使用border畫三角形浮入，見下面例子龙优。
邊框?qū)挾?border-width
屬性可用值：
thin細邊框。
medium中等邊框事秀，默認值彤断。
thick粗邊框。
10px固定值易迹≡籽茫可使用其他單位，參考 CSS 參考手冊 - 單位睹欲。
inherit繼承父類供炼。-
邊框樣式 border-style
無默認值，該屬性必填窘疮，否則不顯示邊框袋哼。
屬性可用值：
none無邊框。
hidden與none相同闸衫。對于表table時涛贯，hidden用于解決邊框沖突。
dotted點狀邊框蔚出。
dashed虛線弟翘。
solid實線虫腋。
double雙線。雙線的寬度等于border-width的值稀余。
groove3D凹槽邊框悦冀。其效果取決于border-color的值。
ridge3D 壟狀邊框滚躯。其效果取決于border-color的值雏门。
inset3D inset邊框嘿歌。其效果取決于border-color的值掸掏。
outset3D outset邊框。其效果取決于border-color的值宙帝。
inherit繼承父類丧凤。
邊框顏色 border-color
參考 背景顏色 background-color。
可設置單邊的邊框
上邊框 border-top步脓、上邊框?qū)挾?border-top-width愿待、上邊框樣式 border-top-style、上邊框顏色border-top-color靴患。
右邊框 border-right仍侥、右邊框?qū)挾?border-right-width、右邊框樣式 border-right-style鸳君、右邊框顏色border-right-color农渊。
下邊框 border-bottom、下邊框?qū)挾?border-bottom-width或颊、下邊框樣式 border-bottom-style砸紊、下邊框顏色border-bottom-color。
左邊框 border-left囱挑、左邊框?qū)挾?border-left-width醉顽、左邊框樣式 border-left-style、左邊框顏色border-left-color平挑。
邊框圓角半徑 border-radius
可設置2組值:
第1組表示水平方向的半徑游添，第2組表示垂直方向的半徑。
1組有4個值:
設置4個值通熄，分別表示上左 上右 下右 下左唆涝。
設置3個值，下左與上右相等棠隐。
設置2個值石抡。下左與上右相等，下右與上左相等助泽。
設置1個值啰扛。四角都相等嚎京。
例:border-radius: 5px 10px 15px 20px/25px 30px 35px 40px;
屬性可用值：
10px固定值∫猓可使用其他單位鞍帝，參考 CSS 參考手冊 - 單位。
10%元素寬高的百分比煞茫。水平方向的半徑則為寬度的百分比帕涌，垂直方向的半徑則為高度的百分比。四圓角半徑
左上角 border-top-left-radius续徽、右上角 border-top-right-radius蚓曼、右下角 border-bottom-right-radius、左下角 border-bottom-left-radius钦扭。
可設置2個值纫版，第1個值是水平方向的半徑，第2個是垂直方向的半徑客情。
若設置1個值其弊，則兩個值相等。
如果任一值為零膀斋，那么角落里是方的梭伐，不圓潤。
屬性可用值：
10px固定值仰担『叮可使用其他單位，參考 CSS 參考手冊 - 單位惰匙。
10%相對于元素寬高的百分比技掏。水平方向的半徑則為寬度的百分比，垂直方向的半徑則為高度的百分比项鬼。邊框圖像 border-image
將一張圖像分成九個部分用來作為邊框哑梳。
語法順序border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;邊框圖像資源 border-image-source
屬性可用值：
none不使用圖像，默認值绘盟。此時border-style才會生效
url("")圖像的路徑鸠真。-
邊框圖像切片位置 border-image-slice
可設置4個數(shù)值或百分比。表示上右下左龄毡，將圖像分為左上角吠卷、上、右上角沦零、右祭隔、右下角、下路操、左下角疾渴、左千贯、中間，總共9個區(qū)域搞坝。
默認情況下中間是透明處理的搔谴，設為fill就能夠保留中間。
設置3個值時桩撮，第4個值與第2個值相等敦第。
設置2個值時，第4個值與第2個值相等店量，第3個值與第1個值相等芜果。
設置1個值時，所有值都相等垫桂。
屬性可用值：
10數(shù)字表示圖像的像素（位圖圖像）或向量的坐標（如果圖像是矢量圖像）师幕。
100%圖像寬或高的百分比粟按，默認值诬滩。
fill保留圖像的中間部分。
切割后的四周的八個切片灭将，四個角自動縮放顯示到邊框?qū)乃膫€角疼鸟。
除四個角外的其他中間切片（上，右庙曙，下空镜，左），可以設置border-image-repeat做拉伸或重復地顯示到對應的邊框位置捌朴。 邊框圖像寬度 border-image-width
可設置4個值吴攒，分別表示 上右下左。
當設置3個值時砂蔽，表示 上右下洼怔，左則與右相等。
當設置2個值時左驾，表示 上右镣隶，左則與右相等，下與上相等诡右。
當設置1個值時安岂，表示 上，右下左則與上相等帆吻。
屬性可用值：
1數(shù)字域那，border-width的倍數(shù)，默認值為1猜煮。
10%圖像寬高的百分比次员。
auto自動使用border-image-slice切片后的內(nèi)在寬度或高度耻讽。邊框圖像輪廓 border-image-outset
默認情況下圖像是設置在邊框上的，設置該屬性后识虚，圖像將設置在輪廓上伤溉。
可設置4個值，分別表示 上右下左束倍。
當設置3個值時被丧，表示 上右下，左則與右相等绪妹。
當設置2個值時甥桂，表示 上右，左則與右相等邮旷，下與上相等黄选。
當設置1個值時，表示 上婶肩，右下左則與上相等办陷。
屬性可用值：
10px固定值÷杉撸可使用其他單位民镜，參考 CSS 參考手冊 - 單位。
0border-width的倍數(shù)险毁，默認值為0制圈。邊框圖像重復方式 border-image-repeat
border-image-slice切片后的4條邊，如何填充在邊框上畔况。
屬性可用值：
stretch拉伸圖像來填充區(qū)域鲸鹦，默認值。
repeat重復圖像來填充區(qū)域跷跪。
round類似repeat馋嗜。如果無法完整平鋪所有圖像，則對圖像進行縮放以適應區(qū)域域庇。
space類似repeat嵌戈。如果無法完整平鋪所有圖像，擴展空間會分布在圖像周圍听皿。
inherit繼承父類熟呛。
inherit重置為默認值，即stretch尉姨。
<body>
<h3>默認圖像</h3>
<img src="../border.png" />
<div>圖像邊框</div>
</body>
<style type="text/css" scoped="scoped">
div {
margin-top: 10px;
width: 100px;
height: 100px;
line-height: 100px;
border: 1px solid #00FFFF;
text-align: center;
border-image-source: url(../border.png);
border-image-slice: 35%;
border-width: 20px;
border-image-outset: 0px;
border-image-repeat: round;
}
</style>
- 內(nèi)邊距 padding
可設置4個值庵朝，分別表示 上右下左。
當設置3個值時，表示 上右下九府，左與右相等椎瘟。
當設置2個值時，表示 上右侄旬，左與右相等肺蔚，下與上相等。
當設置1個值時儡羔，表示 上宣羊，右下左與上相等。
屬性可用值：
10px固定值汰蜘，默認值是0px仇冯。參考 CSS 參考手冊 - 單位。
10%相父元素的寬高的百分比族操。
inherit繼承父類苛坚。
可設置單邊
上 padding-top、右 padding-right 色难、下 padding-bottom泼舱、左 padding-left。與padding相同莱预，但只能設置一個值柠掂。
<body>
<div class="magin">magin</div>
<div class="border">border</div>
<div class="padding">padding</div>
<!-- 畫三角形 -->
<div class="sanjiao"></div>
</body>
<style type="text/css" scoped>
.magin {
background-color: #FAEBD7;
/* 設置邊距 */
margin: 10px 20px 30px 40px;
/* 上面相當于 */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
.border {
/* 設置邊框 */
border: 5px solid darkgray;
/* 上面等同于 */
border-width: 5px;
border-style: solid;
border-color: darkgray;
}
.padding {
background-color: #00FFFF;
width: 300px;
/* 設置內(nèi)邊距 */
padding: 10px 20px 30px 40px;
/* 上面等同于 */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
.sanjiao {
/* 可使用border來畫三角形 */
width: 0px;
height: 0px;
/* border-top: 20px solid red; */
border-right: 40px solid transparent;
border-bottom: 20px solid blue;
/* border-left: 20px solid yellow; */
}
</style>
- 輪廓 outline
元素周圍有一條線 輪廓outline，位于邊框的外邊依沮，起到突出元素的作用。
輪廓不是元素的一部分枪狂，不會影響元素的大小與布局危喉，重疊在margin上。
語法順序：outline: outline-color outline-style outline-width
輪廓顏色 outline-color
屬性可用值：
color參考 背景顏色 background-color州疾。
invert顏色反轉(zhuǎn)辜限，可使輪廓在不同的背景顏色中都是可見，默認值严蓖。
inherit繼承父類薄嫡。-
輪廓樣式 outline-style
需要最先設置outline-style，因為只有獲得輪廓后才能改變其輪廓的outline-color和outline-width颗胡。
對于表單元素毫深，當獲取焦點時，會自動添加一輪廓毒姨，設置為none取消這個效果哑蔫。
屬性可用值：
none無輪廓，默認值。
dotted點狀輪廓闸迷。
dashed虛線輪廓嵌纲。
solid實線輪廓。
double雙線輪廓腥沽。雙線的寬度等同于outline-width的值逮走。
groove3D凹槽輪廓。此效果取決于outline-color值今阳。
ridge3D凸槽輪廓言沐。此效果取決于outline-color值。
inset3D凹邊輪廓酣栈。此效果取決于outline-color值险胰。
outset3D凸邊輪廓。此效果取決于outline-color值矿筝。
inherit繼承父類起便。
輪廓寬度 outline-width
屬性可用值：
thin細輪廓。
medium中等的輪廓窖维，默認值榆综。
thick粗輪廓。
10px固定值铸史”谴可使用其他單位，參考 CSS 參考手冊 - 單位琳轿。
inherit繼承父類判沟。輪廓偏移值 outline-offset
默認情況下，輪廓是緊挨在邊框的外邊崭篡。該屬性可調(diào)整輪廓與邊框的距離挪哄。
屬性可用值：
10px固定值，默認為0px琉闪〖Ａ叮可使用其他單位，參考 CSS 參考手冊 - 單位颠毙。
inherit繼承父類斯入。
<body>
<div class="outline">outline</div>
</body>
<style type="text/css" scoped="">
.outline {
background-color: #00FFFF;
margin: 30px;
padding: 10px;
border: 5px solid green;
/* 設置輪廓 */
outline:red dotted 5px;
/* 輪廓與邊框的距離 */
outline-offset: 10px;
/* 等同于上面 分開聲明時 style需要最先聲明 */
outline-style: dotted;
outline-color: red;
outline-width: 10px;
}
</style>
- 內(nèi)容
寬高 width height
元素的實際寬度=左border+左padding+width+右padding+右border。
元素的實際高度=上border+上padding+height+下padding+下border蛀蜜。
輪廓outline和外邊距margin不影響元素的總寬高刻两。
屬性可用值：
auto自動計算出實際的寬高，默認值涵防。
10px固定值闹伪』γ可使用其他單位，參考 CSS 參考手冊 - 單位偏瓤。
10%父元素寬高的百分比杀怠。
inherit繼承父類。最大寬高 max-width max-height
屬性可用值：
none允許的最大高度沒有限制厅克，默認值赔退。
10px固定值≈ぶ郏可使用其他單位硕旗，參考 CSS 參考手冊 - 單位。
10%父元素寬高的百分比女责。
inherit繼承父類漆枚。最小寬高 min-width min-height
默認值取決于瀏覽器。
屬性可用值：
10px固定值抵知∏交可使用其他單位，參考 CSS 參考手冊 - 單位刷喜。
10%父元素寬高的百分比残制。
inherit繼承父類。
- 盒子陰影 box-shadow
文本陰影使用text-shadow掖疮，元素的陰影則使用box-shadow初茶。
默認為none，無陰影浊闪。
語法順序:box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow 水平陰影的偏移
10px必須值恼布，允許負值，可使用其他單位规揪，參考 CSS 參考手冊 - 單位桥氏。 - v-shadow 垂直陰影的偏移
10px必須值，允許負值猛铅。 - blur 模糊距離
10px可選值。 - spread 陰影的大小
10px可選值凤藏。 - color 陰影的顏色奸忽。
參考 背景顏色 background-color。 - inset 從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影 揖庄。
10px不知什么意思???
- 盒子類型 box-sizing
默認情況下栗菜，元素實際寬度=border左寬度+padding左寬度+內(nèi)容寬度+padding右寬度+border右寬度，此時width=內(nèi)容寬度蹄梢。
設置為border-box后疙筹，元素實際寬度=border左寬度+padding左寬度+內(nèi)容寬度+padding右寬度+border右寬度，此時width=元素實際寬度。
高度同理而咆。
屬性可用值：
content-boxwidth=內(nèi)容寬度霍比，默認值。
border-boxwidth=元素實際寬度暴备。
inherit繼承父類悠瞬。
八、顯示
- 可見性 visibility
設置為hidden后涯捻，雖然元素隱藏了浅妆，但是仍舊會占用布局空間。
屬性可用值：
visible可見的障癌，默認值凌外。
hidden不可見。
collapse當在表格<table>中使用時涛浙，此值可刪除一行或一列康辑，但是它不會影響表格的布局。該行或該列占據(jù)的空間會被其他行列使用蝗拿。如果此值被用在其他的元素上晾捏，同hidden。
inherit繼承父類哀托。
<body>
<div>visibility</div>
<div style="visibility: hidden;">visibility</div>
<div>上面隱藏了 但會占用空間</div>
</body>
- display 顯示
屬性可用值：
none元素不會顯示惦辛。visibility: hidden隱藏后會繼續(xù)占用空間，而display: none不會占用空間仓手。
block元素變?yōu)閴K級元素胖齐，元素前后會帶有換行符。
inline元素變?yōu)閮?nèi)聯(lián)元素嗽冒，元素前后沒有換行符呀伙。
inline-block內(nèi)聯(lián)塊元素。
list-item元素會作為列表項顯示添坊，為塊級元素剿另。前面會有列表項的標記，可使用列表專用的屬性list-style贬蛙。
run-in根據(jù)上下文自動變?yōu)閴K級元素或內(nèi)聯(lián)元素雨女。
table元素變?yōu)閴K級表格（類似table），表格前后帶有換行符阳准。
inline-table元素變?yōu)閮?nèi)聯(lián)表格（類似table）氛堕，表格前后沒有換行符。
table-row-group元素變?yōu)橐粋€或多個行的分組（類似tbody）野蝇。
table-header-group元素變?yōu)橐粋€或多個行的分組（類似thead）讼稚。
table-footer-group元素變?yōu)橐粋€或多個行的分組（類似tfoot）括儒。
table-row元素變?yōu)橐粋€表格行（類似tr）。
table-cell元素變?yōu)橐粋€表格單元格顯示（類似td和th）
table-caption元素變?yōu)橐粋€表格標題（類似caption）
table-column-group元素變?yōu)橐粋€或多個列的分組（類似colgroup）锐想。
table-column元素變?yōu)橐粋€單元格列（類似col）帮寻。
flex子元素進行彈性布局，元素類型不變痛倚。詳見 十六、 彈性布局蝉稳。
inline-flex子元素進行彈性布局抒蚜，元素類型變?yōu)閮?nèi)聯(lián)塊元素。
inherit繼承父類耘戚。
塊級元素block:
單獨占一行嗡髓，寬度(width)、高度(height)收津、內(nèi)邊距(padding)和外邊距(margin)都可設置饿这。
內(nèi)聯(lián)元素inline:
和相鄰的內(nèi)聯(lián)元素在同一行，寬度(width)撞秋、高度(height)长捧、上下外邊距(margin-top/margin-bottom)都不可改變。元素里面內(nèi)容大小不變吻贿，改變上下內(nèi)邊距(padding-top/padding-bottom)時串结，雖然元素看起來變大了，實際布局所占的空間不變舅列。
內(nèi)聯(lián)塊元素inline-block：
與內(nèi)聯(lián)元素相同但可修改寬度(width)肌割、高度(height)、內(nèi)邊距(padding)和外邊距(margin)帐要。常將<li>元素設置display:inline-block把敞，垂直的列表就能水平顯示。
塊級元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li榨惠。
內(nèi)聯(lián)元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var奋早。
可變元素(根據(jù)上下文關系確定該元素是塊元素還是內(nèi)聯(lián)元素)：
applet ,button ,del ,iframe , ins ,map ,object , script。
- 溢出顯示方式 overflow
當元素里的內(nèi)容大于高或?qū)挄r赠橙，內(nèi)容會溢出元素伸蚯。
設置了heigth的塊狀元素該屬性才有效。
屬性可用值：
visible內(nèi)容不會被裁減简烤，會呈現(xiàn)在元素框之外。默認值摇幻。
hidden內(nèi)容會被裁減儒溉，溢出內(nèi)容不可見。
scroll內(nèi)容會被裁減赤赊，會顯示滾動條以便查看剩余的內(nèi)容实苞。
auto如果內(nèi)容被修剪，則會顯示滾動條以便查看剩余的內(nèi)容趣斤。
inherit繼承父類。
- 溢出顯示方式 overflow-y/overflow-x
表示垂直/水平方向溢出時的顯示方式。
屬性可用值：
visible內(nèi)容不會被裁減憨栽，會呈現(xiàn)在元素框之外。默認值翼虫。
hidden內(nèi)容會被裁減屑柔，溢出內(nèi)容不可見。
scroll內(nèi)容會被裁減珍剑，會顯示滾動條以便查看剩余的內(nèi)容掸宛。
auto如果內(nèi)容被修剪，則會顯示滾動條以便查看剩余的內(nèi)容招拙。
no-display如果內(nèi)容不適合內(nèi)容框唧瘾，則刪除整個框。
no-content如果內(nèi)容不適合內(nèi)容框别凤，則隱藏整個內(nèi)容饰序。
光標形狀 cursor
鼠標指針放在一個元素邊界范圍內(nèi)時所顯示的光標形狀。
查看示例规哪。
屬性可用值：
url("")自定義光標求豫。
default默認光標（通常是一個箭頭）。
auto瀏覽器設置的光標由缆。默認值注祖。
crosshair十字線（形狀如 + ）。
pointer一只手均唉。
move指示可被移動（ + 末端有箭頭）是晨。
n-resize上箭頭。
e-resize右箭頭舔箭。
s-resize下箭頭罩缴。
w-resize左箭頭。
ne-resize右上箭頭层扶。
nw-resize左上箭頭箫章。
se-resize右下箭頭。
sw-resize左下箭頭镜会。
text指示文本檬寂。
wait指示程序正忙（通常是一只表或沙漏）。
help指示可用的幫助（通常是一個問號或一個氣球）戳表。
not-allowed指示元素已禁用桶至。透明度 opacity
完成透明時昼伴，雖然不顯示，但仍會占用空間镣屹。
屬性可用值：
0.5固定值圃郊，從0.0（完全透明）到1.0（完全不透明）。默認值為1.
inherit繼承父類女蜈。手動調(diào)整寬高 resize
屬性可用值：
none用戶無法調(diào)整元素的尺寸持舆，默認值。
both用戶可調(diào)整元素的高度和寬度伪窖。
horizontal用戶可調(diào)整元素的寬度逸寓。
vertical用戶可調(diào)整元素的高度。濾鏡 filter
默認為none惰许，無濾鏡席覆。多個濾鏡用空格分隔。
查看濾鏡效果汹买。
詳見 CSS 參考手冊 - filter佩伤。元素自適應 object-fit
元素的內(nèi)容應該如何去適應指定的高度與寬度的容器。
一般用于<img>和<video>標簽晦毙，可以對這些元素進行保留原始比例的剪切生巡、縮放或者直接進行拉伸等。
查看示例见妒。
屬性可用值：
fill不保證原有尺寸比例孤荣，內(nèi)容拉伸填充整個容器，默認值须揣。
contain保持原有尺寸比例盐股。內(nèi)容被縮放。
cover保持原有尺寸比例耻卡。但部分內(nèi)容可能被剪切疯汁。
none保留原有元素內(nèi)容的長度和寬度，內(nèi)容不會被重置卵酪。
scale-down保持原有尺寸比例幌蚊。內(nèi)容的尺寸與none或contain中的一個相同，取決于誰得到的對象尺寸會更小溃卡。
initial重置為默認值溢豆，即fill。
inherit繼承父類瘸羡。元素位置 object-position
一般與object-fit一起使用漩仙，用來設置元素在容器里的位置。
一般用于<img>和<video>標簽。
屬性可用值：
50% 50%第一個值為x坐標位置的值讯赏，第二個值為 y 坐標位置的值垮兑。默認為50% 50%。
還能使用單詞漱挎，x坐標為left、center雀哨、right磕谅，y坐標為top、center雾棺、bottom膊夹；還能使用像素值，如10px 10px捌浩，可使用其他單位放刨，參考 CSS 參考手冊 - 單位。
initial設置為默認值尸饺，即50% 50%进统。
inherit繼承父類。
九浪听、布局
- 定位 position
可使用left top right bottom z-index屬性螟碎。
屬性可用值：
absolute絕對定位。
fixed固定定位迹栓。
relative相對定位掉分。
static靜態(tài)定位，默認值克伊。top bottom left right z-index屬性無效酥郭。
sticky粘性定位。
inherit繼承父類愿吹。
initial變?yōu)槟J值不从，即static
絕對定位 absolute:
相對于非static定位的第一個父元素進行定位。
絕對定位的元素與其他元素重疊洗搂，不占據(jù)文檔空間消返。
固定定位 fixed：
相對于瀏覽器窗口進行定位，窗口滾動它也不會移動耘拇。
固定定位的元素與其他元素重疊撵颊，不占據(jù)文檔空間。
相對定位 relative：
相對于原本位置進行定位惫叛。
雖然顯示位置變了倡勇，但實際位置未變化。
相對定位元素素經(jīng)常被用來作為絕對定位元素的父類嘉涌。
粘性定位 sticky：
相對于用戶的滾動位置來定位妻熊，在relative定位與fixed定位之間切換夸浅。
而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像fixed扔役，它會固定在目標位置帆喇。
目標位置通過top right botto left來設置，必須要設置其中之一亿胸，才可使粘性定位生效坯钦。
<body>
<div class="father">
<div class="absolute">absolute</div>
<div class="fixed">fixed 滾動時該元素會固定</div>
<div class="relative">relative</div>
<div>雖然relative顯示在下方，但實際位置仍在本元素上面</div>
<div class="sticky">sticky 滾動時當要超出目標區(qū)域時 會保持在頂部</div>
</div>
<div>
<p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p><p>p</p>
</div>
</body>
<style type="text/css" scoped="">
.father {
/* 添加相對定位 給absolute定位的子元素當參照物 */
position: relative;
background-color: #00FFFF;
width: 400px;
height: 200px;
}
.absolute {
/* 相對于static定位以外的第一個父元素進行定位侈玄⊥竦叮可使用left top right bottom屬性。 */
position: absolute;
left: 150px;
top: 100px;
}
.fixed {
/* 相對于瀏覽器窗口進行定位序仙，窗口滾動它也不會移動突颊。可使用left top right bottom屬性潘悼。 */
position: fixed;
right: 30px;
top: 100px;
}
.relative {
/* 相對于原本位置進行定位律秃。 */
/* 雖然顯示位置變了，但實際位置未變化挥等。 */
position: relative;
top: 80px;
left: 100px;
}
.sticky {
/* 滾動時當要超出目標區(qū)域時 會保持在頂部 因為top:0 */
position: sticky;
/* Safari */
position: -webkit-sticky;
top: 0px;
}
</style>
偏移量 top right bottom left
絕對定位時友绝，top表示離非static的父元素的頂部的偏移值。其他屬性值同理肝劲。
相對定位時迁客，top表示向上方偏移的值。其他屬性值同理辞槐。
對于靜態(tài)定位的元素無效掷漱。
屬性可用值：
auto自動計算位置，默認值榄檬。
10%包含元素(絕對定位時為非static父元素卜范，相對定位時為本身)寬高的百分比÷拱瘢可使用負值海雪。
10px固定值，可使用負值舱殿“侣悖可使用其他單位，參考 CSS 參考手冊 - 單位沪袭。
inherit繼承父類湾宙。堆疊順序 z-index
由于靜態(tài)定位以外定位方式都可能造成元素之間的重疊。該屬性可判斷哪個元素在上面。
若沒有指定該屬性侠鳄，后面添加的元素會在先添加的元素上面埠啃。
屬性可用值：
auto堆疊順序與父元素相等，默認值伟恶。
0數(shù)值大的元素放在數(shù)值小的元素上面碴开。
inherit繼承父類。裁減 clip
裁減出對應范圍的形狀來顯示知押。
只對絕對定位和固定定位的元素生效叹螟。
如果設置了overflow: visible;，該屬性不起作用台盯。
屬性可用值：
rect (top, right, bottom, left)元素的形狀。若不裁減畏线，相當于rect(0, width, heigth, 0)静盅。
auto不應用任何剪裁，默認值寝殴。
inherit繼承父類蒿叠。
<body>
<div style="position: relative;background-color: #00FFFF;width: 300px;height: 300px;">
<div class="div1">正常<div>
<div class="div2">裁減<div>
</div>
</body>
<style type="text/css" scoped="">
.div1 {
position: absolute;
left: 10px;
width: 100px;
height: 200px;
background-color: #A9A9A9;
}
.div2 {
position: absolute;
left: 110px;
width: 100px;
height: 200px;
background-color: #A9A9A9;
/* 相當于不裁減 */
clip: rect(0px, 100px, 200px, 0px);
/* 上面裁減20 左邊裁減30px */
clip: rect(20px, 100px, 200px, 30px);
/* 右邊裁減100-80 下面裁減200-100 */
clip: rect(0px, 80px, 100px, 0px);
}
</style>
- 浮動 float
使元素向左或向右移動，其周圍的元素也會重新排列蚣常。
浮動元素之后添加的元素將圍繞它市咽。
浮動元素之前添加的元素將不會受到影響。
多個浮動的元素放到一起抵蚊，如果有空間的話施绎，它們將彼此相鄰。常用這種方式進行水平布局贞绳。
絕對定位的元素該屬性無效谷醉。
屬性可用值：
left元素向左浮動。
right元素向右浮動冈闭。
none元素不浮動俱尼，默認值。
inherit繼承父類萎攒。
- 清除浮動 clear
屬性可用值:
left在左側(cè)不允許浮動元素遇八。若左側(cè)有浮動元素，那么自己將會另起一行耍休。
right在右側(cè)不允許浮動元素刃永。若右側(cè)有浮動元素，那么浮動元素將會另起一行羹应。
both在左右兩側(cè)均不允許浮動元素揽碘。自己會單獨占一行。
none允許浮動元素出現(xiàn)在兩側(cè)，默認值雳刺。
inherit繼承父類劫灶。
<body>
<h3>普通div將圍繞浮動元素</h3>
<div>1234</div>
<div class="float"></div>
<div>1234</div>
<div class="float"></div>
<div>1234</div>
<!-- -->
<div class="float"></div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<div>1234</div>
<h3>多個浮動的元素放到一起 能水平布局</h3>
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
<div style="clear: both;">清除左右兩邊的浮動 自己會另起一行</div>
</body>
<style type="text/css" scoped="">
.float {
float: left;
width: 100px;
height: 100px;
background-color: #00FFFF;
margin-left: 10px;
}
</style>
十、偽類/偽元素
- a標簽偽類
a:link正常掖桦，未訪問過的鏈接
a:visited用戶已訪問過的鏈接
a:hover當用戶鼠標放在鏈接上時
a:active鏈接被點擊的那一刻
需要按上面的順序使用本昏。
:hover和:active對其他元素也有效。
<body>
<a >百度</a>
</body>
<style type="text/css">
a {
/* 去除下劃線 */
text-decoration: none;
}
a:link { color:black; } /* 未訪問鏈接 */
a:visited { color:red; } /* 已訪問鏈接 */
a:hover { color:green; } /* 鼠標移動到鏈接上枪汪，a標簽變綠 */
a:active { color:blue; } /* 鼠標點擊時涌穆，a標簽變藍 */
</style>
表單元素偽類
:checked已選中的表單元素。僅用于<input type="radio">和<input type="checkbox">雀久。
:disabled禁用的表單元素宿稀。
:enabled啟用的表單元素。
:in-range當前值在正常范圍的表單元素赖捌。常用于<input type="number">祝沸。
:out-of-range當前值不在正常范圍的表單元素。常用于<input type="number">越庇。
:invalid當前值非法的表單元素罩锐。常用于<input type="email">和<input type="number">。
:valid當前值正常的表單元素卤唉。常用于<input type="email">和<input type="number">涩惑。
:optional為可選項的表單元素。即沒設置required的元素桑驱。僅用于<input><select><textarea>竭恬。
:required為必填項的表單元素。即設置了required的元素碰纬。僅用于<input><select><textarea>萍聊。
:read-only只讀的表單元素。即設置了readonly的元素悦析。僅用于<input><textarea>寿桨。
:read-write可讀寫的表單元素。即沒設置readonly的元素强戴。僅用于<input><textarea>亭螟。
:focus處于聚焦狀態(tài)的表單元素。其他偽類
:target被鏈接的元素
<body>
<!-- 點擊后div1變綠色 -->
<a href="#div1">goto div1</a>
<!-- 點擊后div2變綠色 -->
<a href="#div2">goto div2</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
<style type="text/css" scoped="scoped">
/* 被鏈接的元素會變?yōu)榫G色 */
:target {
background-color: green;
}
</style>
:before骑歹、:after 在元素的前面/后面添加內(nèi)容content预烙。
插入內(nèi)容 content
默認位置在元素前或后。
若要改變內(nèi)容的位置道媚”獾В可將元素設置成position: relative;翘县，再在:before或:after中設置成position: absolute;，使用絕對定位的方式改變內(nèi)容位置谴分。
屬性可用值：
none不插入內(nèi)容锈麸。
normal正常，默認是none牺蹄。
counter()計數(shù)器內(nèi)容忘伞。參考 CSS 教程 - 計數(shù)器。
attr(attribute)函數(shù)沙兰，返回元素屬性的值氓奈。div:after { content: attr(id);}表示插入的內(nèi)容為<div>的id的值。
""String文本。
open-quote開口引號。即"艘虎。
close-quote閉合引號。即"伪节。，必須設置:before { content: open-quote;}后绩鸣，:after { content: close-quote;}才有效。顯示為" "纱兑。
no-open-quote移除內(nèi)容的開始引號呀闻。
no-close-quote移除內(nèi)容的閉合引號。
url(" ")設置某種媒體（圖像潜慎，聲音捡多，視頻等內(nèi)容）。
inherit繼承父類铐炫。引號定義 quotes
重新定義content屬性的open-quote和close-quote的值垒手。
屬性可用值：
none無符號，使用open-quote和close-quote不會產(chǎn)生任何符號倒信。
"" "" "" ""4個字符串科贬，前兩個值規(guī)定第一級引用嵌套，后兩個值規(guī)定下一級引號嵌套鳖悠。
inherit繼承父類榜掌。
<body>
<div>hello</div>
<p id=" p1">hello</p>
<div id="div1">hello</div>
</body>
<style type="text/css" scoped="scoped">
/* 修改引號的值 */
div { background-color: #00FFFF; quotes: "+" "-" "*" "/";}
/* 前面加開口引號 后面加閉合引號 */
div:before { content: open-quote;}
div:after { content: close-quote;}
p { background-color: #FFA500; }
/* 前面添加圖像 后面添加id的值 */
p:before { content: url(../me.png); }
p::after { content: attr(id); }
/* 使用絕對定位更改content的位置 */
#div1 {background-color: #FAEBD7;position: relative;}
#div1:before {
content: "absolute";
position: absolute;
background-color: red;
left: 50px;
top: 50px;
z-index: 1;
}
#div1::after {content: none;}
</style>
更多偽類參考 CSS 參考手冊 - 選擇器。
十一乘综、媒體類型
媒體類型允許你在不同媒體呈現(xiàn)不同CSS憎账。媒體類型名稱不區(qū)分大小寫。
媒體語法:
@media not|only mediatype and|not|only (expressions) {
}
- 關鍵字
mediatype前的關鍵字可省略卡辰。
not表示只不滿足某條件胞皱。
only表示只滿足某條件邪意。
and表示同時滿足某條件。 - 媒體類型mediatype
all所有的媒體設備反砌。
aural語音和聲音合成器雾鬼。已廢棄。
braille盲文觸摸式反饋設備于颖。已廢棄呆贿。
embossed盲人印刷設備。已廢棄森渐。
handheld掌上設備或更小的裝置做入。已廢棄。
print打印機同衣。
projection投影設備竟块。已廢棄。
screen電腦屏幕耐齐，平板電腦浪秘，智能手機。
speech屏幕閱讀器等發(fā)聲設備埠况。
tty固定的字符網(wǎng)格耸携，如電報、終端設備和對字符有限制的便攜設備辕翰。已廢棄夺衍。
tv電視和網(wǎng)絡電視。已廢棄喜命。 - 表達式expressions
通過and連接表達式沟沙，表示 并且 的意思，如@media only screen and (max-width: 500px) and (min-width: 400px) { }壁榕，適用于寬度大于400小于500的屏幕矛紫。
通過逗號連接表達式，表示 或 的意思牌里，如@media only screen and (max-width: 500px), (min-width: 1000px) { }颊咬，適用于寬度小于500或大于1000的屏幕。
表達式可用屬性二庵，參考 CSS 參考手冊 - @media贪染。
十二、轉(zhuǎn)換
轉(zhuǎn)換的效果是讓某個元素改變形狀催享，大小和位置杭隙。
轉(zhuǎn)換后雖然看起來發(fā)生了變化，但實際布局和以前一樣因妙。
- 2d轉(zhuǎn)換 transform
移動轉(zhuǎn)換 translate(x, y)
x表示水平向右移動一個距離痰憎，y表示垂直向下移動一個距離票髓，為負數(shù)則向反方向移動。
只設置一個值時铣耘，y則為0洽沟。
xy為一個距離，可使用其他單位蜗细，參考 CSS 參考手冊 - 單位裆操。
translateX(x)、translateY(y)表示單獨向水平或垂直方向移動炉媒。旋轉(zhuǎn)轉(zhuǎn)換 rotate(angle)
angle為一個角度踪区，常用單位deg，30deg表示順時針30度吊骤《懈冢可為負數(shù)，則為逆時針白粉。縮放轉(zhuǎn)換 scale(x, y)
x表示水平方向的縮放倍數(shù)传泊，y表示垂直方向的縮放倍數(shù)。
當只設置一個值時鸭巴，y等于x眷细。
scaleX(x)、scaleY(y)表示單獨在水平或垂直方向縮放鹃祖。傾斜轉(zhuǎn)換 skew(x, y)
x表示水平方向的傾斜角度薪鹦，常用單位deg，30deg表示y軸逆時針傾斜30度惯豆，為負數(shù)時為順時針傾斜。
y表示垂直方向的傾斜角度奔害，常用單位deg楷兽，30deg表示x軸順時針傾斜30度，為負數(shù)為逆時針傾斜华临。
當只設置一個值時芯杀，y等于0。
skewX(x)雅潭、skewY(y)表示單獨在水平或垂直方向傾斜揭厚。綜合轉(zhuǎn)換 matrix()
綜合轉(zhuǎn)換包含旋轉(zhuǎn)、縮放扶供、移動和傾斜功能筛圆。
需要填寫6個值。第1和第4表示縮放的參數(shù)椿浓；第2和第3表示傾斜的參數(shù)太援，這里要使用數(shù)字闽晦，3.14表示360度；第5和第6表示移動的參數(shù)提岔，也要使用數(shù)字仙蛉，100表示100px。
<body>
<div></div>
<div style="transform: translate(100px, 50px);">水平移動100px 垂直移動50px</div>
<div style="transform: rotate(30deg);">順時針旋轉(zhuǎn)30度</div>
<div style="transform: scale(1.5, 2);">水平縮放成1.5倍碱蒙，垂直縮放為2倍</div>
<div style="transform: skew(30deg, 0deg);">y軸順時針傾斜30度</div>
<div style="transform: matrix(1, 0, -0.5, 1, 0, 0);">綜合變換 此時為y軸順時針傾斜</div>
</body>
<style type="text/css" scoped="scoped">
div {
width: 100px;
height: 100px;
border: 1px solid red;
/* 設置錨點為 10px 50% 0 */
/* transform-origin:10px; */
}
</style>
- 轉(zhuǎn)換的錨點 transform-origin
需要先設置transform屬性荠瘪。
語法順序：transform-origin: x-axis y-axis z-axis;
設置x軸、y軸赛惩、z軸的錨點哀墓。默認值transform-origin: 50% 50% 0;
若只設置一個值，另兩個值分別為默認值坊秸，即50% 0麸祷。
該屬性對rotate()和scale()有效。
x-axis可選值：
left左褒搔，即0%阶牍。
center中，即50%星瘾。
right右走孽，即100%。
10px固定值琳状，表示以左為0點的坐標值磕瓷。可使用其他單位念逞，參考 CSS 參考手冊 - 單位困食。
50%寬度的百分比。
y-axis可選值：
top上翎承，即0%硕盹。
center中，即50%叨咖。
bottom下瘩例，即100%。
10px固定值甸各，表示以上為0點的坐標值垛贤。可使用其他單位趣倾，參考 CSS 參考手冊 - 單位聘惦。
50%高度的百分比。
z-axis可選值：
10px固定值儒恋〔看眨可使用其他單位露乏，參考 CSS 參考手冊 - 單位。
10% 10%是什么意義
rotate時表示以該點為圓心來旋轉(zhuǎn)涂邀。
scale時瘟仿，表示在10%處把一條邊分成2段，一段占10%向左或上縮放比勉，另一段占90%向右或下縮放劳较。
- 3d轉(zhuǎn)換
移動轉(zhuǎn)換 translate3d(x,y,z)
x表示水平向右移動一個距離，y表示垂直向下移動一個距離浩聋，z表示垂直屏幕向外移動一個距離观蜗，為負數(shù)則向反方向移動。
xyz為一個距離衣洁，可使用其他單位墓捻，參考 CSS 參考手冊 - 單位。
translateX(x)坊夫、translateY(y)砖第、translateZ(z)表示單獨向水平方向、垂直方向环凿、垂直于屏幕方向移動梧兼。縮放轉(zhuǎn)換 scale3d(x, y, z)
x表示水平方向的縮放倍數(shù)，y表示垂直方向的縮放倍數(shù)智听，z表示垂直于屏幕方向的縮放倍數(shù)羽杰。
scaleX(x)、scaleY(y)到推、scaleZ(z)表示單獨在水平方向考赛、垂直方向、垂直于屏幕方向縮放莉测。旋轉(zhuǎn)轉(zhuǎn)換 rotate3d(x,y,z,angle)
x不為0表示沿x軸旋轉(zhuǎn)欲虚，y不為0表示沿y軸旋轉(zhuǎn)，z不為0表示沿z軸旋轉(zhuǎn)悔雹。rotate3d(0,0,1,angle)效果與rotate(angle)相同。若angle為正值欣喧，旋轉(zhuǎn)方向為順時針腌零。
rotateX(angle)、rotateY(angle)唆阿、rotateZ(angle)表示分別沿X軸益涧、Y軸、 Z軸的旋轉(zhuǎn)驯鳖。綜合3d轉(zhuǎn)換 matrix3d()
需要傳入16個值闲询。
子元素呈現(xiàn)方式 transform-style
默認情況下久免，子元素會以2d方式呈現(xiàn)，即看到的子元素3d效果是投影在初始平面的2d投影扭弧。
設置preserve-3d后阎姥，子元素與父元素重疊部分會存在交錯，從而產(chǎn)生立體感鸽捻。
查看示例呼巴。
只對3d轉(zhuǎn)換有效。用在父元素上御蒲。
屬性可用值:
flat在2D平面呈現(xiàn)衣赶，默認值。
preserve-3d在3D空間中呈現(xiàn)厚满。透視 perspective
表示該元素距離視圖(觀測點)的距離府瞄。接近0時，觀測點非车夤浚靠近元素遵馆，元素則會呈現(xiàn)無限大的狀態(tài)。
查看示例敲街。
只對3d轉(zhuǎn)換有效团搞。用在父元素上。
屬性可用值:
10固定值多艇，10表示10px逻恐。
none不設置透視，與0相同峻黍，默認值复隆。透視位置 perspective-origin
語法順序perspective-origin: x-axis y-axis;
一個表示視圖(觀測點)在x軸的位置，一個表示在y軸的位置姆涩。
查看實例.
只對3d轉(zhuǎn)換有效挽拂。用在父元素上。
x-axis可選值：
left即0%骨饿。
center即50%亏栈。
right即100%。
10px固定值宏赘∪薇保可使用其他單位，參考 CSS 參考手冊 - 單位察署。
50%寬度的百分比闷游，默認50%。
y-axis可選值：
top即0%。
center即50%脐往。
bottom即100%休吠。
10px固定值∫挡荆可使用其他單位瘤礁，參考 CSS 參考手冊 - 單位辖源。
50%高度的百分比矾湃，默認50%途戒。元素呈現(xiàn)方式 backface-visibility
當元素3d旋轉(zhuǎn)后180度后會出現(xiàn)顯示背面的情況。設置為hidden可使顯示背面時隱藏僵驰，即180度-360度不可見喷斋。
屬性可選值：
visible背面是可見的，默認值蒜茴。
hidden背面是不可見的诺核。
十三、過渡
元素從一種樣式逐漸改變?yōu)榱硪环N樣式的效果鞍泉。
- 過渡 transition
語法順序：transition: transition-property transition-duration transition-timing-function transition-delay;
必須要指定過渡時間transition-duration忘巧，因為默認值為0兴泥。
可以同時過渡幾個屬性，每組間用逗號隔開谎势。如:transition: property1 duration1 timing-function1 delay1, property2 duration2 timing-function2 delay2;
過渡屬性 transition-property
屬性可選值：
none沒有屬性會獲得過渡效果。
all所有屬性都將獲得過渡效果又兵，默認值。
propertyName要使用過渡效果的CSS屬性级野，多個屬性則用逗號分隔页屠。過渡時間 transition-duration
單位為秒(s)、毫秒(ms)蓖柔。必須要設置該屬性辰企，否則過渡不生效。
屬性可選值：
1s默認值為0s况鸣。過渡變化速度 transition-timing-function
屬性可選值：
linear均速牢贸，等同于cubic-bezier(0,0,1,1)。
ease先慢再快最后再慢镐捧，等同于cubic-bezier(0.25,0.1,0.25,1)潜索，默認值。
ease-in先慢后快懂酱，等同于cubic-bezier(0.42,0,1,1)竹习。
ease-out先快后慢，等同于cubic-bezier(0,0,0.58,1)列牺。
ease-in-out先慢再快最后再慢整陌，等于cubic-bezier(0.42,0,0.58,1)。
cubic-bezier(n,n,n,n)自定義瞎领。參考 CSS 參考手冊 - 函數(shù)泌辫。過渡延遲時間 transition-delay
觸發(fā)后延遲一段時間后才開始過渡纫普。單位為秒(s)哩俭、毫秒(ms)。
屬性可選值：
1s默認為0s幻捏。
<body>
<div>光標放在div后背景色和寬度會過渡</div>
</body>
<style type="text/css" scoped="scoped">
div {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #000000;
/* 設置width和background-color的過渡效果 */
transition:width 1s ease 0s, background-color 1s ease 0s;
-o-transition:width 1s ease 0s, background-color 1s ease 0s;
-ms-transition:width 1s ease 0s, background-color 1s ease 0s;
-moz-transition:width 1s ease 0s, background-color 1s ease 0s;
-webkit-transition:width 1s ease 0s, background-color 1s ease 0s;
}
div:hover {
width: 200px;
background-color: red;
}
</style>
十四驼修、動畫
過渡只能將元素從一個樣式變到另一個樣式殿遂。而動畫可以將元素從樣式1變到樣式2诈铛，再從樣式2變到樣式3，樣式3變到樣式4....
- 動畫綁定 animation
語法順序:animation: animation-name transition-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
需要設置動畫持續(xù)時間墨礁，因為默認為0癌瘾，為0時動畫不會生效。
選擇器名稱 animation-name
該屬性為@keyframes指定名稱饵溅。
Sting選擇器的的名稱，字符串兩端不用加引號"妇萄。
none沒有動畫（可用于覆蓋從級聯(lián)的動畫）蜕企，默認值。動畫時間 transition-duration
單位為秒(s)冠句、毫秒(ms)轻掩。必須要設置該屬性，因為默認為0懦底，為0時動畫不會生效唇牧。
屬性可選值：
1s默認值為0s。動畫變化速度 animation-timing-function
參考 過渡變化速度 transition-timing-function動畫延遲時間 animation-delay
觸發(fā)后延遲一段時間后才開始動畫聚唐。單位為秒(s)丐重、毫秒(ms)。
可以為負值杆查。-2s表示立即開始動畫扮惦，但跳過前2秒的動畫。
屬性可選值：
1s默認為0s亲桦。動畫重復次數(shù) animation-iteration-count
屬性可選值：
1數(shù)字崖蜜，默認值。
infinite無限次客峭。動畫播放方向 animation-direction
animation-iteration-count需要大于1豫领，該屬性才有效。
屬性可選值：
normal動畫按正常播放舔琅，默認值等恐。
reverse動畫反向播放。
alternate動畫在奇數(shù)次（1搏明、3鼠锈、5...）正向播放，在偶數(shù)次（2星著、4购笆、6...）反向播放。
alternate-reverse動畫在奇數(shù)次（1虚循、3同欠、5...）反向播放样傍，在偶數(shù)次（2、4铺遂、6...）正向播放衫哥。
initial重置為默認值，即normal襟锐。
inherit繼承父類撤逢。動畫結束的元素樣式 animation-fill-mode
當動畫不播放時（當動畫完成時或者當動畫有一個延遲未開始播放時），元素要使用的樣式粮坞。
默認情況下蚊荣，當動畫完成后，元素會回到動畫前的樣式莫杈。
屬性可選值：
none動畫前的樣式互例，默認值。
forwards動畫后的樣式筝闹。
backwards???
both動畫遵循forwards 和backwards的規(guī)則媳叨。
initial重置為默認值，即none关顷。
inherit繼承父類糊秆。動畫暫停 animation-play-state
屬性可選值：
paused動畫暫停。
running動畫執(zhí)行议双，默認值扩然。
- 關鍵幀 @keyframes
后面跟animation-name指定的名字。
使用百分比來規(guī)定變化發(fā)生的時間聋伦，0%是動畫的開始夫偶，100%是動畫的完成。
可以使用關鍵詞from觉增、to兵拢，等同于0%和100%。
<body>
<div>123</div>
</body>
<style type="text/css" scoped="scoped">
div {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid black;
/* 設置4秒動畫 */
animation: div_ani 4s ease none 0s 2 alternate-reverse;
}
@keyframes div_ani{
/* 動畫為移動一個正方形路徑 再反向移動回來 */
from {margin: 0px 0px;}
25% {margin: 0px 100px;}
50% {margin: 100px 100px;}
75% {margin: 100px 0px;}
to {margin: 0px 0px;}
}
</style>
十五逾礁、多列
將一個元素中的子元素分成多列说铃，也可將多個子元素等寬左右布局。
- 分割線 column-rule
語法順序:column-rule: column-rule-width column-rule-style column-rule-color;
分割線的寬度 column-rule-width
屬性可選值：
thin細嘹履。
medium中等腻扇，默認值。
thick粗砾嫉。
10px固定值幼苛。可使用其他單位焕刮，參考 CSS 參考手冊 - 單位舶沿。分割線的樣式 column-rule-style
參考 邊框風格 border-style墙杯。分割線的顏色 column-rule-color
默認為black。
參考 背景顏色 background-color
- 多列 columns
語法順序:columns: column-width column-count;括荡。
在columns: 100px 3;時高镐，當每列寬度大于100px時，就以3列顯示畸冲；當瀏覽器寬度縮小嫉髓，導致在3列情況下無法滿足每列大于等于100px，就開始轉(zhuǎn)為2列邑闲；當瀏覽器再縮小岩喷，2 列中每列無法再保持100px每列時，再次轉(zhuǎn)為1列...
總之监憎，column-width為每列寬度的最小值，column-count表示要顯示的列數(shù)的最大值婶溯。
每列的寬度 column-width
屬性可選值：
auto自動寬度鲸阔，默認值。
10px固定值迄委『稚福可使用其他單位，參考 CSS 參考手冊 - 單位叙身。多列的列數(shù) column-count
屬性可選值：
1數(shù)字渔扎。
auto列數(shù)將取決于column-width，默認值信轿。
每列的間距 column-gap
該屬性指每列的間距晃痴，column-rule-width指分割線的寬度。分割線寬度可以大于每列的間距财忽，此時分割線會覆蓋在每列上倘核，分割線不會占劇空間。
屬性可選值：
10px固定值即彪〗舫可使用其他單位，參考 CSS 參考手冊 - 單位隶校。
normal普通寬度漏益，默認值。子元素跨越的列數(shù) column-span
屬性可選值：
1跨越一列深胳，只能為1绰疤，默認值。
all跨越所有列舞终。
<body>
<div class="div1">
<h2>標題跨越所有列</h2>
當我年輕的時候峦睡，我夢想改變這個世界翎苫；當我成熟以后，我發(fā)現(xiàn)我不能夠改變這個世界榨了，
我將目光縮短了些煎谍，決定只改變我的國家；當我進入暮年以后龙屉，我發(fā)現(xiàn)我不能夠改變我們的國家呐粘，
我的最后愿望僅僅是改變一下我的家庭，但是转捕，這也不可能作岖。當我現(xiàn)在躺在床上，
行將就木時五芝，我突然意識到：如果一開始我僅僅去改變我自己痘儡，然后，我可能改變我的家庭枢步；
在家人的幫助和鼓勵下沉删，我可能為國家做一些事情；然后醉途，誰知道呢?我甚至可能改變這個世界矾瑰。
</div>
<h2>4個子元素均分 左右布局</h2>
<div class="div2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
<style type="text/css" scoped="scoped">
.div1 {
border: 1px solid #00FFFF;
/* 分割線 */
column-rule: 5px solid red;
/* 最多3列 每列寬度最少為100px */
columns: 100px 3;
/* 每列間距20px */
column-gap: 20px;
}
.div1 h2 {
/* 標題跨越所有列 */
column-span: all;
}
.div2 {
margin-top: 10px;
border: 1px solid #FAEBD7;
/* 分割線 */
column-rule: 5px solid red;
/* 最多4列 */
columns: auto 4;
/* 每列間隔20px */
column-gap: 20px;
}
</style>
十六、 彈性布局
是常用的左右布局方式隘擎，能更加有效地對一個容器中的子元素進行排列殴穴、對齊和分配空白空間。
父元素需要設置display: flex;或display: inline-flex;货葬，兩者區(qū)別是inline-flex會將父元素變成內(nèi)聯(lián)塊元素采幌。
子元素默認在彈性盒子內(nèi)一行顯示且從左到右顯示。
需要添加前綴:
{
/* safari */
display: -webkit-flex;
display: flex;
}
- 子元素排列方式 flex-flow
語法順序:flex-flow: flex-direction flex-wrap;
子元素方向 flex-direction
默認情況下震桶，row是從左到右植榕。若direction:rtl;，row則變?yōu)閺挠业阶竽岫帷ow-reverse也將變?yōu)閺淖蟮接摇?br> 屬性可選值：
row從左到右尊残，默認值。
row-reverse與row相反淤堵。
column從上到下寝衫。
column-reverse與column相反
initial重置為默認值，即row拐邪。
inherit繼承父類慰毅。子元素多行顯示 flex-wrap
屬性可選值：
默認情況下，子元素會在一行左右排列扎阶，當數(shù)量增多后汹胃，子元素會減小寬度婶芭。
nowrap不換行，可能會減小子元素寬度着饥，默認值犀农。
wrap換行。
wrap-reverse換行宰掉，并以相反的順序排列呵哨。
initial重置為默認值，即nowrap轨奄。
inherit繼承父類孟害。
子元素水平對齊方式 justify-content
屬性可選值：
flex-start位于容器的開頭，默認值挪拟。
flex-end位于容器的結尾挨务。
center位于容器的中心。
space-between元素均分容器的空間玉组，各元素間距相等谎柄，且左右元素靠邊。
space-around元素均分容器的空間球切，各元素間距相等，但左右元素離容器左右邊的距離是各元素間距的一半绒障。
initial重置為默認值吨凑，即flex-start。
inherit繼承父類
查看示例户辱。子元素垂直對齊方式 align-items
屬性可選值：
stretch拉伸以適應容器鸵钝，默認值。
如果盒子和子元素都設置了height庐镐，則會呈現(xiàn)flex-start的效果恩商。否則會使子元素與盒子高度相同，但也會受到min-height必逆、max-height的限制怠堪。
center位于容器的中心。如果子元素高度大于盒子高度名眉，則會向上下溢出相等的長度粟矿。
flex-start位于容器的開頭。
flex-end位于容器的結尾损拢。
baseline位于容器的基線上陌粹。
initial重置為默認值，即stretch福压。
inherit繼承父類掏秩。多行元素的垂直對齊 align-content
容器有多行元素或舞，才能渲染出效果。
屬性可選值：
stretch拉伸以適應容器蒙幻，默認值映凳。
center位于容器的中心。相臨行會緊靠杆煞，如果多行的高度大于容器魏宽，則會向容器上下溢出相等的長度。
flex-start位于容器的開頭决乎。相臨行會緊靠队询。
flex-end位于容器的結尾。相臨行會緊靠构诚。
space-between各行均分容器空間蚌斩，各行間距相等，最上行和最下行緊靠容器上下邊范嘱。
space-around各行均分容器空間送膳，各行間距相等，最上行和最下行離容器上下邊的距離是各行間距的一半丑蛤。
initial重置為默認值叠聋，即stretch。
inherit繼承父類受裹。子元素的順序 order
默認為0碌补，值越小子元素越靠前，可為負數(shù)棉饶。相等時按添加順序排序厦章。
該屬性用在子元素上，上面的屬性都是用在容器上照藻。
屬性可選值：
0數(shù)字袜啃，默認值為0。
initial重置為默認值幸缕，即0群发。
inherit繼承父類。單個子元素的垂直對齊方式 align-self
align-items是控制全部子元素的垂直對齊发乔，該屬性則只控制單個子元素也物。
該屬性用在子元素上。
屬性可選值：
auto使用容器的align-items屬性值列疗，默認值滑蚯。
其他可選值與 子元素垂直對齊方式 align-items 相同。子元素空間分配 flex
語法順序:flex: flex-grow flex-shrink flex-basis
該屬性用在子元素上。
屬性可選值：
auto與1 1 auto相同告材。
none與0 0 auto相同坤次。
initial重置為默認值，即0 1 auto斥赋。
inherit繼承父類缰猴。
子元素的擴展比率 flex-grow
默認為0，表示元素使用flex-basis基準值疤剑。flex-basis默認為auto滑绒，子元素會使用width作為自己的寬度。
若存在flex-grow不為0的子元素隘膘，flex-grow為0的子元素使用flex-basis基準值作為自己的寬度疑故，剩下的元素根據(jù)flex-grow值按比例分配剩余的寬度。
使用該屬性時弯菊，最好不要設置子元素的width和flex-basis纵势，這樣才能夠更方便的按比例分配子元素的寬度。
屬性可選值：
0數(shù)字管钳，默認值為0钦铁。
initial重置為默認值，即0才漆。
inherit繼承父類牛曹。子元素的收縮比率 flex-shrink
假如有一個彈性容器，寬度為500px醇滥，容器里有5個子元素黎比，每個子元素寬度設置為120px，總計1205=600px腺办，超出容器100px焰手。若5個元素的flex-shrink分別為1糟描、1怀喉、2、2船响、4躬拢，總計1+1+2+2+4=10份。每份則為100px/10=10px见间。所以5個元素分別占101聊闯、101、102米诉、102菱蔬、10*4，總計10、10拴泌、20魏身、20、40蚪腐。那么每個子元素所占實際寬度為120-10惰蜜、120-10谭羔、120-20、120-20、120-40朝墩，總計110、110创夜、100溶耘、100、80瘾杭。
屬性可選值：
1數(shù)字诅病，默認值為1。
initial重置為默認值粥烁，即0贤笆。
inherit繼承父類。子元素的伸縮基準值 flex-basis
屬性可選值：
10px一個百分比或一個長度讨阻，長度可使用其他單位芥永，參考 CSS 參考手冊 - 單位。
auto使用子元素的width钝吮。如果未指定width埋涧，則width將根據(jù)內(nèi)容決定。默認值奇瘦。
initial重置為默認值棘催，即auto。
inherit繼承父類耳标。
十七醇坝、函數(shù)
參考 CSS 參考手冊 - 函數(shù)。
- attr(attribute-name)
返回元素的屬性值次坡。常用于偽元素:before呼猪、:after的content。 - calc(expression)
解析表達式砸琅，返回結果宋距。width: calc(50% - 10px)則返回寬度的50%減去10px。
支持+-*/運算符且運算符兩邊要加空格症脂。 - cubic-bezier(x1,y1,x2,y2)
貝塞爾曲線谚赎。x1y1和x2y2為兩個控制點的坐標淫僻，范圍為0-1。用于動畫的animation-timing-function和過渡的transition-timing-function壶唤。 - hsl()嘁傀、hsla()、rgb()视粮、rgba()
返回一個顏色细办。 - linear-gradient()、radial-gradient()
創(chuàng)建一個線性漸變色或徑向漸變色蕾殴。用于background-image笑撞。 - repeating-linear-gradient()、repeating-radial-gradient()
創(chuàng)建一個重復的線性漸變色或徑向漸變色钓觉。用于background-image茴肥。 - var(custom-property-name, value)
插入自定義屬性值。custom-property-name為自定義屬性的名稱荡灾，必需以 -- 開頭瓤狐。value為備用值，當自定義屬性不存在時使用批幌。
十八础锐、瀏覽器未全部適配屬性
請在 CSS參考手冊 中全局搜索查看用法。
- 重置所有屬性 all
重置除unicode-bidi和direction的所有屬性為默認值或繼承值荧缘。 - 外觀 appearance
使元素看上去像標準的用戶界面元素皆警。 - 背景混合模式 background-blend-mode
同時使用漸變色與圖像時，兩者如何混合顯示截粗。 - 列填充方式 column-fill
如何填充列信姓。 - 字體自適應大小 font-size-adjust
當?shù)谝粋€選擇的字體不可用時，瀏覽器會使用第二個指定的字體绸罗。這可能會導致改變字體大小意推。 - 元素混合模式 mix-blend-mode
元素的內(nèi)容與父元素的內(nèi)容和背景如何混合。 - Tab鍵的長度 tab-size
制表符（tab）的空格長度珊蟀，默認為8個空格菊值。
