目錄錨點
a標籤去下劃線 text-decoration:none; ul中去除li前面的小黑點 list-style:none;
text-align:center(水平居中) ; line-hight:樣式裏的高度(垂直居中); 結合使用(若要圖片居中,給父元素設置水平居中,則其中元素居中 切記不可設置垂直居中,不然影響下面文本佈局都會存在行高的問題)
outline:0; border:0;list-style:none;寫進通配符裏去,設全部樣式
border-radius:50% ;(前提設寬高) 輪播圖下小圓點應用
css reset 樣式重置 和 normalize
不同瀏覽器對元素默認的樣式有很大差異 , 爲了各個瀏覽器樣式的統一 , css reset把元素的特有樣式都清空導致這些元素失去了本來意義, 不管你是不是需要html的原始樣式,都清掉 , 我們可以自已編寫css reset,也可以使用第三方別人寫好的 , 先把所有樣式都清除,讓元素基本都沒有 , 但是需要基本的樣式的時候 , 還得手動添加,浪費資源 *{margin: 0;padding: 0;}屬於最基本的css reset
normalize.css 是一種非常流行的css reset的解決方案 , 保留了很多元素的語義特徵,重寫樣式比較柔和 , 保存了很多默認樣式,提升了css的兼容性,修復了很多不同瀏覽器的bug , BootStrap使用的是normalize
css reset 和 normalize區別,css reset是全部樣式放一起清空 , normalize是一個個慢慢清
超鏈接
href=“http://www.tmooc.cn/” 鏈接的路徑
target="" 指定鏈接的打開方式
_self 默認缺省值,在當前頁面打開
_blank 在新頁面打開鏈接
a標籤的其它表現形式
下載 <a href="1.zip">下載</a>
發送郵件 <a href="mailto:[email protected]">發送郵件</a>
調用js
<a href="javascript:show()">調用js</a>
回到頁面頂部 <a href="#">返回頂部</a>
1.什麼是錨點
錨點,就是頁面中的一個記號
可以通過超鏈接,跳轉回這個記號的位置處
2.使用錨點----定義錨點
①h4的方式 <a name="錨點名稱"></a>
②h5的方式 <any id="錨點名稱"></any>
any:任意元素
3.使用錨點----跳轉錨點
<a href="#錨點名稱">****</a>
文本樣式標記
加粗<b></b> <strong></strong>
斜體<i></i> <em></em>
刪除線<s></s> <del></del>
下劃線<u></u>
h5推薦使用有語義的標籤
<sub></sub> 下標
<sup></sup> 上標
CSS樣式的特徵
①繼承性
大部分的css效果,是可以直接被後代元素繼承的
②層疊性
可以爲一個元素設置多個樣式規則
規則中,屬性不衝突時,都可以作用到當前元素上
③優先級
如果樣式聲明時屬性衝突,按照樣式規則的優先級取應用樣式
默認優先級: 最高 內聯樣式
內部,外部 就近原則(link的編寫位置,決定距離遠近)
最低 瀏覽器默認樣式
④調整優先級
!important 規則
放在屬性值與分號之間,與值之間有空格
如果一個樣式屬性和值帶有!important 不會被其它樣式覆蓋
內聯都不能替代他,
內聯樣式不能添加!important
通用選擇器
*{樣式聲明} ,匹配所有元素
但是由於及其低下.*在項目中使用非常少
*{margin:0;padding:0} 所有元素的內外邊距清空
ps:爲了讓代碼可以適應各個瀏覽器,我們一般在開發前,把默認樣式一次性清空或者統一,不讓不同瀏覽器出現偏差,這個行爲,叫做css reset
元素選擇器,標籤選擇器
設置頁面中所有這個元素的公用樣式
ex:div{樣式聲明} span{樣式聲明}
ID選擇器(專屬定製)
#id值{樣式聲明}
匹配頁面中,對應id的這個元素的樣式
一般id選擇器在項目中不單獨使用
而是作爲後代選擇器或者子代選擇器的開頭部分
#content div>span a:hover{}
類選擇器
定義類選擇器 .類名{樣式聲明}
使用類選擇器
注意:類名的規範:1.聲明的時候,必須寫點,不能省略
2.class調用的時候不能有點
3.類名不能以數字開頭
4.類名中只能有兩種符號 - _
類選擇器的其它使用方式
1.多類選擇器
<any class="類名1 類名2 類型3......">
2.分類選擇器
元素選擇器.類名{樣式聲明}
匹配具體某一個元素,同時這個元素引用這個類名
3.分類選擇器
.類名1.類名2{樣式聲明}
同一個標籤,引用了類名1和類名2,就可以應用這個樣式
分類選擇器作用:
1.更精確的找到目標元素
2.提升選擇器的權值
羣組選擇器
將多個選擇器使用,連接,統一定義公共的樣式
legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
後代選擇器
通過元素的後代關係匹配元素
後代:一級或者多於一級的嵌套
div p span{color:red;}
子代選擇器
通過元素的子代關係匹配元素
子代:一級的嵌套
div>p>span{background-color:yellow}
僞類選擇器
匹配元素不同狀態的選擇器
:link 匹配元素未訪問時的狀態
:visited 匹配元素訪問後的狀態
:active 匹配元素激活的狀態
:hover 匹配鼠標懸停到元素上時的狀態
:focus 匹配元素獲取焦點時的狀態
選擇器的權值
權值:標識當前選擇器的重要程度,權值越大,優先級越高
!important >1000
內聯 1000
id選擇器 100
類選擇器 10
僞類 10
元素選擇器 1
*通用選擇器 0
繼承的樣式 無
權值的特點
1.當一個選擇器含有多個選擇器時,需要把所有的選擇器的權值相加,然後比較,權值大的優先顯示
2.權值相同,就近原則
3.羣組選擇器,不相加,各算個的權值
4.內聯樣式中不能添加!important
5.選擇器權值的計算,最終的結果不會超過本身的最大數量級
尺寸屬性
設置元素的寬度和高度
width 寬度 px爲單位的數字,%父元素寬度百分比
height 高度 px爲單位的數字,%父元素寬度百分比
(父元素沒定義高度,%失效)
max-width 最大寬度
min-width 最小寬度
max-height 最大高度
min-height 最小高度
em相對於父元素定義的數值的整倍數
rem相對於html元素定義的數值的整倍數
% 相對於父元素數值的百分比
max-width:100% 代碼元素可以縮放,但是最大寬度不能超過原始尺寸
塊級元素
- 設置寬度有效
- 沒設置寬默認是父元素100%
- 沒設置高默認高靠內容撐開沒內容沒高不顯示
- 4個方向外邊距都有效
行內元素
- 設置寬高無效,自帶寬高屬性的設置有效
- 實際內容是靠內容撐開,沒內容就沒寬高
- 只有左右外邊距有效,上下無效
行內塊元素
- 設置寬高有效
- 默認自帶寬高(不同瀏覽器對input的默認樣式設置差別比較大)
- 4個方向外邊距都有效,但是如果因爲上下外邊距改變了行內塊的位置,那麼同一行的其他行內元素和行內塊元素的位置跟着一起改變
總結:1.所有塊級元素都可以設置寬高 2.所有行內塊默認自帶寬高,也可以設置寬高覆蓋默認寬高 3.多數行內元素設置寬高無效(img除外) 4.屬性帶有寬高的標籤,都可以設置樣式的寬高(img,table)
溢出的處理
overflow屬性寫到父元素裏
當內容較大元素區域較小的時候,會發生溢出,默認是縱向溢出
overflow:visible;溢出部分顯示
overflow:hidden;溢出部分影藏
overflow:scroll;溢出部分顯示縱向滾動條(不管是否溢出都添加滾動條的槽)
overflow-x:scroll overflow-y:scroll 單獨設置x軸y軸的滾動條
overflow:auto;溢出部分顯示縱向滾動條(溢出添加滾動條的槽,不溢出就沒有槽)
如何改成橫向溢出
在寬度比較小的容器內部,添加一個寬度較大的子元素,overflow:scroll給他增加橫向滾動條
邊框的簡寫方式
border:width style color;
width:邊框的粗細,px爲單位的數字
style:邊框的樣式 solid 實線 dotted點虛線 dashed斷線虛線 double雙實線
color:邊框的顏色 transparent 等同於rgba(0,0,0,0)
border-bottom-color:transparent; 透明
最簡方式:border:style; border:0;取消邊框(css中只有數值0可以省略單位 margin:0;)
單邊定義
只設置某一條邊的單邊屬性
border-top:width style color;
border-right:width style color;
border-bottom:width style color;
border-left:width style color;
border-方向:width style color; 方向top/right/bottom/left
單屬性的定義
border- style:solid ;
border- width :2px;
border- color :red;
border-top- color :red;
border-bottom- style :solid;
border-方法-屬性:
圓角 border-radius:以px爲單位的數字 50%圓
border-top-left-radius:左上角 border-radius:0;取消圓角
邊框陰影
box-shadow:h-shadow v-shadow blur spread color
h-shadow: 水平方向的陰影偏移
v-shadow:垂直方向的陰影偏移
blur:陰影模糊距離
spread:陰影大小
color:陰影顏色
最簡方式box-shadow:h-shadow v-shadow;
輪廓 邊框的邊框,繪製於邊框外面的線條,不佔用元素空間
outline:width style color;一般情況下,我們會把輪廓清除 outline:0;
border:0;邊框清除
框模型-----盒子模型
元素在頁面上實際佔地空間的計算方式
默認實際佔地寬度:
左外邊距+左邊框+左內邊距+內容區域寬度+ 右內邊距+右邊框+右外邊距
外邊距margin 改變外邊距,元素有位移效果 外邊距,由於元素位置的微調,精確地關注上外邊距和左外邊距(從元素的左上開始渲染(畫頁面上)) magin-top/left/right/bottom取值:距離哪個距離有多遠, px爲單位 top +↓ ,-↑ left+→,-←
% 上右下左,都是父元素寬度的百分比,跟高度沒有關係
auto 上下外邊距auto無效,只對設置了寬度的元素有效,讓元素在父元素內水平居中
margin:auto; 水平居中
margin:v1;設置四個方向的外邊距
margin:v1 v2 v1:上下 v2:左右 margin:0 auto;上下爲0左右居中水平居中
margin:v1 v2 v3 v1:上 v2:左右 v3:下
margin:v1 v2 v3 v4 上右下左
padding的寫法一樣
外邊距的特殊效果:1 外邊距合併,兩個垂直外邊距相遇時,會合併成一個 ,值以最大的爲準,解決方案:直接寫一個垂直外邊距,一下把數值寫滿
行內元素上下外邊距無效
默認自帶外邊距的元素body 8px h1~h6 p ol dl pre
ul上下16px 左內邊距40
外邊距的溢出
在特殊情況下,爲子元素添加上外邊距,會作用到父元素上(改變子元素上外邊距,父元素跟着子元素一起動)
特殊情況:1.父元素沒有上邊框 2.子元素內容區域的上沿與父元素的上沿重合
解決方案:
1.給父元素添加上邊框,弊端:增加了父元素實際佔地高度
2.設置父元素的內邊距 ,弊端:增加了父元素實際佔地高度
3 .給父元素添加overflow:auto/hidden; 弊端:如果父元素就不能溢出顯示
4. 給父元素添加第一個子元素 ,<table></table>table爲空
外邊距的顏色和使用時機
外邊距是無色透明的 元素位置微調 一組元素之間需要有空隙的時候 可以選擇使用外邊距
padding內邊距
邊框到內容區域的距離,改變內邊距,效果是元素變大,實際寬高沒有改變,元素實際佔地空間變大,內邊距的顏色是元素的背景色,可以改變佔地面積,不能改變內容的實際寬高
取值:px爲單位的數字
%是父元素寬度的百分比
padding沒有auto
什麼時候使用內邊距
1.把元素撐開,讓邊框與內容區域的距離變大
box-sizing: 改變盒子模型的計算方式 給設置百分比的子元素
取值:
1.默認值content-box(設置的width就是content的寬度)默認盒子模型的計算方式:左右外邊距+左右邊框+左右內邊距+width
2.border-box(設置的width就是邊框以內的寬度)設置的width包含padding+border+內容區域,實際佔地寬度的公式 : 左右外邊距+width(width=左右內邊距+左右邊框+內容區域)
box-sizing:border-box;
用於用百分比設置寬度 將左右內邊距 左右邊框 內容區域全放到已設置的百分比裏面去,從而解決父元素擠不下的問題
背景圖平鋪 background-repeat : repeat 默認不平鋪 no-repeat不平鋪 repeat-x x軸平鋪 repeat-y y軸平鋪
背景圖片的定位 background-position: x y;單位px, % (只取一個值的情況下默認是控制x軸,y軸默認居中)
關鍵字 x:left/center/right y:top/center/bottom
background-position:left top; background-position:center center;
背景圖片的尺寸
background-size:
取值:1.一個以px/%爲單位的數字,同時設置寬高 2.兩個以px/%爲單位的數字,分別設置寬高
background-size:cover 要求元素被背景圖完整的充滿 ,如果圖片顯示不全,沒關係(撐滿元素,元素小了則顯示不全)
background-size:contain要求元素內的背景圖片是完整的,如果元素有空白區域,沒關係(顯示完整圖片)
背景圖片的固定
background-attachment:scroll; 默認值 背景圖片隨着頁面滾動條滾動
fixed 背景固定在可視區域內,不隨着滾動條滾動,但是,只會在自己的元素中顯示
如果取值fixed,那麼background-position:就是相對於body定位,不是相對於原來的元素
背景的簡寫方式 background:color img repeat attachment position; 簡寫方式當中沒有background-size
最簡方式:background:color /url;
重寫樣式的時候不要使用簡寫,不然會把其他值覆蓋,要單寫一個屬性
漸變 gradient
多種顏色平緩變化的一種顯示效果,屬性是background-image
控制漸變的主要因素:色標 (一種顏色及其出現的位置) 一個漸變最少兩個色標
漸變的分類 :
線性漸變(以直線的方式來填充漸變色) , background-image:linear-gradient( 方向 , 色標1 , 色標2, … ); (×gradient和括號有空格會導致樣式出不來)
方向:1.關鍵字,寫終點 to top , to right , to bottom , to left
角度: 0deg↑ , 90deg→, 180deg↓ , 270deg←,
色標: 1.顏色+位置% , 2.顏色 平均分配位置 , 3.顏色+px
徑向漸變(以圓形的方式來填充漸變色) , background-image:radial-gradient(半徑 at 圓心 x 圓心 y ,色標…);
注意:色標使用%表示位置,半徑纔有效
圓心取值:
1.關鍵字 x:left/center/right y:top/center/bottom
2.以px爲單位的數字
3.%
重複漸變(將線性漸變和徑向漸變相結合)
background-image : repeating-linear-gradient ( )
background-image : repeating-radial-gradient ( )
瀏覽器兼容問題
編寫兼容ie8.0以下版本瀏覽器的行爲,叫作編寫 css hack
瀏覽器內核 -webkit- chrome/safari , -moz- firefox , -ms- IE ,-o- opera
注意:帶內核寫線性漸變,方向寫起點不能寫終點,不能加 to
background:-webkit-linear-gradient( bottom, #27b0f6,#0aa1ed);
background:-moz-linear-gradient( bottom, #27b0f6,#0aa1ed);
background:-ms-linear-gradient( bottom, #27b0f6,#0aa1ed);
background:-o-linear-gradient( bottom, #27b0f6,#0aa1ed);
文本格式化
1.字體屬性
①字號大小
font-size: 以px/pt/rem/em爲單位的數字
②字體的類型
font-family:
取值:pc中字體庫裏有的字體,如果字體有空格,建議使用""括起來
多個字體系列,使用,分隔
font-family:幼圓,黑體,“mv boli”;
③字體加粗
font-weight:normal bold lighter bolder
無單位的數字,必須是100的整倍數,不能超過1000
400—normal
700—bold
300—lighter
④字體樣式
font-style:normal/italic
⑤小型大寫字母
font-variant:small-caps;
⑥簡寫方式
font:style variant weight size family;
最簡方式font:size family;
文本對齊 text-align:center / justify
text-align:left/center/right/ justify(左右都對齊);
注意 :
塊級居中 margin:0 auto 讓塊級元素自己水平居中 寫進本身
行內和行內塊居中 text-align:center 讓元素內部的子元素(非塊級)水平居中寫進父元素
行高:定義一行文本的高度 . line-height: ; . 特點: 當行高大於文本字號時,文本將在行高的垂直中間顯示
用於文本與容器垂直居中,行高與容器高度值相等,把行高設置爲容器高度,來實現文本相對於容器垂直居中
取值:1.以px爲單位的數字 2.無單位的(整數小數都可以)數字(寫n意味着行高是字數的n倍) bug:折行溢出 所以在文本有多行的情況下不建議使用行高控制垂直居中
文本線條的修飾 text-decoration:underline(下劃線)/overline(上劃線)/line-through(刪除線)/none(去除所有線條);
首行縮進 text-indent: ; 取值以px爲單位的數字
文本陰影
text-shadow:h-shadow v-shadow blur color
h-shadow: 水平方向的陰影偏移
v-shadow:垂直方向的陰影偏移
blur:陰影模糊距離
color:陰影顏色
表格的相關樣式
table設置邊框,只有最外一圈的邊框,裏面沒有,要設置裏的border
th/td尺寸,邊框,字體,文本,內邊距,外邊距失效
垂直對齊方式
vertical-align: top/middle/bottom;
表格特殊表現方式
td中的數據長度少:
table設置的尺寸值大,td設置的尺寸值小,顯示以table設置的爲準
table設置的尺寸值小,td設置的尺寸值大,table寬度以table設置爲準
table高度,以td設置爲準
td中的數據長度多:
table尺寸,以數據的長度爲準
邊框合併
border-collapse:collapse;邊框合併, 默認值separate分離
邊框邊距 border-spacing:; 前提需要邊框是分離狀態border-collapse:separate;
取值, px爲單位的數字
一個值,水平和垂直距離同時設置
兩個值,第一個值水平,第二個是垂直
標題位置
caption-side:top/bottom;
設置表格顯示佈局
table-layout:auto;表格自動佈局 列的尺寸由內容決定,內容比尺寸大,按內容顯示,內容比尺寸小,按尺寸顯示,表格數據預先讀取在內存,再一次性渲染到頁面,慢,效率低 優點表格靈活 用於不確定每列大小不復雜的表格
table-layout:fixed;表格固定佈局 列的尺寸就以設置的尺寸爲準
1.什麼是定位
設置頁面中元素的位置
2.分類
1.普通流定位
2.浮動定位
3.相對定位
4.絕對定位
5.固定定位
3.普通流定位(默認文檔流定位)
1.每個元素在頁面中都佔自己的空間
2.每個元素都是從父元素的左上角開始顯示
3.塊級元素單獨成行,從上往下逐個排列
4.行內元素和行內塊,與其他行內元素和行內塊共用一行
從左往右往右逐個顯示,一行放不下自動換行
浮動
4.浮動定位
讓塊級元素橫向顯示
float:
取值 1.left 左浮動,讓元素浮動後,
停靠父元素的左邊,或者挨着其它已浮動元素
2.right 右浮動,讓元素浮動後,
停靠父元素的右邊,或者挨着其它已浮動元素
3.none 默認缺省值,不做任何浮動,就是默認文檔流
浮動的特點
1.元素一旦浮動,脫離文檔流(不佔頁面空間,後面元素上前補位)
脫離文檔流
- 元素不佔據頁面空間,後面元素上前補位
- 元素一旦脫離文檔流,元素就變爲塊級元素
- 元素脫離文檔流,元素沒有設置寬度,元素的寬度靠內容撐開
2.浮動元素停靠父元素的左邊或者右邊,或者是其它已浮動元素的邊緣
3.父元素橫向顯示不下所有浮動的子元素時,顯示不下的元素會自動換行
4.浮動元素主要解決,多個塊級元素在同一行顯示的問題
5.浮動引發特殊情況
①元素一旦浮動,如果元素沒有定義寬度,那麼元素浮動之後的寬度將以內容爲準
②元素一旦浮動,就會變成塊級元素(允許設置尺寸,垂直外邊距有效)
③浮動元素存在佔位問題
浮動元素會在浮動的方向上佔位,導致被擠下去的元素不能佔用之前浮動元素浮動方向上位置
④天生不被浮動元素壓着
行內元素,行內塊,文本,不會被浮動元素壓在下面
而是環繞着浮動元素顯示
脫離文檔,意味着什麼
1.元素不在文檔流佔位置
2.後續元素上前補位
3.如果沒有設置寬,寬度以內容爲準
4.元素就會變成塊級(設置寬高有效,上下外邊距有效)
清除浮動
清除浮動(清除之前浮動元素帶來的影響(不被浮動元素壓着))
clear: left / right / both
高度坍塌
由於父元素沒有定義高度,內部所有子元素都脫離文檔流,導致父元素認爲在文檔流中沒有子元素的高度了,所以父元素就失去了高度
解決方案:1.給父元素設置高度.弊端:很多時候,不能確定父元素高度
2.父元素也浮動.弊端:父元素浮動會影響父元素的同級元素
3.overflow:hidden/auto
4. 在父元素中,追加一個空的塊級元素,設置clear:both;爲了給父元素一個高度
寫樣式的思路
1.找元素 從外往裏 從左往右 從上往下
2.寫樣式
①寬高,大體位置
②邊框,背景
③文本所有樣式
④微調
顯示方式
display:none 讓元素脫離文檔流隱藏 / block 塊級 / inline 行內 / inline-block 行內塊 / table 表格(把任意元素轉化爲table顯示方式(內容大尺寸小按內容大小))
顯示效果
visibility: 默認值 visible 可見的 hidden 隱藏的
visibility:hidden和display:none的區別
※面試題:visibility:hidden和display:none的區別
CSS Display(顯示) Visibility（可見性）
隱藏一個元素可以通過把display屬性設置爲"none"，或把visibility屬性設置爲"hidden"。但是請注意，這兩種方法會產生不同的結果。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。
display:none脫離文檔流,不佔位置隱藏
visibility:hidden不脫離文檔流,佔着位置隱藏
透明度
opacity:0~1 0 是全透明 1 是不透明
opacity和rgba的區別
※面試題:opacity和rgba的區別
opacity 元素內部所有顏色都會跟着變透明,後代元素受影響
rgba 只改變當前的透明度 √
vertical-align 垂直對齊方式
vertical-align : top / middle / bottom ;
①用在table/th/td中使用,控制table中的內容的垂直對齊方式
vertical-align : top / middle / bottom ;
②img中使用,給圖片設置垂直對齊,圖片本身不動,影響的是圖片前後的文本位置(行內,行內塊)
vertical-align : top / middle / bottom / baseline基線(第三條線)(默認值)
項目中,經常爲圖片設置vertical-align,讓文本不以基線對齊(圖片旁邊有文字時使用)
光標的設置
cursor:default 箭頭
pointer 小手
crosshair +
help 幫助(問號)
text 文本
wait 等待
列表的樣式
①設置列表標識項
list-style-type:disc/circle/square/none;
②標識項設置爲圖片
list-style-image:url(true.png);
③列表項的位置
list-style-position:inside/outside(默認值)
④簡寫方式
list-style:type/url position:
項目中,使用最頻繁的方式 list-style:none;
⑤無序列表在項目中地位和使用方式
ul多用於佈局
定位
定位—相對定位,絕對定位,固定定位
position: static 靜態,默認值,文檔流
relative 相對定位
absolute 絕對定位
fixed 固定定位
注意:
1.一個元素被position修飾,並且取值爲relative/ absolute/ fixed
此元素被稱爲已定位元素
2.一個元素變成已定位元素之後,
解鎖4個偏移屬性
top: 離頂部多遠 + ↓ - ↑
right:
bottom:
left: 離左邊多遠 + → - ←
①相對定位
position:relative;
相對定位不脫離文檔流,對周圍元素的位置沒有任何影響
如果相對定位不寫偏移屬性或者偏移量爲0,效果與沒寫定位一樣
相對自已原來位置做偏移原來的位子不會被佔着(不脫離文檔流)
使用場合
①類似於margin(margin擠開,相對定位覆蓋其他元素),做自身位置的微調
②作爲絕對定位的祖先級已定位屬性(子絕父相,此處多不寫偏移屬性)
偏移屬性的特點: 上下衝突,以top爲準 ; 左右衝突,以left爲準
②絕對定位
position:absolute;
絕對定位脫離文檔流
1.沒有已定位的祖先級元素,相對body左上角偏移
2.相對於,離自己最近的,已定位的,祖先級元素的左上角做偏移
注意:最適合把祖先級變成已定位元素的樣式,relative
③固定定位
position:fixed;
將元素固定在頁面上某個位置,不會隨着滾動條滾動,變化位置
一直固定在可視區域
頂部定位影響下面元素頂部不可見問題解決:下面元素設置magin-top值
堆疊順序
z-index:無單位正整數
注意:
1.定位的堆疊和浮動的脫離文檔流,不是一個體系(都壓着浮動,不管是否設置z-index或設置多少,定位永遠比浮動高)
2.默認,後聲明的定位元素,堆疊順序高,但是不會超過1(默認的所有小於1後寫大點,隨便設置堆疊順序都比默認的高)
3.z-index只對已定位元素生效
4.堆疊順序對父子級元素無效,子元素永遠在父元素的上面