页眉部分实践

利用flex实现左右布局，当然左右任一个box还可以再使用flex布局（套娃）

搜索框：目前已知只有input元素可以使用:focus伪类，div没用

表单提交:一般使用input，但有些时候必须用div或其他没有提交属性的元素，此时就可以使用submit()函数了

<form id="search-bt" action="#" method="GET">
    <input type="text" placeholder="搜索些什么~">
    <i onclick="formSubmit()"></i>
</form>

function formSubmit(){
    document.getElementById("search-bt").submit();
};

导航栏x轴滚动：一个元素溢出，让其滚动，就在其父级元素上添加overflow-x: auto样式，有时内容会出现折行，可以用white-space: nowrap样式

溢出加阴影-判断是否溢出：只需要知道父级元素的宽度（offsetWidth）和滚动宽度（scrollWidth）就好了，滚动宽度在子元素没有溢出时是等于父级元素宽度的，那么就可以来个比较运算来判断是否溢出

阴影-从左到右渐变：

background: linear-gradient(to right,hsla(0,0%,97%,0) 10%,#ffffff 100%);

具体可参考：菜鸟教程

溢出左边加遮罩且不影响下级元素的点击：

加遮罩：一般用子绝父相定位渐变遮罩

下级元素仍可点击：遮罩上写样式：pointer-events: none;

响应式布局

1. 当最大宽度是1080px时生效

   @media  (max-width: 1080px){ /*响应式布局*/
       .main-head { 
           width: 80%;
       }
       .sec-head ul { 
           width: 80%; 
       }
   }
   

2. 不是最小宽度不生效，是最小宽度生效

   @media  (min-width: 830px){ /*响应式布局*/
       .sec-head {
           display: none;
       }
       .hrPlus {
           margin-bottom: 20px;
       }
   }
   

主体部分

小提示：一般内容区都给个内边距

内边距相关重要知识：多层盒子嵌套时，padding如何使用

1. 外部盒子高为auto时，内部盒子高一定要是一个确定的值，不能写100%或auto,只有内部盒子的高固定才能撑起外部盒子
2. 内部盒子如何完美定义内边距：外部盒子高一定为自适应auto或100%，宽可为一个定值，内部盒子高一定为一个定值，宽为自适应auto但不能是100%