“寒冬”三年经验前端面试总结（含头条、百度、饿了么、滴滴等） 的尝试性解答

原贴地址：
“寒冬”三年经验前端面试总结（含头条、百度、饿了么、滴滴等）

楼主给了题目，但没有解答，本身尝试解答一波，若是有错误请指正~。

CSS篇：

1. 盒模型 浏览器右键便可看到盒模型：
   最外层是 margin
   而后是 border
   而后是 padding
   而后是 content

2. 垂直居中

   <style> /* flex 方式 */ .one { display: flex; align-items: center; width: 500px; height: 500px; background: #000; } .two { height: 200px; width: 200px; background: #fff; } </style>
   <div class="one">
       <div class="two">
       </div>
   </div>
   /* position 方式 */
   <style> .one { width: 500px; height: 500px; background: #000; position: relative; } .two { height: 200px; width: 200px; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); } </style>
   <div class="one">
       <div class="two">
       </div>
   </div>
   
   /* 自适应margin */
   <style> .one { width: 20vw; height: 20vh; margin: 40vh 40vw; background: black; } </style>
   <div class="one">
   </div>    
   复制代码

3. 三栏布局

   /* 利用flex-grow和flex-basis */
   <style type="text/css"> .body { display: flex; width: 100vw; height: 100vh; } .one { background: yellow; flex-basis: 100px; } .two { background: pink; flex-grow: 1; } .three { background: orange; flex-basis: 200px; } </style>
   
   <div class="body">
       <div class="one"></div>
       <div class="two"></div>
       <div class="three"></div>
   </div>
   复制代码

4. CSS选择器权重计算方式 CSS选择器方面优先级：

   1. 最高级的是带有 !importrant 的样式。
   2. 第二级是内联样式直接定义在style里的。
   3. 第三级是id选择器#id。
   4. 第四级是class选择器.class。
   5. 第五级是伪类选择器.class:hover。
   6. 第六级是属性选择器a[href][title]。
   7. 第七级是标签选择器div。
   8. 第八级是通配符*。
   9. 最后还有浏览器自定义的。 权重计算方面： 查了些资料了解到：
      1. !important 样式的权重无穷大。
      2. 内联样式权重为 1000。
      3. id选择器权重为 100。
      4. class/伪类/属性选择器权重为 10。
      5. 标签是 1。
      6. 通配符是0。 例子：

   <style>
       * {
           color: orange;
           /* 权重是 0 */
       }
       a {
           color: black; 
           /* 权重为 1 */
       }
       div a {
           color: green;
           /* 权重为 2 */
       }
       a[href] {
           color: yellow;
           /* 权重为 10 */
       }
       #one {
           color: gray;
           /* 权重是 100 */
       }
       .two {
           color: blue !important;
           /* 权重是 无穷大 */
       }
       .three {
           color: rgb(123,123,123);
           /* 权重 10 */
       }
   </style>
   <a>这一条是黑色的</a>
   <div>
       <a>这一条是绿色的</a> 
       <a href="javascript:;">这一条是黄色的</a>
       <a href="javascript:;" id="one">这条是灰色的</a>
       <a href="javascript:;" style="color: pink;">这条是粉色的</a>
       <a href="javascript:;" style="color: pink;" class="two">这条是蓝色的</a>
       <a href="javascript:;" style="color: pink;" class="three">这条又是粉色的</a>
   </div>
   复制代码

5. 清除浮动的方法
   先了解下不清除浮动

   <style> * { margin: 0; padding: 0; } .header { width: 100vw; height: 20vh; background: black; } .body-one { width: 49vw; height: 20vh; background: pink; float: left; } .body-two { width: 49vw; height: 15vh; background: yellow; float: right; } .footer { width: 100vw; height: 21vh; background: orange; } </style>
   <div class="header">
   </div>
   <div class="body-one">
   </div>
   <div class="body-two">
   </div>
   <div class="footer">
   </div>
   复制代码

   运行后会发现
   footer与body-two融为一体了。

清除也简单
```

.footer {
    clear: both;
}
```
复制代码

6. flex
flex的意思是弹性布局。
给元素设置
display: flex; 便可让他处于弹性布局的状态。
处于弹性布局中的元素会默认按照水平主轴排列。
能够使用
flex-direction: column/row; 来控制是按照水平主轴排列仍是垂直主轴排列。
排列的方向有垂直水平两种，排列的方式则有不少：
经常使用的通常有
按照主轴
justify-content: flex-end/flex-start/center/space-between/space-around/space-evenly 在子元素彻底铺满状况下，这几个没有不一样，主要是未铺满的状况：
flex-end/flex-start 相反，end是元素靠右/下，start是靠左/上。
center 居中分布。
space-betwenn 第一个放在首位，最后一个放在末尾，其他的均匀在中间。
space-around元素周围的空间均匀分布。
space-evenly元素间隔均匀分布。

按照纵轴  
```
align-items: flex-start | flex-end | center | baseline | stretch
```
`baseline`按照第一行文字对齐。  
`stretch`会将元素拉伸。  
其余一致。  
同一行里的元素过多，flex默认不会换行，但咱们能够设置它：  
```
flex-wrap: wrap
```
还能够倒过来：  
```
flex-wrap: wrap-reverse
```
除了给父元素的，还有给子元素的：  
    若是想让某元素站的空间比其余的大一些则能够用  
    ```
    flex-grow: 1
    ``` 
    默认状况下都是 0，会按照设置的值来等比例放大。  
    空间不太足时想让某个元素不变或是更小也是能够的：  
    ```
    flex-shirnk: 0
    ```
    默认是1，0会保持不变，负值无效，值越大缩得越小。  
    还记得上面三栏布局中用到的：  
    ```
    flex-basis: auto
    ```
    当有剩余空间时，会分配给多余的空间，默认值是`auto`也就是不分配，按原来的大小。  
    若是元素有本身的思想，还可让它有不同的烟火：  
    ```
    align-self: auto
    ```
    默认是auto，继承父元素的设置，其余与 align-items 属性名一致功能一致。   
[参考](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
复制代码

7. BFC
   BFC是块级格式化上下文，也就是一个独立区域，
   看例子：

   <style type="text/css">
       .outer {
         border: 5px dotted rgb(214,129,137);
         border-radius: 5px;
         width: 450px;
         padding: 10px;
         margin-bottom: 40px;
       }
   
       .float {
         padding: 10px;
         border: 5px solid rgba(214,129,137,.4);
         border-radius: 5px;
         background-color: rgba(233,78,119,.4);
         color: #fff;
         float: left;  
         width: 200px;
         margin: 0 20px 0 0;
       }
   </style>
   <div class="outer">
     <div class="float">浮动元素</div>
     这里是一些非浮动的文字，用于测试，你还能够把它写的更长一点。
   </div>
   复制代码

   运行例子会看到文字环绕在元素的周围

   

   若是去掉一些文字

   <div class="outer">
     <div class="float">浮动元素</div>
     非浮动文字
   </div>
   复制代码

   

   会看到边框的虚线是与非浮动文字为基准的，由于设置为float的元素是脱离文档流的，不能老老实实呆在原来的位置，但咱们仍是想让浮动元素也包含在这个outer虚线中。
   这时候BFC就能够出马了：BFC用来建立一个独立的布局区域
   给父级设置

   overflow: auto
   复制代码

   

   便可让父级变成一个独立的块级区域，固然overflow这个属性原本是定义溢出后的行为的，
   因此根据不一样的状况还能够有其余的属性可让它变成BFC：
   - float的值不为none
   - position的值不为static或者relative
   - display的值为 table-cell, table-caption, inline-block, flex, inline-flex, flow-root 中的一个
   - overflow的值不为visible
   参考资料:

   理解CSS中的BFC

   理解CSS布局和BFC

8. position
   position 有 5个可设置的属性
   static 没有定位，默认值。
   absolute 绝对定位，相对于 static 定位之外的第一个父元素进行定位。
   relative 相对定位，相对于元素原本的位置进行定位。
   fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
   inherit 继承父元素的定位。
   设置绝对定位或相对定位后能够用left,right,top,bottom来进行上下左右移动。
   这个直接看W3C的例子吧。

9. 如何用CSS实现自适应正方形
   在三栏布局里就用到了一个自适应的父元素：

   .body {
       width: 100vw;
       height: 100vh;
       background: black;
   }
   <div class="body">
   </div>
   复制代码

   在不一样设备上不一样浏览器间的可视窗口均可能不一样，用px都是固定的大小，因此用到vw和vh是一个不错的选择，它们会根据可视窗口的的大小来调整每一个单位的值。
   还能够用百分比来自适应父元素：

   .body {
       width: 100%;
       height: 100%;
       background: black;
   }
   <body>
       <div class="body">
       </div>
   </body>   
   复制代码

   继承父元素content区域的大小，记得盒模型吧。

10. 如何用CSS实现三角形
    CSS三角形能够用border来作，
    直接看代码

    <style> .body { width: 0; height: 0; border-style: solid; border-width: 100px; border-top-color: black; border-bottom-color: pink; border-left-color: yellow; border-right-color: red; } </style>
    <div class="body">
    </div>
    复制代码

    每个边呈现的都是三角形。

    

    还能够用clip-path来作：

    <style> .body { width: 100px; height: 100px; background: pink; clip-path: polygon(50% 0, 0 50%, 100% 50%); } </style>
    <div class="body">
    </div>
    复制代码

    

    polygon的坐标从左上角开始，坐标是(x y, x y, x y)。