前端box（盒子）

高度塌陷

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

解决方法1:



根据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中支持，其他浏览器都不支持

解决高度塌陷方法2

解决高度塌陷方案二：
可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构

解决高度塌陷方法3

/*通过after伪类，选中box1的后边*/
        /*
        可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
        这样做和添加一个div的原理一样，可以达到一个相同的效果，
        而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
        
        .clearfix:after{
            /*添加一个内容*/
            content: "";
            /*转换为一个块元素*/
            display: block;
            /*清除两侧的浮动*/
            clear: both;
        }
        /*在IE6中不支持after伪类,所以在IE6中还需要使用hasLayout来处理*/

定位

相对定位

定位：
                - 定位指的就是将指定的元素摆放到页面的任意位置
                    通过定位可以任意的摆放元素
                - 通过position属性来设置元素的定位
                -可选值：
                    static：默认值，元素没有开启定位
                    relative：开启元素的相对定位
                    absolute：开启元素的绝对定位
                    fixed：开启元素的固定定位（也是绝对定位的一种）
            
    
            当元素的position属性设置为relative时，则开启了元素的相对定位
                1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
                2.相对定位是相对于元素在文档流中原来的位置进行定位
                3.相对定位的元素不会脱离文档流
                4.相对定位会使元素提升一个层级
                5.相对定位不会改变元素的性质，块还是块，内联还是内联
            
            positon: relative;
            
            当开启了元素的定位（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{
            height: 200px;
            background-color: red;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
    
            position: relative;

            left: 100px;
            top: 200px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }

        .s1{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <span class="s1">我是一个span</span>
</body>
</html>

决定定位

当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: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
    
            position: absolute;
            /*left: 100px;
            top: 100px;*/
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
        }
        .box4{
            width: 300px;
            height: 300px;
            background-color: orange;
            /*开启box4的相对定位*/
            /*position: relative;*/
        }
        .s1{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*开启绝对定位*/
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box5">
        <div class="box4">
            <div class="box2"></div>
        </div>
    </div>
    <div class="box3"></div>

    <span class="s1">我是一个span</span>
</body>
</html>

固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位
            固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
            不同的是：
                固定定位永远都会相对于浏览器窗口进行定位
                固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

            IE6不支持固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        
            position: fixed;
            left: 0px;
            top: 0px;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body style="height: 5000px;">
    <div class="box1"></div>

    <div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
        <div class="box2"></div>
    </div>

    <div class="box3"></div>
</body>
</html>

练习:

1、导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页数</title>
    <style type="text/css">
        .box1{
            width: 960px;
            height: 42px;
            border: solid #d5d2d2 1px;
            margin: 20px auto;
        }
        ul{
            list-style: none;
            margin:5px 150px;
        }
        li{
            float: left;
            margin:0px 5px;
        }
        ul .box{
            background-color: yellow;
        }
        a{
            text-decoration: none;
            color: black;
            display: block;
            padding:5px 10px;
        }
        a:hover{
            background-color: red;
            color: orange;

        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li class="box"><a href="#">上一页</a></li>
            <li class="box"><a href="#">1</a></li>
            <li class="box"><a href="#">2</a></li>
            <li class="box"><a href="#">3</a></li>
            <li class="box"><a href="#">4</a></li>
            <li>...</li>
            <li class="box"><a href="#">17</a></li>
            <li class="box"><a href="#">18</a></li>
            <li class="box"><a href="#">19</a></li>
            <li class="box"><a href="#">20</a></li>
            <li class="box"><a href="#">下一页</a></li>
        </ul>
    </div>  
    
</body>
</html>

image.png

2、开班信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开班信息</title>
    <style type="text/css">
        /*清除默认样式*/
        *{
            margin: 0;
            padding: 0;
        }
        /*统一页面中的字体*/
        body{
            font: 12px/1 宋体;
        }
        /*设置outer的大小*/
        .outer{
            width: 300px;
            /*height: 473px;*/
            /*background-color: #bfa;*/
            /*设置outer居中效果*/
            margin: 50px auto;
        }
        /*设置title的边框*/
        .title{
            /*设置上边框*/
            border-top: 2px #019e8b solid;
            /*设置盒子的高度*/
            height: 36px;
            /*设置背景样式*/
            background-color: #f5f5f5;
            /*设置title的行高*/
            line-height: 36px;
            /*设置title的内边距*/
            padding: 0px 22px 0px 16px;
        }
        /*设置title中的超链接*/
        .title a{
            float: right;
            /*设置字体颜色*/
            color: red;
        }
        /*设置h3*/
        .title h3{
            font: 16px/36px "微软雅黑";
        }
        /*设置内容*/
        .content{
            border: 1px solid #deddd9;
            /*设置内边距*/
            padding: 0px 28px 0px 20px;
        }
        /*设置内容中的超链接*/
        .content a{
            color: black;
            text-decoration: none;
            /*设置字体大小*/
            font-size: 12px;
        }
        /*为超链接添加一个hover伪类*/
        .content a:hover{
            color: red;
            /*为超链接添加下划线*/
            text-decoration: underline;
        }
        /*设置内容中的标题*/
        .content h3{
            margin-top: 14px;
            margin-bottom: 16px;
        }
        /*设置右侧a的样式*/
        .content .right{
            /*设置向右浮动*/
            float: right;
        }
        /*设置ul的样式*/
        .content ul{
            /*去除项目符号*/
            list-style: none;
            /*为ul设置一个下边框*/
            border-bottom: 1px dashed #deddd9;
        }
        /*取消最后一个ul的边框*/
        .content .no-border{
            border: none;
        }
        /*设置内容中的红色字体*/
        .content .redfont{
            color: red;
            font-weight: bold;
        }
        /*设置内容中的li*/
        .content li{
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <!-- 创建一个外层div，容纳整个内容 -->
    <div class="outer">
        <!-- 开班信息的头部 -->
        <div class="title">
            <a href="#">18年面授开班计划</a>
            <h3>近期开班</h3>
        </div>

        <!-- 开班信息的主要内容 -->
        <div class="content">
            <h3><a href="#">人工智能+Python-高薪就业班</a></h3>
            <ul>
                <li>
                    <a class="right" href="#"><span class="redfont">预约报名</span></a>
                    <a href="#">开班时间：<span class="redfont">2018-04-26</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span class="redfont">无座，名额爆满</span></a>
                    <a href="#">开班时间：<span class="redfont">2018-03-23</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span>开班盛况</span></a>
                    <a href="#">开班时间：<span>2018-01-23</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span>开班盛况</span></a>
                    <a href="#">开班时间：<span>2017-12-20</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span>开班盛况</span></a>
                    <a href="#">开班时间：<span>2017-11-18</span></a>
                </li>
            </ul>
            <h3><a href="#">Android开发+测试-高薪就业班</a></h3>
            <ul>
                <li>
                    <a class="right" href="#"><span class="redfont">预约报名</span></a>
                    <a href="#">开班时间：<span class="redfont">2018-04-26</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span>开班盛况</span></a>
                    <a href="#">开班时间：<span>2018-03-23</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span>开班盛况</span></a>
                    <a href="#">开班时间：<span>2018-01-23</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span>开班盛况</span></a>
                    <a href="#">开班时间：<span>2017-12-20</span></a>
                </li>
            </ul>
            <h3><a href="#">大数据软件开发-青芒工作室</a></h3>
            <ul class="no-border">
                <li>
                    <a class="right" href="#"><span class="redfont">预约报名</span></a>
                    <a href="#">开班时间：<span class="redfont">2018-04-26</span></a>
                </li>
                <li>
                    <a class="right" href="#"><span>开班盛况</span></a>
                    <a href="#">开班时间：<span>2018-01-23</span></a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

image.png

3、导航条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css">
        .p{
            width: 960px;
            height: 42px;
            border: 1px solid #333;
            margin: 0px auto;
        }
        .p ul{
            display: block;
            padding-left: 150px;

        }
        .p ul li{
            float: left;
            list-style: none;
            line-height: 10px;
        }
        .p ul li a{
            text-decoration: none;
            padding: 20px;
            font-size: 14px;
            font-family: "雅黑";
            color: #333;
        }
        .p ul li a:hover{
            color: red;
        }
    </style>
</head>
<body>
    <div class="p">
        <ul>
            <li><a href="#">首页</a><span>|</span></li>
            <li><a href="#">网站建设</a><span>|</span></li>
            <li><a href="#">程序开发</a><span>|</span></li>
            <li><a href="#">网络营销</a><span>|</span></li>
            <li><a href="#">企业VI</a><span>|</span></li>
            <li><a href="#">案列展示</a><span>|</span></li>
            <li><a href="#">联系我们</a></li>
            
        </ul>
    </div>
</body>
</html>

image.png

3、导航条

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>作业新闻</title>
    <style type="text/css">
        ul{
            margin: 0;
            padding: 0;
        }
        .box{
            width:960px;
            height: 50px;
            background-color:#55a8ea;
            margin: 50px auto;
        }
        .box ul li{
            list-style-type: none;
            float: left;
            width: 100px;
            text-align: center; 
        }
        .box ul li a{
            text-decoration: none;
            color:  #fff;
            font-size:  17px;

            line-height:50px;
            font-family: 雅黑；
        }
        .box ul li:hover{
            background-color: #00619f;  
        }
        .box2{
            position: relative;
            top: -10px; 
            left: -267px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="">首&nbsp;页</a></li>
            <li><a href="">网站建设</a></li>
            <li><a href="">程序开发</a></li>
            <li><a href="">网络营销</a></li>
            <img src="new.png" class="box2">
            <li><a href="">企业VI</a></li>
            <li><a href="">案例展示</a></li>
            <li><a href="">联系我们</a></li>
            
        </ul>
    </div>
</body>
<ml>

image.png

最后编辑于：2018.08.15 20:25:35

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,937评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,503评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,712评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,668评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,677评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,601评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,975评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,637评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,881评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,621评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,710评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,387评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,971评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,947评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,189评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,805评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,449评论 2赞 342

前端box（盒子）

高度塌陷

定位

练习:

image.png

推荐阅读更多精彩内容