美文网首页
盒子模型---塌陷及定位

盒子模型---塌陷及定位

作者: 松雪宝宝 | 来源:发表于2018-06-06 19:57 被阅读0次

    （1）高度塌陷:
    在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高
    但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
    由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
    所以在开发中一定要避免出现高度塌陷的问题,
    我们可以将父元素的高度写死，以避免塌陷的问题出现，
    但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style type="text/css">
        .box1{
            border: 10px red solid;
            height: 100px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
        .box3{
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">a</div>
    </div>
    <div class="box3"></div>
</body>
</html>

    (2)高度塌陷2:
    根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的
    当开启元素的BFC以后，元素将会具有如下的特性：
    1.父元素的垂直外边距不会和子元素重叠
    2.开启BFC的元素不会被浮动元素所覆盖
    3.开启BFC的元素可以包含浮动的子元素
    如何开启元素的BFC
    1.设置元素浮动
    - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
    2.设置元素绝对定位
    3.设置元素为inline-block
    - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
    4.将元素的overflow设置为一个非visible的值
    推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
    但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6
    在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
    开启方式很多，我们直接使用一种副作用最小的：
    直接将元素的zoom设置为1即可

            zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
        zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
        zoom这个样式，只在IE中支持，其他浏览器都不支持

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style type="text/css">
        .box1{
            border: 10px red solid;
            /*height: 100px;*/
            /*display: inline-block;*/
            overflow: auto;
            zoom: 1;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
        .box3{
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">a</div>
    </div>
    <div class="box3"></div>
</body>
</html>

    (3)导航条;
    在IE6中，如果为元素指定了一个宽度，则会默认开启hasLayou

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0;
        }
        .nav{
            list-style: none;
            background: red;
            width: 1000px;
            margin: 50px auto;
            overflow: auto;
        }
        .nav li{
            float: left;
            width: 25%;
        }
        .nav a{
            display: block;
            width: 100%;
            text-align: center;
            padding: 5px 0;
            text-decoration: none;
            font-weight: bold;
            background: orange;
            color: white;
        }
        .nav a:hover{
            background: red;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</body>
</html>

    (4)清除浮动:
    由于受到box1浮动的影响，box2整体向上移动了100px
    我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
    可选值：
    none，默认值，不清除浮动
    left，清除左侧浮动元素对当前元素的影响
    right，清除右侧浮动元素对当前元素的影响
    both，清除两侧浮动元素对当前元素的影响
    清除对他影响最大的那个元素的浮动

            清除box1浮动对box2产生的影响
        清除浮动以后，元素会回到其他元素浮动之前的位置

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 300px;
            background: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: yellow;
            /*clear: left;*/
            float: right;
        }
        .box3{
            width: 300px;
            height: 300px;
            background: orange;
            clear: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

    (5)解决高度塌陷:
    可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
    这样做和添加一个div的原理一样，可以达到一个相同的效果，
    而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决高度塌陷</title>
    <style type="text/css">
        .box{
            border: 1px solid red;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }
        .box1{
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="box1"></div>
    </div>
</body>
</html>

    (6)解决高度塌陷2:
    在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理
    可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
    这样做和添加一个div的原理一样，可以达到一个相同的效果，
    而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决高度塌陷</title>
    <style type="text/css">
        .box1{
            border: 1px solid red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    
        .clearfix:after{
            /*添加一个内容*/
            content: "";
            /*转换为一个块元素*/
            display: block;
            /*清除两侧的浮动*/
            clear: both;
        }

        .clearfix{
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

    (7)相对定位:
    定位：
    - 定位指的就是将指定的元素摆放到页面的任意位置
    通过定位可以任意的摆放元素
    - 通过position属性来设置元素的定位
    -可选值：
    static：默认值，元素没有开启定位
    relative：开启元素的相对定位
    absolute：开启元素的绝对定位
    fixed：开启元素的固定定位（也是绝对定位的一种）

            当元素的position属性设置为relative时，则开启了元素的相对定位
            1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
            2.相对定位是相对于元素在文档流中原来的位置进行定位
            3.相对定位的元素不会脱离文档流
            4.相对定位会使元素提升一个层级
            5.相对定位不会改变元素的性质，块还是块，内联还是内联当开启了元素的定位（position属性值是一个非static的值）时，可以通过left right top bottom四个属性来设置元素的偏移量
            left：元素相对于其定位位置的左侧偏移量
            right：元素相对于其定位位置的右侧偏移量
            top：元素相对于其定位位置的上边的偏移量
            bottom：元素相对于其定位位置下边的偏移量
        通常偏移量只需要使用两个就可以对一个元素进行定位，
        一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
            position: relative;
            left: 100px;
            top: 100px;
            left: 50px;
        }
        .box3{
            width: 100px;
            height: 100px;
            background: green;
        }
        .s1{
            width: 100px;
            height: 100px;
            background: orange;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span class="s1">as撒</span>
</body>
</html>

    (8)绝对定位:
    当position属性值设置为absolute时，则开启了元素的绝对定位
    绝对定位：
    1.开启绝对定位，会使元素脱离文档流
    2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
    3.绝对定位是相对于离他最近的、开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位，都会同时开启父元素的相对定位）
    如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
    4.绝对定位会使元素提升一个层级
    5.绝对定位会改变元素的性质：
    内联元素变成块元素，
    块元素的宽度和高度默认都被内容撑开

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: yellow;
            position: relative;
            left: 200px;
            top: 0;
        }
        .box3{
            width: 200px;
            height: 200px;
            background: orange;
        }
        .box4{
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
        }
        .box5{
            width: 100px;
            height: 100px;
            background: yellow;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box5">
        <div class="box4">
            <div class="box2"></div>
        </div>
    </div>
    <div class="box3"></div>
</body>
</html>

                                            开班情况

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>近期开班</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font: 12x/1 微软雅黑;
        }
        .box{
            /*border: 1px solid red;*/
            width: 310px;
            margin: 50px auto;
        }
        .box1{
            border-top: 2px #019e8b solid;
            height: 36px;
            background: #f5f5f5;
            line-height: 36px;
            padding: 0px 16px 0px 16px;
        }
        .box1 a{
            float: right;
            color: red;
        }
        .box1 h3{
            font: 16px/36px "微软雅黑";
        }
        .box2{
            border: 1px solid #deddd9;
            padding: 0px 28px 0px 20px;
        }
        .box2 a{
            text-decoration: none;
            font-size: 12px;
            color: black;
        }
        .box a:hover{
            text-decoration: underline;
            color: red;
        }
        .box2 ul{
            list-style: none;
            border-bottom: 1px dashed #deddd9
        }
        .box2 h3{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .box li{
            margin-bottom: 15px;
        }
        .box2 .red-font{
            font-weight: bold;
            color: red;
        }
        .box .ringt{
            float: right;
        }
        .box2 .no-border{
            border: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <a href="#">18年面授开班计划</a>
            <h3>近期开班</h3>
    </div>
    <div class="box2">
        <h3><a href="#">人工智能+Python-高薪就业班</a></h3>
        <ul>
            <li>
                <a class="ringt" href="#"><span class="red-font">预约报名</a></span>
                <a href="#">开班时间:<span class="red-font">2018-04-26</a></span>
            </li>
            <li>
                <a class="ringt" href="#"><span class="red-font">无座,名额饱满</a></span>
                <a href="#">开班时间:<span class="red-font">2018-03-23</a></span>
            </li>
            <li>
                <a class="ringt" href="#">开班盛况</a>
                <a href="#">开班时间:2018-01-23</a>
            </li>
            <li>
                <a class="ringt" href="#">开班盛况</a>
                <a href="#">开班时间:2017-12-20</a>
            </li>
            <li>
                <a class="ringt" href="#">开班盛况</a>
                <a href="#">开班时间:2017-11-18</a>
            </li>
        </ul>
        <h3><a href="#">Android开发+测试-高薪就业班</a></h3>
        <ul>
            <li>
                <a class="ringt" href="#"><span class="red-font">预约报名</a></span>
                <a href="#">开班时间:<span class="red-font">2018-04-26</a></span>
            </li>
            <li>
                <a class="ringt" href="#">开班盛况</a>
                <a href="#">开班时间:2018-03-23</a>
            </li>
            <li>
                <a class="ringt" href="#">开班盛况</a>
                <a href="#">开班时间:2018-01-23</a>
            </li>
            <li>
                <a class="ringt" href="#">开班盛况</a>
                <a href="#">开班时间:2017-12-20</a>
            </li>
        </ul>
        <h3><a href="#">大数据软件开发-青芒工作室</a></h3>
        <ul>
            <li>
                <a class="ringt" href="#"><span class="red-font">预约报名</a></span>
                <a href="#">开班时间:<span class="red-font">2018-04-26</a></span>
            </li>
            <li>
                <a class="ringt" href="#">开班盛况</a>
                <a href="#">开班时间:2018-01-23</a>
            </li>
        </ul>
    </div>
</body>
</html>
    a.gif

    相关文章

      网友评论

          本文标题：盒子模型---塌陷及定位

          本文链接：https://www.haomeiwen.com/subject/nmjisftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|盒子模型---塌陷及定位|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！