前端知識點總結——CSS
前端知識點總結——CSS
1.CSS的概述
1.什麼是CSS?css
CSS：Cascading Style Sheets層疊樣式表，級聯樣式表（簡稱：樣式表）
2.做用html
設置HTML網頁元素的樣式
3.HTML與CSS的關係前端
HTML：負責內容的展現 CSS：負責內容（元素）的修飾
4.HTML與CSS之間的使用原則web
W3C建議儘可能使用CSS屬性去取代HTML屬性來修飾元素
2.CSS語法規範
1.使用CSS樣式的方式(重點)面試
1.內聯樣式
又稱爲行內樣式
特色：將CSS樣式定義在HTML開始標記中
語法：
<ANY style="樣式聲明1；樣式聲明2"></ANY>
樣式聲明：
1.由樣式屬性和值來組成
2.屬性名與值之間用 冒號 鏈接
3.多個樣式聲明之間用 分號 分割
經常使用的CSS樣式屬性 和 值：
1.設置文本顏色的屬性和值
屬性：color
值：合法的顏色值（英文）
2.設置背景顏色的屬性和值
屬性：background
值：合法的顏色值（英文）
3.設置文字大小的屬性和值
屬性：font-size
值：以px或pt爲單位的數字
ex：font-size:30px;
2.內部樣式
在網頁的頭元素中增長一對<style>標記，在<style>標記聲明該網頁用到的樣式規則
語法： <head>
<style>
/*註釋*/
樣式規則1
樣式規則2
...
</style>
</head>
樣式規則：由選擇器和樣式聲明組成
選擇器：規範了頁面中哪些元素可以使用定義好的樣式（就是把聲明好的樣式匹配給頁面中的元素）
元素選擇器：由元素的名稱做爲選擇器
div,p,h1,span,a,img
選擇器{}
ex：div{}
p{}
樣式規則：
選擇器{
樣式聲明；
}
ex:
div{
color:red;
font-size:20px;
}
p{
color:blue;
}
h1{...}
3.外部樣式
獨立於任何網頁的位置處，聲明一個樣式表文件（***.css爲後綴），
在.css文件中保存樣式規則，而後在網頁中引入.css文件。
使用步驟：
1.建立樣式表文件，並編寫樣式規則
2.在網頁中引入樣式表文件
<head>
<link rel="stylesheet" href="**.css">
</head>
3.CSS樣式特徵
1.繼承性
大部分樣式能夠被繼承（子元素繼承父元素的樣式特徵）
必須是有層級關係的嵌套
<div style="color:red;">
<p>p</p>
</div>
2.層疊性
能夠爲一個元素定義多個樣式，當樣式屬性不衝突時，能夠同時將這些樣式應用到元素上
div{
color:red;
}
div{
font-size:20px;
}
div{
background:gray;
}
3.優先級
若是樣式聲明衝突時，會按照樣式的優先級來應用定義的樣式規則
由低到高：
瀏覽器默認設置 最低
內部樣式和外部樣式 中(就近原則)
內聯樣式 最高
4.調整顯示的優先級
!important規則：
調整顯示的優先級
將!important添加在屬性值以後，與值之間用空格隔開，就能優先使用當前樣式
ex:
color:red !important;
4.CSS基礎選擇器（重點）
1.選擇器的做用
規範頁面中哪些元素可以使用定義好的樣式
2.選擇器詳解
1.通用選擇器
做用：能夠修飾頁面上的任何元素
語法：*{樣式聲明}
效率較低，儘可能少用
ex:
*{
color:red;
font-size:40px;
}
2.元素選擇器瀏覽器
做用：設置頁面上某種（類）元素的樣式
語法：標記名稱{聲明樣式}
ex：
div{}
p{}
span{}
3.類選擇器ssh
做用：定義頁面上某個或某些元素的樣式(誰想用誰就能夠引用)
特色：經過元素的class屬性進行引用
語法：
1.聲明
.類名{樣式聲明}
注意：
1.類名是自定義的，可是注意類名不能以數字開頭
2.類名不能包含特殊符號（&,^,%,$,#,@）
3.能夠包含（_,-）
2.引用
<ANY class="類名">
特殊用法：
1.多類選擇器
讓一個元素同時引用多個類選擇器
語法：
<ANY class="類名1 類名2 類名3 ...">
2.分類選擇器
將元素選擇器和類選擇器聯合使用
對同一類元素中某些特殊的內容進行修飾
語法：元素名稱.類選擇器{樣式聲明}
ex:div.text{color:red;}
<div class="text">dddd</div>
<div>d1d1d1</div>
4.id選擇器ide
做用：設置指定ID元素的樣式（專屬定製）
語法：#id值{樣式聲明}
ex:
<div id="one"></div>
#one{
color:red;
}
5.羣組選擇器佈局
做用：將多個選擇器放在一塊兒進行樣式的聲明定義
語法：選擇器1,選擇器2,選擇器3,...{樣式聲明}
ex:
div,#main,.mycolor,p.text{color:red;}
等同於：
div{color:red};
#main{color:red};
.mycolor{color:red};
p.text{color:red};
6.後代選擇器字體
做用：經過元素的後代關係匹配元素（多級嵌套）
語法：選擇器1 選擇器2 選擇器3{樣式聲明}
7.子代選擇器
做用：經過元素的子代（一層層級關係）關係匹配元素
語法：選擇器1>選擇器2{樣式聲明}
8.僞類選擇器
做用：匹配元素不一樣的狀態的選擇器
語法：
全部的僞類都是以：做爲開始
選擇器：僞類選擇器{樣式聲明}
1.鏈接僞類
:link 匹配元素還沒有訪問的狀態
:visited 匹配元素訪問過的狀態
2.動態僞類
:hover 匹配鼠標懸停在元素上時的狀態
:active 匹配元素被激活時的狀態（超連接，文本框，密碼框點擊的時候）
:focus 匹配元素獲取焦點時的狀態（文本框和密碼框）
3.選擇器的優先級
權值：標識當前選擇器的重要程度，權值越大優先級越高。
元素選擇器：1
類選擇器： 10
僞類選擇器：10
ID選擇擇器：100
內聯樣式： 1000
選擇器的權值加到一塊兒，大的優先
權值相同，之後定義的爲主
5.尺寸與邊框
1.單位
1.尺寸單位
1.px：像素
1024*768
2.in:英寸
1in=2.54cm
3.pt：磅(1pt=1/72in)
多數用於表示文字的大小
4.cm:釐米
5.mm:毫米
6.em:相對於父元素乘以倍數(多個父元素2em)
7.rem:根相對（元素字體大小乘以倍數，html\body）
2.顏色單位（顏色取值）
1.英文單詞
red,blue,gray,green,yellow,black....
2.rgb(r,g,b)
r:0-255
g:0-255
b:0-255
3.rgba(r,g,b,alpha)
alpha:透明度，取值爲0-1之間的小數，值越大，不透明度越高
4.#rrggbb
由6位16進制的數字\字母表示一個顏色
0-9或A-f
#000000:黑色
#ffffff:白色
#eeeeee:灰色
#ff11aa
5.#rgb是上面的縮寫形式
#000:黑色
#fff:白色
#f1a
2.尺寸屬性
1.做用
設置元素的寬度和高度
2.語法
1.寬度
width:寬度
min-width:最小寬度
max-width:最大寬度
2.高度
height：高度
min-height:最小高度
max-height:最大高度
3.頁面中哪些元素容許設置尺寸屬性
1.全部的塊級元素都容許設置尺寸
div,p,h1,h2..h6,ul,ol,dl,結構標記
2.自己具有width和height屬性的行內元素是能夠設置的
img,table
3.行內塊容許設置尺寸
大部分的表單控件（單選按鈕，複選框）
4.大部分的行內元素是沒法設置尺寸
a,span,b,i,u,s等
3.溢出處理
當內容多，元素區域小的時候，就會產生溢出的效果，默認都是縱向溢出。
屬性：overflow,overflow-x,overflow-y
取值：
1.visible
可見的，默認值，溢出可見
2.hidden
隱藏的，溢出的內容所有隱藏，溢出內容不可見
3.scroll
顯示滾動條，溢出時，可用
4.auto
自動，溢出時才顯示滾動條並可用
4.邊框
1.邊框屬性
1.簡寫方式
border:width style color;
width:邊框的寬度，以px爲單位的數值
style:邊框的樣式
取值：
solid:實線
dotted:虛線邊框(點)
dashed:虛線邊框(線)
color:邊框的顏色
取值：合法的顏色值
transparent:透明色
注意：
取消邊框：border:0;或border:none;
2.單邊定義
只設置某一條邊的邊框
屬性：border-方向:width style color;
方向：top/bottom/left/right
上 下 左 右
3.單屬性定義
只設置四條邊框的一個屬性
屬性：border-width/style/color:值；
ex:border-width:3px;
border-style:dotted;
border-color:red;
4.單邊單屬性的定義
只設置某一個方向的某一個屬性
屬性：
border-方向-屬性：值；
方向：top/bottom/left/right
屬性：width/style/color
ex：
border-left-color:blue;
border-right-style:solid;
border-bottom-width:6px;
2.邊框倒角
將元素的直角倒換成圓角
屬性：border-radius
取值：
1.以px爲單位的數值
2.百分比 % 設置圓形（50%）
單角設置：
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
3.邊框陰影
屬性：box-shadow
取值：h-shadow v-shadow blur spread color inset
h-shadow:陰影在水平方向的偏移距離，必須值
取值爲正：陰影向右偏移
取值爲負：陰影向左偏移
v-shadow:陰影在垂直方向的偏移距離，必須值
取值爲正：陰影向下偏移
取值爲負：陰影向上偏移
blur:陰影模糊距離，取值越大，模糊效果越明顯，以px爲單位的數值（可選值）
spread:陰影的大小，指定要在基礎陰影上擴充出來的大小，取值以px爲單位的數值（可選值）
color:陰影顏色（可選值）
inset:將默認的外陰影改成內陰影（可選值）
4.輪廓
輪廓指的是邊框的邊框，繪製於邊框外圍的一條線
屬性：
outline:width style color;
widht:輪廓的寬度
style:輪廓的樣式
取值：solid/dotted/dashed
color:輪廓的顏色
取消輪廓：
outline:none/0;
6.框模型
1.什麼是框模型
框模型：box model,定義了元素框處理元素的內容，內邊距，外邊距以及邊框的一種計算方式。
外邊距：元素與元素之間的空白間距
內邊距：元素邊框與元素內容之間的間距
框模型的計算模式：
元素的實際佔地寬度=左右外邊距+左右邊框+左右內邊距+width;
元素的實際佔地高度=上下外邊距+上下邊框+上下的內邊距+height
7.外邊距
1.什麼是外邊距
圍繞在元素邊框外的空白距離，就是外邊距 也能表示當前元素與其餘元素之間的空白距離
2.語法
屬性：
margin 定義某個元素四個方向的外邊距
margin-top/bottom/left/right 定義單邊的外邊距
取值：
1.具體數值，以px爲單位
2.取值爲負
讓元素向相反的方向移動
margin-left:
取值爲正，讓元素向右移動
取值爲負，讓元素向左移動
margin-top:
取值爲正，讓元素向下移動
取值爲負，讓元素向上移動
3.取值爲%
外邊距的值，是父元素的寬或高的佔比（50%）
4.取值爲auto
自動計算外邊距的值（控制塊級元素水平居中對齊）
簡寫方式：
1.margin:value
四個方向的外邊距
2.margin:v1 v2;
v1:上下外邊距
v2:左右外邊距
3.margin:v1 v2 v3;
v1:上外邊距
v2:左右外邊距
v3:下外邊距
3.margin:v1 v2 v3 v4;
上 右 下 左 （順時針方向）
3.自帶外邊距的元素
body,h1~h6,p,ul,ol,dl,dd,pre
經過CSS Reset(css重寫)的手段，來重置具有外邊距的元素
body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre{
margin:0;
}
4.外邊距的特殊效果
1.外邊距合併
當兩個垂直外邊距相遇時，他們將合併爲一個，最終取決於兩個外邊距中距離較大的那個。
若是兩個外邊距相遇時值相等，那麼取其中一個值。
2.外邊距的溢出
在某些條件下，爲子元素設置上外邊距時，有可能會做用到父元素上。
1.父元素沒有上邊框
2.爲子元素設置上外邊距時
2.在d2中嵌套一個子元素div,id="d3",設置其尺寸爲100*100，並設置其背景顏色
3.設置d3的上外邊距爲50px,觀察其結果。
解決溢出方案：
1.爲父元素增長上邊框
弊端：對父元素的高度有影響
2.使用父元素的上內邊距來取代子元素的上外邊距
弊端：對父元素的高度有影響
3.在父元素的第一個子元素位置處，增長一個空(table)
行內元素以及行內塊元素的垂直外邊距
1.行內元素垂直外邊距無效（img除外）
2.行內塊元素，設置垂直外邊距時，整行元素都跟着發生改變
8.內邊距
1.什麼是內邊距
元素邊框與內容之間的空白距離 內邊距會擴大元素邊框佔地區域
2.語法
屬性：
padding 四個方向的內邊距
padding-top/bottom/left/right 設置單邊內邊距
取值：
以px爲單位的數值
以%形式設置
簡寫方式：
1.padding:value; 四個方向的內邊距
2.padding:v1 v2;
v1:上下內邊距
v2:左右內邊距
3.padding:v1 v2 v3;
v1:上
v2:左右
v3:下
4.padding:v1 v2 v3 v4;
上 右 下 左 （順時針）
9.屬性：box-sizing
做用：指定框模型的計算方式
取值：
1.content-box
默認值，採用默認的計算元素的佔地區域
實際佔地寬度=左右邊框+左右外邊距+左右內邊距+width;
實際佔地高度=上下邊框+上下外邊距+上下內邊距+height;
2.border-box
元素的尺寸，會包含border以及padding的值
實際佔地寬度=width(包含了border和padding)
實際佔地高度=height(包含了border和padding)
3.背景屬性
背景：能夠是單一顏色或圖片填充元素
1.背景色
屬性：background-color 取值：合法的顏色值 注意：背景顏色默認是從邊框的位置處開始填充的
2.背景圖片
屬性：background-image 取值：url(圖片的路徑); ex:background-image:url(a.jpg);
3.背景圖片平鋪
屬性：background-repeat 取值： repeat 默認值，橫向縱向都平鋪 no-repeat 不平鋪（圖片只顯示一次） repeat-x 只在水平方向平鋪 repeat-y 只在垂直方向平鋪
4.背景圖片尺寸
屬性：background-size
取值：
1.width/height (ex:200px 300px)
2.width%/height% (ex:50% 50% 是元素本身的高寬佔比)
3.cover
將背景圖等比放大，直到背景圖徹底覆蓋到元素的全部區域爲止。
4.contain
將背景圖等比放大，直到背景圖碰到元素的某一個邊緣爲止
5.背景圖片固定
做用：將背景圖固定在網頁的某個位置處，一直在可視區域中，不會隨着滾動條而發生位置的變化。 屬性：background-attachment 取值： 1.scroll 默認值，滾動 2.fixed 固定
6.背景圖片定位
做用：改變背景圖在元素中的位置
屬性：background-position
取值：
1.x y 具體的數值（px）
x:
背景圖水平偏移距離
取值爲正，向右移動
取值爲負，向左移動
y:
背景圖垂直偏移距離
取值爲正，向下移動
取值爲負，向上移動
2.x% y%
0% 0% 背景圖在左上角
100% 100% 背景圖在右下角
50% 50% 背景圖在中間位置
3.關鍵字
x:left/center/right
y:top/center/bottom
ex:background-position:right top;
7.背景簡寫屬性
在一個屬性中指定背景的多個屬性值 屬性：background 取值：color url() repeat attachment position ex： background:gray url(a.jpg); 注意： 若是不設置其中某個屬性值的話，該位置採用默認值。
8.漸變
1.什麼是漸變
漸變指定是多種顏色平緩變換的一種顯示效果。
2.漸變的主要因素
1.色標：一種顏色及其出現的位置 2.一個漸變是由多個色標組成（至少兩個）
3.漸變分類
1.線性漸變 以直線的方向來填充效果 2.徑向漸變 以圓形的方式來實現填充 3.重複漸變 將線性漸變或徑向漸變 重複幾回實現填充
4.漸變詳解
1.線性漸變
屬性：background-image
取值：linear-gradient(angle,color-point1,color-point2,....);
1.angle
表示漸變填充的方向或角度
取值：
1.關鍵字
to top 從下向上填充漸變色
to bottom 從上向下填充漸變色
to left 從右向左填充漸變色
to right 從左向右填充漸變色
2.角度值
0deg 從下向上填充，等同於to top
90deg 從左向右填充，等同於to right
180deg 從上到下填充，等同於to bottom
270deg 從右向左填充，等同於to left
2.color-point
色標：顏色 及其 位置
取值：顏色 以及 位置的組合，中間用空格分開
ex:
1.red 0%
在填充方向的開始位置處顏色爲紅色
2.green 50%
到填充方向一半的位置處，顏色變爲綠色
3.blue 200px
到填充方向的200px的位置處，顏色變爲藍色
2.徑向漸變
屬性：
background-image:radial-gradient([size at position],
color-point1,color-point2,...);
size at position:
size:半徑，以px爲單位的數值
position:圓心所在位置
1.x y 具體數值
2.x% y% 元素寬和高的佔比
3.關鍵字
x:left,center,right
y:top,center,bottom
ex：
100px at right top
半徑 右上角位置
3.重複漸變
1.重複線性漸變
background-image:repeating-linear-gradient
(angle,color-point1,color-point2,...);
color-point:位置必定要給絕對數值（px）,不要用相對單位%
2.重複徑向漸變
background-image:repeating-radial-gradient
([size at position],color-point1,color-point2,...);
9.瀏覽器兼容性
各個瀏覽器的新版本都支持漸變屬性 對於不支持的瀏覽器版本，能夠經過增長瀏覽器前綴的方式，讓瀏覽器支持漸變屬性 Firefox:-moz- Chrome & Sagari:-webkit- Opera:-o- IE:-ms-
2.文本格式化屬性
1.字體屬性
1.指定字體
屬性：font-family
取值：字體名稱，名稱之間用逗號隔開
ex：
font-family:"微軟雅黑",Arial,"黑體";
2.字體大小
屬性：font-size
取值：以px或pt爲單位的數字
3.字體加粗
屬性：font-weight
取值：
1.bold 加粗（b,hn）
2.normal 正常
3.value 無單位的數字（整百倍）
400-900
400：等同於normal
900：等同於bold
4.字體樣式
屬性：font-style
取值：
1.normal 正常顯示
2.italic 斜體顯示
5.小型大寫字母
將小寫字符變成大寫，但文本的大小與小寫字符一致
屬性：font-variant
取值：
1.normal 正常
2.small-caps 小型的大寫字符
6.字體屬性簡寫
屬性：font
取值：style variant weight size family;
注意：
若是用簡寫方式，必須設置family的值，不然無效。
font:12px; 錯誤
font:12px "黑體"; 正確
2.文本格式
1.文本顏色
屬性：color
取值：合法的顏色值
2.文本排列
做用：指定文本，行內，行內塊元素的水平對齊方式。
屬性：text-align
取值：left/center/right/justify(兩端對齊)
3.文字修飾（線條）
屬性：text-decoration
取值：
none:無任何線條修飾
underline:下劃線修飾
overline:上劃線修飾
line-through:刪除線修飾
4.行高
做用:定義一行文本的高度
特色：若是行高的高度大於字體自己的大小，那麼該行文本將在指定的行高內呈現垂直居中的效果。
屬性:line-height
取值：以px爲單位數值
5.首行文本縮進
屬性：text-indent
取值：以px爲單位的數值
6.文本陰影
屬性：text-shadow
取值：h-shadow v-shadow blur color;
10.表格
1.表格的經常使用屬性
1.邊距屬性：padding
2.邊框屬性：border
3.尺寸屬性：width,height
4.文本格式化屬性：font-*,text-*,line-height
5.背景屬性：顏色，圖片，漸變
6.vertical-align
做用：指定單元格數據垂直對齊方式
取值：
top:上對齊
middle:居中對齊
bottom:下對齊
練習：建立網頁，並在網頁中添加表格
1.表格尺寸爲400*400，4行4列;
2.每一個單元格的尺寸爲100*100,內容隨意;
3.設置表格和單位元格的邊框爲1px solid #000;
4.設置每一個單元格的左內邊距爲20px;
5.嘗試爲每一個單元格增長上外邊距15px。
2.表格的特殊屬性
1.邊框合併
取值：border-collapse
取值：
1.separate
默認值，即分離邊框模式
2.collapse
邊框合併
2.邊框邊距
做用：設置單元格之間或單元格與表格之間的距離
屬性：border-spacing
取值：
1.給定一個值：水平和垂直的間距相同
2.給兩個值：
第一個值 表示水平間距
第二個值 表示垂直間距
注意：只有在邊框分離模式下，邊框邊距纔有效果，即border-collapse:separate時，border-spacing纔有效。
3.表格標題位置
屬性：caption-side
取值：
1.top:默認值，標題在表格內容之上
2.bottom:標題在表格內容之下
4.顯示規則
做用：用來幫助瀏覽器指定如何佈局一張表，也就是指定td尺寸的計算方式。
屬性：table-layout
取值：
1.auto
默認值，即自動佈局表格，列的尺寸實際上由內容來決定的。
2.fixed
固定表格佈局，列的尺寸由設置的值爲準
自動錶格佈局VS固定表格佈局：
1.自動錶格佈局
1.單元格的大小會適應內容
2.表格複雜時，加載速度較慢（缺點）
3.自動錶格佈局會比較靈活（優勢）
4.適用於不肯定每列大小時使用
2.固定表格佈局
1.單元格的尺寸取決於設定的值
2.任何狀況下都會加載顯示錶格（優勢）
3.適用於肯定每列大小時使用
4.固定表格佈局不夠靈活（缺點）
11.定位-浮動定位
1.定位
定位：指的是改變元素在頁面中的默認位置
2.定位的分類
按照定位的效果，能夠分紅如下幾類： 1.普通流定位（默認的定位方式） 2.浮動定位 3.相對定位 4.絕對定位 5.固定定位
3.定位詳解
1.普通流定位
又稱爲文檔流定位，頁面中元素的默認定位方式
1.每一個元素在頁面中都有本身的空間
2.每一個元素默認都是在其父元素的左上角開始顯示
3.頁面中的塊級元素都是從上往下排列，每一個元素獨佔一行
4.頁面中的行內元素以及行內塊都是按照從左到右的順序來排列的
要解決的問題：讓多個塊級元素在一行中顯示
2.浮動定位
1.什麼是浮動&特色
1.元素一旦浮動起來，將不佔據頁面空間（脫離了文檔流），其它未浮動元素將上前補位。
2.浮動元素會停靠在父元素的左邊或右邊，或其它已經浮動的元素的邊緣上。
3.浮動定位解決的問題：可以讓多個塊級元素在一行中顯示。
2.語法
屬性：float
取值：
1.left
左浮動，讓元素停靠在父元素的左邊或挨着左側已經浮動的元素
2.right
右浮動，讓元素停靠在父元素的右邊或挨着右側已經浮動的元素
3.none
默認值，即無任何浮動效果
12.浮動引起的特殊效果
1.元素一旦浮動起來之後就會變成塊級元素
容許修改尺寸 能正常處理垂直方向外邊距
2.當父元素顯示不下全部已浮動元素時，最後一個將換行，可是，有可能被卡住；
3.元素一旦浮動起來後，寬度將之內容爲主（未指定寬度狀況下）；
4.文本，行內元素，行內塊元素是採用環繞的方式來排列的，是不會別浮動元素壓在底下的，而會巧妙的避開浮動元素。
13.清除浮動帶來的影響
元素一旦浮動起來以後，就會對後續元素帶來必定的位置影響（後續元素要上前補位），若是後續元素不想被影響（不想補位），那麼就能夠經過清除浮動的方式來解決
屬性：clear
取值：
1.left 清除當前元素前面的元素左浮動所帶來的影響 2.right 清除當前元素前面的元素右浮動所帶來的影響 3.both 清除當前元素前面元素任何一種浮動所帶來的影響 4.none 默認值，不作任何的清除浮動操做
14.浮動元素對父元素高度的影響
1.元素的高度都是以未浮動元素的高度爲準的，浮動元素是不佔頁面的高度的
解決父元素的高度方案以下：
1.直接設置父元素的高度
弊端：不是每次都知道父元素的高度
2.設置父元素也浮動
弊端：不是任什麼時候候父元素都須要浮動，並且浮動會影響後續元素
3.爲父元素設置overflow
取值：hidden或auto
弊端：若是有內容須要溢出顯示的話，也會一同被隱藏
4.在父元素中，追加空子元素(塊級)，並設置其clear:both;
15.顯示
1.顯示方式
1.什麼是顯示方式
決定了元素在網頁中的表現形式（塊級，行內，行內塊）
2.語法
屬性：display
取值：
1.none 不顯示元素-隱藏
特色：脫離文檔流，不佔據頁面空間
2.block
讓元素表現的和塊級元素一致
特色：
獨佔一行，但是修改高寬
3.inline
讓元素表現的和行內元素一致
特色：
不容許修改尺寸
多個元素在一行中顯示
沒法設置垂直外邊距
4.inline-block
讓元素表現的和行內塊元素一致
特色：
多個元素在一行中顯示，可是能夠修改尺寸
5.table
讓元素表現的與表格一致
特色：
尺寸之內容爲準
每一個元素獨佔一行
容許修改尺寸
2.顯示效果
1.顯示/隱藏
屬性：visibility
取值：
1.visible:默認值，元素可見
2.hidden:元素不可見-隱藏
面試：display:none和visibility:hidden的區別
display:none 不佔頁面空間
visibility:hidden 佔頁面空間
2.透明度
屬性：opacity
取值：0.0（徹底透明）~1.0（徹底不透明）之間的小數
3.垂直方向對齊方式
屬性：vertical-align
場合：
1.表格中使用
取值：top/bottom/middle
2.圖片（img）中使用
取值：
top：上
bottom：下
middle：中間
baseline:基線對齊，默認值
16.光標
1.做用
改變鼠標懸停在元素上時，鼠標的狀態
2.語法
屬性：cursor
取值：
1.default: 默認
2.pointer: 小手
3.crosshair: +
4.text: I
5.wait: 等待
6.help: 幫助
練習：
新建一個div元素，當鼠標移入到div上時，讓光標變成小手狀態。
17.列表
1.列表項標記
屬性：list-style-type 取值： 1.none 2.disc 3.circle 4.square
2.列表項圖像
做用：使用自定義圖像做爲列表項標識 屬性：list-style-image 取值：url(圖像路徑);
3.列表項位置
做用：將默認的列表項標識的位置，放到li裏面 屬性：list-style-position 取值： 1.outside 默認值，將標識顯示在li外面的 2.inside 將標識放於li裏面
4.列表屬性簡寫
屬性：list-style 取值：type url() position; 經常使用方式：list-style:none; 列表的使用場合： 橫向排列或縱向排列的內容，均可以使用列表來實現。
18.定位
相對定位，絕對定位，固定定位
1.定位相關屬性
屬性：position 取值： 1.static:靜態，默認值 2.relative:相對定位 3.absolute:絕對定位 4.fixed:固定定位
2.偏移屬性
top/bottom/left/right 以上四個屬性的取值均爲數字 ex: top:150px 元素向下移動150px left:20px 元素向右移動20px right:-150px 元素向右移動150px 注意： 只有已定位元素才能使用偏移屬性
3.定位詳解
1.相對定位
1.什麼是相對定位
元素相對於它原來的位置偏移某個距離
2.使用場合
作元素位置微調時使用
3.語法
position:relative;
配合偏移屬性來實現位置的移動
left:10px;
top:10px;
2.絕對定位
1.什麼是絕對定位&特色
1.絕對定位的元素會脫離文檔流-不佔頁面空間
2.絕對定位的元素會相對於離他最近的，已定位的，祖先元素 去實現位置的初始化。
3.若是沒有已定位的祖先元素，那麼該元素就相對於body去實現位置的初始化
4.配合偏移屬性 實現元素位置的修改
2.語法
position:absolute;
配合偏移屬性實現位置的修改
3.使用場合
1.有堆疊效果的元素
2.彈出菜單
4.注意：
1.脫離文檔流-不佔據頁面空間
2.絕對定位元素會變成塊級元素
5.堆疊順序
一旦元素變爲已定位元素的話，元素們則有可能出現堆疊的效果
屬性：z-index
取值：無單位的數字，數字越大越靠上
注意：
1.只有已定位元素才能實現堆疊順序的改變（z-index）
2.父子元素間，z-index無效，永遠都是子元素壓在父元素上方
3.固定定位
1.什麼是固定定位
將元素固定在網頁的某個位置處，位置不會隨着滾動條而發生改變，固定在可視區域中。
2.語法
position:fixed;
配合偏移屬性使用
注意：
1.固定定位的元素永遠都是相對於body去實現位置的初始化和偏移。
2.固定定位的元素會變成塊級元素
3.固定定位元素會脫離文檔流-不佔頁面空間
相關文章
- 1. 前端知識點總結——CSS
- 2. 前端知識點總結（CSS篇）
- 3. 前端知識點總結
- 4. 前端知識點 總結
- 5. 前端知識總結（二）--CSS相關
- 6. 前端知識總結（HTML CSS Javascript）
- 7. 前端知識--CSS常用篇總結
- 8. 前端知識總結值CSS
- 9. 前端知識的總結（HTML+CSS+JavaScript）
- 10. css小知識點總結
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 算法總結-雙指針
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端知識點總結——CSS
- 2. 前端知識點總結（CSS篇）
- 3. 前端知識點總結
- 4. 前端知識點 總結
- 5. 前端知識總結（二）--CSS相關
- 6. 前端知識總結（HTML CSS Javascript）
- 7. 前端知識--CSS常用篇總結
- 8. 前端知識總結值CSS
- 9. 前端知識的總結（HTML+CSS+JavaScript）
- 10. css小知識點總結