HTML+CSS基礎知識個人筆記_6
阿新 • • 發佈：2018-12-02
HTML+CSS基礎知識個人筆記_6
- 1. 清除浮動的四種方法
- 2. 定位
- 2.1 靜態定位（static）
- 2.2 相對定位（relative）
- 2.3 絕對定位（absolute）
- 2.4 固定定位（fixed）
- 2.5 絕對定位（特殊固定）和浮動的隱藏模式轉換
- 2.6 定位z-index疊放順序
- 2.7 經典案例
1. 清除浮動的四種方法
清除浮動的問題來源，就是由於子級元素的浮動導致父級元素的內部高度為0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01 清除浮動的本質.html</title> <style> /*清除浮動的問題來源，就是父級元素因為子級元素的浮動而導致的內部高度為0*/ .father { border: 1px solid red; } .big { width: 200px; height: 200px; background-color: pink; float: left; } .small { width: 100px; height: 100px; background-color: orange; float: left; } .footer { width: 300px; height: 200px; background-color: blue; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> </div> <div class="footer"></div> </body> </html>
1.1 額外標籤法
在最後浮動的一個標籤後面，加上一個額外的標籤，再clear:both;
缺點：結構不好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02 額外標籤法.html</title> <style> /*清除浮動的問題來源，就是父級元素因為子級元素的浮動而導致的內部高度為0*/ .father { border: 1px solid red; } .big { width: 200px; height: 200px; background-color: pink; float: left; } .small { width: 100px; height: 100px; background-color: orange; float: left; } /*清除浮動*/ .clear { clear: both; } .footer { width: 300px; height: 200px; background-color: blue; } </style> </head> <body> <div class="father"> <div class="big"></div> <div class="small"></div> <!-- 在最後浮動的標籤下加一個額外的標籤，然後清除浮動 --> <!-- 缺點：結構不好 --> <div class="clear"></div> </div> <div class="footer"></div> </body> </html>
1.2 overflow清除浮動
在 父級元素 新增overflow hidden scroll auto 皆可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03 overflow清除浮動.html</title>
<style>
/*清除浮動的問題來源，就是父級元素因為子級元素的浮動而導致的內部高度為0*/
/*在 父級元素 新增overflow hidden scroll auto 皆可以 */
.father {
border: 1px solid red;
/*overflow: auto;*/
overflow: hidden;
/*overflow: scroll;*/
}
.big {
width: 200px;
height: 200px;
background-color: pink;
float: left;
}
.small {
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
.footer {
width: 300px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
1.3 after偽元素清除浮動
常用方法：
.clearfix:after { /*正常瀏覽器清除浮動*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie7及以下的版本才會識別*/
}
<!-- 需要清除浮動，就呼叫clearfix -->
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
1.4 雙偽元素清除浮動
.clearfix:before,
.clearfix:after { /*正常瀏覽器清除浮動*/
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*ie7及以下的版本才會識別*/
}
<!-- 需要清除浮動，就呼叫clearfix -->
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
2. 定位
定位，有定位屬性和邊偏移
position： ；
2.1 靜態定位（static）
預設定位，標準流。
2.2 相對定位（relative）
- 以自身為基準
- 脫標，但不完全，會在標準流之上
- 留坑！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06 相對定位.html</title>
<style>
/*定位，有定位屬性和邊偏移*/
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 10px;
}
.two {
background-color: blue;
/*相對定位
1.邊偏移以自身（可以選左上角計算）為基準點，和其他無關
2.邊偏移後，原來所佔位置保留，留坑！*/
position: relative;
width: 140px;
height: 140px;
padding: 30px;
left: 100px;
}
.three {
background-color: orange;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
2.3 絕對定位（absolute）
- 以最近的有定位（相對 絕對 固定）的父級（祖先）元素為基準
- 沒有已定位的父級（祖先），則以瀏覽器首屏為基準
- 完全脫標，在標準流之上
- 不留坑
2.3.1 沒有父級或者父級沒有定位
以瀏覽器首屏為基準
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08 沒有父級或父級沒定位.html</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/*1，絕對定位，不留坑，完全脫標*/
/*2.絕對定位以瀏覽器首屏為基準（沒有父級的情況下）
https://www.cnblogs.com/gchlcc/p/6295199.html*/
.one {
/*position: absolute;*/
/*right: 0;*/
/*bottom: 0*/
margin: 100px;
}
/*3.沒有父級，或者父級沒有定位，以瀏覽器首屏為基準*/
.two {
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
left: 30px;
top: 30px;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
2.3.2 父級有定位
依據最近的已經定位(絕對,相對,固定)的父元素(祖先)進行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08 沒有父級的絕對定位.html</title>
<style>
* {
margin: 0;
padding: 0;
}
/*1，絕對定位，不留坑，完全脫標*/
/*2.絕對定位以瀏覽器首屏為基準（沒有父級的情況下）
https://www.cnblogs.com/gchlcc/p/6295199.html*/
/*3.沒有父級，或者父級沒有定位，以瀏覽器首屏為基準*/
/*4.元素是依據最近的已經定位(絕對,相對,固定)的父元素(祖先)進行定位,注意,父級沒有,再向上找*/
.grandfather {
width: 500px;
height: 500px;
background-color: pink;
margin: 200px;
position: relative;
}
.father {
width: 300px;
height: 300px;
background-color: purple;
position: absolute;
top: 10px;
left: 10px;
}
.son {
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>
2.3.3 子絕父相
常用操作。
要理解透徹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 子絕父相.html</title>
<style>
.father {
width: 450px;
height: 450px;
border: 1px solid red;
margin: 50px auto;
padding: 20px;
position: relative;
}
.rec1-1 {
position: absolute;
top: 0;
left: 0;
}
.rec1-2 {
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="father">
<img src="images/rec2.png" class="rec2" />
<img src="images/rec1.png" class="rec1-1" />
<img src="images/rec1.png" class="rec1-2" />
</div>
</body>
</html>
2.3.4 關於浮動和定位的一點小問題
浮動，蓋不了文字和圖片。
定位可以，定位是脫標的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11 兩個小問題.html</title>
<!-- 1.絕對定位是完全脫標,浮動不是,浮動的話,圖片文字等還是蓋不了 -->
<style>
.one {
width: 300px;
height: 300px;
background-color: pink;
/*浮動,蓋不了文字和圖片*/
/*絕對定位可以,完全脫標*/
/*定位是飄*/
position: absolute;
}
.two {
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="one">123ty</div>
<!-- 浮動,蓋不了文字和圖片 -->
<!-- 定位可以 -->
<!-- <div class="two">asdfsdvfb</div> -->
<div class="two"><img src="images/rec2.png"></div>
</body>
</html>
2.3.5 定位的盒子居中
定位的盒子，使用auto無效（relative在沒有指定水平方向的margin或者為0時，auto任然有效）
浮動也是如此，不過浮動可以加一個父盒子，對父盒子居中，但是麻煩
要理解定位盒子居中的演算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12_定位的盒子居中.html</title>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
/*加了定位 或者 浮動 的盒子,無法在使用auto!*/
/*但是margin依舊可以設定*/
/*float: left;*/
/*position: absolute;*/
/*margin: 50px auto;*/
/*注意,用relative定位時,不指定水平方向的margin或者為0,auto仍然有效*/
/*position: relative;*/
/*top: 30px;*/
/*margin: 50px auto;*/
/*position: absolute;*/
/*水平居中*/
/*left: 50%;*/
/*margin-left: -150px;*/
/*垂直居中*/
/*top: 50%;*/
/*margin-top: -150px;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.4 固定定位（fixed）
是特殊的絕對定位，絕對脫標，不佔坑
但是隻以瀏覽器為基準，與其他無關
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15_固定定位.html</title>
<style>
body {
height: 2000px;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
margin: 50px;
/*position: relative;*/
}
/*固定定位可以理解成特殊的絕對定位，是完全脫標，但是固定定位和父親沒有任何關係，只認瀏覽器，不隨滾動條移動*/
.son {
width: 100px;
height: 100px;
background-color: purple;
position: fixed;
/*top: 100px;*/
left: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<!-- <p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p> -->
</body>
</html>
2.5 絕對定位（特殊固定）和浮動的隱藏模式轉換
絕對定位和浮動都會有inline-block特性，預設寬度為內容的寬度
div {
height: 20px;
background-color: pink;
/*float: left; 浮動，隱藏模式轉換，inline-block，沒有指定寬度，預設內容寬度*/
/*position: relative; 沒有影響*/
/*position: absolute; 絕對定位，inline-block*/
/*position: fixed; 特殊的絕對定位,inline-block*/
}
2.6 定位z-index疊放順序
- z-index只針對定位！！！對其他無效，也無法指定！
- 沒有單位
- 越大，越高
- z-index值一致的時候，後來者居上（後來者是指元素的使用順序）
- 預設為0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18_定位z-index疊放順序.html</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
/*1.定位（絕對 相對 固定）的同時，自動z-index: 0*/
/*2.z越大,定位元素在層疊元素中越高*/
/*3.z-index一樣的時候，後來者居上
(這裡指的不是CSS中的順序，那個是層疊性!這裡指的是標籤的使用順序！！！切記！！！)*/
/*4.z-index不可帶單位*/
/*5.只有定位有此屬性，其餘沒有！亦不可指定該屬性！*/
/*z-index: 0;*/
}
.red {
top: 50px;
left: 50px;
/*z-index: 1;*/
}
.green {
background-color: green;
top: 100px;
left: 100px;
}
.purple {
background-color: purple;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<div class="purple"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
2.7 經典案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19_一個有趣的例子.html</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
div {
/*width: 100%;
position: relative;*/
}
ul {
/*position: absolute;
left: 50%;
margin-left: -498px;*/
width: 1005px;
height: 502px;
margin: 50px auto;
}
div li {
width: 200px;
height: 500px;
border: 1px solid #CCC;
float: left;
margin-left: -1px;
position: relative;
}
div li:hover {
border: 1px solid red;
/*position: relative; 在都是標準流的情況下，使用定位（絕對 相對 固定），可以浮在上面*/
z-index: 1; /*在li中也有定位的時候，在hover裡再用定位，已經無法浮起來了，此時遵循後來者在上，所以要z-index提升疊放順序*/
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>