课程链接

【狂神说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

黄山市民网：https://www.huangshanshimin.com/

课程链接

学习笔记

display

float

overflow

对比

⭐转载请注明出处

相关文章