欢迎光临
我的个人博客网站

【前端】CSS3学习笔记(四)——浮动


✨课程链接

【狂神说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>&nbsp;方向不可以控制</li>             <li>float<br>&nbsp;浮动起来的话会脱离标准文档流</li>         </ul>     </div>  </body> </html> 

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14981128.html

版权所有,如需转载请注明出处。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 【前端】CSS3学习笔记(四)——浮动
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏