【前端】CSS3學習筆記（四）——浮動
阿新 • • 發佈：2021-07-07
✨課程連結
【狂神說Java】CSS3最新教程快速入門通俗易懂_嗶哩嗶哩_bilibili
✨學習筆記
display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- display: block 塊元素 inline 行內元素 inline-block 是塊元素 但是可以內聯 在一行！ none 消失！ --> <!-- 可以實現行內元素排列方式 大部分情況下是使用float--> <style> div{ width: 100px; height: 100px; border: 1px solid red; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div> <p>塊級元素：獨佔一行</p> <p>h1～h6 p div 列表...</p> </div> <div> <p>行內元素：不獨佔一行</p> <p>span a img strong...</p> <p>行內元素可以被包含在塊級元素中 反之不行</p> </div> <div>div塊元素</div> <span>span行內元素</span> </body> </html>
float
div{ margin: 10px; padding: 5px; } #father{ border: 1px black solid; /*overflow: hidden;*/ } #father:after{ content: ''; display: block; clear: both; } .layer01{ background: rebeccapurple; display: inline-block; float: left; } .layer02{ background: red; display: inline-block; float: left; } .layer03{ background: blue; display: inline-block; float: left; /*浮動情況下保持塊元素*/ clear: both; } /* clear right 右側不允許有浮動元素 clear left 左側不允許有浮動元素 clear both 兩側不允許有浮動元素 clear none */ .layer04{ background: yellow; display: inline-block; float: left; clear: both; } .clear{ clear: both; margin: 0; padding: 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="father"> <div class="layer01"><img src="images/1.jpg" alt="">左浮</div> <div class="layer02"><img src="images/2.png" alt="">左浮</div> <div class="layer03"><img src="images/3.png" alt="">左浮</div> <div class="layer04"> 浮動的盒子可以向左浮動 也可以向右浮動 直到它的外邊緣碰到包含框或另一個浮動盒子為止 </div> <!-- <div class="clear"></div>--> <div> <h2>父級邊框塌陷問題</h2> <ul> <li>增加父級元素高度<br>（簡單 元素假設有了固定的高度 就會被限制）</li> <li>增加一個空的div標籤 清除浮動<br>（簡單 程式碼中儘量避免空div）</li> <li>在父級元素中增加一個overflow: hidden;<br>（簡單 下拉的一些場景避免使用）</li> <li>在父類新增一個偽類 after（寫法稍複雜 沒有副作用 推薦使用）</li> </ul> </div> </div> </body> </html>
overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 200px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="content">
<img src="images/1.jpg">
<p>滾動條：overflow: scroll;</p>
</div>
</body>
</html>
對比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div><h2>對比</h2>
<ul>
<li>display<br> 方向不可以控制</li>
<li>float<br> 浮動起來的話會脫離標準文件流</li>
</ul>
</div>
</body>
</html>
⭐轉載請註明出處
本文作者：雙份濃縮馥芮白
原文連結：https://www.cnblogs.com/Flat-White/p/14981128.html
版權所有，如需轉載請註明出處。