前端（五）之display 總結與浮動
阿新 • • 發佈：2018-12-10
otto 滾動條 content border 也不會 flow char 擁有 dfs
前端之浮動布局、清浮動
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;
}前端（五）之display 總結與浮動