前端之display 总结与浮动

Posted 2021-01-26 zuanzuan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端之display 总结与浮动相关的知识，希望对你有一定的参考价值。

前端之浮动布局、清浮动

display 总结

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>display 总结</title>
    <style type="text/css">
        /*1. 同行显示，就相当于纯文本，当一行显示不下，那么显示不下的（字）就会自动换行，和纯文本的区别就是有标签整体的概念，标签与标签间有一个空格的隔断*/
        /*2. 支持部分 css 样式，不支持宽高 | 不支持行高，行高会映射到父级 block 标签 | 不支持 margin 上下*/
        /*3. content 由文本内容撑开*/
        /*4. inline 标签只嵌套 inline 标签*/
        abc {
            display: inline;
            background-color: orange;
            width: 200px;
            height: 200px;
            /*line-height: 300px;*/
            margin-top: 30px;
            margin-bottom: 30px;
        }
    </style>
    <style type="text/css">
        /*1. 同行显示，就相当于纯文本，标签会作为一个整体换行显示*/
        /*2. 支持所有 css 样式，*/
        /*3. content 默认由文本（图片）内容撑开，也可以自定义宽高，当自定义宽高后一定会采用自定义宽高（显示区域不足，内容会在标签内部换行显示，可能超出显示区域）*/
        /*4. inline-block 标签不建议嵌套任意标签*/
        .d2 {
            background: pink;
        }
        def {
            display: inline-block;
            background: blue;
            width: 200px;
            height: 200px;

        }
    </style>
    <style type="text/css">
        /*1. 异行显示，不管自身区域多大都会独占一行*/
        /*2. 支持所有css 样式，*/
        /*3. width默认继承父级，height由内容（文本、图片、子标签）撑开，当设置自定义宽高后一定采用自定义宽高*/
        /*4. block 标签可以嵌套任意标签*/
        .d3 {
            background: brown;
        }
        opq {
            display: block;
            background: cyan;
            width: 20px;
            height: 20px;

        }
    </style>
</head>
<body>
    <div class="d2">
        <abc> 自定义标签</abc>
        <abc> 自定义标签</abc>
        <abc> 自定义标签</abc>
    </div>
    <div class="d2">
        <def>自定义标签</def>
        <def>自定义标签</def>
        <def>自定义标签</def>
    </div>
    <div class="d3">
        <opq>自定义标签</opq>
        <opq>自定义标签</opq>
        <opq>自定义标签</opq>
    </div>

    <!-- inline-block 不建议作为结构|布局层理由 -->
    <style type="text/css">
        xyz {
            display: inline-block;
            width: 200px;
            height: 200px;
            background: yellow;
        }
        xyz {
            /*文本垂直方向控制属性*/
            vertical-align: top;
        }
        .x2 {
            line-height: 200px;
        }
    </style>
    <div class="d4">
        <xyz class="x1">一段文本</xyz>
        <xyz class="x2">两段文本</xyz>
        <xyz class="x3">三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本</xyz>
    </div>
</body>
</html>

overflow在处理超出内容中的应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
    <style type="text/css">
        div {
            width: 50px;
            height: 100px;
        }
        .d1 {
            background: red;
        }
        .d2 {
            background: orange;
        }
        .d2 {
            /*margin-top: -50px;*/
        }
    </style>
    <style type="text/css">
        .b1 {
            background: yellow;
            /*overflow:处理内容超出盒子显示区域*/
            /* auto：自适应，内容超出，滚动显示超出部分，不超出则正常显示*/
            /*scroll：一直采用滚动方式显示*/
            /*overflow: scroll;*/

            /*hidden：隐藏超出盒子显示范围的内容*/
            overflow: hidden;
        }
        /*注：根据文本的具体超出范围，横向纵向均可能出现滚动条*/
        .b2 {
            background: cyan;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <!-- 文本层要高于背景层 -->
    <div class="d1">我是文本我是</div>
    <div class="d2">我是文本我是</div>

    <!-- 问题：内容（文本、图片、子标签）会超出盒子的显示区域 -->
    <div class="b1">我是文本我是我是文本我是我是文本我是我是文本我是我是文本我是</div>
    <div class="b2">sdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdfsdfsafafasdfafasdf</div>
</body>
</html>

浮动

浮动布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style type="text/css">
        .temp {
            width: 200px;
            height: 200px;
            background: orange;
            /*Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。*/
            margin-right: 100px;
            float: right;

        }
        /*<!-- float：浮动布局，改变 bfc 的参照方位，就可以改变盒子的排列方式 -->*/
        /*<!-- 为什么要使用：块级盒子就会同行显示 -->*/
        /*float: left | right*/
        .box {
            width: 100px;
            height: 100px;
            background: orange;
            font: 900 40px/100px ‘STSong‘;
            text-align: center;
        }
        .box:nth-child(2n) {
            background: red;
        }
        .box {
            float: left;
        }
        /*注：浮动布局的横向显示范围由父级width 决定，当一行显示不下时会自动换行，排列方式（起点）还是遵循 BFC 参照方位 => 固定了父级width 也就固定了浮动布局的行数*/
        </style>

</head>
<body>
    <div class="temp"></div>
    <div class="wraper">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
    </div>
</body>
</html>

清浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>清浮动</title>
    <style type="text/css">
        .outter {
            /*height: 200px;*/
            background: orange;
        }
        /*清浮动：让父级（有浮动子级）获得一个合适的高度*/

        /*子标签设置浮动 => 导致子标签不完全脱离文档流*/
        /*脱离文档流：产生了新的 BFC，（不再关联父级宽高）*/
        /*浮动的子级，默认不会获取父级宽度，也不会撑开父级高度*/
        /*不完全：父级在做清浮动操作后，可以重新被子级撑开高度*/

        /*当父级没有下兄弟标签可以不做清浮动，但清浮动操作应该在每一次发生浮动后均需要处理*/
        .inner {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
            border-radius: 50%;
        }
        /*清浮动操作*/
        .outter:after {
            content: ‘‘;
            display: block;
            clear: both;
        }
        .box {
            width: 200px;
            height: 200px;
            background: cyan;
        }
    </style>
    <style type="text/css">
        /*盒子先加载 before，在加载自身（文本、图片、子标签），最后加载after*/
        .div:before {
            content: ‘123‘;
        }
        .div:after {
            content: ‘456‘;
        }
    </style>
</head>
<body>
    <!-- 清浮动：清除浮动导致的布局问题 -->
    <div class="outter">
        <div class="inner"></div>
    </div>
    <div class="box"></div>
    <div class="div">原文本</div>
</body>
</html>

清浮动方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>清浮动方式</title>
    <style type="text/css">
        .sub, .box {
            width: 200px;
            height: 200px;
            background: orange;
        }
        .box {
            background: red;
        }
        .sub {
            float: left;
        }
        /*1. 设置死高度*/
        .sup {
            /*height: 200px;*/
        }
        /*2. overflow*/
        .sup {
            background: cyan;
            overflow: hidden;
        }
        /*3. 兄弟标签清浮动*/
        .box {
            /*clear: left;*/
            clear: both;
        }
        /*4. 伪类清浮动*/
        .sup {
            content: ‘‘;
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 清浮动：使父级获取一个合适高度 -->
    <!-- 通常情况下在子级浮动，父级不会被撑开高度在该问题发生之后做清浮动操作 -->
    <!-- 在发生浮动之前，可以通过设置父级的高度来避免浮动问题。-->
    <div class="sup">
        <div class="sub"></div>
    </div>
    <div class="box"></div>
    <style type="text/css">
        .bb {
            width: 100px;
            /*手动设置了死高度，才会产生超出高度的内容为无用内容*/
            /*height: 50px;*/
            background: pink;
            overflow: hidden;
        }
    </style>
    <div class="bb">hao</div>
</body>
</html>

总结

一 display 总结

/* inline */
        /*1. 同行显示，就相当于纯文本，当一行显示不下，那么显示不下的（字）就会自动换行，和纯文本的区别就是有标签整体的概念，标签与标签间有一个空格的隔断*/
        /*2. 支持部分 css 样式，不支持宽高 | 不支持行高，行高会映射到父级 block 标签 | 不支持 margin 上下*/
        /*3. content 由文本内容撑开*/
        /*4. inline 标签只嵌套 inline 标签*/

/* inline-block */
        /*1. 同行显示，就相当于纯文本，标签会作为一个整体换行显示*/
        /*2. 支持所有 css 样式，*/
        /*3. content 默认由文本（图片）内容撑开，也可以自定义宽高，当自定义宽高后一定会采用自定义宽高（显示区域不足，内容会在标签内部换行显示，可能超出显示区域）*/
        /*4. inline-block 标签不建议嵌套任意标签*/

/* block */
        /*1. 异行显示，不管自身区域多大都会独占一行*/
        /*2. 支持所有css 样式，*/
        /*3. width默认继承父级，height由内容（文本、图片、子标签）撑开，当设置自定义宽高后一定采用自定义宽高*/
        /*4. block 标签可以嵌套任意标签*/

二 overflow 知识

/* overflow：处理内容超出盒子显示区域 */
overflow: auto | scroll | hidden
        /*overflow:处理内容超出盒子显示区域*/
        /* auto：自适应，内容超出，滚动显示超出部分，不超出则正常显示*/
        /*scroll：一直采用滚动方式显示*/
        /*overflow: scroll;*/

        /*hidden：隐藏超出盒子显示范围的内容*/
        /*注：根据文本的具体超出范围，横向纵向均可能出现滚动条*/

三浮动布局

/*float：浮动布局，改变 bfc 的参照方位，就可以改变盒子的排列方式 */
/*为什么要使用：块级盒子就会同行显示 */

float: left | right; 左 | 右 浮动
/*left: BFC 参照方向从左向右*/
/*right: BFC 参照方向从右向左*/

/*浮动的区域由父级的 width 决定*/

四清浮动

浮动问题：子级浮动了，不再撑开父级的高度，那么父级如果拥有兄弟标签可能就会出现布局重叠
清浮动：解决上面的问题，通过使父级获取一个合适的高度，这样子级就不会和父级的兄弟布局发生重叠
清浮动的本质是：left | right | both

/* 清浮动的四种方式*/
1. 设置腹肌的死高度
2. 通过兄弟设置 clear: both
3. 设置父级 overflow 属性为 hidden
    .sup {
        overflow: hidden;
    }
4. 通过父级: after 伪类
    .sup {
        content: ‘‘;
        display: block;
        clear: both;
    }

以上是关于前端之display 总结与浮动的主要内容，如果未能解决你的问题，请参考以下文章

前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度

HTML|CSS之布局相关总结?

2018.12.8浮动布局,display总结,overflow,清浮动

前端笔记十一，盒模型与布局相关属性

黑马程序员前端-CSS之浮动知识点汇总

前端实践总结