我在樂位元組學習前端的第二天-學習筆記:CSS3全面知識彙總

語言: CN / TW / HK

筆記:CSS3全面知識彙總

結構框架:分為六個部分(屬性、選擇符、語法與規則、取值、css單位以及附錄)

第一部分:屬性(定位、佈局、彈性盒模型、尺寸、外補白、內補白、邊框、背景、顏色、字型、列表、表格、內容、使用者介面、多欄、2D變換、過渡、動畫、列印、媒體查詢、only IE、only Firefox、only webkit)

第二部分:選擇符(元素選擇符、關係選擇符、屬性選擇符、偽類選擇符、偽物件選擇符)

第三部分:語法與規則(!Important、/comment/、@import、@charset、@media、#font-face、@page、@keyframes)

第四部分:取值(顏色、文字、函式、影象、數字、其他)

第五部分:css單位(長度、角度、時間、頻率、佈局)

第六部分:附錄(顏色關鍵字、媒體型別、css條件hack、css屬性hack、css選擇符hack、cssbugs解決方案、css技巧和經驗、css其他技巧)


第一部分:屬性

第一節:定位(position、z-index、top、right、bottom、left)

第二節:佈局(display、float、clear、visibility、clip、overflow、overflow-xoverflow-y

display:none 隱藏物件。與visibility屬性的hidden值不同,其不為被隱藏的物件保留其物理空間
inline指定物件為內聯元素。
block指定物件為塊元素。
list-item指定物件為列表專案。
inline-block指定物件為內聯塊元素。(CSS2)
table指定物件作為塊元素級的表格。類同於html標籤<table>(CSS2)
inline-table指定物件作為內聯元素級的表格。類同於html標籤<table>(CSS2)
table-caption指定物件作為表格標題。類同於html標籤<caption>(CSS2)
table-cell指定物件作為表格單元格。類同於html標籤<td>(CSS2)
table-row指定物件作為表格行。類同於html標籤<tr>(CSS2)
table-row-group指定物件作為表格行組。類同於html標籤<tbody>(CSS2)
table-column指定物件作為表格列。類同於html標籤<col>(CSS2)
table-column-group指定物件作為表格列組顯示。類同於html標籤<colgroup>(CSS2)
table-header-group指定物件作為表格標題組。類同於html標籤<thead>(CSS2)
table-footer-group指定物件作為表格腳註組。類同於html標籤<tfoot>(CSS2)
compact分配物件為塊物件或基於內容之上的內聯物件(CSS3)
run-in分配物件為塊物件或基於內容之上的內聯物件(CSS3)
ruby將物件作為表格腳註組顯示(CSS3)
ruby-base將物件作為表格腳註組顯示(CSS3)
ruby-text將物件作為表格腳註組顯示(CSS3)
ruby-base-group將物件作為表格腳註組顯示(CSS3)
ruby-text-group將物件作為表格腳註組顯示(CSS3)
box將物件作為彈性盒模型顯示(CSS3)-webkit-box;-moz-box;-o-box;-ms-box;inline-box將物件作為內聯塊級彈性盒模型顯示(CSS3)





















clip:rect(0 auto 35px 10px) 上邊不剪下,右邊不剪下,下邊從第35個畫素開始剪下直至最底部,左邊剪10
在這裡插入圖片描述

overflow:visible 不剪下內容
hidden將超出物件尺寸的內容進行裁剪,將不出現滾動條。
scroll將超出物件尺寸的內容進行裁剪,並以滾動條的方式顯示超出的內容。
auto在需要時剪下內容並新增滾動條,此為body物件和textarea的預設值。


第三節:彈性盒模型(box-orient子元素排列方式、box-pack子元素對齊方式、box-align子元素對齊方式、box-flex子元素如何分配剩餘盒子的剩餘空間、box-flex-group子元素的所屬組、box-ordinal-group子元素的顯示順序、box-direction子元素順序是否相反、box-lines子元素是否可以換行顯示)要使其生效需給父級元素display為box或者是inline-box;注意瀏覽器

box-orient 定義盒子內部元素的方向排列方式
horizontal(水平線上從左到右) vertical(垂直線上從上到下)
inline-axis(水平編排)、block-axis(垂直編排)、inherit(繼承父級元素)
在這裡插入圖片描述在這裡插入圖片描述



box-pack:start 設定彈性盒模型物件的子元素從開始位置對齊(大部分情況等同於左對齊)
center設定彈性盒模型物件的子元素居中對齊
end設定彈性盒模型物件的子元素從結束位置對齊(大部分情況等同於右對齊)
justify設定或彈性盒模型物件的子元素兩端對齊
在這裡插入圖片描述



box-align:start 設定彈性盒模型物件的子元素從開始位置對齊
center設定彈性盒模型物件的子元素居中對齊
end設定彈性盒模型物件的子元素從結束位置對齊
baseline設定彈性盒模型物件的子元素基線對齊
stretch設定彈性盒模型物件的子元素自適應父元素尺寸
在這裡插入圖片描述
在這裡插入圖片描述在這裡插入圖片描述在這裡插入圖片描述在這裡插入圖片描述






box-flex:0讓子元素按照父元素的寬度劃分 將一個容器分成6份,子物件a分1份,b分2份,c分3份(動態的分配剩餘空間)
在這裡插入圖片描述


box-flex-group:1 動態的給數字較大的組分配其內容所需的實際空間(如無內容、paddin、border則不佔空間),剩餘空間則均分給數字最小的那個組(可能有1個或多個元素)

box-ordinal-group:1 調整三個欄目的先後順序,數字越大越靠後, 數值較低的元素顯示在數值較高元素的前面,相同數值的元素,它們的顯示順序取決於它們的程式碼順序
在這裡插入圖片描述

box-direction:normal 確定內部元素的排列順序
normal、reverse(翻轉)、inherit 設定彈性盒模型物件的子元素按正常順序排列
reverse反轉彈性盒模型物件的子元素的排列順序

box-lines:single 彈性盒模型物件的子元素只在一行內顯示
multiple彈性盒模型物件的子元素超出父元素的空間時換行顯示

第四節:尺寸(width、min-width、max-width、height、min-height、max-height)
第五節:外補白(margin、margin-top、margin-right、margin-bottom、margin-left)
第六節:內補白(padding、padding-top、padding-right、padding-bottom、padding-left)
第七節:邊框(border、border-width、border-style、border-color、border-top、border-top-width、border-top-style、border-top-color、border-right、border-right-width、border-right-style、border-right-color、border-bottom、border-bottom-width、border-bottom-style、border-bottom-color、border-left、border-left-width、border-left-style、border-left-color、border-image、border-radius、border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius、box-shadow陰影、box-reflect倒影


border-image:border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat
none:無背景圖片。
<url>使用絕對或相對地址指定影象。
<number>用浮點數指定寬度。不允許負值。
<percentage>用百分比指定寬度。不允許負值。
<length>用長度值指定寬度。不允許負值。
stretch:指定用拉伸方式來填充邊框背景圖。
repeat:指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時,如果超過則被截斷。
round:指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好可以鋪滿整個邊框。







border-image:url(skin/border.png) 27/27px;

box-shadow
none:無陰影
<length>①第1個長度值用來設定物件的陰影水平偏移值。可以為負值
<length>②第2個長度值用來設定物件的陰影垂直偏移值。可以為負值
<length>③如果提供了第3個長度值則用來設定物件的陰影模糊值。不允許負值
<length>④如果提供了第4個長度值則用來設定物件的陰影外延值。不允許負值
<color>設定物件的陰影的顏色。
inset:設定物件的陰影型別為內陰影。該值為空時,則物件的陰影型別為外陰影
box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);








box-reflect:none | <direction> | <offset> | <mask-box-image>`
`<direction> = above | below | left | right`
`<offset> = <length> | <percentage>`
`<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> |<repeating-radial-gradient>`
預設值:none無倒影
`box-reflect:below 0 linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

第八節:背景(background、background-color、background-image、background-repeat、background-attachment背景圖片是滾動還是固定、background-position、background-origin、background-clip、background-size、multiple-background混合屬性

background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);漸變背景`
`background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));漸變背景`
`background-image:-o-linear-gradient(top , #45B5DA, #0382AD);漸變背景`
`background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景`
`background:linear-gradient(top,#000,#999)。從上到下、從黑色到灰色水平方向漸變`
`background:linear-gradient(left,#000,#999)。起始於左邊、從黑色到灰色垂直方向漸變`
`background:linear-gradient(left,30deg,#000,#999)。起始於左邊,傾斜30度、從黑色到灰色水平漸變`
`background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

第九節:顏色(color、opacity)
第十節:字型(font、font-style、font-weight、font-size、font-family、font-stretch)
第十一節:文字(text-indent、text-overflow、text-align、text-transform、text-decration、text-decoration-line、text-decoration-color、text-decoration-style、text-shadow、text-fill-color、text-stroke、text-stroke-width、text-stroke-color、letter-spacing、word-spacing、vertical-align、word-wrap、white-space、direction、unicode-bidi、line-height、tab-size)

text-overflow
clip:當物件內文字溢位時不顯示省略標記(…),而是將溢位的部分裁切掉。
ellipsis:當物件內文字溢位時顯示省略標記(…)。

text-transform
none:無轉換
capitalize:將每個單詞的第一個字母轉換成大寫
uppercase:轉換成大寫
lowercase:轉換成小寫
full-width:
full-size-kana:





white-space
normal:預設處理方式。
pre:用等寬字型顯示預先格式化的文字,不合並文字間的空白距離,當文字超出邊界時不換行。可查閱pre物件
nowrap:強制在同一行內顯示所有文字,直到文字結束或者遭遇br物件。
pre-wrap:用等寬字型顯示預先格式化的文字,不合並文字間的空白距離,當文字碰到邊界時發生換行。
pre-line:保持文字的換行,不保留文字間的空白距離,當文字碰到邊界時發生換行。




direction
ltr:文字流從左到右。
rtl:文字流從右到左

unicode-bidi
normal:物件不開啟附加的嵌入層,對於內聯要素,隱式重排序跨物件邊界進行工作。
embed:物件開啟附加的嵌入層,direction屬性的值指定嵌入層,在物件內部進行隱式重排序。

bidi-override
嚴格按照direction屬性的值重排序。忽略隱式雙向運算規則。
用於同一個頁面裡存在從不同方向讀進的文字顯示。與direction屬性一起使用
假如您想應用direction屬性於內聯元素的文字,您必須設定unicode-bidi屬性為embed或bidi-override。


第十二節:列表(list-style、list-style-image、list-style-position、list-style-type)

list-style-type
disc:實心圓(CSS1)
circle:空心圓(CSS1)
square:實心方塊(CSS1)
decimal:阿拉伯數字(CSS1)
lower-roman:小寫羅馬數字(CSS1)
upper-roman:大寫羅馬數字(CSS1)
lower-alpha:小寫英文字母(CSS1)
upper-alpha:大寫英文字母(CSS1)
none:不使用專案符號(CSS1)
armenian:傳統的亞美尼亞數字(CSS2)
cjk-ideographic:淺白的表意數字(CSS2)
georgian:傳統的喬治數字(CSS2)
lower-greek:基本的希臘小寫字母(CSS2)
hebrew:傳統的希伯萊數字(CSS2)
hiragana:日文平假名字元(CSS2)
hiragana-iroha:日文平假名序號(CSS2)
katakana:日文片假名字元(CSS2)
katakana-iroha:日文片假名序號(CSS2)
lower-latin:小寫拉丁字母(CSS2)
upper-latin:大寫拉丁字母(CSS2)



















第十三節:表格(table-layout、border-collapse、border-spacing、caption-side、empty-cells)
第十四節:內容(content、counter-increment、counter-reset、quotes)

content
normal:預設值。表現與none值相同
none:不生成任何值。
&lt;attr&gt;插入標籤屬性值
.attr p:after{content:attr(title);}
&lt;url&gt;使用指定的絕對或相對地址插入一個外部資源(影象,聲頻,影片或瀏覽器支援的其他任何資源)
.url p:before{content:url(…/…/skin/ico.png);}
&lt;string&gt;插入字串
counter(name):使用已命名的計數器
.counter1 li:before{content:counter(testname);}
counter(name,list-style-type):使用已命名的計數器並遵從指定的list-style-type屬性
.counter2 li:before{content:counter(testname2,lower-roman);}
counters(name,string):使用所有已命名的計數器
.counter3 li{counter-increment:testname3;}
.counter3 li:before{content:counter(testname3,decimal)".";}
counters(name,string,list-style-type):使用所有已命名的計數器並遵從指定的list-style-type屬性
no-close-quote:並不插入quotes屬性的後標記。但增加其巢狀級別
.counter3 li li:before{content:counter(testname3,decimal)".“counter(testname4,decimal)”.";}
no-open-quote:並不插入quotes屬性的前標記。但減少其巢狀級別
close-quote:插入quotes屬性的後標記
open-quote:插入quotes屬性的前標記
counter-increment:none |[&lt;identifier&gt; &lt;integer&gt;]




















第十五節:使用者user interface(outline、outline-width、outline-style、outline-color、outline-offset、nav-index、nav-up、nav-right、nav-down、nav-left、cursor、zoom、box-sizing、resize、ime-mode)

outline定義元素周圍輪廓線,類似於border
outline-width :指定輪廓邊框的寬度。
outline-style :指定輪廓邊框的樣式。
outline-color :指定輪廓邊框的顏色。
outline:2px solid #f00;border:3px solid #333;
在這裡插入圖片描述
outline-width
&lt;length&gt;用長度值來定義輪廓的厚度。不允許負值
medium:定義預設寬度的輪廓。
thin:定義比預設寬度細的輪廓。
thick:定義比預設寬度粗的輪廓。









outline-style
none:無輪廓。與任何指定的outline-width值無關
dotted:點狀輪廓。
dashed:虛線輪廓。
solid:實線輪廓
double:雙線輪廓。兩條單線與其間隔的和等於指定的outline-width值
groove:3D凹槽輪廓。
ridge:3D凸槽輪廓。
inset:3D凹邊輪廓。
outset:3D凸邊輪廓。
outline-offset:4px;
在這裡插入圖片描述
cursor [&lt;url&gt; [&lt;x&gt; &lt;y&gt;] [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]











resize
none:不允許使用者調整元素大小。
both:使用者可以調節元素的寬度和高度。
horizontal:使用者可以調節元素的寬度
vertical:使用者可以調節元素的高度。
none:不允許使用者調整元素大小。
both:使用者可以調節元素的寬度和高度。
horizontal:使用者可以調節元素的寬度
vertical:使用者可以調節元素的高度。







第十六節:多欄multi-column(columns、column-width、column-count、column-gap、column-rule、column-rule-style、column-rule-color、column-span、column-fill、column-break-before、column-break-after、column-break-inside)

columns:200px 3;
在這裡插入圖片描述
columns:200px;
在這裡插入圖片描述
column-count:3;column-gap:40px;
在這裡插入圖片描述




第十七節:2D變換(transform、transform-origin)

translate移動。translate(X(距離left位置),Y(距離top位置))。以座標軸原點為中心進行位移,正值向右下角移動。
1旋轉。transfrom:rotate(10deg)。平面旋轉多少度
2斜拉。skew(X,Y)。傾斜多少度
3縮放。scale(X,Y)。放大或縮小多少倍
4移動。translate(X,Y)



transfrom:rotate(30deg)。
transfrom:scale(X,Y)。
transfrom:skew(X,Y)。
transfrom:translate(X,Y)。
1234

所有2D轉換方法連在一起就是matrix()。矩形方式進行變換matrix();
改變起點位置:transfrom-origin:bottom left

eg:transfrom:scale(1.5)。
對應的matrix是 transfrom:matrix(1.5,0,0,1.5,0,0);

matrix(scaleX,0,0,scaleY,0,0)
1234

深究矩陣 matrix

在這裡插入圖片描述
matrix()和matrix3d(),前者是2D的平面移動變換,33。後者是3D變換,44。
transfrom:matrix(a , b , c , d , e , f)
所對應的矩陣如下圖
在這裡插入圖片描述在這裡插入圖片描述
第一個與第一個相乘,第二個與第二個相乘,第三個與第三相乘
在這裡插入圖片描述
ax+cy+e 為水平座標。bx+dy+f 為垂直座標。






transfrom:matrix(1 , 0 , 0 ,1 , 30 ,30)//a=1,b=0,c=0,d=1,e=30,f=30。
假設中心座標為(0 ,0)
x座標為 ax+cy+e = 10 + 00 +30 = 30。
y座標為 bx+dy+f = 00 + 10 + 30 = 30。
中心座標變為了(30 ,30) 向右下角偏移,transfrom:translate(30px, 30px)
所以matrix只用關心最後兩個引數就可以了
縮放:transfrom:matrix(1 , 0 , 0 ,1 , 30 ,30)當中的1是縮放的引數,所以寫為transfrom:matrix(scalex ,0, 0 ,scaley ,30 ,30)





第十八節:過渡

transition-property:過渡效果的css屬性名稱。none、all、indent
transition-duration:過渡的時長。
transition-timing-function:過渡速度曲線。平緩還是先慢後快。
transition-delay:過渡延遲。


第十九節:動畫(animation-timing-function)

animation-name:`動畫名稱。
`animation-delay:`動畫延遲。
`animation-duration:`動畫運動週期時長。
`animation-timing-function:`動畫速度曲線。linear(速度一致)、ease(低速開始,然後加快,結束慢)、ease-in(低速開始)、ease-out(低速結束)、ease-in-out(低速開始和結束)、cubic-bezier(自己的值,從0到1)
`animation-iteration-count:`動畫播放次數。0、infinite。
`animation-direction:`動畫是否在下一個週期逆向播放。normal、alternate。
`animation-play-state:`動畫是否正在執行或暫停。
`animation-fill-mode

簡寫:animation:name duration timing-function delay

@keyframes  animationName{
    from{ ...... }
    to{ ...... }
}
@keyframes animationName{
    0%{ ...... }
    50%{ ...... }
    100%{ ...... }
}