聖盃、雙飛翼佈局、真假等高，圖片優化，測試檢查
阿新 • • 發佈：2020-12-27
多欄佈局解決方案
聖盃佈局
<style> * { padding: 0; margin: 0; } .center { width: 100%; height: 400px; background-color: gold; float: left; } .left { width: 200px; height: 400px; background-color: red; float: left; margin-left: -100%; position:relative; left:-200px; } .right { width: 300px; height: 400px; background-color: blue; float: left; margin-left: -300px; position:relative; left:300px; } .clearfix:after { content: ''; display: block; clear: both; } .warp { padding:0 300px 0 200px; } </style> <body> <!--center寬度小於left的時佈局會錯亂--> <div class="wrap clearfix"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div> </body>
雙飛翼佈局
<style> * { padding: 0; margin: 0; } .center { width: 100%; height: 400px; background-color: gold; float: left; } .left { width: 200px; height: 400px; background-color: red; float: left; margin-left: -100%; } .right { width: 300px; height: 400px; background-color: blue; float: left; margin-left: -300px; } .clearfix:after { content: ''; display: block; clear: both; } .inner { margin: 0 300px 0 200px; } </style> <body> <!-- 雙飛翼佈局實現： 1.一個大盒子，裡面有三個小盒子，左右固定，中間自適應100%，中間部分一定要先解析 2.三個盒子加浮動，左側部分設定margin-left:-100%;右側部分設定margin-left:-自己本身寬度 3.中間部分內部巢狀一個標籤，加左右的外邊距 缺點：相對於聖盃佈局，增加一層結構程式碼 --> <div class="wrap clearfix"> <div class="center"> <div class="inner"> center </div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body>假等高
<style> .wrap { border: 5px solid #000; width: 900px; margin: 0 auto; } .box1 { width: 300px; background-color: red; float: left; padding-bottom: 9999px; margin-bottom: -9999px; } .box2 { width: 300px; background-color: green; float: left; padding-bottom: 9999px; margin-bottom: -9999px; } .box3 { width: 300px; background-color: blue; float: left; padding-bottom: 9999px; margin-bottom: -9999px; } .clearfix:after { content: ''; display: block; clear: both; } .wrap { overflow: hidden; } </style> <body> <!-- 內外邊距相消法：內邊距設定特別大，外邊距設定特別小,父標籤加溢位隱藏，overflow:hidden; --> <div class="wrap clearfix"> <div class="box1"> 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 </div> <div class="box2"> 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 </div> <div class="box3"> 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 </div> </div> </body>真等高
<style> .a { width: 900px; background-color: blue; border: 3px solid #000; margin: 0 auto; overflow: hidden; } .b { width: 900px; background-color: green; margin-left: -300px; } .c { width: 900px; background-color: red; margin-left: -300px; } .box1 { width: 300px; float: left; position: relative; left: 600px; } .box2 { width: 300px; float: left; position: relative; left: 600px; } .box3 { width: 300px; float: left; position: relative; left: 600px; } .clearfix:after { content: ''; display: block; clear: both; } </style> <body> <div class="a"> <div class="b"> <div class="c clearfix"> <div class="box1"> 1先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 </div> <div class="box2"> 2先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 </div> <div class="box3"> 3先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 先帝創業未半而中道崩殂，今天下三分，益州疲弊，此誠危急存亡之秋也。然侍衛之臣不懈於內，忠志之士忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。誠宜開張聖聽，以光先帝遺德，恢弘志士之氣，不宜妄自菲薄，引喻失義，以塞忠諫之路也。 </div> </div> </div> </div> </body>
圖片優化
使用背景圖
- 對於頁面中與頁面內容無關，起修飾作用的圖片，使用背景圖 background-image（如頁面中小圖示尤其多次重複出現的，紋理性的背景）；與頁面內容相關展示性的圖片如（廣告圖、產品圖）使用 img 標籤。
圖片品質
- 注意圖片優化：在保證視覺效果的情況下，選擇最小的圖片格式與圖片質量，以減少載入時間。
- 注：通常顏色豐富線條複雜的圖片選擇 .jpg，顏色單一的小圖片使用 .gif，需要更好的顯示細節或需要支援半透明的圖片使用 .png 等。
使用精靈圖
- 運用 CSS sprites 技術集中小的背景圖或圖示，減少頁面 http 請求。
測試檢查
1、做完的頁面要與設計稿進行比對，保證對設計稿 95% 以上的還原度。
（1）頁面模組的完整性，保證頁面不出現模組丟失 ( 尤其是懸浮的側邊欄、彈窗、下拉選單等）；
（2）字型、字號、文字顏色的一致性；
（3）背景圖片與圖片是否有丟失；
（4）模組間距的還原度（通常根據頁面設計排版的複雜程度，最多允許 5-10px 以內的偏差）。
2、跨瀏覽器的相容測試。
做完的頁面，要根據需求進行跨瀏覽器的相容測試，保證不同瀏覽器顯示結果基本一致。Pc 端通常需要測試
的瀏覽器有 chrome、firefox、opera、IE（IE 低版本是否相容與需求溝通確定）。
高頻面試題（筆試題）
1、簡述 <!doctype> 的作用？
2、常見的瀏覽器及其核心？
3、b 和 strong（i 和 em）標籤的區別？
4、談談對語義化的理解？
5、CSS 引入方式有哪些？
6、CSS 基本選擇器有哪些？
7、如何合併表格單元格？
8、thead、tbody、tfoot 有什麼用？
9、常見表單元素有哪些？
10、請簡述一下盒模型的組成？
11、CSS 複合選擇器有哪些？
12、塊級標籤和行內標籤的區別？
13、浮動產生的問題？清除浮動的方案？
14、偽元素如何建立 ?
15、如何實現盒子水平垂直居中？
16、圖片下方空白間隙如何解決？
17、請簡述 等高佈局、聖盃佈局、雙飛翼佈局的實現原理。
18、簡述 CSS 精靈圖原理，及優缺點？
19、簡述 BFC 規則及解決的問題？
20、文字溢位顯示省略號如何實現？
21、為什麼要初始化 CSS 樣式？哪些樣式需要初始化？
保證瀏覽器的統一性，去掉標籤自帶的樣式
22、display:none 和 visibility：hidden 的區別？
23、你能想出幾種方法讓元素在頁面中消失？
24、標籤應該如何合理巢狀？
25、簡述網頁中常見圖片格式及特點？
26、說說你瞭解的瀏覽器相容問題有哪些？
27、什麼是 CSSHack 技術？
28、在專案中你是如何做圖片優化的？