標籤：相對 .class 交集 無法 位移 座標 lin func mil
1、瞭解CSSCSS是一種用來表現HTML等檔案樣式的電腦語言，是對HTMl檔案中設定的各種標籤添加各種各樣的樣式與表達方式，讓網頁更生動，更美觀。
2、匯入CSS的三種方式1、行內樣式表：直接在<body>主體的HTML標籤中，使用style""的方式引用；比如設定一個div的大小：
<div style="height:100px width:100px"></div>優點：使用靈活，優先順序權重最高缺點：不符合w3c關於“內容與表現分離”的要求；不利於樣式複用2、內部樣式表：在<head></head>標籤中，使用<style>標籤包裹css代碼，HTML檔案中，所有css代碼，需要寫入到<stlye></stlye>標籤中。stlye標籤的type屬性選擇text/css,但type屬性可以省略。
特點：一定程度的實現了HTML與css時分離，但是分離分離不夠徹底，沒有辦法多頁面共用樣式。
3、外部樣式表：將CSS單獨寫入css檔案中，並與HTML檔案關聯。優點：徹底實現HTML與CSS的分離，符合w3c規範，有利於多頁面複用統一樣式；
[匯入css檔案的兩種方式]
①在<head>標籤中，使用link，
引入外部CSS樣式表：rel：選擇stylesheet，type:選擇text/css，href:選擇css檔案路徑例如：
②在<style>標籤中，使用@import匯入
[兩種匯入方式的區別]
①link屬於標準的HTML標籤，而@import不是標準標籤
②link可以相容所有低版本瀏覽器，而@import只在CSS2之後能用。
③link是將兩個檔案串連起來，起橋樑作用；而@import是相當於將CSS檔案複製到HTMl檔案中。
④link會在HTMl檔案邊載入的過程中，邊串連Css檔案：而@import會在HTMl檔案全部載入完後，再匯入css檔案。
綜上所述，我們使用link串連方式，載入Css檔案。
寫法：*{}
作用：可以選中頁面中所有標籤
優先順序：最低！
寫法：HTMl標籤名{}
作用：可以選中頁面中，所有與選取器同名的HTML標籤
寫法：.class名{}
調用：在需要調用選取器樣式的標籤上，使用class="class名"調用選取器。
寫法：#ID名{}
調用：需要調用樣式的標籤，起一個id="id名"
注意，一個頁面中，不能出現同ID名
5、並集選取器寫法：選取器1，選取器2，....,選取器n，{}
生效規則：多個選取器取並集，只要標籤滿足其中任意一個選取器，樣式立即生效。
寫法：選取器1選取器2....選取器n{}所有選取器緊挨著，沒有分隔
生效規則：多個選取器取交集，則必須滿足所有選取器的要求，才會生效。
寫法：選取器1 選取器2 .... 選取器n{}選取器之間用空格分隔
生效規則：只要滿足後一選取器是前一選取器後代，即可生效（後代包含子代、孫代、重孫代）
通俗講：只要後一個選取器，在前一個選取器裡面即可
寫法：選取器1>選取器2>....>選取器n{}選取器之間用>分隔
生效規則：必須滿足，後一個選取器是前一個選取器的直接子代，才會生效，（中間不能隔任何標籤）
1.只能有字母、數字、底線、減號組成
2.開頭不能是數字，也不能是只有一個減號
1.css生效的第一原則是“近者優先”！既哪個選取器作用於最裡層標籤，則這個標籤生效；
2.當選取器作用於同一層時可以根據優先順序權重進行累加計算：
ID選取器=100>class=10>標籤選取器=1
注意：並集選取器，相當於多個選取器拆開寫，所以，並集選取器的優先順序不累加，
3.當選取器作用於同一層，且優先順序權重想等時，則寫在最後的選取器生效。
①font-weigh：字型粗細 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可以接收多個值，用逗號分隔，表示優先使用第一個，如果沒有這個字型，依次向後使用。通常，最後一個為字型系列名；
比如：font-family:"黑體","微軟雅黑",sans-serif;
⑤font縮寫形式：
順序必須是：font-weight font-size/line-height font-family
不同屬性之間，用空格分隔；
font-size/line-height必須一組用/分隔
font-family多個字型之間，用逗號分隔
font:bold italic 30px/2 "黑體","微軟雅黑",sans-serif
①color：字型顏色 可以是單詞、16進位、RGB等
②opacity：透明度可選值0-1
[opacity和rgba區別]
rgba本身可以設定顏色，而opacity必須配合其他顏色屬性使用；
rgba僅僅是讓當前元素設定的顏色透明，而opacity，會讓當前元素裡面當所有文字、背景、子項目都透明。
①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-x:scroll;overflow-y:hidden
⑥text-overflow:設定行末多餘文字顯示方式
clip-多餘文字裁剪掉 ellipsis-多餘文字省略符號現顯示
顯示省略符號，需要配合white-space：nowrap；使用
【重點】設定行末顯示省略符號（三行代碼，缺一不可）
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
⑦white-space：nowrap；設定中文行末，不斷行顯示
⑧ text-indent:首行縮排，單位px
⑨-webkit-text-stroke: 0.5px blue;文字描邊
-webkit-表示只有webkit核心的瀏覽器生效、常見有chrome、safari
⑩text-shadow:文字陰影，有四個屬性值，空格分隔
水平陰影距離，正數陰影右移，負數陰影左移
垂直陰影距離，正數陰影下移，負數陰影上移
陰影模糊距離，0表示陰影一點也不模糊
陰影的顏色。
text-shadow: 2px 2px 2px blue;
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%，圖片超出地區顯示不全。
background-position:背景圖位移量
①指定位置：left/center/right top/center/bottom
當只有一個值時，另一個預設置中
②指定座標：兩個屬性分別表示：水平位移和垂直位移，座標的值可以是px單位，也可以是百分數
當寫像素單位時：水平方向正右負左，垂直方向正下負上（左負右正，上負下正）
當寫百分數時：一般為正數，表示的是去掉圖片的寬高，剩餘空白地區的分布比例
background-position:30%;水平方向去掉圖片寬度，剩餘地區3:7分。
1.寫法：偽類別選取器，在選取器後面，用:分隔，緊接偽類狀態
eg：.a:link
2.超連結的偽類狀態：
:link-未訪問狀態 :visited-已訪問狀態
:hover-滑鼠指上狀態，常用 :active-啟用選定狀態（滑鼠點擊未松）
注意：當超連結多種偽類狀態同時存在是，必須按照link-isited-hover-active是順序，否則會導致部分選取器失效。
3.input的偽類狀態：
:hover :focus-獲得焦點狀態 ：active
注意：input的多種狀態同時存在時，必須按照上面的順序。
4.:not(s)匹配不含有s選取器
假定有個列表，每個清單項目字型都顏色，但是有一項一項不需要顏色，就可以為這個li起一個class明，進行排除
li:not(.abc) {
color: #f00;
}
5.其他標籤，基本只用:hover事件
7、CSS盒子模型 1、margin 外邊距： 1.寫一個值：表示四周的外邊距均為指定值； 2.寫兩個值：第一個值為上下外邊距，第二個值為左右外邊距； 3.寫三個值：分別表示上、右、下三個方向，左邊預設等於右邊； 4.寫四個值：表示上、右、下、左，四條邊順時針方向。 5.margin:0 auto:【重要】設定區塊層級元素，在父容器中水平置中！ 注意：設定margin，將會導致div地區被撐大，使用時必須注意div實際的寬高是多少 margin-top: 200px;2、padding 內邊距：設定方式與margin相同3、border邊框：1.設定邊框需要三個屬性：寬度 樣式 顏色 原則上，三個屬性缺一不可，順序可以隨便修改；2.可以使用top、right、bottom、left分別設定四個邊4、當父盒子包裹子盒子，給子盒子添加margin-top時，子盒子與父盒子的上邊線並不能分開，而是會導致，兩個盒子同時下來。[解決辦法] 1、給父盒子添加一點padding-top；不推薦使用，會導致父盒子結構會多於1px，padding 2、給父盒子添加1pxborder-top；同樣會導致1px的多餘空間，不推薦使用； 3、給父盒子或子盒子添加浮動，可能會由於浮動，一定程度影響頁面的布局。 4、給父盒子添加overflow:hidden屬性，推薦使用。5、border-radius圓角
1、border-radius可以接收8個屬性值，分別是：
x軸（左上、右上、右下、左下）/Y軸（左上、右上、右下、左下）
eg:border-radius:
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
正方形邊長一半，將會顯示圓形
1、border-image:一共可以放十個屬性值：
①圖片路徑：url();
②圖片的切片寬度：4個值，代表上、右、下、左四條邊；
通過4條線切割，可以將圖片分成9宮格。9宮格四個角分別對應邊框的四個角（不會進行任何展開），9宮格四個邊對應四條邊框（會根據設定進行展開/鋪平/重複等操作
注意：寫的時候，必須不能帶px單位！！
③邊框的寬度：4個值，分別是上、右、下、左四條邊框的寬度。
注意：寫的時候，必須帶px單位，與切片寬度用/分隔
④邊框的重複方式：stretch（展開）。round（鋪滿）、repeat（重複）
[round和repeat的區別]
round會對四條邊適當的展開壓縮，確保四條邊可以重複整數次。
repeat會保持每條邊的寬度長度比例不變，可能導致四角處，無法顯示完整的邊。
2、屬性值寫法：border-image:① ②/③px ④
3、border-imagr在webkit核心的瀏覽器中，必須帶-webkit-首碼。
7、box-shadow-盒子陰影，常用1、6個屬性值，空格分隔 ①X軸陰影距離（必選）：可正可負，正-右，負-左 ②Y軸陰影距離（必選）：可正可負，正-下，負-上 ③陰影模糊半徑（可選）：只能為正，預設為0，數值越大，陰影越模糊。 ④陰影擴充半徑（可選）：可正可負，預設為0，數值增大，陰影擴大；數值減小，陰影越小。 ⑤陰影顏色（可選）：預設為黑色 ⑥內外陰影（可選）：預設為外陰影。inset表示內陰影 */8、outline:外圍線
顯示在border外面，並不會佔用空間。可能會覆蓋四周內容。
9、盒子模型的類型1、標準盒子（w3c盒子）：我們設定的寬度和高度，僅僅包含content部分，再添加padding或border，會導致盒子變大； 2、IE盒子（怪異盒子）：我們設定的寬度和高度，包含content+padding+border； 再添加padding或border，會壓縮content地區，但盒子總大小不變；
3、手動設定盒子類型
box-sizing: border-box; 怪異盒子；
box-sizing: content-box; 標準盒子； 預設效果。
1、標準流中的塊級盒子，寬度將會自動伸展為100%；
而浮動流的塊級盒子，寬度不會自動伸展，而是由內容撐開；
2、當一個盒子浮動，標準流中未浮動的其他盒子，將視浮動盒子不存在而佔據浮動盒子的原來位置。（浮動盒子，會蓋在這個盒子的上方）
但是浮動盒子中的文字內容，將會受到浮動盒子寬度的影響。（未浮動盒子中的內容，不會被浮動盒子蓋住）
3、去掉浮動盒子的影響。常用
可以給受影響的盒子，添加clear屬性，清除掉浮動盒子對自身的影響。
clear選項值：left-清除掉左浮動影響，right-清除掉右浮動影響
both-同時清除掉左右浮動影響，常選
4、父盒子沒有指定高度，如果子盒子沒有浮動，則父盒子的高度可以被子盒子撐開。
如果，父盒子中的所有子盒子都浮動，則父盒子高度變為0.
[解決所有子盒子浮動，父盒子高度塌陷問題]
①為父盒子添加浮動；
②給父盒子添加overflow:hidden屬性：推薦使用。
③在父盒子最後，添加一個高度為0的空div。給這個div添加clear:both
1、使用position:relative；設定元素為相對定位元素。
2、使用top、left、bottom、right調整元素位置。當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時元素，會從文檔流中完全刪除，原有空間會被刪除。
1、使用position:fixed;是指固定定位；
固定定位，是一種特殊的絕對位置！！只是祖先元素無法使用定位鎖住。
2、定位機制：
永遠相對於瀏覽器的左上方進行定位，而且不隨捲軸的滾動而滾動。
1、作用：根據z-index屬性設定的數值，決定元素在z軸方向上的層疊次序。
2、使用要求
①z-index只能給定位元素調整層疊次序。
relative、absolute、fixed
②元素的z-index要考慮父容器z-index的約束；
如果父容器設定了z-inedx屬性值，則子容器的所有元素，將不能脫離父容器的約束。（既，父容器設定了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;會約束子項目必須與父容器在同一平面。
1、作用：clip屬性用於裁剪圖片標籤，顯示圖片的指定地區。
2、使用要求：clip屬性，只能作用於有absolute或fixed定位的圖片標籤上。
3、clip屬性：接受一個rect()函數，函數傳入四個值，分別表示上、右、下、左四條切線的位置；
注意：與其他屬性不同的是，rect中的四個值，上、下兩個值的距離都是從上邊量取；左、右兩個值都是從左邊量取。
①設定子容器為定位元素：
② left:50%; margin-left:-50px;
top:50%; margin-top:-50px;
①子容器的寬度不指定，只指定高度、或由內容撐開高度
②margin:0px -50px;可以使左右兩邊，均超出父容器50px；
11、CSS3新增屬性1、display顯示方式
可以設定元素以何種狀態顯示，可選值：
none：隱藏元素
block：區塊層級元素
inline：行級元素
inline-block：顯示為內聯塊級區塊層級元素。本身將是一個行級元素，但是，擁有區塊層級元素的所有屬性：比如寬度、高度、margin、padding等...
例如：將a標籤變為塊級標籤
[隱藏一個元素的方式]
1、高度或寬度設為0px；配合overflow:hidden;屬性
2、display:none; 顯示display:block;
3、opacity：0；設定為透明，但元素空間會佔據。
4、visibility:hidden;隱藏元素，但是元素所在空間依然會佔據，與opacity相似。
顯示visibility隱藏的元素，visibility:visible;
1、-webkit-:Chrone/Safari瀏覽器；
2、-moz-:Firefox瀏覽器；
3、-ms-:IE瀏覽器；
3、-o-:Opera瀏覽器
1、px：表示像素，長度固定，表示佔分辨率的幾個像素點；
2、%：相對於預設值的百分比；
3、em：長度與元素的字型大小掛鈎;表示幾倍字型大小。
4、rem：與根項目的字型大小掛鈎。即，與<html>標籤的font-size掛鈎，如果不設定字型大小，預設字型大小16px；
[em和rem區別]
em是與當前自身的font-size掛鈎，如果當前元素沒有設定，則向上尋找最近的祖先元素字型大小，直到根字型大小；
rem與當前元素字型大小無關，直接與根項目字型大小掛鈎。
1、background-clip:設定背景圖或背景色的裁剪顯示地區，
border-box從邊框外緣開始顯示
padding-box從邊框內緣開始顯示
content-box從文字內容地區開始顯示
如果不在顯示地區的背景圖或背景色，會被裁切不顯示。
2、background-origin:設定背景圖從哪開始定位
border-box背景圖左上方從邊框外緣開始
padding-box背景圖左上方從邊框內緣開始
content-box背景圖左上方從文字內容地區開始
3、background-origin不會改變背景圖大小，只是決定背景圖的左上方從哪裡開始；
background-clip只負責裁切出顯示地區，但是並不關心背景圖定位在哪裡。
4、background-attachment:背景圖的附著方式：
scroll：背景圖跟隨地區滾動。預設效果
fixed：背景圖充滿整個地區，並且背景圖是固定的，不隨捲軸滾動。
5、background 縮寫形式：
background:background-color background-imger background-repeat background-attachment background-position
5、transition:過渡屬性，接受四個屬性值
①設定哪個css屬性，參與過渡，可以指定all/none
②過渡完成時間，通常.3s或.5s
③過渡的樣式效果：通常選擇ease
④過渡延時幾秒後開始，可以省略不寫。
transition:屬性可以同時定義多個過渡效果，用逗號隔開。
eg:transition: width .3s linear,height 1.5s ease;
6、transfom定義變換屬性
1、常用變換函數
translate(10px,10px)平移，第二個不寫預設為0
scale(1.1)縮放，第二個不寫，預設等於第一個
rotate(90deg)旋轉，預設繞z軸轉，可以使用rotateX()等
skew(20deg,30deg)扭曲，水平、垂直方向扭曲多少度
2、transform可以同時實現多種變換，用空格分隔
eg:transfom:skew(20deg) scale(1.3) transform(100px)
3、transfom-crigin:定義變換起點，常用與旋轉變換。
可選值：left/center/right bottom/center/top
也可以指定x、y軸座標點，第一個數為x軸
例如：transform:rotate(90deg);
transform-origin:right bottom;
表示：繞左下角旋轉90度。
7、CSS3動畫的使用
1、聲明一個主要畫面格（動畫）
@keyframes name{
form{}
to{}
}
階段寫法：
①可以直接使用form-to的寫法；
②可以設定0%-100%的寫法，但開頭和結尾必須是0%和100%；
2、在CSS選取器中使用animation調用聲明好的動畫；
[animation的縮寫形式]
Animation-name:動畫名稱，聲明的主要畫面格name；
Animation-duration：動畫期間
Animation-timing-function：動畫速度曲線，常選ease；
Animation-delay：動畫開始的時間，延遲幾秒；
Animation-iteration-count：動畫播放次數，預設為1.，infinite表示無限次播放
Animation-direction：動畫在下一個是否逆向播放，預設為normal表示不進行逆行播放,alternate表示逆行播放（100%-0%）；
Animation-fill-mode：表示動畫結束時，停留在何種狀態，要使用這個屬性，動畫的執行次數必須有限次，forwards：表示動畫停留在結束狀態，backwards：表示動畫停留在開始狀態。
Animation-name和Animation-duration必須設定，其他選填；
Animation可以同時設定多個動畫，多個動畫之間用逗號分隔
animation:frame1 1s,frame2 1s,......framen 5s;
HTML5——css基礎文法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
