C4学习笔记

C4学习笔记

1. 页面结构非常重要！！！注意语义化！

2. 垂直居中推荐方法：

   display: flex;
   align-items: center;
   

3. 网站内容单独用盒子框起来，设定最小宽度，水平居中，留白auto：

   <div class="father">
   	<div class="main">main</div>
   </div>
   

   .father {
       background-color: antiquewhite;
       min-width: 1300px;
       /* 稍微设宽一点点好看一点，边缘部分不会紧挨窗口边界 */
   }
   .main {
       background-color: blueviolet;
       width: 1200px;
       margin: 0 auto;
   }
   

   实现效果：

   

   

4. 子级要左右分别浮动时，父级也要左浮动，并且不能用弹性布局，必须要设宽度：

   <div class="father">
       <div class="left">left</div>
       <div class="right">right</div>
   </div>
   

   .father {
       background-color: antiquewhite;
       float: left;
       width: 500px;
   }
   .left {
       background-color: aqua;
       float: left;
   }
   .right {
       background-color: blueviolet;
       float: right;
   }
   

   实现效果：

   

5. 当表格需要有背景颜色时，表格框线边距会造成留白，影响美观，需要消除：

   <table class="t1">
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
   </table>
   <table class="t2">
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>
   </table>
   

   .t2 {
       border-spacing: 0;
       margin-left: 50px;
   }
   td {
       background-color: aquamarine;
   }
   

   效果对比：

   

6. 输入框聚焦时默认出现边框，影响美观，需要消除：

   <div class="input">
       <input type="text" placeholder="请输入关键字">
       <img class="searchIcon" src="img/searchIcon@2x.png" alt="">
   </div>
   <div class="input i2">
       <input type="text" placeholder="请输入关键字">
       <img class="searchIcon" src="img/searchIcon@2x.png" alt="">
   </div>
   

   .input {
       width: 180px;
       height: 32px;
       background: #FFFFFF;
       border: 1px solid #CCCCCC;
       border-radius: 16px;
       display: flex;
       align-items: center;
   }
   input {
       border: none;
       height: 32px;
       line-height: 32px;
       background-color: transparent;
       margin-left: 20px;
       width: 123px;
   }
   .input .searchIcon {
       width: 16px;
       height: 16px;
   }
   .i2 input {
       outline: none;
   }
   

   实现效果：