2019前端面試題（html、css篇）

在此分享、整理前端面試題，若有解答錯誤的地方，煩請各位大佬指正，感謝！！

介紹一下標準的CSS盒子模型，低版本的IE盒子模型有什麼不一樣

標準的盒子模型是content-box，盒子的width和height分別等於content的width和height；低版本的IE盒子模型是border-box，盒子的width=content的width+padding+border，盒子的height=content的height+padding+border

CSS選擇符有哪些，哪些屬性能夠繼承

選擇符：

• id選擇器(# myid)
• 類選擇器(.myclassname)
• 標籤選擇器(div, h1, p)
• 相鄰選擇器(h1 + p)
• 子選擇器(ul > li)
• 後代選擇器(li a)
• 通配符選擇器( * )
• 屬性選擇器(a[rel = "external"])
• 僞類選擇器(a: hover, li:nth-child)

可繼承的樣式：

• font-size
• font-family
• color
• text-indent

css僞類有哪些

CSS 僞類是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。（MDN解釋） :active 、:focus、:hover、:link、visited、:first-child、:last-child

li與li之間有看不見的空白間隔是什麼緣由引發的，有什麼解決辦法

li設置成行內元素了，行內元素之間是會有必定間隙的 解決：

• 設置float:left
• ul設置font-size：0 -
• 標籤間不要留空格

爲何要初始化css樣式

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

談談css定義的權重

行內樣式,1000，ID100，屬性選擇器/class/僞類10，元素名/僞元素1

相同的權重：之後面出現的選擇器爲最後規則

不一樣的權重，權重值高則生效

解釋下爲何要清除浮動，清除浮動的方式

浮動會脫離文檔流，浮動能夠內聯排列，會致使父元素高度坍塌，

方式：

• 給父元素一個高度
• 在同一級加一個div，style是clear:both
• 父元素加僞元素 .clearfix:after { display: table; content: " "; clear: both; }

使用css預處理器嗎，有哪些特性

嵌套語法、變量、@import、混入、繼承、函數、邏輯控制

移動設備忽略將頁面中的數字識別爲電話號碼的方法

<meta name = "format-detection" content = "telephone=no">

flex佈局

www.ruanyifeng.com/blog/2015/0…

css選擇器優先級

• 越具體越優先
• 後面的會覆蓋前面的
• important優先級最高，少用

單行和多行文字超出省略

• 單行英文：

overflow: hidden;
 text-overflow: ellipsis;
複製代碼

• 單行中文

overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
複製代碼

多行

display: -webkit-box;  
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical;  
overflow: hidden;
複製代碼