欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

web前端面試題實例代碼分析

這篇文章主要講解了“web前端面試題實例代碼分析”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“web前端面試題實例代碼分析”吧！

大足網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

面試官：給定一個元素，如何實現(xiàn)水平垂直居中？

我：呃~，針對這個問題，我想到了三種常見的方式：定位、flex和grid布局。整出代碼如下

定位：因為這個元素不確定是不是塊級元素 (塊級元素是否有寬高) 還是行內(nèi)元素，所以需要使用 transform 屬性來做負的 50%移動（基于當前元素寬高）。

<style>
  html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
  }
  .item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<body>
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    塊狀元素
  </div>
  <div class="item" style="color: red;">不定高寬的塊狀元素</div>
  <span class="item" style="color: green;">行內(nèi)元素</span>
</body>

flex布局：不僅支持塊狀元素，而且支持行內(nèi)元素，對固定高寬與不固定高寬皆可使用。

<style>
  html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }
  .item{
    margin: auto;
  }
</style>
<body>
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    塊狀元素
  </div>
  <!-- <div class="item" style="color: red;">不定高寬的塊狀元素</div>
  <span class="item" style="color: green;">行內(nèi)元素</span> -->
</body>

grid布局： 不僅支持塊狀元素，而且支持行內(nèi)元素，對固定高寬與不固定高寬皆可使用。

<style>
  html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
  }
</style>
<body>
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    塊狀元素
  </div>
  <!-- <div class="item" style="color: red;">不定高寬的塊狀元素</div>
  <span class="item" style="color: green;">行內(nèi)元素</span> -->
</body>

web前端面試題實例代碼分析

面試官：padding與margin有什么不同？

我：呃~，padding是內(nèi)邊距作用于本身，margin是外邊距作用于外部對象。

面試官：vw和百分比有什么區(qū)別？

我：呃~，vw只與設備的寬高有關系，%與繼承有關系。整出代碼如下

<style>
  body{
    width: 50%;
  }
  .p1{
    width: 100vw;
    height: 50px;
    background-color: #f00;
  }
  .p2{
    width: 100%;
    height: 50px;
    background-color: #0f0;
  }
</style>
<body>
  <div class="p1">vw</div>
  <div class="p2">百分比</div>
</body>

web前端面試題實例代碼分析

面試官：行內(nèi)元素與塊級元素有什么區(qū)別？

我：呃~，行內(nèi)元素與塊級元素的區(qū)別主要體現(xiàn)在以下幾點：

盒模型的屬性：

行內(nèi)元素設置width、height無效(可設置line-height)，margin上下無效，padding上下無效。

包含關系：

塊級元素可以包含行內(nèi)元素和塊級元素；行內(nèi)元素不能包含塊級元素。

排列方式：

塊級元素會獨占一行，垂直方向排列。行內(nèi)元素不會占據(jù)整行，在一條直線上排列，都是同一行，水平方向排列。

兩種間可以相互轉(zhuǎn)換：

行內(nèi)元素轉(zhuǎn)化為塊元素： display:block；塊元素轉(zhuǎn)化為行內(nèi)元素： display:inline。

面試官：HTML標簽中有哪些是行內(nèi)元素？

我：呃~，常見的行內(nèi)元素標簽有以下幾種：

a、img、picture、span、input、textarea、select、label

面試官：如何讓谷歌瀏覽器支持小字體？

我：呃~，谷歌瀏覽器目前支持的最小字體是12px，正常這個字體已經(jīng)是最小的了，如果還想讓這個字體變小，只能通過CSS的縮放屬性讓字體變小，如 transform: scale(0.5)，這個屬性可以將原來最小的字體再變小原來的二分之一。

面試官：HTML中有哪些是語義化標簽？

我：呃~，常見的語義化標簽有以下幾種：

header、footer、main、aside、article、section、address、summary/details、menu、img

h2/h3/h4/h5/h6/h7、p、strong/italic

面試官：什么是HTML的實體編碼？

我：呃~，HTML 實體編碼是一段以連字號（&）開頭、以分號（;）結(jié)尾的字符串。用以顯示不可見字符及保留字符 (如 HTML 標簽)，在前端，一般為了避免 XSS 攻擊，會將 <> 編碼為 &lt; 與 &gt;，這些就是 HTML 實體編碼。

常見的實體編碼如下：

不可分的空格：＆nbsp;

<(小于符號)：＆lt;

＆(與符號)：＆amp;

″(雙引號)：＆quot;

'(單引號)：＆apos;

面試官：textarea 如何禁止拉伸？

我：呃~，使用 CSS 樣式可以避免拉伸，屬性為 resize: none;

面試官：談談 + 與 ~ 選擇器有什么不同？

我：呃~，兩者的區(qū)別很簡單如下：

+ 選擇器匹配緊鄰的兄弟元素

~ 選擇器匹配隨后的所有兄弟元素 整出代碼如下：

<style>
    div+p { /* 第一個兄弟元素p標簽變紅色了 */
        color: red;
    }
    div~p { /* div后面的兄弟元素p標簽都變成紅色了 */
        color:red;
    }
</style>
<body>
  <div>我是div</div>
  <p>我是p</p>
  <p>我是p</p>
  <div>我是div</div>
  <p>我是p</p>
  <div>
    <p>我是div下面的p</p>
    <p>我是div下面的p</p>
  </div>
  <span>我是span</span>
</body>

web前端面試題實例代碼分析

感謝各位的閱讀，以上就是“web前端面試題實例代碼分析”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對web前端面試題實例代碼分析這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

網(wǎng)站標題：web前端面試題實例代碼分析
文章位置：http://chinadenli.net/article0/goijio.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、商城網(wǎng)站、域名注冊、營銷型網(wǎng)站建設、搜索引擎優(yōu)化、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設