前端笔记(5)

作者: rtrhhthth | 来源:发表于2018-07-10 19:49 被阅读0次

代码：
（1）高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
    <style type="text/css">
        .box1{
            /*为box1设置一个边框*/
            border: 10px red solid;
            height: 100px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            /*
            在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高
            但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷
            由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱
            所以在开发中一定要避免出现高度塌陷的问题,
            我们可以将父元素的高度写死，以避免塌陷的问题出现，
            但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的
            */
            /*为子元素设置向左浮动*/
            float: left;
        }
        .box3{
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

(2)解决高度塌陷1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷1</title>
    <style type="text/css">
        .box1{
            border: 10px red solid;
            /*
            根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的
            当开启元素的BFC以后，元素将会具有如下的特性：
            1.父元素的垂直外边距不会和子元素重叠 
            2.开启BFC的元素不会被浮动元素所覆盖
            3.开启BFC的元素可以包含浮动的子元素
            如何开启元素的BFC
                1.设置元素浮动
                    - 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
                2.设置元素绝对定位
                3.设置元素为inline-block
                    - 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
                4.将元素的overflow设置为一个非visible的值
            推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式
            */
            overflow: hidden;
            /*
            但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6
            在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所在IE6浏览器可以通过开hasLayout来解决该问题
            开启方式很多，我们直接使用一种副作用最小的：
            直接将元素的zoom设置为1即可
            */
            /*
            zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
            zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
            zoom这个样式，只在IE中支持，其他浏览器都不支持
            */
            zoom: 1;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        .box3{
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

(3)解决高度塌陷2

<!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;
        }
        /*
        解决高度塌陷方案二：
            可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
            然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
            使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
        */
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

(4)解决高度塌陷3

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

(5)相对定位

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

(6)绝对定位

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

(7)固定定位

<!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时，则开启了元素的固定定位
            固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
            不同的是：
                固定定位永远都会相对于浏览器窗口进行定位
                固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
            IE6不支持固定定位
            */
            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>

(8)清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*设置box1向左浮动*/
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            /*
            由于受到box1浮动的影响，box2整体向上移动了100px
            我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
            可选值：
                none，默认值，不清除浮动
                left，清除左侧浮动元素对当前元素的影响
                right，清除右侧浮动元素对当前元素的影响
                both，清除两侧浮动元素对当前元素的影响
                    清除对他影响最大的那个元素的浮动
            */
            /*
            清除box1浮动对box2产生的影响
            清除浮动以后，元素会回到其他元素浮动之前的位置
            */
            /*clear: left;*/
            float: right;
        }
        .box3{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

(9)导航条练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条</title>
    <style type="text/css">
        /*清除默认样式*/
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            /*去除项目符号*/
            list-style: none;
            /*设置背景色*/
            background-color:blue;
            /*设置宽度*/
            width: 1000px;
            /*设置左右居中*/
            margin: 50px auto;
            /*解决高度塌陷*/
            overflow: hidden;
            zoom:1;/*已经用宽度解决了*/
        }
        .nav li{
            /*设置li向左浮动*/
            float: left;
            width: 25%;
        }
        .nav a{
            /*转化为块元素*/
            display: block;
            width: 100%;
            /*设置居中*/
            text-align: center;
            padding: 5px 0px;
            /*去除下划线*/
            text-decoration: none;
            /*设置字体颜色*/
            color: white;
            /*设置粗体*/
            font-weight: bold;
        }
        /*设置鼠标移入的状态*/
        .nav a:hover{
            background-color: #cc0000;
        }

    </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>

输出结果：

88.png

二：开班信息练习
代码：

<!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>

输出结果：

66.png

前端笔记(5)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读