每天10道題，100天后，搞定所有前端面試的高頻知識點，加油?。?！，在看文章的同時，希望不要直接看答案，先思考一下自己會不會，如果會，自己的答案是什么？想過之后再與答案比對，是不是會更好一點，當(dāng)然如果你有比我更好的答案，歡迎評論區(qū)留言，一起探討技術(shù)之美。
定位：因為這個元素不確定是不是塊級元素 (塊級元素是否有寬高) 還是行內(nèi)元素，所以需要使用 transform 屬性來做負(fù)的 50%移動（基于當(dāng)前元素寬高）。
【資料圖】
<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)元素，對固定高寬與不固定高寬皆可使用。【相關(guān)推薦：web前端開發(fā)】
<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>我：呃~，padding是內(nèi)邊距作用于本身，margin是外邊距作用于外部對象。
我：呃~，vw只與設(shè)備的寬高有關(guān)系，%與繼承有關(guān)系。整出代碼如下
<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>我：呃~，行內(nèi)元素與塊級元素的區(qū)別主要體現(xiàn)在以下幾點：
盒模型的屬性：
行內(nèi)元素設(shè)置width、height無效(可設(shè)置line-height)，margin上下無效，padding上下無效。
包含關(guān)系：
塊級元素可以包含行內(nèi)元素和塊級元素；行內(nèi)元素不能包含塊級元素。
排列方式：
塊級元素會獨占一行，垂直方向排列。行內(nèi)元素不會占據(jù)整行，在一條直線上排列，都是同一行，水平方向排列。
兩種間可以相互轉(zhuǎn)換：
行內(nèi)元素轉(zhuǎn)化為塊元素： display:block；塊元素轉(zhuǎn)化為行內(nèi)元素： display:inline。
我：呃~，常見的行內(nèi)元素標(biāo)簽有以下幾種：
a、img、picture、span、input、textarea、select、label
我：呃~，谷歌瀏覽器目前支持的最小字體是12px，正常這個字體已經(jīng)是最小的了，如果還想讓這個字體變小，只能通過CSS的縮放屬性讓字體變小，如 transform: scale(0.5)，這個屬性可以將原來最小的字體再變小原來的二分之一。
我：呃~，常見的語義化標(biāo)簽有以下幾種：
header、footer、main、aside、article、section、address、summary/details、menu、img
h1/h2/h3/h4/h5/h6、p、strong/italic
我：呃~，HTML 實體編碼是一段以連字號（&）開頭、以分號（;）結(jié)尾的字符串。用以顯示不可見字符及保留字符 (如 HTML 標(biāo)簽)，在前端，一般為了避免 XSS 攻擊，會將 <> 編碼為 < 與 >，這些就是 HTML 實體編碼。
常見的實體編碼如下：
不可分的空格：＆nbsp;
<(小于符號)：＆lt;
＆(與符號)：＆amp;
″(雙引號)：＆quot;
"(單引號)：＆apos;
我：呃~，使用 CSS 樣式可以避免拉伸，屬性為 resize: none;
我：呃~，兩者的區(qū)別很簡單如下：
+ 選擇器匹配緊鄰的兄弟元素
~ 選擇器匹配隨后的所有兄弟元素 整出代碼如下：
<style> div+p { /* 第一個兄弟元素p標(biāo)簽變紅色了 */ color: red; } div~p { /* div后面的兄弟元素p標(biāo)簽都變成紅色了 */ 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>（學(xué)習(xí)視頻分享：web前端入門、編程基礎(chǔ)視頻）
以上就是看看這些前端面試題，帶你搞定高頻知識點（一）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞： html
營業(yè)執(zhí)照公示信息