阅读模式:

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

阅读量:12  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:✨课程链接【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili✨学习笔记display<!DOCTYPE html><html lang="en"&am......

【前端】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

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

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: