16_display

display代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联，在一行！
    -->
    <style>

        div{
            width: 100px;
            height: 100px;
            border: 5px solid red;
            display: none;
        }
        span{
            width: 100px;
            height: 100px;
            border: 5px solid red;
            display:inline-block;
        }
    </style>
</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

结果展示

 

 

 

浮动代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>


<div id="father">
    <div class="layer1"><img src="images/1.jpg" alt=""></div>
    <div class="layer2"><img src="images/2.jpg" alt=""></div>
    <div class="layer3"><img src="images/3.jpg" alt=""></div>
    <div class="layer4">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包括框或另一个浮动盒子为止。
    </div>

</div>
</body>
</html>

 

style代码

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}
.layer1{
    border: 1px #F00 dashed;
    display: inline-block;
    float: right;/*向右浮动*/
}
.layer2{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;/*向右浮动*/
}
.layer3{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;/*向右浮动*/
}
.layer4{
    /*
    clear:right 右侧不允许右浮动元素
    clear:left  左侧不允许右浮动元素
    clear:both  两侧不允许右浮动元素
    clear:none

    */
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;/*向右浮动*/
}
.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

结果展示

 父级边框塌陷的问题

解决方案
1、增加父级元素的高度
简单，元素假设有了固定的高度，就会被限制
#father{
     border: 1px #000 solid;
     height:1000px;
}
2、增加一个空的div标签，清除浮动
简单，代码中尽量避免空div
<div class="clear" ></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}
3、overflow
简单，下拉的一些场景避免使用
在父级元素中增加一个 overflow:hidden;
4、父类添加一个伪类：after(推荐)
#father:after{
    content: '';
    display: block;
    clear: both;
}
posted @ 2022-08-05 19:30  tuyin  阅读(40)  评论(0)    收藏  举报