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

Posted 2021-01-26 jutao

tags:

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

一复习上节课内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复习预习</title>
    <style type="text/css">
        .p1 {
            /*margin-top: -5px;*/
        }
        a {
            display: block;
        }
        .p1 a {
            display: inline;
            color: #900b09;
            text-decoration: none;
            /*① 分离下边框与字体文本的间距*/
            /*padding-bottom: 10px;*/
            /*background: orange;*/
            /*②*/
            /*line-height: 30px;*/
            /*display: inline-block;*/
            border-bottom: 1px solid #900b09;
        }
        .p1 a:hover {
            color: #f00;
            border-bottom: 1px solid #f00;
        }
    </style>
    <style type="text/css">
        .s1 a {
            display: inline;
            color: #900b09;
            text-decoration: none;
            border-bottom: 1px solid #900b09;
        }
        .s1 a:hover {
            color: #f00;
            border-bottom: 1px solid #f00;
        }
        .s1 a:not(:first-child) {
            margin-left: 20px;
        }
?
    </style>
    <style type="text/css">
        h3 {
            font-size: 16px;
            margin: 10px 0 0;
        }
        h3 a {
            display: inline;
            color: blue;
            text-decoration: none;
            background: orange;
        }
        h3 a:hover {
            border-bottom: 1px solid blue;
        }
    </style>
</head>
<body>
    <div class="fx">
        <p class="p1">如果您是初学者，请您阅读《<a href="">网站构建初级教程</a>》。</p>
?
        <span class="s1">
            <a href="">参考手册：php Calendar 函数</a>
            <a href="">参考手册：PHP Date / Time 函数 </a>
            <a href="">教程：HTML 教程</a>
        </span>
?
        <h3><a href="">关于 W3School</a></h3>
        <h3><a href="">帮助 W3School</a></h3>
    </div>
?
    <!-- 1.浮动布局 -->
    <!-- 2.清浮动 -->
    <!-- 3.浮动案例 -->
    <!-- 4.浮动在mi的应用 -->
</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可以嵌套任意标签*/

二.1代码演示


<!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: orange;
            /*width: 200px;*/
            /*height: 200px;*/
            /*line-height: 300px;*/
            margin-top: 300px;
            margin-bottom: 300px;
        }
        .d1 {
            background: red;
        }
    </style>
    <style type="text/css">
        /*1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示*/
        /*2.支持所有css样式*/
        /*3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)*/
        /*4.inline-block标签不建议嵌套任意标签*/
        .d2 {
            background: pink;
        }
        def {
            display: inline-block;
            background: blue;
            width: 20px;
            height: 20px;
        }
    </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="d1">
        <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;
        }
        .x1 {
            height: 100px;
        }
        .x2 {
            line-height: 200px;
        }
    </style>
    <div class="d4">
        <xyz class="x1">一段文本</xyz>
        <xyz class="x2">两段文本</xyz>
        <xyz class="x3">三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本</xyz>
    </div>
</body>
</html>

三overflow介绍(超出文本内容滑动显示)


/* 本质 */
/*overflow: 处理内容超出盒子显示区域*/
overflow: auto | scroll | hidden
/*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/
/*scroll: 一直采用滚动方式显示*/
/*hidden: 隐藏超出盒子显示范围的内容*/

三.1代码演示


<!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: cyan;
            /* ***** */
            /*overflow: 处理内容超出盒子显示区域*/
?
            /*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/
?
            /*scroll: 一直采用滚动方式显示*/
?
            /*hidden: 隐藏超出盒子显示范围的内容*/
            overflow: hidden;
        }
?
        /*注: 根据文本的具体超出范围, 横向纵向均可能出现滚动条*/
        .b2 {
            width: 100px;
            background: tan;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <!-- 文本层要高于背景层 -->
    <div class="d1">我是文本我是文本我是文本</div>
    <div class="d2">我是文本我是文本我是文本</div>
?
    <!-- 问题: 内容(文本,图片,子标签)会超出盒子的显示区域 -->
    <div class="b1">我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div>
    <div class="b2">asdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsda</div>
</body>
</html>

四浮动布局介绍


/*float: 浮动布局, 改变BFC的参照方位*/
/*为什么要使用: 使用它, 块级盒子就会同行显示*/
float: left | right;  左 | 右 浮动
/*left: BFC参照方向从左向右*/
/*right: BFC参照方向从右向左*/
/*浮动的区域有父级的width决定*/

四.1代码演示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动布局</title>
    <style type="text/css">
        body {
            /*background: cyan;*/
        }
        .wraper {
            width: 500px;
            height: 100px;
            background: orange;
?
            /*Box自身水平方向的位置由margin左或右决定(具体依据: 参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。*/
            margin-right: 100px;
            float: right;
        }
    </style>
    <style type="text/css">
        /*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: right;
        }
        .box:last-child {
            /*盒模型布局可以在其他布局的基础上进行盒子位置微调*/
            /*margin-left: 10px;*/
        }
        /*注: 浮动布局的横向显示范围由父级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>

5清浮动介绍


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

5.1代码演示


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>清浮动</title>
    <style type="text/css">
        .outer {
            /*height: 200px;*/
            background: orange;
        }
        /*清浮动: 让父级(有浮动子级)获得一个合适的高度*/
?
        /*子标签设置浮动 => 子标签不完全脱离文档流*/
?
        /*脱离文档流: 产生可新的BFC, (不再关联父级宽高)*/
        /*浮动的子级, 默认不会获取父级宽度, 也不会撑开父级高度*/
?
        /*不完全: 父级在做清浮动操作后,可以重新被子级撑开高度*/
?
        /*当父级没有下兄弟标签, 可以不做清浮动操作, 但清浮动操作应该在每一次发送浮动后均需要处理的*/
        .inner {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
            border-radius: 50%;
        }
        /*清浮动操作*/
        .outer:after {
            content: "";
            display: block;
            clear: both;
        }
?
        .box {
            width: 200px;
            height: 200px;
            background: cyan;
            /*margin-top: -200px;*/
        }
    </style>
    <style type="text/css">
        /*盒子先加载:before, 再加载自身(文本,图片,子标签), 最后加载:after*/
        .div:before {
            content: "123"
        }
        .div:after {
            content: "456"
        }
    </style>
</head>
<body>
    <!-- 清浮动: 清除浮动导致的布局问题 -->
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="box"></div>
?
    <div class="div">原文本</div>
</body>
</html>

5.2用清浮动解决的几种方法(总结)


① 设置父级的死高度
② 通过兄弟设置 clear: both
?
③ 设置父级overflow属性
.sup {
    overflow: hidden;
}
?
④ 通过父级:after伪类
.sup:after {
    content: "";
    display: block;
    clear: both;
}

5.2.1代码演示


<!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;
        }
?
        /*① 设置死高度*/
        .sup {
            /*height: 200px;*/
        }
        /*② overflow*/
        .sup {
            /*background: cyan;*/
            /*隐藏无用的内容*/
            /*overflow: hidden;*/
        }
        /*③ 兄弟标签清浮动*/
        .box {
            /*清浮动属性: left | right | both*/
            /*clear: both;*/
        }
        /*④ 伪类清浮动*/
        .sup:after {
            content: "";
            display: block;
            clear: both;
        }
        /*before => 自身(子内容)(会产生问题) => after => 兄弟*/
    </style>
</head>
<body>
    <!-- 清浮动: 使父级获取一个合适高度 -->
    <!-- 通常情况下在子级浮动,父级不会被撑开高度在该问题发生之后做清浮动操作 -->
?
    <!-- 在发生浮动之前, 可以通过设置父级的高度来避免浮动问题 -->
    <div class="sup">
        <div class="sub"></div>
        <!-- <div class="sub"></div>
        <div class="sub" style="height: 300px"></div>
        <div class="sub"></div>
        <div class="sub"></div>
        <div class="sub"></div> -->
    </div>
    <div class="box"></div>
?
    <!-- overflow: hidden -->
    <style type="text/css">
        .bb {
            width: 100px;
            /*手动设置了死高度,才会产生超出高度的内容为无用内容*/
            /*height: 50px;*/
            background: pink;
            overflow: hidden;
        }
    </style>
    <!-- <div class="bb">好的好的好的好的好的好的好的好的好的好的</div> -->
</body>
</html>