HTML&CSS常用小技巧

1. li水平居中

   <div class="box">
     <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
     </ul>
   </div>

   *{
       margin: 0;
       padding: 0;
       list-style: none;
   }
   .box{
       width: 800px;
       height: 500px;
       margin: 0 auto;
       border: 1px solid red;
   }
   ul{
       display: table;
       margin: 0 auto;
   }
   li{
       float: left;
       width: 160px;
       height: 400px;
       border: 1px solid green;
       margin: 0 10px;
   }

   效果图如下：

2. 给子元素设置margin-top，父元素也会跟着一起动
   解决办法：
   方法一：给父元素设置：border-top: 1px;
   方法二：给父元素设置：padding-top:1px;