溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下web前端面試題實例分析的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
我：呃~，link是先出現的，后面才出現了@import，這也就導致了link兼容性是比@import要好的，其次是加載順序方面，瀏覽器中先加載標簽link，后加載@import的，整出代碼如下：
【相關推薦：web前端開發】
我：呃~，它們要實現的功能大體是一致的，但是有本質的區別，如下：
title與h2的區別：
title作用是概括網站信息，顯示在網頁的標題上，可以告訴搜索引擎或者用戶關于這個網站的內容主題是什么。
h2作用是概括文章主題內容，顯示在網頁內容上，可以告訴我們網站的內容主要是什么
b和strong的區別：
b是實體標簽，用來給文字加粗，沒有實際意義；strong是邏輯標簽，用來加強字符語氣的，強調內容的重要性，為符合css3規范，b盡量少用，用strong就行。
i和em的區別：
i是實體標簽，用來做文字傾斜的，沒有實際意義，更多用在字體圖標上；em是邏輯標簽，強調字符內容的，更多用在專業術語上。
我：呃~，title是鼠標移入到圖片顯示的值，alt是圖片無法加載時顯示的值。
我：呃~，好的，總結如下：
png：無損壓縮，尺寸體積要比 jpg/jpeg的大，適合做小圖標。
jpg：采用壓縮算法，有一點失真，比png體積要小，適合做中大圖片。
gif：一般是做動圖的。
webp：同時支持有損和無損壓縮，相同質量的圖片，webp具有更小的體積但兼容性較差。
我：呃~，好的，CSS盒子模型分為：標準盒模型、IE(怪異)盒模型，如下：
標準盒模型：margin、border、padding、content
IE盒模型：margin、content（border + padding + content）
CSS轉換盒子模型：
box-sizing: content-box; /*標準盒模型*/
box-sizing: border-box; /*IE盒模型*/
我：呃~，line-height是每一行文字的高，如果文字換行則整個盒子高度會增大（行數*行高）
height是一個固定值，就是這個盒子的高度。
我：呃~，CSS選擇器主要有如下幾種：
通配符選擇器( * )、id選擇器( # )、類選擇器( . ) 、標簽選擇器( div、p、h2... )、相鄰選擇器( + )、后代選擇器( ul li )、子元素選擇器( > )、屬性選擇器( a[href] )等
CSS屬性可以繼承的有：font-size、color、line-height等文字系列，不可繼承的有：border、padding、margin等盒屬性
我：呃~，從優先級比較來說：!important>內聯樣式>id>class>標簽>通配。優先級的計算的話，我們可以給CSS設置權重：!important權重最高可以忽略，通過計算可以看出哪個權重值更高，當前頁面的樣式為什么是這個樣式也就可以說通了：
第一：內聯樣式(style) 權重值：1000
第二：id選擇器 權重值：100
第三：類選擇器 權重值：10
第四：標簽&偽元素選擇器 權重值：1
第五：通配、>、+ 權重值：0
我：呃~，使用border就可以，給出border的寬度然后每天邊框設置隱藏，如果想使用哪個方向的三角形，再單獨給出顏色即可，整出代碼如下：
<style>
div{
width: 0;
border: 100px solid transparent;
/* 想要上三角形,顏色為紅色 */
border-top: 100px solid red;
}
</style>
<body>
<div></div>
</body>
我：呃~，BFC（也叫塊級格式化上下文）是一個獨立的布局環境，可以理解為一個獨立容器，容器里面的子元素不會影響到外面的元素。如果一個元素具有BFC，那么內部的元素再怎么弄也不會影響到外面的元素。整出代碼如下：
觸發BFC的條件：
float的值：非none
overflow的值：非visible
display的值為：inline-block、table-cell...position的值為：absoute、fixed
<style>
ul{
list-style: none;
border: 5px solid red;
overflow: hidden; /* 設置BFC */
}
ul li {
width: 100px;
height: 100px;
background-color: orange;
margin: 10px;
float: left;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h2>12</h2>
</body>
以上就是“web前端面試題實例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
