/* */：
@import url("css/02-CSS.css");
[兩種導入方式的區別]
① link屬於標準的HTML標簽，[email protected]；
② link可以兼容所有低版本瀏覽器，[email protected]；
③ link是將兩個文件鏈接起來，起橋梁作用； [email protected]；
④ link會在HTML文件邊加載的過程中，邊鏈接CSS文件；
@import會在HTML文件全部加載完以後，再導入CSS文件；
綜上所述，我們使用link鏈接的方式，加載CSS文件。
css常用文本屬性
1、CSS中的顏色表示方式
① 直接使用顏色的單詞表示：red、green、blue
② 使用顏色的十六進制數表示：#ff0000 #f00
六位數，兩兩分組，分別表示紅、綠、藍的配比；
③ rgb(0~255,0~255,0~255); 三位數，分別表示紅、綠、藍的配比
rgba(); 第四位數，表示透明度。
2、【CSS常用文本屬性】
a、字體、字號類：
① font-weight： 字體粗細。 bold-加粗、normal-正常、lighter-細體
也可以使用100-900數值，400表示normal，700表示bold
② font-style: 字體樣式。 italic-傾斜、normal-正常
③ font-size: 字號。 可以寫px單位，也可以寫%
200%表示瀏覽器默認大小(16px)的兩倍=32px
④ font-family: 字體系列(字體族)。
--- 可以直接寫字體名，也可以寫字體系列名。
--- 常用字體系列：serif-襯線體 sans-serif-非襯線體；
--- font-family可以接收多個值，用逗號分隔。表示優先使用第一個，如果沒有這個字體，依次向後使用。 通常，最後一個值放字體系列名；
eg: font-family: "黑體","微軟雅黑",sans-serif;
⑤ font縮寫形式：
--- 順序必須是：
--- font-weight font-style font-size/line-height font-family
--- 不同屬性之間，用空格分隔；
--- font-size/line-height必須一組，用/分隔；
--- font-family多個字體之間，用逗號分隔
---eg： font: bold italic 32px/50px "微軟雅黑",serif;
3、 字體顏色
① color： 字體顏色 可以使單詞、十六進制、RGB等
② opacity： 透明度，可選值0-1
[opacity和RGBA的區別]
--- RGBA本身可以設置顏色，而opacity必須配合其他顏色屬性來用；
---rgba僅僅是讓當前元素設置的顏色透明；
---而opacity，會讓當前元素裏面的所有文字、背景、子元素都透明；
4、行距、對齊、其他類
① line-height: 行高。 可以寫px單位、可以直接寫數字(表示默認行距的幾倍)、可以寫% (表示默認行距的百分比)
行高重要作用： 讓單行文字在div中垂直居中
設置行高等於div的高度，即可讓單行文字垂直居中。
② text-align：設置區域內的行級元素水平對齊方式left/center/right
③ letter-spacing： 字符間距，字與字之間的距離
④ text-decoration: 文本修飾；
underline-下劃線、overline-上劃線、line-through-刪除線、none
⑤ overflow： 設置超出區域文字的顯示方式。
---overflow: hidden; 超出區域的文字隱藏不顯示；
--- overflow: scroll; 無論文字多少，都會顯示水平垂直滾動條
---overflow: auto; 自動。文字多顯示滾動條，文字少，不顯示滾動條。
---可以使用overflow-x和overflow-y單獨修改兩個方向的滾動條
overflow-y: scroll; overflow-x: hidden;
⑥ text-overflow：設置行末多余文字的顯示方式；
--- clip-多余文字裁剪掉 ellipsis-多余文字省略號顯示
--- 顯示省略號，需要配合white-space: nowrap;使用
---【重點】 設置行末顯示省略號(三行代碼，缺一不可)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
⑦ white-space: nowrap; 設置中文行末，不斷行顯示
⑧ text-indent: 首行縮進。
⑨ -webkit-text-stroke: 0.5px blue; 文字描邊。
-webkit-表示只有webkit內核瀏覽器生效、常見的有chrome、safari
⑩ text-shadow: 文字陰影，有四個屬性值，空格分隔；
---水平陰影距離，正數表示陰影右移，負數左移；
--- 垂直陰影距離，正數表示陰影下移，負數上移；
---- 陰影模糊距離， 0表示陰影一點不模糊；
---陰影的顏色；
---eg:text-shadow: 20px -10px 2px blue;

【CSS常用背景屬性】
1、 background-color： 背景色
2、 background-image: 背景圖。使用url("")選擇背景圖片。背景圖和背景色同時存在時，背景圖覆蓋背景色。
3、 background-repeat: 背景圖的重復方式。
no-repeat-不平鋪、repeat-平鋪、repeat-x-x軸平鋪、 repeat-y-y軸平鋪
4、 background-size： 背景圖的大小
[指定寬度高度]
--- 寬度高度的指定，可以寫px，也可以寫%(父容器寬高的百分比)
--- 當寫兩個屬性時，分別表示寬度、高度；
當寫一個屬性時，表示寬度，高度將會等比縮放；
[其他屬性值]
---- contain: 圖片等比縮放，直到寬或高中較大的一邊縮放到100%為止。(可能導致較短的一邊<100%,圖片無法蓋住全部區域)
--- cover： 圖片等比縮放，直到寬或高中較小的一邊縮放到100%為止。(可能導致較大的一邊>100%,圖片超出區域顯示不全)
5、 background-position： 背景圖偏移量
--- 指定位置： left/center/right top/center/bottom
當，只寫一個值時 ，另一個默認居中。
--- 指定坐標： 兩個屬性分別表示 ：水平位移 垂直位移
① 坐標的值，可以是px單位，也可以是百分數
② 當寫px單位時：
水平方向：正數右移 負數左移 ； 垂直方向： 正數下移 負數上移；
(左負右正 上負下正)
③ 當寫%百分數時：
一般只能是正數。表示的是，去掉圖片的寬高，剩余空白區域的分布比例。 eg：background-position:30%; 水平方向去掉圖片寬度，剩余區域3:7分。
6、list-style： 修改列表小黑點的樣式；
none 去掉小黑點；
7、url(): 可以使用url導入一個小圖片，作為列表的標識符號
list-style: none;
8、 float: 浮動，可以實現讓塊級元素，在一行中顯示。
[偽類選擇器]
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分別設置四個邊

盒模型
1、當父盒子包裹子盒子，給子盒子添加margin-top時，子盒子與父盒子的上邊線並不能分開，而是會導致兩個盒子同時下來。
【解決辦法】
--- 1、給父盒子添加一點padding-top;不推薦使用，會導致父盒子結構多余1px的padding
--- 2、給父盒子添加1px額border-top；同樣會導致1px的多余空間，不推薦使用；
--- 3、給父盒子或者子盒子添加浮動；可能會由於浮動，一定程度的影響頁面的布局；
--- 4、給父盒子添加overflow屬性，推薦使用；
2、[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、當圓角弧度>=正方形邊長一半，將會顯示為圓形；
3、[border-image 圖片邊框]
--- 1、border-image：一共可以放10個屬性值：
①圖片的路徑：url（）
②圖片的切片寬度：4個值，分別代表上、右、下、左四條邊。
通過4條切線切割，可以將圖片分為9宮格。9宮格四個角分別對應邊框的四個角(不會進行任何 拉伸)，9宮格四個邊分別對應四條邊框（會根據設置進行拉伸/平鋪/重復等操作）
註意：寫的時候必須不能帶px單位；
③邊框的寬度:4個值，分別代表上、右、下、左4條邊框的寬度；
註意：寫的時候，必須帶px單位，與切片寬度用/分隔；
④邊框的重復方式： ：stretch（拉伸） round（鋪滿） repeat（重復）
[repeat與round的區別]
round：會對四條邊進行適當的拉伸壓縮，確保四條邊可以重復整數;
repeat:會保持每條邊的長度比例不變，可能導致四角處，無法顯示一條完整的邊；
--- 2、屬性值的寫法：border-image:① ②/③px ④；
--- 3、border-image在webkit內核的瀏覽器中，必須帶-webkit-前綴；
【outline 外圍線】
顯示早border外面，並且不會占據空間，可能會覆蓋四周的內容。
4、[box-shadow: 盒子陰影]
1/6個屬性值，用空格分隔：
①X軸陰影距離（必選）：可正可負，正-右移 負-左移；
②Y軸陰影距離(必選)：可正可負，正-下移 負-上移；
③陰影模糊半徑（可選）：只能為正，默認為0，數值越大，陰影越模糊；
④陰影擴展半徑（可選）：可正可負，默認為0.數值增大，陰影擴大；數值減小陰影縮小；
⑤陰影顏色（可選）：默認為黑色；
⑥內外陰影（可選）：默認為外陰影。inset為內陰影；
二、浮動
1、標準流中的塊級盒子，寬度將會自動伸展為100%；
而浮動的塊級盒子，寬度不會自動伸展，而是由內容撐開；
2、 當一個盒子浮動， 標準流中未浮動的其他盒子，將視浮動盒子不存在而占據浮動盒子原來的位置。(浮動盒子，會蓋在這個盒子的上方)
但是，未浮動盒子中的文字內容，將會受到浮動盒子寬度的影響。(未浮動盒子中的內容，不會被浮動盒子蓋住)
3、由於第二條的原因。
可以給受影響的盒子，添加clear屬性，清除掉浮動盒子對自身的影響。
clear可選值：left-清除左浮動影響， right-清除右浮動影響；
both-同時清除左右浮動影響 ，常選；
4、 父盒子沒有指定高度。 如果子盒子沒有浮動，則父盒子的高度可以被子盒子撐開。
如果，父盒子中的所有子盒子都浮動，則父盒子高度將變為0；
[解決所有子盒子浮動，父盒子高度塌陷的問題]
① 給父盒子也添加浮動；
② 給父盒子添加overflow屬性； 推薦使用！！！
③ 在父盒子最後，添加一個高度為0的空div。 給這個div添加clear: both;屬性，清除掉浮動效果。
5、[盒子模型分類]
---1、 標準盒子(W3C盒子)： 我們設置的寬度和高度，僅僅包含content部分； 再添加padding或border，會導致盒子變大；
--- 2、 IE盒子(怪異盒子)： 我們設置的寬度和高度，包含content+padding+border； 再添加padding或border，會壓縮content區域，但盒子總大小不變；
[手動設置盒子類型]
box-sizing: border-box; 怪異盒子；
box-sizing: content-box; 標準盒子； 默認效果。

CSS新增屬性
一、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)（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度。

定位
[相對定位position](定位只是用來調整上下層關系)
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: 0 -50px；可以使左右兩邊，均超出父容器50px；
3、負邊距第二個作用的應用 解決div中多個li之間間隙的問題

CSS基本語法