前端之浮動佈局、清浮動
display 總結
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display 總結</title>
<style type="text/css">
/*1. 同行顯示，就至關於純文本，當一行顯示不下，那麼顯示不下的（字）就會自動換行，和純文本的區別就是有標籤總體的概念，標籤與標籤間有一個空格的隔斷*/
/*2. 支持部分 css 樣式，不支持寬高 | 不支持行高，行高會映射到父級 block 標籤 | 不支持 margin 上下*/
/*3. content 由文本內容撐開*/
/*4. inline 標籤只嵌套 inline 標籤*/
abc {
display: inline;
background-color: orange;
width: 200px;
height: 200px;
/*line-height: 300px;*/
margin-top: 30px;
margin-bottom: 30px;
}
</style>
<style type="text/css">
/*1. 同行顯示，就至關於純文本，標籤會做爲一個總體換行顯示*/
/*2. 支持全部 css 樣式，*/
/*3. content 默認由文本（圖片）內容撐開，也能夠自定義寬高，當自定義寬高後必定會採用自定義寬高（顯示區域不足，內容會在標籤內部換行顯示，可能超出顯示區域）*/
/*4. inline-block 標籤不建議嵌套任意標籤*/
.d2 {
background: pink;
}
def {
display: inline-block;
background: blue;
width: 200px;
height: 200px;
}
</style>
<style type="text/css">
/*1. 異行顯示，無論自身區域多大都會獨佔一行*/
/*2. 支持全部css 樣式，*/
/*3. width默認繼承父級，height由內容（文本、圖片、子標籤）撐開，當設置自定義寬高後必定採用自定義寬高*/
/*4. block 標籤能夠嵌套任意標籤*/
.d3 {
background: brown;
}
opq {
display: block;
background: cyan;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="d2">
<abc> 自定義標籤</abc>
<abc> 自定義標籤</abc>
<abc> 自定義標籤</abc>
</div>
<div class="d2">
<def>自定義標籤</def>
<def>自定義標籤</def>
<def>自定義標籤</def>
</div>
<div class="d3">
<opq>自定義標籤</opq>
<opq>自定義標籤</opq>
<opq>自定義標籤</opq>
</div>
<!-- inline-block 不建議做爲結構|佈局層理由 -->
<style type="text/css">
xyz {
display: inline-block;
width: 200px;
height: 200px;
background: yellow;
}
xyz {
/*文本垂直方向控制屬性*/
vertical-align: top;
}
.x2 {
line-height: 200px;
}
</style>
<div class="d4">
<xyz class="x1">一段文本</xyz>
<xyz class="x2">兩段文本</xyz>
<xyz class="x3">三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本</xyz>
</div>
</body>
</html>
overflow在處理超出內容中的應用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
div {
width: 50px;
height: 100px;
}
.d1 {
background: red;
}
.d2 {
background: orange;
}
.d2 {
/*margin-top: -50px;*/
}
</style>
<style type="text/css">
.b1 {
background: yellow;
/*overflow:處理內容超出盒子顯示區域*/
/* auto：自適應，內容超出，滾動顯示超出部分，不超出則正常顯示*/
/*scroll：一直採用滾動方式顯示*/
/*overflow: scroll;*/
/*hidden：隱藏超出盒子顯示範圍的內容*/
overflow: hidden;
}
/*注：根據文本的具體超出範圍，橫向縱向都可能出現滾動條*/
.b2 {
background: cyan;
overflow: scroll;
}
</style>
</head>
<body>
<!-- 文本層要高於背景層 -->
<div class="d1">我是文本我是</div>
<div class="d2">我是文本我是</div>
<!-- 問題：內容（文本、圖片、子標籤）會超出盒子的顯示區域 -->
<div class="b1">我是文本我是我是文本我是我是文本我是我是文本我是我是文本我是</div>
<div class="b2">sdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdf</div>
</body>
</html>
浮動
浮動佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動佈局</title>
<style type="text/css">
.temp {
width: 200px;
height: 200px;
background: orange;
/*Box自身水平方向的位置由margin左或右決定(具體已經參照BFC方位)，屬於同一個BFC的兩個相鄰Box的margin會發生疊加。*/
margin-right: 100px;
float: right;
}
/*<!-- float：浮動佈局，改變 bfc 的參照方位，就能夠改變盒子的排列方式 -->*/
/*<!-- 爲何要使用：塊級盒子就會同行顯示 -->*/
/*float: left | right*/
.box {
width: 100px;
height: 100px;
background: orange;
font: 900 40px/100px 'STSong';
text-align: center;
}
.box:nth-child(2n) {
background: red;
}
.box {
float: left;
}
/*注：浮動佈局的橫向顯示範圍由父級width 決定，當一行顯示不下時會自動換行，排列方式（起點）仍是遵循 BFC 參照方位 => 固定了父級width 也就固定了浮動佈局的行數*/
</style>
</head>
<body>
<div class="temp"></div>
<div class="wraper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</body>
</html>
清浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清浮動</title>
<style type="text/css">
.outter {
/*height: 200px;*/
background: orange;
}
/*清浮動：讓父級（有浮動子級）得到一個合適的高度*/
/*子標籤設置浮動 => 致使子標籤不徹底脫離文檔流*/
/*脫離文檔流：產生了新的 BFC，（再也不關聯父級寬高）*/
/*浮動的子級，默認不會獲取父級寬度，也不會撐開父級高度*/
/*不徹底：父級在作清浮動操做後，能夠從新被子級撐開高度*/
/*當父級沒有下兄弟標籤能夠不作清浮動，但清浮動操做應該在每一次發生浮動後均須要處理*/
.inner {
width: 200px;
height: 200px;
background: red;
float: left;
border-radius: 50%;
}
/*清浮動操做*/
.outter:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
height: 200px;
background: cyan;
}
</style>
<style type="text/css">
/*盒子先加載 before，在加載自身（文本、圖片、子標籤），最後加載after*/
.div:before {
content: '123';
}
.div:after {
content: '456';
}
</style>
</head>
<body>
<!-- 清浮動：清除浮動致使的佈局問題 -->
<div class="outter">
<div class="inner"></div>
</div>
<div class="box"></div>
<div class="div">原文本</div>
</body>
</html>
清浮動方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清浮動方式</title>
<style type="text/css">
.sub, .box {
width: 200px;
height: 200px;
background: orange;
}
.box {
background: red;
}
.sub {
float: left;
}
/*1. 設置死高度*/
.sup {
/*height: 200px;*/
}
/*2. overflow*/
.sup {
background: cyan;
overflow: hidden;
}
/*3. 兄弟標籤清浮動*/
.box {
/*clear: left;*/
clear: both;
}
/*4. 僞類清浮動*/
.sup {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 清浮動：使父級獲取一個合適高度 -->
<!-- 一般狀況下在子級浮動，父級不會被撐開高度在該問題發生以後作清浮動操做 -->
<!-- 在發生浮動以前，能夠經過設置父級的高度來避免浮動問題。-->
<div class="sup">
<div class="sub"></div>
</div>
<div class="box"></div>
<style type="text/css">
.bb {
width: 100px;
/*手動設置了死高度，纔會產生超出高度的內容爲無用內容*/
/*height: 50px;*/
background: pink;
overflow: hidden;
}
</style>
<div class="bb">hao</div>
</body>
</html>
總結
一 display 總結
/* inline */
/*1. 同行顯示，就至關於純文本，當一行顯示不下，那麼顯示不下的（字）就會自動換行，和純文本的區別就是有標籤總體的概念，標籤與標籤間有一個空格的隔斷*/
/*2. 支持部分 css 樣式，不支持寬高 | 不支持行高，行高會映射到父級 block 標籤 | 不支持 margin 上下*/
/*3. content 由文本內容撐開*/
/*4. inline 標籤只嵌套 inline 標籤*/
/* inline-block */
/*1. 同行顯示，就至關於純文本，標籤會做爲一個總體換行顯示*/
/*2. 支持全部 css 樣式，*/
/*3. content 默認由文本（圖片）內容撐開，也能夠自定義寬高，當自定義寬高後必定會採用自定義寬高（顯示區域不足，內容會在標籤內部換行顯示，可能超出顯示區域）*/
/*4. inline-block 標籤不建議嵌套任意標籤*/
/* block */
/*1. 異行顯示，無論自身區域多大都會獨佔一行*/
/*2. 支持全部css 樣式，*/
/*3. width默認繼承父級，height由內容（文本、圖片、子標籤）撐開，當設置自定義寬高後必定採用自定義寬高*/
/*4. block 標籤能夠嵌套任意標籤*/
二 overflow 知識
/* overflow：處理內容超出盒子顯示區域 */
overflow: auto | scroll | hidden
/*overflow:處理內容超出盒子顯示區域*/
/* auto：自適應，內容超出，滾動顯示超出部分，不超出則正常顯示*/
/*scroll：一直採用滾動方式顯示*/
/*overflow: scroll;*/
/*hidden：隱藏超出盒子顯示範圍的內容*/
/*注：根據文本的具體超出範圍，橫向縱向都可能出現滾動條*/
三 浮動佈局
/*float：浮動佈局，改變 bfc 的參照方位，就能夠改變盒子的排列方式 */
/*爲何要使用：塊級盒子就會同行顯示 */
float: left | right; 左 | 右 浮動
/*left: BFC 參照方向從左向右*/
/*right: BFC 參照方向從右向左*/
/*浮動的區域由父級的 width 決定*/
四 清浮動
浮動問題：子級浮動了，再也不撐開父級的高度，那麼父級若是擁有兄弟標籤可能就會出現佈局重疊
清浮動：解決上面的問題，經過使父級獲取一個合適的高度，這樣子級就不會和父級的兄弟佈局發生重疊
清浮動的本質是：left | right | both
/* 清浮動的四種方式*/
1. 設置腹肌的死高度
2. 經過兄弟設置 clear: both
3. 設置父級 overflow 屬性爲 hidden
.sup {
overflow: hidden;
}
4. 經過父級: after 僞類
.sup {
content: '';
display: block;
clear: both;
}