day05

1 盒子

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

2 导航

1 inline-block实现导航

    技术要点:给父元素font-size:0

2 用<ul>标签设置导航<a>包在<li>里

    .top-nav>ul{
        list-style: none;
        /*margin-left: auto;
        margin-right: auto;
        width: 400px;*/列表'li'居中
    }
    .top-nav>ul>li{
        float: left;
    }
    .top-nav>ul>li>a{
        text-decoration: none;
        display: block;
    }

3 浮动

   /* float的原理:相对于整个页面漂浮起来 */
  /* 如何清除float    clear:both;         */
  父元素不设置高度，子元素float,父元素的高度会坍塌
     如何让父元素重新获取高度
     1.给父元素 overflow:hidden;
     2.给父元素公共样式row 清除浮动常用样式
     .row:after{
         content:"";
         display:table;
         clear:both；   }

• 如果前面的元素float,后面的元素没有清除float,那么就会受到前面元素的影响

4