一道引人深思的前端面試題

時間 2019-12-11

標籤一道引人深思端面試題简体版

原文原文鏈接

這絕對是一道值得深思的題目，幫你明白布局的死角。css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      * { margin: 0; padding: 0; }
      html, body, #app { margin: 0; padding: 0; height: 100%; }
      #header, #footer {
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: #555;
        color: #fff;
      }
      #side { width: 200px; background: #eee; }

        /*css here*/
    </style>
  </head>
  <body>
    <div id="app">
      <header id="header">header</header>
      <aside id="side">side</aside>
      <div id="main">
        <ul>
          <li><a href="https://www.bilibili.com/1">Link1</a></li>
          <li><a href="https://www.bilibili.com/1">Link2</a></li>
          <li><a href="https://www.bilibili.com/1">Link3</a></li>
          <br>
          <li><a href="https://www.bilibili.com/1">Link4</a></li>
          <li><a href="https://www.bilibili.com/1">Link5</a></li>
        </ul>
      </div>
      <footer id="footer">footer</footer>
    </div>
    <script>
      // JS here
    </script>
  </body>
</html>

一、完成經典的上 header ，下 footer ，左邊是側邊欄，右邊是內容。
二、去掉列表前面的 · ，列表項水平排列，注意裏面的br標籤須要換行，同時每兩個li後有一條豎線。
三、點擊列表項不跳轉，彈出href內的內容。html

完成第一問

float的方式

/* css here */
#side{
  float: left;
  height: calc(100% - 100px);
}
#main{
  margin-left: 200px;
  height: calc(100% - 100px);
}

思考：（這裏是精髓）個人意識當中假如一行兩個塊元素，其中一個元素float:left，那麼兩個元素在一行，而且重疊，將內容擠出來，其實否則，第一個元素float:left，第二個元素會與第一個元素重疊，也就是在一行，可是若是是第二個元素float，第一個元素是塊元素會獨佔一行，第二個float元素會被擠到第二行（重重重，之前不知道），因此上面題的第一問，header爲塊元素獨佔一行，而aside爲浮動元素，main元素會擠上來，而且重疊（重疊問題能夠使用bfc或者直接用margin）

定位的方式

個人解決方式，是解決了問題，但是都不算完美app

#app{
  position: relative;
}
#side{
  position: absolute;
  left: 0;
  top: 50px;
  height: calc(100% - 100px);
}
#main{
  margin-left: 200px;
  height: calc(100% - 100px);
}

更完美的的方式（或許不能稱更完美，只是想到了一些平時佈局不會去用的方式，而它卻比較使用）ide

/* css here */
        #app{
            position: relative;
        }
        #side{
            position: absolute;
            left: 0;
            top: 50px;
            bottom: 50px;
        }
        #main{
            position: absolute;
            left: 200px;
            top: 50px;
            right: 0; 
            bottom: 50px;
        }
        #footer {
        /* footer 設置 絕對定位 */
            position: absolute;
            bottom: 0;
            width: 100%; /* 設置浮動後，補上寬度 */
        }

思考：絕對定位同時給left和right或者top和bottom能夠解決寬度和高度問題（寬高不定，margin正負值，定位等都能影響寬高）。絕對定位以後塊元素的寬高將根據內容撐開。

flex方式

/*css here*/
#app{
    display: flex;
    flex-wrap: wrap;
}
#header, #footer {
    width: 100%;
}
#side{
    height: calc(100% - 100px);
}
#main{
    height: calc(100% - 100px);
    flex: 1;
}

grid方式

暫無佈局

完成第二問

#main li{
  list-style: none;
  float: left;
}
#main li:nth-of-type(2n){
  border-right: 1px solid #000;
}

思考：nth-of-type() 和 nth-child()的區別，爲何使用nth-child()不行。

完成第三問

document.querySelectorAll('ul')[0].addEventListener('click',event => {            
  if(event.target.tagName === 'A') { 
    event.preventDefault(); // 阻止默認行爲 alert(event.target.getAttribute('href'));
  }
});

思考：事件委託

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。