前端工程師面試中,CSS是一個非常重要的考察內容。以下是一些經典的CSS面試題:
1. 清除浮動的方法有哪些?
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } .clearfix { *zoom:1; }
2. CSS選擇器有哪些?
.class { } // 類選擇器 #id { } // ID選擇器 element { } // 元素選擇器 element.class { } // 元素和類選擇器 element#id { } // 元素和ID選擇器
3. 盒子模型有哪些?
box-sizing: content-box; // W3C標準盒模型 box-sizing: border-box; // IE盒模型
4. margin和padding分別有哪些屬性?
margin: top right bottom left; padding: top right bottom left;
5. 如何讓一個塊級元素水平居中?
.content { display: flex; justify-content: center; }
6. 如何讓一個圖片垂直居中?
.image-wrapper { display: flex; align-items: center; justify-content: center; }
7. 如何讓一個元素在頁面中垂直水平居中?
.wrapper { display: flex; align-items: center; justify-content: center; height: 100vh; }
8. 偽元素有哪些?
::before // 在元素之前插入內容 ::after // 在元素之后插入內容 ::first-letter // 選擇第一個字母或數字 ::first-line // 選擇第一行文本 ::selection // 選擇元素被用戶選中的部分
以上是一些常見的CSS面試題,希望對準備面試的同學有所幫助。