面試總結html和css · 面試

#### 盒子模型 content、padding、border、margin。4個部分一起構成了css中元素的盒模型。說說ie和w3c的區別，以及box-sizing屬性（border-box、padding-box等） #### 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素：a、b、span、img、input、strong、select、label、em、button、textarea 塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img 每個元素都有兩個盒子：外在盒子和內在盒子。外在盒子負責元素是否可以一行顯示，還是只能換行顯示；內在盒子（容器盒子）負責寬高、內容呈現等等。display: block實際由外在的塊級盒子和內在的塊級容器盒子組成。display: inline-block實際由外在的內聯盒子和內在的塊級容器盒子組成。display: inline內外均是內聯。 #### 簡述一下src與href的區別 href 是指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用于超鏈接。 src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。 #### 請指出document load和document ready的區別？ ready 事件的觸發，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）。 onload 事件的觸發，表示頁面包含圖片等文件在內的所有元素都加載完成。 #### 圣杯布局（左右固定中間自適應） 1. flex 2. margin ``` <div style="height:100px;background:red;width:100%;float:left;padding:0 100px;box-sizing:border-box">123</div> <div style="height:100px;background:blue;width:100px;margin-left:-100%;float:left"></div> <div style="height:100px;background:yellow;width:100px;margin-left:-100px;float:left"></div> ``` #### CSS中 link 和@import 的區別是？頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載可繼承的樣式： font-size font-family color, text-indent; 不可繼承的樣式：border padding margin width height ; #### 為什么要初始化CSS樣式。因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。 #### 雪碧圖 CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。這樣可以減少很多圖片請求的開銷 #### 瀏覽器常用兼容性 1. png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8 2. 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。 3. IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。解決方案是為float元素的display設置inlineblock 4. Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決. 5. firefox中img默認是inline，因此設置寬高無效，需要手動設置inline-block 6. #### 清除浮動 * clear:both * bfc，比如overflow hidden * after: {content:'', clear:both} flex >= ie10 #### BFC https://www.cnblogs.com/nujufoul/p/7092520.html