[TOC]
CSS單詞梳理
CSS的核心知識: 定位 + 布局 + 盒子模型 + 背景 + 字體 + 動畫
1.定位 positioning
- position: absolute; 絕對定位
- position:relative; 相對定位
- position:fixed; 固定定位
- position: static 正常文檔流（沒有定位）
- top 居上
- bottom 居下
- left 居左
- right 居右
- z-index 改變層級 值越大 越在上面
2.布局（layout）
- display: inline 行內(nèi)/內(nèi)聯(lián)元素
- display:block 塊級元素 / 讓元素顯示
- display: inline-block 行內(nèi)塊元素
- display:none 讓元素隱藏/消失
- display: flex;（父元素）flex：所占總flex的比例
- align-items: center;（專門針對display：flex作用的居中）
- float:left 左浮動（靠左顯示）
- float:right 右浮動（靠右顯示）
- float:none 不浮動（正常的文檔流）
- clear: left 不允許左邊有浮動對象（清除左邊的浮動）
- clear:right 不允許右邊有浮動對象(清除右邊的浮動)
- clear:both 不允許左右兩邊有浮動對象（清除左右兩邊的浮動）
- clear: none 允許左右兩邊有浮動對象
- visibility: hidden 讓所有可見性的元素隱藏
- visibility: visible 讓所有可見性的元素顯示
- overflow:hidden 溢出隱藏/清除浮動/解決margin-top的傳遞問題
- overflow-x:hidden 水平方向隱藏
- overflow-y:hidden 垂直方向隱藏
- overflow-x:scroll 水平方向出現(xiàn)滾動條
- overflow-y:scroll 垂直方向出現(xiàn)滾動條
- overflow: auto 隱藏方式為自動
3. 盒子模型
1.尺寸(Dimension)
- width 寬度
- min-width 最小寬度
- max-width 最大寬度
- height 高度
- min-height 最小高度
- max-height 最大高度
2.外補白(margin)
- margin: 上 右 下 左(遵循順時針的方向)；
- margin-top 上外邊距
- margin-bottom 下外邊距
- margin-left 左外邊距
- margin-right 右外邊距
3.內(nèi)補白(padding)
- padding: 上 右 下 左(遵循順時針的方向)
- padding-top 上內(nèi)邊距
- padding-bottom 下內(nèi)邊距
- padding-left 左內(nèi)邊距
- padding-right 右內(nèi)邊距
4.邊框（border）
- border 復(fù)合屬性，四個方向邊框線
- border-width 邊框線的寬度
- border-style 邊框線的類型（solid 實線 dashed 虛線 dotted 點狀線）
- border-color 邊框線的顏色
- border-top 上邊框線
- border-bottom 下邊框線
- border-left 左邊框線
- border-right 右邊框線
- border-radius: 上左 上右 下右 下左； 圓角(50% 可以把正方形或者長方形變成圓形)
- box-shadow 盒子的陰影
-
例：box-shadow：1px，1px，1px，1px，#000（X軸，Y軸，模糊程度，大小，顏色）
-
4.背景（background）
- background 背景的復(fù)合屬性（簡寫）
- background-color 背景顏色
- background-image 背景圖片
- background-repeat 背景平鋪(重復(fù))方式
- background-attachment 背景隨著滾動條是滾動還是固定
- background-position: x軸 y軸； 背景定位（雪碧圖的重要屬性）
- background-origin 背景顯示的左邊原點
- background-clip 背景裁剪的方式
-Border-box(默認(rèn)值)，背景繪制在邊框方框內(nèi)。
-Padding-box 背景繪制包含padding以內(nèi)
-Content-box 背景繪制只在內(nèi)容區(qū)內(nèi) - background-size 背景尺寸
- background: rgba(225, 225, 225, .8);
- background-clip 屬性指定背景繪制區(qū)域
- liner-gradient 線性漸變
Background:linear-gradient
(
To top,//線性漸變的方向，到哪里
Red 20%,//線性漸變的顏色
Transparent 50% 從50%的位置到末尾都是透明色)
5.顏色（color）
- color 字體顏色
- opacity 透明度 取值范圍【0-1】
6.字體（font）
- font 字體的復(fù)合屬性（簡寫）
- font-size: 字體大小
- font-weight 字體粗細(xì)
- font-style 字體樣式(斜體/正常)
- font-family 字體類型(黑體 宋體等)
7.文本（text）
- white-space：nowrap 禁止文字折行（出現(xiàn)省略必備的條件之一）
- text-align:left 文字居左對齊
- text-align:center 文字居中對齊
- text-align:right 文字居右對齊
- letter-spacing 文字與文字的左右間距
- line-height 文字與文字的上下間距
- text-indent 縮短縮進(jìn) -9999px 會讓文字消失在頁面中
- vertical-align 基線對齊
8.文本裝飾（text decoration）
- text-decoration：none 去掉a的下劃線
- text-decoration: underline 增加下劃線
- text-shadow 文字陰影
9.列表（list）
- list-style：none 去掉li前面默認(rèn)的小黑點或者數(shù)字
10.用戶界面（user Interface）
- text-overflow:elipsis 文本以省略號的方式隱藏（出現(xiàn)省略號必備的條件之一）
- cursor: pointer 讓鼠標(biāo)變成小手的形狀
- zoom:1 檢索對象的縮放比例
- box-sizing IE怪異盒模型
11.變換(transform)
- transform：translateX(10px) x軸（水平方向）移動10px
- transform： translateY(10px) y軸（垂直方向）移動10px
- transform: translate(10px,10px) x和y軸同時移動10px
- transform: scale(2) 把元素放大2被
- transform: rotate(90deg) 把元素旋轉(zhuǎn)90度
12.過渡（transition）
- transition 過渡簡寫
- transtiton-property 過渡動畫的屬性名稱
- transition-duration 過渡動畫的持續(xù)時間
- transition-timing-function 過渡動畫的運動曲線 ease 默認(rèn)值：勻速
- transition-delay 過渡動畫的延遲時間
13.動畫（animation）
- animation 動畫的簡寫
- animation-name 動畫的名稱
- animation-duration 動畫的持續(xù)時間
- animation-timing-function 動畫的運動曲線
- animation-delay 動畫的延遲時間
- animation-iteration-count 動畫的運動曲線 （infinite 無限次 alternate交替運動）
- animation-direction 動畫運動的方向
- animation-play-state 動畫運動的狀態(tài) playing 運動 pasued 暫停
- animation-fill-mode 動畫結(jié)束時保持的狀態(tài)
14.input（無法編輯，一般display：none然后在重新編輯）
outline: none;/*點擊后自帶藍(lán)色邊框*/ border: none;/*點擊前自帶邊框*/
id對應(yīng)#；class對應(yīng)*
type：radio 單選
label：行標(biāo)簽，主要功能是選擇文字，也可以選中表單元素
單選例：
<input class="input1" id="man" type="radio" name="gender">
<label for="man">男</label>
<input class="input1" id="woman" type="radio" name="gender">
<label for="woman">女</label>
多選例：
<input id="banana" type="checkbox" name="food">
<label for="banana"><span></span>香蕉</label>
<input id="apple" type="checkbox" name="food">
<label for="apple"><span></span>蘋果</label>
<input id="strawberry " type="checkbox" name="food">
<label for="strawberry "><span></span>草莓</label>
<input id="cherry " type="checkbox" name="food">
<label for="cherry "><span></span>櫻桃</label>
選擇塊內(nèi)文字內(nèi)容例：
input type="text" placeholder="請輸入4-12個字符"
.####15.Filter
定義了元素(通常是img)的可視效果(例如：模糊和飽和度)
Blur(px) 給圖像設(shè)置高斯模糊，屏幕上以多少像素融在一起。
Brightness(%) 高亮
Contrast(%) 調(diào)整圖片的對比度
Drop-shadow(h v spread color) 陰影
Grayscale(%) 灰度值在0%到100%之間
Opacity(%) 透明度
Sepia(%) 褐色
Invert(%) 反色
Saturate(%) 飽和度
Hue-rotate(deg) 色相反轉(zhuǎn)
14.其他
- transparent-透明
- filter: blur(3px) 數(shù)字越大越模糊
- :hover 鼠標(biāo)移上
- :focus 聚焦，選擇框內(nèi)變化
- :checked + 點擊后變化
- :before（after）偽類元素
記得加content‘’
script（瀏覽器彈框）
-1. alert 在瀏覽器中彈出一個提示框，點擊確定，彈框消失
（調(diào)用了toString這個方法）
- 2.confirm:在alert基礎(chǔ)上增加了讓用戶選擇性的操作（提供了兩個按鈕：確定和取消）
- 3.prompt:在confirm基礎(chǔ)上增加讓用戶輸入的效果
