day05

作者: 努力进化 | 来源:发表于2018-07-13 20:21 被阅读0次

今天学到了什么

1.盒子模型

box-sizing:border-box
给元素border,padding不会改变它 的width,height

div{
            width: 200px;
            height: 200px;
            background: #ff2d51;
            box-sizing: border-box;
            border: 10px solid black;
            padding:10px;
        }
不改变width,height.png

2.浮动

2.1 浮动

float的原理:相对于整个页面漂浮起来

    <style>
        *{margin: 0;padding: 0;}
        .one{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .two{
            width: 200px;
            height: 200px;
            background: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
浮动.png
2.2 清除浮动
在.two{}中加
clear:both;
清除浮动.png
2.3 float和父元素

2.3.1
父元素不设置高度,子元素float,父元素的高度会坍塌
2.3.2
如何让父元素重新获取高度

1.给父元素 overflow:hidden;
2.float元素的后面添加一个元素,同时clear
3.给父元素公共样式row
        .row:after{
            content:"";
            display:table;
            clear:both;
        }
style{
 .row:after{
            content:"";
            display:table;
            clear:both;
        }
        .parent{
            width: 400px;
            background: red;
        }
        .child{
            width: 200px;
            height: 200px;
            background: blue;
            float: left;
        }
        .one{
            width: 400px;
            height: 400px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="parent row">
        <div class="child"></div>
        <div class="three"></div>
    </div>
    <div class="one"></div>
</body>
父元素重获取高度.png

3.导航

<style>
        *{margin: 0;padding: 0;}
        .row:after{
            content: "";
            display: block;
            clear: both;
        }
        li{
            float: left;
            list-style: none;
            width: 100px;
            text-align: center;
        }
        a{
            display: block;
            color: #fff;
            text-decoration: none;
        }
        ul{
            line-height: 50px;
            background: deeppink;
        }
        a:hover{
            background: pink;
        }
    </style>
</head>
<body>
    <ul class="row">
        <li><a href="#">手机</a></li>
        <li><a href="#">平板</a></li>
        <li><a href="#">电脑</a></li>
    </ul>
</body>
导航.png

今天没学到什么

float属性的知识点还需加强巩固!

相关文章

网友评论

      本文标题:day05

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