溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
有哪些經典的CSS面試題？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1、標準盒模型和低版本IE盒模型（怪異模式）有什么區別？
標準盒模型：內容的寬度（content）+border+padding+margin；
IE低版本盒模型：內容的寬度（content+border+padding）+margin；
最主要的區別在于盒模型的寬度；
box-sizing屬性是用來控制元素的盒子模型的解析模式，默認為content-box
content-box：w3c標準盒子模型，設置元素的height/width屬性指的是content部分的高寬
border-box：IE傳統盒子模型，設置元素的height/width屬性指的是border+padding+content部分的高寬
2、利用CSS3屬性寫出一個三角形
<style>
p{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid red;
border-left: 40px solid transparent;
}
</style>
</head>
<body>
<!-- 想要改變三角形的方向只需要改變border屬性值（即tblr） -->
<p></p>
</body>3、怎樣理解HTML5？
（1）、在前端領域H5是一個技術集合（技術棧），而不是單純的一個技術點，所以不能理解是一個html的規范。
（2）、我們可以從html、css、js三個方面進行梳理
html:語義化標簽、新增表單類型、新增表單屬性
css：新增選擇器、過渡、轉換、動畫、媒體查詢
js:canvas繪圖、ES6
（3）、從職能理解H5的開發
移動web的開發
響應式開發
單頁面應用開發
混合APP開發
微信小程序
微信公眾號開發
H5開發泛指對H5技術棧（HTML的提升、css的提升、JavaScript的提升）的綜合使用開發網頁應用程序
4、CSS3有哪些新的特性？
(1)、RGBA和透明度
(2)、background-image、background-origin、background-size、background-repeat
(3)、word-wrap(對長的不可分割的單詞進行換行)word-wrap:break-word;
(4)、文字陰影：text-shadow：5px 5px 5px #ccc;（水平陰影，垂直陰影，模糊距離，陰影顏色）
(5)、font-face：自定義自己的字體
(6)、圓角（邊框半徑）：border-radius 屬性用于創建圓角
(7)、盒陰影box-shadow:5px 5px 5px #ccc;
(8)、媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性
5、為什么移動端項目要使用box-sizing：border-box?
box-sizing:border-box;可以避免寬度溢出，造成橫向滾動條（移動端項目都是非固定式寬度）
6、display:none與visibility：hidden的區別？
display：none 不顯示對應的元素，在文檔布局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間（重繪）
重繪：當render-tree中的一些元素需要更新屬性，而這些屬性只影響元素的外觀、風格，而不影響布局，比如是background-color,則就稱為重繪。
回流：當頁面中的布局和幾何屬性改變時就需要回流，比如是：
<1>、添加或刪除可見的DOM元素
<2>、元素位置的改變
<3>、元素尺寸的改變（邊框、尺寸、填充、寬度、高度）
<4>、內容的改變（比如文本的改變和圖片大小的改變而引起的計算值寬度和高度的改變）
<5>、頁面渲染初始化
<6>、瀏覽器窗口尺寸的改變-resize事件發生時
回流必將引起重繪，重繪不一定會引起回流
7、對BFC（塊級格式化上下文block formatting context）的理解？
簡單的來說BFC是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。
8、如何居中p？如何居中一個浮動元素？如何讓絕對定位的p居中？
<1>居中p
<style>
p{
width: 200px;
height: 200px;
margin:0 auto;
background-color: pink;
}
</style>
</head>
<body>
<p></p>
</body><2>居中一個浮動的元素上下左右居中
<style>
p{
width: 200px;
height: 200px;
background-color: pink;
float: left;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<p></p>
</body><3>絕對定位水平居中
<style>
p{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
</style>
</head>
<body>
<p></p>
</body>9、position的值？
static（默認）：按照正常文檔流進行排列
relative（相對定位）不脫離文檔流，參考自身的top、right、bottom、left進行定位
absolute（絕對定位）參考其最近的一個非static的父級元素通過top、right、bottom、left進行定位
fixed（固定定位）所固定的參照對象是可視窗口的位置
10、常見的兼容性問題
<1>不同瀏覽器標簽默認的padding和margin不一樣，*{padding:0;margin:0}
<2>chorme瀏覽器中文界面下默認會將小于12px的文本強制按照12px顯示，可通過加入css屬性-webkit-text-size-adjust:none;
11、為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式？
由于浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題：
<1>父元素的高度無法被撐開
<2>與浮動元素同級的非浮動元素（內聯元素）會跟隨其后
<3>若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。
清除浮動的方式：
<1> 父級p定義高度
<2> 最后一個浮動元素后加空p標簽，并添加樣式clear：both
<3> 包含浮動元素的父標簽添加樣式overflow為hidden和auto
<4> 父級定義zoom
看完上述內容，你們掌握有哪些經典的CSS面試題的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
