一.盒子模型

1.1

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

  div{
        width:200px;
        height: 200px;
        background: red；
        box-sizing: border-box;
        border:10px solid black;
        padding:10px;
        }

二.布局

1.1.方框中插入图片

 <style>
        div{
            box-sizing:border-box;
        }
        .parent{
            width:1000px;
            margin-left: auto;
            margin-right: auto;
            background:white;
     }
        .parent>div{
          /*  display: inline-block;*/
          float:left;
            width:240px;
            height: 300px;
            border:1px solid #333;
        }
 .row:after{
            content:"";
            display:block;
            clear:both;
        }
        .parent>.child{
            margin-right: 13.3333px;
        }
        img{
            margin-left: auto;
            margin-right: auto;
            display: block;
            width:238px;
        }
    
    </style>
</head>
<body>
<div class="parent row">
    <div class="child">
        <img src="images/data_image.png"alt="">
    </div>
    <div class="child">
        <img src="images/data_image.png"alt="">
    </div>
    <div class="child">
        <img src="images/data_image.png"alt=""> 
    </div>
    <div></div>
    <div></div>
</div>
</body>
</html>

font-size: 0；
当使用inline-block布局，给父元素font-size:0
.parent>div------使parent样式之后的所有div标签改变
.parent>.child-------使parent样式之后的所有child样式改变

三.导航条

1.1


    .nav{
        line-height: 50px;
        background: red;
        font-size: 0;
    }
    .nav a{
        display:inline-block;
        font-size: 16px;
        width:100px;
        vertical-align: bottom;
        text-align: center;
        text-decoration: none;
        color:aliceblue;
    }
    a:hover{
        background-color:pink;

    }
    
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">手机</a>
        <a href="#">商城</a>
        <a href="#">个人</a>
    </div>

设置div标签，框出范围，再设置a标签样式

四.浮动

1.1

 .one{
            width:100px;
            height: 100px;
            background: red;
            float:left;
       */
        }
        .two{
            width:200px;
            height: 200px;
            background: blue;
         float:right;
        }
        .three{
            width:100px;
            height:100px;
            background: green;
            float:left
        }
   </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

float的原理是整个页面漂浮起来，下面元素会被挤上去

/*clear:both; 清除float浮动影响

且如果多个元素都一起浮动，则多个元素处于并排显示
且如果前面元素没有清除浮动，则后面元素会受到前面的影响

五.继承

1.1

/*
父元素不设置高度，若子元素float，父元素的高度会坍塌
/*
如何让父元素重新获取高度
1 给父元素 overflow:hidden;
2 在浮动元素的后面添加一个元素，清除浮动clear：both；
3 给父元素一个公共样式
.row:after{
content:"";
display:table;
clear:both;
}
*/

 .parent{
            width:400px;
            background: green;
            overflow: hidden
        }
        .child{
            width:200px;
            height:200px;
            background: red;
            float: left;
        }
        .two{
            width:400px;
            height: 400px;
            background: blue;
        }
       /* .three{
            clear:both;
        }*/
        .row::after{
            content:"";
            display:table;
            clear:both;
        }    
    </style>
</head>
<body>
    <div class="parent row">
        <div class="child"></div>

若子元素浮动。可给子元素套一个父元素，即overflow: hidden;

六.用li标签制作导航nav

1.1

  li{
            float:left;
            list-style: none;
            width:100px;
            text-align: center;
        }
       .row:after{
            content: "";
            display: table;
            clear:both;
        }
        a{
            display: block;
            color:white;
            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>

对ul标签进行设定，设置范围，在ul标签里设置li标签的样式大小
其中运用“布局”的知识。

Day05