浮動定位
分類
- 普通流定位
- 浮動定位
- 相對定位
- 絕對定位
- 固定定位
普通流定位
- 每個元素在頁面上都有自己的空間
- 每個元素都是從父元素的左上角開始繪制
- 塊級元素按照從上往下的順序，逐行排列，每個元素獨占一行
- 行内/行内塊，多個元素在一行中，從左往右顯示
浮動定位
讓塊級元素橫向顯示
float: none/ left/ right
元素浮動：
-
脫離文檔流(頁面不占空間，後續元素上前補位)
2. 在目前行，向左/右對齊，如果之前有其他浮動元素，停靠其他浮動元素的後面
浮動元素的特點
- 元素一旦浮動，不占頁面空間，後續元素上前補位
- 浮動元素停靠在父元素的左/右邊緣,或者其他已浮動元素的後面
- 父元素橫向顯示不下所有浮動元素，會把顯示不下的部分擠下去
- 塊級元素橫向顯示，靠浮動解決
浮動元素引發的特殊效果
浮動元素占位問題
當父元素橫向顯示不下所有元素時，顯示不下的元素會換行。
但是,已浮動會根據自己的浮動方向占據位置。導緻被擠下去的元素會繞開被占據的位置顯示。
.浮動元素，如果沒有定義寬度，最後的寬度是靠内容撐開
元素一旦浮動之後，都會變成塊級(設定寬高，垂直外邊距有效)
文本，行内元素，行内塊，不會被浮動元素壓在下面，而是巧妙的繞開，環繞着浮動元素顯示
清除浮動
清除之前浮動元素帶來的影響
就是本元素不上前補位
clear:left
right
both
高度坍塌
發生高度坍塌的原因
父元素不設定高度，高度靠内容撐起
所有子元素都浮動，父元素認為頁面上沒内容
高度就為0；
解決高度坍塌
- 給父元素設定高度，很多時候，事先不知道明确的高度
- 父元素也浮動，不過會給父元素的兄弟元素帶來影響
- overflow:hidden;
- 父元素内，追加一個空的div，隻設定clear:both
顯示方式
顯示方式
塊級，行内，行内塊，table
絕對元素在網頁中的表現形式
display: inline; 行内
block 塊級
inline-block 行内塊
table 讓元素的顯示方式變為table方式
none 脫離文檔流的隐藏
顯示效果
visibility:visible 顯示，預設值
hidden 不脫離文檔流隐藏
透明度
opacity: 0~1;
rgba隻會改變目前顔色的透明度
opacity,元素内部所有與元素相關的，透明度都會跟着改變
垂直對齊
使用場景
tr/td/th vertical-align:top/middle/bottom
img vertical-align:top/middle/bottom/baseline（預設）
給img設定垂直對齊，改變的是img前後文本的位置
一般，我們會把img的vertical-align，設定成非baseline
光标的設定
這個光标特效有很多，以下展示的用的最多
cursor：default 預設箭頭
pointer 小手
text 文本
wait 等待
crosshair 十字
help 幫助
清單的樣式
- 設定清單辨別項
list-style-type:none;
disc
circle
square
- 把清單項，設定成圖檔
- 清單項的位置
list-style-position：inside/outside（預設）
- 簡寫方式
list-style:type img position;
list-style:none;
定位
position：
取值 static 預設預設值，靜态(預設文檔流)
relative 相對定位
absolute 絕對定位
fixed 固定定位
注意：
1.當一個元素被position修飾，并且取值為relative/absolute/fixed其中一種時，這個元素被稱為已定位元素
2.已定位元素，解鎖4個偏移屬性
top 距離上方有多遠 + ↓，- ↑
left 距離左邊有多遠 + →，- ←
right
bottom
附加屬性發生沖突，應用top和left
相對定位
position：relative； 4個偏移屬性
- 元素隻添加position:relative，不寫偏移量，對周圍其他元素沒有任何影響。(跟沒寫relative一樣)
- 相對定位，沒有脫離文檔流
-
相對自己原來位置做偏移
使用場合：
- 做元素的微調(類似于margin的效果)
- 通常作為絕對定位元素的已定位祖先元素使用
絕對定位
position:absolute；配合偏移量使用
- 絕對定位的元素，脫離文檔流
-
當祖先級元素，沒有已定位元素，相對于body左上角偏移
絕對定位的元素會相對，離自己“最近的”“已定位的”“祖先”元素的左上角偏移
注意：relative通常作為絕對定位元素的已定位祖先元素使用
堆疊順序
如果不設定堆疊順序，最後一個元素堆疊順序最高(html的最後)
z-index: 無機關的整數
數字越大，堆疊順序越高，理論上最大是21億多
預設的堆疊順序，不大于1
定位的脫離文檔流，和浮動的脫離文檔流不是一個體系
隻有對已定位的元素，才能使用z-index
堆疊順序對于父子無效，兒子永遠站在爹肩膀上
固定定位
position：fixed;
配合偏移量使用
永遠相對body定位
練習的代碼，希望可以幫到您，一起學習。
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1,#d2{
width:200px;height:200px;
border:2px solid #f00;
margin-top:20px;
display:block;}
#d1{visibility:hidden;}
a{
width:200px;height:200px;
border:2px solid #f00;
}
#a1{display:block;}
#a2{display:inline-block;margin-top:20px;}
#d3{display:table;}
#a4{display:none;}
#d3{
width:200px;height:200px;
background:#00f;
opacity:.1;}
#d33{
width:100px;height:100px;
background:#f00;
}
ul{
list-style-type:none;
list-style-image:url(true.png);
list-style-position:inside;
}
</style>
</head>
<body>
<h3>清單的樣式</h3>
<ul>
<li>梅菜扣肉</li>
<li>西湖醋魚</li>
<li>龍井蝦仁</li>
<li>羊肉泡馍</li>
<li>蔥燒臭鳜魚</li>
</ul>
<br>
<hr>
<h3>透明度</h3>
<div id="d3">
<div id="d33"></div>
</div>
<br>
<hr>
<h3>元素的顯示方式</h3>
<a href="" id="a1">變成塊級</a>
<a href="" id="a2">變成行内塊</a>
<a href="" id="a3">變成table</a>
<a href="" id="a4">none</a>
<div id="d1">dddddd111</div>
<div id="d2">dddddd222</div>
</body>
</html>
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1{
width:1004px;
background-color:#f3f3f3;
margin:0 auto;
padding:0;
}
#d2{
clear:both;
}
li{
float:left;list-style:none;margin: 0 93px;
}
</style>
</head>
<body>
<div>
<ul id="d1">
<li>
<img src="icon1.png" alt="">
<p>品質保障</p>
</li>
<li>
<img src="icon2.png" alt="">
<p>私人訂制</p>
</li>
<li>
<img src="icon3.png" alt="">
<p>學院特供</p>
</li>
<li>
<img src="icon4.png" alt="">
<p>專屬特權</p>
</li>
</ul>
<div id="d2"></div>
</div>
</body>
</html>
學到這裡的同學别着急，既然你可以看到這裡，後續會有更好玩的知識在等着您。
![CSS的僞類與僞元素的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)