CSS3知识点笔记————基础（五星）
添加小程序，兌換各種視頻教程/數(shù)據(jù)資源。
1.?作用：美化和修飾HTML。又叫層疊樣式表，樣式表，級聯(lián)樣式表。
2.?優(yōu)點(diǎn)：
? ? 2.1?可以更好的將格式與結(jié)構(gòu)分離。
? ? 2.2?可以更好的控制頁面的布局。
? ? 2.3?可以制作體積更小，下載更快的網(wǎng)頁。
? ? 2.4?可以將多個網(wǎng)頁同時更新，比以前更快更容易。
3.使用CSS的三種方式：
? ? 3.1?內(nèi)聯(lián)式：即將樣式定義在單個HTML元素中。
? ? ? ? ? ? ? 語法：<ANY style="樣式聲明1：值1；樣式聲明2：值2；-----">。
? ? 3.2?內(nèi)部樣式表：將樣式定義在<head><style>選擇器（即標(biāo)記名如p.div）{ 若干樣式聲明 }</style></head>標(biāo)記中。
? ? 3.3?外部樣式表：將樣式聲明定義在獨(dú)立的css文件（.css）中，在網(wǎng)頁中使用。
? ? ? ? ? ? ? ? ? ? ?語法：<head><link rel="Stylesheet" href=".css"><head>
4.CSS的特征：
? ? 4.1?繼承性：即父元素的一些樣式，可以繼承給子元素直接使用。
? ? 4.2?層疊性：一個元素聲明多個不沖突的樣式規(guī)則，可以全部應(yīng)用。
? ? 4.3?優(yōu)先性：瀏覽器的缺省設(shè)置（User Agent Stylesheet）<內(nèi)部樣式表和外部樣式表（后定義者優(yōu)先）<內(nèi)聯(lián)方式。
? ? 4.4?!important：在屬性值后面添加!important強(qiáng)調(diào)其最優(yōu)先。
選擇器權(quán)重：?!Important（無窮大∞） > 行內(nèi)style樣式（1000） > id（100） > 類/偽類/屬性（10） > 標(biāo)簽選擇器（1）? > 全局選擇器（0）
5.選擇器：
? ? 5.1 定義作用：規(guī)范哪些元素可以用聲明好的樣式。
? ? 5.2 基礎(chǔ)選擇器的分類：
? ? ? ? 5.2.1?通用選擇器：語法：*{若干樣式聲明}，不推薦使用，影響性能。
? ? ? ? 5.2.2?元素選擇器：某標(biāo)記對應(yīng)的所有元素。語法：標(biāo)記名{若干樣式聲明}。
? ? ? ? 5.2.3?類選擇器：標(biāo)記元素的class屬性值加上前面的 . 號作為選擇器。語法： .類名{若干樣式聲明}。
? ? ? ? ? ? ? ? ? ? ? ?用法：1.?運(yùn)行一個元素同時又多個類選擇器<ANY class="class1 class2class3">。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.?元素名 . 類名{若干樣式聲明}? 。
? ? ? ? 5.2.4?ID選擇器：元素的ID值作為選擇器。語法：#ID值{若干樣式聲明}。
? ? ? ? 5.2.5?群組選擇器：多個或多種選擇器放在一起，用逗號隔開一起聲明。
? ? ? ? ? ? ? ? ? ? ? ? ? ? 語法：選擇器1，選擇器2，選擇器3---{若干樣式聲明}。
? ? ? ? 5.2.6?后代選擇器：語法：選擇器1 選擇器2{若干樣式聲明}。
? ? ? ? 5.2.7?子代選擇器：語法：選擇器1>選擇器2{若干樣式聲明}。
? ? ? ? 5.2.8?偽類選擇器：匹配某些元素的不同狀態(tài)，如超鏈接單擊前中后字體顏色效果。
? ? ? ? ? ? ? ? ? ? ? ? ? ? 語法： （選擇器）：偽類選擇器{若干樣式聲明}。
? ? ? ? ? ? ? ? ? ? ? ? ? ? 分類：1、鏈接偽類：專門控制 a 標(biāo)記效果的偽類選擇器
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）、:link：定義超鏈接未被訪問時的樣式效果
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）、:visited：定義超鏈接訪問后的樣式效果。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2、動態(tài)偽類：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（1）、:hover：定義鼠標(biāo)懸停在元素上的時候的效果。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（2）、:active：定義元素被激活的瞬間的樣式效果(被點(diǎn)擊的一瞬間)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?（3）、:focus：定義元素獲取焦點(diǎn)時的樣式效果。
? ? ? ? 5.2.9?復(fù)雜的選擇器：
? ? ? ? ? ?（1）兄弟選擇器：兄弟元素——具備相同父元素的平級元素稱之為“兄弟元素”。
?????????????????????注意：兄弟選擇器，只能向后找，不能向前找。
? ? ? ? ? ? ? ? ? ? ? 1）.相鄰兄弟選擇器：作用——獲取緊緊挨在某元素后的兄弟元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?語法：選擇器1+選擇器2{ 若干樣式聲明 }。
? ? ? ? ? ? ? ? ? ? ? 2）.通用兄弟選擇器：作用——獲取某元素后所有滿足條件的兄弟元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?語法：選擇器1~選擇器2 {? 若干樣式聲明 }。
? ? ? ? ? ?（2）屬性選擇器：作用——允許通過元素所附帶的屬性及其值來匹配元素。語法：
? ? ? ? ? ? ? ? ? ?1.[attr ]：?attr表示頁面中所有元素的任意屬性名稱。如[id] [class],表示匹配頁面中所有附帶id ，class屬性的元素。
? ? ? ? ? ? ? ? ? ?2.選擇器[ attr ]：表示匹配附帶attr屬性并滿足指定選擇器的元素。 如div[id],?.ipc[name]。
? ? ? ? ? ? ? ? ? ?3.[attr2][attr1]：表示匹配同時附帶attr1,attr2屬性的頁面元素。
? ? ? ? ? ? ? ? ? ?4.[attr=value]：表示匹配attr屬性值為value的元素，其中這個value,可以用引號也可不用引號。
? ? ? ? ? ? ? ? ? ?5.[attr&=val][attr^=val][attr*=val]：分別表示屬性值以val開頭，以val結(jié)尾，包含val；
? ? ? ? ? ??（3）偽類選擇器：作用——為了匹配元素不同的狀態(tài)。
? ? ? ? ? ? ? ? ? ?1.目標(biāo)偽類：突出顯示獲得的html錨點(diǎn)元素。即跳到錨點(diǎn)記號上時，記號的樣式，匹配被激活的錨點(diǎn)。
? ? ? ? ? ? ? ? ? ? ? ? ? ? 語法： target{} ，如：div:target{}.
? ? ? ? ? ? ? ? ? ?2.結(jié)構(gòu)偽類：作用——通過元素之間的結(jié)構(gòu)關(guān)系來匹配元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ?1）?first-child：表示匹配的元素是屬于父元素的第一個子元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ?2）?last-child：表示匹配的元素是屬于父元素的最后一個子元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ?3）?nth-child(n)：表示匹配元素是屬于其父元素中的第n個子元素，如? :nth-child(1) ===first-child;
? ? ? ? ? ? ? ? ? ? ? ? ? ?4）?empty：匹配沒有子元素的元素。
? ? ? ? ? ? ? ? ? ? ? ? ? ?5）?only-child：匹配只有其父元素只有唯一一個子元素的元素。
? ? ? ? ? ? ? ? ? ?3.否定偽類：作用——將滿足指定選擇器的元素給排除出去。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?語法： not(元素選擇器 )。如 tr:not(:first-child){};
? ? ? ? ? ? ? ? ? ?4.偽元素選擇器：偽類——匹配的是完整的元素；偽元素——某元素中的部分內(nèi)容。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?語法：1?:first-letter(::first-tletter),匹配某個元素的首字符。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2?:first-line(::first-line),匹配某個元素的首行。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3??::selection,匹配被用戶選取的內(nèi)容。注意：此選擇器只能修改背景顏色和文本顏色,需要2個冒號。
? ? ? ? ? ? ? ? ? ? 5.內(nèi)容生成：after/:before{content:""}使用css向某元素內(nèi)插入一段內(nèi)容。content:該屬性也可應(yīng)用于div中添加圖片content:url(...);
? ? ? ? ? ? ? ? ? ? 6.:enabled/:disabled/:checked/：分別表示被激活，被禁用，被選中（單選/復(fù)選按鈕）；
? ? ? ? ? ? ? ? ? ? 7.新增一個屬性值initial：可直接取消某個元素的指定樣式使其變?yōu)槟J(rèn)值；如color:initial;
? ? ? ? ? ? （4）偽元素選擇器：
? ? ? ? ? ? ? ? ? ? 1. : before(::before)：匹配到某元素內(nèi)容區(qū)域之前。
? ? ? ? ? ? ? ? ? ? 2. :after(::after)：匹配到某元素內(nèi)容區(qū)域之后。
? ? ? ? ? ? ? ? ? ? 3.?屬性——content：向匹配到的位置處增加內(nèi)容。如： div:before{ content:"字符串"/url();} 在:after/before{這里面的屬性都是針對content}。
? ? ? ? ? ? ? ? ? ? 4.?解決浮動元素父元素高度的問題，解決外邊距的溢出問題。
? ? ? ? ? ? ?（5）.彈性布局（Flexible Layout ,又叫可伸縮布局，常用來替換<frame>）：
? ? ? ? ? ? ? ? ? ? 1.?為了解決某元素中子元素的布局方式，為布局提供最大的靈活性。
? ? ? ? ? ? ? ? ? ? 2.?彈性布局的容器，即父元素。彈性布局的項目，即要實(shí)現(xiàn)布局效果的元素，簡稱為項目。主軸（Aain Axsis），決定項目們排列順序的一根軸，如果按X（Y）軸排列，那X（Y）就是主軸。交叉軸（Cross Axsis），與主軸相交叉的那根軸。
? ? ? ? ? ? ? ? ? ? 3.?語法：
? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.彈性布局的容器：只有將元素變?yōu)閺椥圆季值娜萜骱?#xff0c;子元素們才能按照彈性布局的方式進(jìn)行排列。將該父元素添加一個屬性display:flex/inline-flex;分別表示將塊級元素邊彈性容器，將行內(nèi)元素邊彈性容器。注意：元素變彈性容器后，子元素的float,clear,vertical-align將全部失效，且子元素變?yōu)閴K級元素，可以修改尺寸，且容器的text-align也會失效。???
? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.容器的屬性：該組屬性加載容器上，負(fù)責(zé)控制所有項目的特征的。屬性——
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1）.flex-direction：指定容器的主軸及其排列方向，X軸為默認(rèn)主軸。取值：row/row-reverse/column/columu-reverse分別表示默認(rèn)值主軸為X軸且從左到右排列，主軸為X軸且從右向左排列，主軸為Y軸且起點(diǎn)在頂端，主軸為Y軸且起點(diǎn)在底端。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2）.flex-wrap：當(dāng)一個主軸排列顯示不了所有子元素（項目）時，可以指定換行方式。取值：nowrap/wrap/wrap-reverse/;分別表示默認(rèn)值不換行直接壓縮子元素（項目）寬度，向下左邊換行，向上左邊換行。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3）.flex-flow：是flex-direction和flex-wrap的縮寫；取值：row nowrap/direction wrap;分別表示默認(rèn)值，分別取值。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4）.justify-content：作用——定義項目在主軸上對齊方式。取值：flex-start/flex-end/center/space-between/space-around;分別表示在主軸的起點(diǎn)對齊，在主軸的終點(diǎn)對齊，在 主軸的居中對齊，兩端對齊，讓每個項目兩端的距離是相等的。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 5）.align-items：定義項目在交叉軸上的對齊方式。取值：flex-start/flex-end/center/baseline/strentch;分別表示在交叉軸的起點(diǎn)對齊，終點(diǎn)對齊，居中對齊，基線對齊，將在交叉軸上占滿所有的空間。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 6). flex-basis：用于指定彈性盒子基準(zhǔn)寬度，因為在彈性盒子中，盒子的最終寬度不是width值決定的。所以用flex-basis=80px優(yōu)先級高度width=80px,所以用flex-basis來設(shè)置彈性盒子的寬度。
注意：flex: 是flex-grow,flex-shrink,flex-basis三個屬性的縮寫。
6.尺寸：
? ? （1）.尺寸單位：px,pt(磅/點(diǎn)? 1pt=1/72英寸),%,cm,mm,em(占父元素倍數(shù)),rem（占根元素倍數(shù)）,in（1英寸=2.54cm）。
? ? ? ? ?1）.顏色單位：rgb,rgba,#rrggbb,#rgb,英文單詞。
? ? ? ? ?2）.尺寸的屬性：width/height,max-width/height,min-width/height。
? ? （2）.允許修改尺寸的元素：所有的塊級元素（div,p,h#---），除單復(fù)選外的控件，img和table。
? ? （3）.溢出處理：屬性——overflow，overflow-x，overflow-y。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 取值——visible(默認(rèn)值，溢出可見)，hidden（溢出隱藏），scroll（顯示滾動條），auto（溢出才顯示滾動條）。
7.邊框：邊框的屬性語法：border：width? style(solid/dotted/dashed)? color;? 表示四邊的設(shè)置線寬，線類型，線顏色。
? ?（1）.邊框的細(xì)分：單邊多屬性（border-方向：width style color），單邊單屬性（border-方向-屬性：屬性值），多邊單屬性（border-屬性：屬性值）。
? ?（2）.特殊情況：不顯示邊框，邊框矩形由4個三角形組成。
? ?（3）.邊框倒角：屬性——border-(某個角)-radius:?? 表示4個角（某個角）的倒角。取值——以px，或百分比為單位的數(shù)值。
? ?（4）.邊框的陰影：屬性——box-shadow;取值——h-shadow v-shadow blur spread color insert; 分別表示水平，垂直位移（正負(fù)，以px,或百分比為單位），模糊大小，陰影大小，陰影顏色，內(nèi)陰影。
? ?（5）.邊框輪廓：指在邊框外加一層輪廓。屬性——outline:width style color;
8.框模型：頁面元素皆為框，框模型（Box-Model）定義了內(nèi)容，內(nèi)邊距，外邊距的一種方式。
? ?（1）.外邊距：屬性——margin-(某個方向)；表示四個方向（某個方向的外邊距距離），多個方向取值可以簡寫。取值——1.以px,百分比為單位的正負(fù)數(shù)字。其中正負(fù)表示上下左右移動。2.auto，必須是塊級元素設(shè)置了寬度下，水平居中。
? ?（2）.默認(rèn)具有外邊的元素——body,h#,p,pre,ol,ul,dd,dl; 可以通過margin:0px設(shè)置外邊距為0。
? ?（3）.外邊距的合并以及外邊距的溢出。
? ?（4）.內(nèi)邊距：屬性——padding;與外邊一樣的用法。
? ?（5）.重置框模型的計算方式：屬性——box-sizding:content-box(默認(rèn)值)/border-box。
9.背景屬性：
? ?（1）.背景顏色——background-color :顏色值;
? ?（2）.背景圖片——background-image: url(圖片的路徑);
? ?（3）.背景圖片重復(fù)——background-repeat: repeat/repeat-x/repeat-y/no-repeat;分別表示默認(rèn)值，橫向，縱向，不平鋪。
? ?（4）.背景圖片大小——background-size: x y/x% y%/cover/contain; 分別表示以px為單位，百分為單位，全覆蓋，不一定全覆蓋。
? ?（5）.背景圖片的固定——background-attachment: scroll/fixed; 分別表示默認(rèn)值隨滾動條滾動，固定不隨滾動條滾動。
? ?（6）.背景圖片位置——background-position: x y/x% y% / 關(guān)鍵字 關(guān)鍵字； 分別表示以x y 方向的pt為單位的位置，百分比為單位的位置，左右上下中關(guān)鍵字。
? ?（7）.背景圖片的簡寫——background: color url() repeat attachment position;定義多背景圖，即在一個元素中顯示多個背景圖像，還可以將背景圖像進(jìn)行重疊，即將上面屬性依次賦值多個并用逗號隔開；
10.漸變：
? ?（1）.漸變的主要因素——色標(biāo)：即顏色和位置。
? ?（2）.漸變的三種方式——線性，徑向，二者組合。
? ?（3）.線性漸變：屬性——background-image: linear-gradient(angle,color- point1,...);angle-填充方向，取值為to top/to right/toleft/tobottom或者以deg為單位的0~360度。color-point:色標(biāo)，即顏色和位置。如red 0%,blue 50% 。
? ?（4）.瀏覽器的兼容——在linear-gradient前加瀏覽器前綴。
11.文字格式化屬性：
? ?（1）.字體屬性：
? ? ? ? ? 1.?字體類型——font-family:取值為字體類型，中文類型需要加引號。
? ? ? ? ? 2.?字體大小——font-size: 取值為以 px 或 pt 或em 或 rem 為單位的數(shù)字。
? ? ? ? ? 3.?字體加粗——font-weight: normal/bold/value; 分別表示默認(rèn)值正常，加粗，無單位數(shù)字。
? ? ? ? ? 4.?字體樣式——font-style: normal/italic;? 分別表示默認(rèn)值正常，斜體。
? ? ? ? ? 5.?字體小型大寫字母—font-variant: normal/small-caps; 分別表示默認(rèn)正常，小型大寫字母。
? ? ? ? ? 6.?字體屬性的簡寫——font: style variant weight sizefamily;注意:簡寫時是必須有font-family。
? ? ? ? ? 7. 自定義字體——@font-face{....}:是由以上屬性及值組成的對象。
? ?（2）.文本屬性：
? ? ? ? ? ?1.?文本顏色——color:顏色值。
? ? ? ? ? ?2.?文本水平排列方式——text-align:left/right/center/justify。
? ? ? ? ? ?3. 文本的劃線修飾——text-decoration:none/underline/line-through/overline;? 表示無劃線，下劃線，刪除線，上劃線。
? ? ? ? ? ?4. 文本的行高——line-height:? 取值為以px為單位的數(shù)值或無單位的字體倍數(shù)。
? ? ? ? ? ?5?.文本首行縮進(jìn)——text-indent: 取值以px 為單位的數(shù)值。
? ? ? ? ? ?6. 文本陰影——text-shadow: h-shadow v-shadow blurcolor;文本陰影屬性接收一個以逗號分隔的陰影效果的列表，陰影效果按照給的的順序，可以出現(xiàn)相互覆蓋的效果。
? ? ? ? ? ?7.?文本溢出——text-overflow:clip/ellipsis/ellipsis-word;表示文本超出顯示框的處理，取值分別表示不顯示（...）直接裁剪/顯示（...）省略標(biāo)記插入的位置是最后一個字符/顯示（...）省略標(biāo)記插入的位置是最后一個詞。
? ? ? ? ? ?8.?強(qiáng)制換行/不換行——white-space：nowrap/normal。強(qiáng)制不換行，文本會超出顯示。
? ? ? ? ? ?9.?字母間距——letter-spacing：1px。
? ? ? ? ? ?10.?單詞/中文字間距——word-spacing：1px。
? ? （3）.文本多列布局——適合純文本設(shè)計：
? ? ? ? ? 1.?column-width：表示一篇文字中定義文本每列寬度；
? ? ? ? ? 2.?column-count：表示將一篇文字分成幾列顯示；
? ? ? ? ? 3.?column-gap：定義相鄰列之間的距離；
? ? ? ? ? 4.?column-rule:style width? color：表示相鄰列之間的分割線的樣式(dashed/dotted/solid/none等)，寬度，顏色；
? ? ? ? ? 5.?column-span:none/all：表示標(biāo)題只在本欄顯示/橫跨所有欄顯示；
? ? ? ? ? 6.?column-fill:auto/balance：表示欄的高度是否統(tǒng)一。Auto表示隨內(nèi)容變化，balance表示以內(nèi)容最多的那列高度統(tǒng)一；
12.表格的屬性：
? ? （1）.表格的常用屬性：
? ? ? ? ?1.?邊框?qū)傩?/span>——border，css中只有table,td才有邊框?qū)傩浴?/p>
? ? ? ? ?2. 尺寸屬性——width,height。 ? ? ? ? ?3.?框模型——padding。 ? ? ? ? ?4. 文本屬性——1.font-*; 2.text-*;3.line-height。 ? ? ? ? ?5. 單元格的數(shù)據(jù)垂直對齊方式——vartical-align:top/center/bottom。 ? ?（2）.表格的特有屬性： ? ? ? ? ?1.邊框合并：即將雙線邊框合并成單線邊框。屬性——border-collspase: sparate/collspase; 表示默認(rèn)值，合并成單線邊框。 ? ? ? ? ?2.邊框邊距：相鄰邊框的距離。屬性——border-spading:x y;? 表示水平，垂直間距，需要在邊框合并默認(rèn)值下才能有效。 ? ? ? ? ?3.表格標(biāo)題的位置——caption-side:top/bottom; ? ? ? ? ?4.顯示規(guī)則：即td寬高由內(nèi)容還是設(shè)定值決定——table-layout:auto/fixed; 分別表示默認(rèn)值以內(nèi)容決定，有設(shè)定tr值決定。 13.定位：定位的分類： ? ? 1.普通流定位（即文檔流定位），默認(rèn)定位方式。 ? ? 2.浮動定位（專門解決多個塊級元素在一行顯示）。 ? ? 3.相對定位。 ? ? 4.絕對定位。 ? ? 5.固定定位。 ? ?（1）.普通流定位：特點(diǎn)： ? ? ? ? ?1、每個元素在頁面上都有自己的空間。 ? ? ? ? ?2、每個元素都是從其父元素的左上角開始排列。 ? ? ? ? ?3、頁面中的塊級元素，都是按照從上到下的方式逐個排列，每個元素獨(dú)占一行。 ? ? ? ? ?4、頁面中的每個行內(nèi)元素 和 行內(nèi)塊元素都是按照從左到右的方式來排列的。 ? ?（2）.浮動定位：屬性——float: left/right/none;特征—— ? ? ? ? 1、元素會被排除在文檔流之外(即脫離文檔流),元素就不再占據(jù)頁面空間，其它未浮動元素要上前占位。 ? ? ? ? 2、浮動元素會停靠在其父元素的左邊或右邊，或其它已浮動元素的邊緣上。 ? ? ? ? 3、浮動元素只能在當(dāng)前行浮動。 ? ? ? ? 4、浮動定位解決的問題:讓多個塊級元素在一行內(nèi)顯示。 ? ? ? ? ? ? 浮動定位效果： ? ? ? ? ? ? ?1、父元素顯示不下所有浮動子元素時，最后一個將換行，但是，有可能被卡住。 ? ? ? ? ? ? ?2、元素一旦浮動起來之后，寬度將以內(nèi)容為準(zhǔn)(未指定寬度的情況下)。 ? ? ? ? ? ? ?3、元素一旦浮動起來之后，將變成塊級元素（允許修改尺寸，能正常處理外邊距）行內(nèi)元素 和 行內(nèi)塊元素 浮動起來之后，就變成塊級元素。 ? ? ? ? ? ? ?4、文本，行內(nèi)元素，行內(nèi)塊元素是采用環(huán)繞的方式來排列的，是不會被浮動元素壓在底下的，而是會巧妙的避開浮動元素。 ? ? ? ? ? ?清除浮動：清除前面元素浮動對本元素產(chǎn)生的位置的影響。 ? ? ? ? ? ? ?1?、屬性：clear:none/left/right/both;分別表示默認(rèn)值不清 除，清除前面元素左浮動帶來的影響，右浮動帶來的影響，清除浮動帶來的影響。 ? ? ? ? ? ? ?2、?浮動元素對父元素高度的影響及其解決方案。顯示方式——屬性——display:none/block/inline/inline-block/table;分別表示默認(rèn)值不顯示，將元素邊塊級，將元素邊行內(nèi)級，將元素邊行內(nèi)塊級，將元素邊table一樣的表現(xiàn)形式。 ? ? ? ? ? ?顯示效果： ? ? ? ? ? ? ?1、顯示/隱藏屬性——visibility;不脫離文檔流，仍然占據(jù)空間。取值——visible(默認(rèn)值，可見的) / hidden (隱藏); ? ? ? ? ? ? ?2、透明度屬性——opacity;改變整個元素的透明度。取值——0.0~1.0之間的小數(shù)。 ? ? ? ? ? ? ?3、垂直對齊屬性——vertical-align;設(shè)置td,img,行內(nèi)塊級元素2端的文本相對于它們的垂直對齊方式。img后垂直對齊取值——top/middle/bottom/baseline(默認(rèn)值，基線對齊)；在網(wǎng)頁開發(fā)過程中，通常會將頁面所有圖片的。默認(rèn)值baseline修改成其他值，消除基線對齊。用于圖片后面文字的對齊方式。 ? ? ? ? ? 光標(biāo)：鼠標(biāo)懸停在元素上時，鼠標(biāo)的表現(xiàn)形式，如小手，沙漏，旋轉(zhuǎn)，十字----屬性—cursor:default(默認(rèn)值)/pointer(小手)/crosshair(十字)/text(I)/wait(等待旋轉(zhuǎn)圖形)/help(幫助)。 ? ? （3）.相對/絕對/固定定位： ? ? ? ? ?1.屬性——position:static(默認(rèn)值)/relative/absolute/fixed;分別表示默認(rèn)值，相對定位，絕對定位，固定定位。 ? ? ? ? ?2.偏移屬性——top/bottom/right/left:取值以px為單位的正負(fù)數(shù)值。并以其為基準(zhǔn)線的移動。 ? ? ? ? ?3.相對定位——元素會相對于它自己原來的位置，偏移某個距離。相對定位的元素，原位置（空間）會被保留，不允許被其他元素所占據(jù)。語法： position:relative;top/right/left/bottom: 正負(fù)值。 ? ? ? ? ?4.絕對定位： ? ? ? ? ? ? ?（1）.特證：脫離文檔流，不占頁面空間，后面元素上前補(bǔ)位。絕對定位的元素會相對于離它最近的，已定位的祖先元素去實(shí)現(xiàn)位置的初始化和偏移。如果不存在已定位的祖先的元素，那么就相對于body取實(shí)現(xiàn)位置的初始化和偏移（其top/right/bottom/left都是相對于祖先已定位元素或body左上角的偏移位 置）。 ? ? ? ? ? ? ?（2）.語法：position:absolute;top/right/left/bottom: 正負(fù)值。 ? ? ? ? ? ? ?（3）.特點(diǎn)：絕對定位的元素會脫離文檔流，所有會壓在其他元素之上。絕對元素會變成塊級元素。絕對定位的元素，margin可以正常使用，在正常下，margin:0 auto; 會失 效，但是在該絕對元素top/right/left/bottom:取值全都是0的非正常情況下下margin:auto;有效。 ? ? ? ? 5.固定定位： ? ? ? ? ? ? ?（1）.讓元素始終固定在頁面的某個位置處，不受到滾動條滾動而范式位置的影響。 ? ? ? ? ? ? ?（2）.語法：position:fixed;配合top/right/left/bottom實(shí)現(xiàn)位置的改變。 ? ? ? ? ? ? ?（3）.特點(diǎn)：脫離文檔流，固定元素會變塊級。可修改尺寸。永遠(yuǎn)都是相對于body實(shí)現(xiàn)位置的固定。 ? ? ? ?6.堆疊順序： ? ? ? ? ? ? （1）.改變元素定位方式之后，有可能會發(fā)生堆疊效果，實(shí)際上是由堆疊順序來決定排位效果的。如紙牌游戲出牌那張高出其他張。 ? ? ? ? ? ? （2）.語法：屬性——z-index:取值為沒有單位的數(shù)值，數(shù)值越大，越靠前，越面向用戶更近。前后移動，取值為負(fù)表示正常之下。 ? ? ? ? ? ? （3）.注意：必須是已定位元素才能用z-index。如果z-index相同的話，則后出現(xiàn)的在上面。在父子級元素中，永遠(yuǎn)都是子壓在父元素之上，不受到z-index控制的。 14.盒模型：任何一個塊級/行內(nèi)塊級標(biāo)簽都可以視為一個矩形盒子，由width、height、padding、margin、border組成。box-sizing取值決定了是標(biāo)準(zhǔn)盒模型還是怪異盒模型。
以上是生活随笔為你收集整理的CSS3知识点笔记————基础（五星）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
總結(jié)
- 上一篇： matplotlib库的pyplot的p
- 下一篇： 计算机主机安装图,最新版本：计算机主机插