- 選擇器 (個(gè)人認(rèn)為很重要,可以提高效率)
有些描述有些拗口
http://www.w3school.com.cn/cssref/css_selectors.asp
- 媒體查詢
響應(yīng)式必備@media xxx
- 框模型
框大小 box-sizing:border-box; 使設(shè)定的寬高中包含padding和border
- 彈性盒子(一種好的居中方式)
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
http://www.runoob.com/css3/css3-flexbox.html
- 背景和邊框
- 邊框
border-radius 圓角
box-shadow 陰影
border-image 邊框圖片- 背景
background-clip 背景圖繪制區(qū)域
background-size 背景圖尺寸
background-origin 背景圖定位區(qū)域
- 文本效果
hanging-punctuation 規(guī)定標(biāo)點(diǎn)字符是否位于線框之外。
punctuation-trim 規(guī)定是否對標(biāo)點(diǎn)字符進(jìn)行修剪。
text-align-last 設(shè)置如何對齊最后一行或緊挨著強(qiáng)制換行符之前的行。
text-emphasis 向元素的文本應(yīng)用重點(diǎn)標(biāo)記以及重點(diǎn)標(biāo)記的前景色。
text-justify 規(guī)定當(dāng) text-align 設(shè)置為 "justify" 時(shí)所使用的對齊方法。
text-outline 規(guī)定文本的輪廓。
text-overflow] 規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。
text-shadow 向文本添加陰影。
text-wrap 規(guī)定文本的換行規(guī)則。
word-break 規(guī)定非中日韓文本的換行規(guī)則。
word-wrap 允許對長的不可分割的單詞進(jìn)行分割并換行到下一行。
- 字體
@font-face 自定義字體
- 2D/3D 轉(zhuǎn)換
- 2D
- translate()
- rotate()
- scale()
- skew()
- matrix()
http://www.w3school.com.cn/css3/css3_2dtransform.asp
- 3D
- rotateX()
- rotateY()
http://www.w3school.com.cn/css3/css3_3dtransform.asp
- 過渡
transition
http://www.w3school.com.cn/css3/css3_transition.asp
- 動(dòng)畫
- @keyframes
- animation
http://www.w3school.com.cn/css3/css3_animation.asp
- 多列布局
- columns
- columns-count
- columns-gap
http://www.w3school.com.cn/css3/css3_multiple_columns.asp
- 用戶界面 (未理解)
resize
box-sizing
outline-offset
http://www.w3school.com.cn/css3/css3_user_interface.asp