十五道css面试题
目錄
1.介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
2.CSS 中哪些屬性可以繼承？
3.CSS3 新增偽類有那些？
4、請解釋一下 CSS3 的 Flexbox（彈性盒布局模型），以及適用場景？
5、瀏覽器是怎樣解析 CSS 選擇器的？
6、在網頁中應該使用奇數還是偶數的字體？為什么呢？
7、抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
8、為什么不建議使用統配符初始化 css 樣式。
9、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？
10、有一個高度自適應的 div，里面有兩個 div，一個高度 100px，希望另一個填滿剩下的高度
11、常見的元素隱藏方式？
12、word-spacing 與單詞間距？
13、隱藏元素的 background-image 到底加不加載？
14、列舉一些CSS框架？
15、什么是塊級格式化上下文（BFC），如何工作？
1.介紹一下標準的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
相關知識點：
（1）有兩種盒子模型：IE盒模型（border-box）、W3C標準盒模型（content-box）
（2）盒模型：分為內容（content）、填充（padding）、邊界（margin）、邊框（border）四個部分
?
IE盒模型和W3C標準盒模型的區別：
?
（1）W3C標準盒模型：屬性width，height只包含內容content，不包含border和padding
（2）IE盒模型：屬性width，height包含content、border和padding，指的是content
+padding+border。
?
在ie8+瀏覽器中使用哪個盒模型可以由box-sizing（CSS新增的屬性）控制，默認值為content-box，即標準盒模型；
如果將box-sizing設為border-box則用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失會將盒子模型解釋為IE
盒子模型。若在頁面中聲明了DOCTYPE類型，所有的瀏覽器都會把盒模型解釋為W3C盒模型。
盒模型都是由四個部分組成的，分別是margin、border、padding和content。
?
標準盒模型和IE盒模型的區別在于設置width和height時，所對應的范圍不同。標準盒模型的width和height屬性的
范圍只包含了content，而IE盒模型的width和height屬性的范圍包含了border、padding和content。
?
一般來說，我們可以通過修改元素的box-sizing屬性來改變元素的盒模型。
2.CSS 中哪些屬性可以繼承？
有繼承性的屬性：
?
（1）字體系列屬性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust
?
（2）文本系列屬性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color
?
（3）表格布局屬性
caption-sideborder-collapseempty-cells
?
（4）列表屬性
list-style-type、list-style-image、list-style-position、list-style
?
（5）光標屬性
cursor
?
（6）元素可見性
visibility
?
（7）還有一些不常用的；speak，page，設置嵌套引用的引號類型quotes等屬性
?
?
注意：當一個屬性不是繼承屬性時，可以使用inherit關鍵字指定一個屬性應從父元素繼承它的值，inherit關鍵字用于顯式地
指定繼承性，可用于任何繼承性/非繼承性屬性。
3.CSS3 新增偽類有那些？
（1）elem:nth-child(n)選中父元素下的第n個子元素，并且這個子元素的標簽名為elem，n可以接受具體的數
值，也可以接受函數。
?
（2）elem:nth-last-child(n)作用同上，不過是從后開始查找。
?
（3）elem:last-child選中最后一個子元素。
?
（4）elem:only-child如果elem是父元素下唯一的子元素，則選中之。
?
（5）elem:nth-of-type(n)選中父元素下第n個elem類型元素，n可以接受具體的數值，也可以接受函數。
?
（6）elem:first-of-type選中父元素下第一個elem類型元素。
?
（7）elem:last-of-type選中父元素下最后一個elem類型元素。
?
（8）elem:only-of-type如果父元素下的子元素只有一個elem類型元素，則選中該元素。
?
（9）elem:empty選中不包含子元素和內容的elem類型元素。
?
（10）elem:target選擇當前活動的elem元素。
?
（11）:not(elem)選擇非elem元素的每個元素。
?
（12）:enabled ? ?控制表單控件的禁用狀態。
?
（13）:disabled ? ? ? ?控制表單控件的禁用狀態。
?
(14):checked單選框或復選框被選中。
4、請解釋一下 CSS3 的 Flexbox（彈性盒布局模型），以及適用場景？
Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
?
任何一個容器都可以指定為Flex布局。行內元素也可以使用Flex布局。注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
?
采用Flex布局的元素，稱為Flex容器（flexcontainer），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flexitem），簡稱"項目"。
?
容器默認存在兩根軸：水平的主軸（mainaxis）和垂直的交叉軸（crossaxis），項目默認沿主軸排列。
?
?
以下6個屬性設置在容器上。
?
flex-direction屬性決定主軸的方向（即項目的排列方向）。
?
flex-wrap屬性定義，如果一條軸線排不下，如何換行。
?
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row? nowrap。
?
justify-content屬性定義了項目在主軸上的對齊 方式。
?
align-items屬性定義項目在交叉軸上如何對齊。
?
align-content屬性定義了多根軸線的對齊方式。 如果項目只有一根軸線，該屬性不起作用。
?
?
以下6個屬性設置在項目上。
?
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
?
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
?
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
?
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認
值為auto，即項目的本來大小。
?
flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為01auto。
?
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父
元素的align-items屬性，如果沒有父元素，則等同于stretch。
5、瀏覽器是怎樣解析 CSS 選擇器的？
????????樣式系統從關鍵選擇器開始匹配，然后左移查找規則選擇器的祖先元素。只要選擇器的子樹一直在工作，樣式系統就會持續左移，直
到和規則匹配，或者是因為不匹配而放棄該規則。
?
????????試想一下，如果采用從左至右的方式讀取CSS規則，那么大多數規則讀到最后（最右）才會發現是不匹配的，這樣做會費時耗能，
最后有很多都是無用的；而如果采取從右向左的方式，那么只要發現最右邊選擇器不匹配，就可以直接舍棄了，避免了許多無效匹配。
6、在網頁中應該使用奇數還是偶數的字體？為什么呢？
（1）偶數字號相對更容易和web設計的其他部分構成比例關系。比如：當我用了14px的正文字號，我可能會在一些地方用14
×0.5=7px的margin，在另一些地方用14×1.5=21px的標題字號。
（2）瀏覽器緣故，低版本的瀏覽器ie6會把奇數字體強制轉化為偶數，即13px渲染為14px。
（3）系統差別，早期的Windows里，中易宋體點陣只有12和14、15、16px，唯獨缺少13px。
7、抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
????????我的理解是把常用的css樣式單獨做成css文件……通用的和業務相關的分離出來，通用的做成樣式模塊兒共享，業務相關的，放
進業務相關的庫里面做成對應功能的模塊兒。
8、為什么不建議使用統配符初始化 css 樣式。
????????采用*{pading:0;margin:0;}這樣的寫法好處是寫起來很簡單，但是是通配符，需要把所有的標簽都遍歷一遍，當網站較大時，
樣式比較多，這樣寫就大大的加強了網站運行的負載，會使網站加載的時候需要很長一段時間，因此一般大型的網站都有分層次的一
套初始化樣式。
?
????????出于性能的考慮，并不是所有標簽都會有padding和margin，因此對常見的具有默認padding和margin的元素初始化即
可，并不需使用通配符*來初始化。
9、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms＝16.7ms
10、有一個高度自適應的 div，里面有兩個 div，一個高度 100px，希望另一個填滿剩下的高度
（1）外層div使用position：relative；高度要求自適應的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;
?
（2）使用flex布局，設置主軸為豎軸，第二個div的flex-grow為1。
11、常見的元素隱藏方式？
（1）使用 display:none;隱藏元素，渲染樹不會包含該渲染對象，因此該元素不會在頁面中占據位置，也不會響應綁定的監聽事件。
-（2）使用 visibility:hidden;隱藏元素。元素在頁面中仍占據空間，但是不會響應綁定的監聽事件。
-（3）使用 opacity:0;將元素的透明度設置為 0，以此來實現元素的隱藏。元素在頁面中仍然占據空間，并且能夠響應元素綁定的監聽事件。
-（4）通過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏。
-（5）通過 z-index 負值，來使其他元素遮蓋住該元素，以此來實現隱藏。
-（6）通過 clip/clip-path 元素裁剪的方法來實現元素的隱藏，這種方法下，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。
-（7）通過 transform:scale(0,0)來將元素縮放為 0，以此來實現元素的隱藏。這種方法下，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。
12、word-spacing 與單詞間距？
letter-spacing作用于所有字符，但word-spacing僅作用于空格字符。換句話說，word-spacing的作用就是增加空格的間隙寬度。
13、隱藏元素的 background-image 到底加不加載？
根據測試，一個元素如果display計算值為none，在IE瀏覽器下（IE8～IE11，更高版本不確定）依然會發送圖片請求，Fire
fox瀏覽器不會，至于Chrome和Safari瀏覽器則似乎更加智能一點：如果隱藏元素同時又設置了background-image，則圖片
依然會去加載；如果是父元素的display計算值為none，則背景圖不會請求，此時瀏覽器或許放心地認為這個背景圖暫時是不會使
用的。
?
如果不是background-image，而是<img>元素，則設置display:none在所有瀏覽器下依舊都會請求圖片資源。
?
還需要注意的是如果設置的樣式沒有對應的元素，則background-image也不會加載。hover情況下的background-image，在觸
發時加載。
14、列舉一些CSS框架？
Bootstrap：是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。
Layui：是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，體積輕盈，組件豐盈，非常適合界面的快速開發。
ElementUI：一套為開發者、設計師和產品經理準備的基于 Vue 2.0的桌面端組件庫。
antd：是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發企業級中后臺產品。開箱即用的高質量 React 組件，全鏈路開發和設計工具體系，數十個國際化語言支持。
15、什么是塊級格式化上下文（BFC），如何工作？
1.規范解釋
塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。
2.通俗解釋：
BFC 是一個獨立的布局環境,可以理解為一個容器,在這個容器中按照一定規則進行物品擺放,并且不會影響其它環境中的物品。
如果一個元素符合觸發BFC的條件，則該元素中的布局不受外部影響。
浮動元素會創建BFC，所以浮動元素內部子元素主要受浮動元素影響，兩個浮動元素之間是互不影響的。
3.創建方式：
根元素或包含根元素的元素
浮動元素 float ＝ left | right 或 inherit（≠ none）
絕對定位元素 position ＝ absolute 或 fixed
display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
overflow ＝ hidden | auto 或 scroll (≠ visible)
?
?
總結
- 上一篇： java 发送邮件添加附件_java邮件
- 下一篇： 用Calibre去除Kindle电子书的