【】偽類選擇器】
1、寫法： 偽類選擇器，在選擇器後面，用:分隔，緊接偽類狀態；
eg ： .a:link
2、 超鏈接的偽類狀態：
:link - 未訪問狀態 :visited - 已訪問狀態
:hover - 鼠標指上狀態 :active - 激活選定狀態(鼠標點下未松)
註意：當超鏈接多種偽類狀態同時存在時，必須按照link-visited-hover-active的順序，否則會導致部分選擇器不生效；
3、 input的偽類狀態：
:hover :focus - 獲得焦點狀態 :active
註意input的多種狀態同時存在時，必須按照上面的順序；
4、 其他標簽，基本只用:hover事件

【盒子模型】

margin 外邊距：
1、只寫一個值： 表示四周的外邊距均為指定的值；
2、寫兩個值： 第一個數為上下外邊距 第二個數為左右外邊距；
3、寫三個值： 分別表示上、右、下三個方向，左邊默認等於右邊；
4、寫四個值： 表示上、右、下、左 四條邊順時針方向；
5、 margin:0 auto; 設置塊級元素，在父容器中水平居中！！！！
padding 內邊距：
設置方式，與margin完全相同；
註意：設置padding，將會導致div區域被撐大！！！使用時必須註意div實際的寬高為多少！！！！！
邊框
1、設置邊框需要三個屬性： 寬度 樣式 顏色
原則上，三個屬性缺一不可，順序可以隨便修改；
2、可以使用top、right、bottom、left分別設置四個邊

當父盒子包裹子盒子，給子盒子添加margin-top時，子盒子與父盒子的上邊線並不能分開，而是會導致，兩個盒子同時下來。
[解決辦法]
1、給父盒子添加一點padding-top； 不推薦使用，會導致父盒子結構多余1pxpadding；
2、給父盒子添加1px的border-top； 同樣會導致1px的多余空間，不推薦使用；
3、給父盒子或者子盒子添加浮動； 可能會由於浮動，一定程度的影響頁面的布局；
4、給父盒子添加overflow屬性； 推薦使用的方式。

[border-radius 圓角]
1、border-radius可以接收8個屬性值,分別表示：
X軸(左上、右上、右下、左下角)/Y軸(左上、右上、右下、左下角)
eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px
2、縮寫形式：
只寫X軸，Y軸將默認等於X軸；
四個角寫不全，默認對角相等；
只寫一個值，默認8個數均等；
eg: border-radius:50px 20px;
= border-radius:50px 20px 50px 20px;
= border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
3、當圓角弧度>=正方形邊長一半，將會顯示為圓形。

[border-image 圖片邊框]
1、border-image:一共可以放10個屬性值：
① 圖片的路徑： url();
② 圖片的切片寬度： 4個值，分別代表上、右、下、左四條邊；
通過4條切線切割，可以將圖片分為9宮格。 9宮格四個角分別對應邊框的四個角(不會進行任何拉伸)，9宮格四個邊分別對應四條邊框(會根據設置進行拉伸/鋪完/重復等操作)
註意： 寫的時候，必須不能帶px單位！！！！
③ 邊框的寬度： 4個值，分別代表上、右、下、左四條邊框的寬度；
註意： 寫的時候，必須帶px單位，與切片寬度用/分隔！！！
④ 邊框的重復方式： stretch(拉伸)、round(鋪滿)、repeat(重復)
[round和repeat的區別]
round: 會對四條邊進行適當的拉伸壓縮，確保四條邊可以重復整數次；
repeat：會保持每條邊的長度比例不變，可能導致四角處，無法顯示一條完整的邊；
2、 屬性值寫法： border-image: ① ②/③px ④;
3、 border-image在webkit內核的瀏覽器中，必須帶-webkit-前綴。

[box-shadow 盒子陰影]
1、 6個屬性值，空格分隔：
① x軸陰影距離(必選): 可正可負，正——右移，負——左移；
② y軸陰影距離(必選): 可正可負，正——下移，負——上移；
③ 陰影模糊半徑(可選)： 只能為正，默認為0.數值越大，陰影越模糊；
④ 陰影擴展半徑(可選)： 可正可負，默認為0.數值增大，陰影擴大；數值減小，陰影縮小；
⑤ 陰影顏色(可選)： 默認為黑色
⑥ 內外陰影(可選)： 默認為外陰影。 inset表示內陰影；

outline 外圍線：
顯示在border外面，並且不會占據空間。 可能會覆蓋四周的內容。

【浮動】

1、標準流中的塊級盒子，寬度將會自動伸展為100%；
而浮動的塊級盒子，寬度不會自動伸展，而是由內容撐開

2、 當一個盒子浮動， 標準流中未浮動的其他盒子，將視浮動盒子不存在而占據浮動盒子原來的位置。(浮動盒子，會蓋在這個盒子的上方)
但是，未浮動盒子中的文字內容，將會受到浮動盒子寬度的影響。(未浮動盒子中的內容，不會被浮動盒子蓋住)

3、由於第二條的原因。
可以給受影響的盒子，添加clear屬性，清除掉浮動盒子對自身的影響。
clear可選值：left-清除左浮動影響， right-清除右浮動影響；
both-同時清除左右浮動影響 ，常選；

4、 父盒子沒有指定高度。 如果子盒子沒有浮動，則父盒子的高度可以被子盒子撐開。
如果，父盒子中的所有子盒子都浮動，則父盒子高度將變為0；
[解決所有子盒子浮動，父盒子高度塌陷的問題]
① 給父盒子也添加浮動；
② 給父盒子添加overflow屬性； 推薦使用！！！
③ 在父盒子最後，添加一個高度為0的空div。 給這個div添加clear: both;屬性，清除掉浮動效果。
④ 可以將第三條的div，用偽對象選擇器：：after實現：
#div4 ::after{
display:black;
content:""；
height：0px；
clear：both；
}

[盒子模型分類]
1、 標準盒子(W3C盒子)： 我們設置的寬度和高度，僅僅包含content部分； 再添加padding或border，會導致盒子變大；
2、 IE盒子(怪異盒子)： 我們設置的寬度和高度，包含content+padding+border； 再添加padding或border，會壓縮content區域，但盒子總大小不變；
[手動設置盒子類型]
box-sizing: border-box; 怪異盒子；
box-sizing: content-box; 標準盒子； 默認效果。

【定位】

[相對定位 relative]
1、 使用position:relative; 設置元素為相對定位元素；
2、 使用top、right、bottom、left調整元素的位置。當left和right同時存在時，left生效； top和bottom同時存在時，top生效。
3、 定位機制：
① 相對定位是相對於自己原來的位置定位。當top等屬性不指定時，元素位置不會發生改變；
② 相對定位，不會釋放掉元素在原有文檔流中的位置。 不會影響其他文檔流元素的位置；
4、 關於元素Z軸重疊：
① 定位元素，默認的Z軸高於普通文檔流元素。
② 同為定位元素，"後來者居上"。後面的蓋住前面的。
③ 可以使用z-index手動調節定位元素的上下層z軸順序；
z-index默認為0，而且只能作用於定位元素。

[絕對定位]
1、 使用position: absolute; 設置元素為絕對定位；
2、 定位機制：
① 相對於第一個非static定位的祖先元素進行定位。
(即，相對於第一個使用了relative、absolute、fixed定位的祖先元素進行定位)
② 如果所有的祖先元素都未定位，則相對於瀏覽器左上角進行定位；
③ 使用absolute的元素，會從文檔流中完全刪除。原有空間會被釋放。
[固定定位 fixed]
1、使用position: fixed; 設置固定定位；
固定定位，是一種特殊的絕對定位！！只是祖先元素無法使用定位鎖住；
2、 定制機制：
永遠相對於瀏覽器的左上角進行定位，而且不隨滾動條的滾動而滾動；

[z-index 屬性]
* 1、作用： 根據z-index屬性設置的數值，決定元素在Z軸方向上的層疊次序；
* 2、使用要求：
* ① z-index 只能給定位元素調整層疊次序。
* relative、absolute、fixed
* ② 元素的z-index屬性，要考慮父容器z-index的約束；
>>> 如果父容器設置了z-index屬性，則子容器的所有元素，將不能脫離父容器層次的約束。(即，父容器設置了z-index，則子容器只能以父容器的數值為準。再給子容器設置z-index，只能調整子容器在父容器層次之內的層疊次序)
>>> 如果父容器沒有設置z-index，或者設置為z-index:auto； 則子容器調整z-index將不受父容器層次約束。
3、 z-index:auto; & z-index:0; 異同；
① z-index:auto;是默認值，與z-index:0;處於同一平面；
② z-index:0;會約束子元素必須與父容器在同一平面；
z-index:auto;不會約束子元素的層次；

[clip 屬性]
1、作用： clip屬性用於裁切圖片標簽，顯示圖片的指定區域；
2、使用要求： clip屬性，只能作用於有absolute或fixed定位的圖片標簽上；
3、 clip屬性，接受一個rect()函數，函數傳入四個值，分別表示上、右、下、左四條切線的位置；
註意： 與其他屬性不同的是， rect中的四個值， 上、下兩個值得距離都是從上邊量取； 左、右兩個值都是從左邊量取；

【負邊距的使用】

[1、實現塊級元素在父容器中水平垂直居中]
① 設置子容器為定位元素；
② left: 50%; margin-left: -width/2;
top: 50%; margin-top: -height/2;

[2、使用負邊距增大元素的寬度]
① 子容器的寬度，不指定； 只指定高度、或者由內容撐開高度；
② margin:0px -50px; 可以使左右兩邊，均超出父容器50px;

【新增屬性】

display 屬性
可以設置元素以何種狀態顯示，可選值：
none: 隱藏元素；
block：顯示為塊級元素；
inline： 顯示為行級元素；
inline-block: 顯示為內聯塊級元素。 本身將是一個行級元素，但是，擁有塊級元素的所有屬性。 比如寬度、高度、margin、padding等。。。
[常見的inline-block級別的標簽？]
<img /> <input /> <textarea></textarea> <td></td>
[隱藏一個元素的方式]
1、寬度或高度設為0px； 配合overflow:hidden; 屬性
2、 display:none; 顯示display:block;
3、 opacity: 0; 設為全透明。 但是元素的空間會占據；
4、 visibility: hidden; 隱藏元素，但是元素所在空間依然會占據。 與opacity: 0;效果很像；
顯示visibility隱藏的元素，visibility: visible;

【CSS3 新增的屬性前綴】
1、 -webkit- : Chrome/Safari瀏覽器；
2、 -moz- : 火狐瀏覽器；
3、 -ms- : IE瀏覽器；
4、 -o- : Opera 歐朋瀏覽器
【CSS 長度單位】
1、 px： 表示像素。長度是固定的，表示占分辨率的幾個像素點；
2、 % ： 表示相對於默認值的百分比；
3、 em： 長度與元素的字號掛鉤。表示幾倍的字號。
4、 rem: 與根元素的字號掛鉤。即，與<html>標簽的font-size掛鉤，如果不設置則默認字號為16px;
[em與rem區別]
em是與當前元素自身的font-size掛鉤，如果當前元素沒有設置，則向上查找最近的祖先元素字號，直到跟字號；

rem與當前元素字號無關，直接與根元素字號掛鉤。

【CSS3 背景屬性】
1、background-clip : 設置背景圖或背景色的裁切顯示區域。
>>> border-box從邊框外緣開始顯示；
>>> padding-box從邊框內緣開始顯示；
>>> content-box從文字內容區域開始顯示;
>>> 如果不在顯示區域的背景圖或者背景色，會被裁切掉不顯示；
2、 background-origin： 設置背景圖從哪開始定位。
>>> border-box: 背景圖左上角從邊框外緣開始；
>>> padding-box: 背景圖左上角從邊框內緣開始；
>>> contentbox: 背景圖左上角從文字內容區開始；
3、 background-origin不會改變背景圖顯示區域的大小，只是決定背景圖的左上角從哪裏開始定位；
background-clip 只負責裁切出顯示區域，但是並不關心背景圖定位在哪；
4、 background-attachment： 背景圖的附著方式；
>>> scroll: 背景圖跟隨區域滾動。默認效果；
>>> fixed: 背景圖充滿整個區域，並且背景圖是固定的，不隨滾動條滾動；
5、background 縮寫形式：
background:background-color background-image background-repeat background-atachment background-position;

transition: 過渡屬性，接受四個屬性值
① 設置那個CSS屬性，參與過渡； 可以直接指定all/none
② 過渡多少時間完成。 通常 .3s .5s
③ 過渡的樣式效果。 通常選ease；
④ 過渡延時幾秒後再開始。 可以省略不寫；
transition屬性可以同時定義多個過渡效果，用逗號隔開。
eg:transition: width .5s ease,height 1.5s ease;

[transform 定義變換屬性]
1、常用的變換函數：
>>> translate(10px,10px) 平移,第二個不寫默認為0
>>> scale(1.1) 縮放，第二個不寫，默認等於第一個
>>> rotate(90deg) 旋轉，默認繞Z軸轉可以使用rotateX()等
>>> skew(20deg,30deg) 扭曲，水平、垂直方向扭曲多少度；
2、transform可以同時實現多種變換，用空格分隔
eg: transform: skew(20deg) scale(1.3) translate(100px);
3、transform-origin： 定義變換起點，常用於旋轉變換。
可選值： left/center/right bottom/center/top
也可以直接指定X、Y軸坐標點，第一個數為X軸；
例如：transform: rotate(90deg);
transform-origin:right bottom;
表示：繞右下角旋轉90度。

css基礎語法三