經典CSS面試題
- coldplay.xixi轉載
- 2020-08-03 15:18:424149瀏覽
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部分的高寬
專題推薦：2020年CSS面試題匯總（最新）
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的發展 響應式發展 者與「混合搭配 微信小程式
微信公眾號開發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,則稱為重繪。 ############回流：當頁面中的佈局和幾何屬性改變時就需要回流，例如是：############f35d6e602fd7d0f0edfa6f7d103c1b57、新增或刪除可見的DOM元素######2cc198a1d5eb0d3eb508d858c9f5cbdb、元素位置的改变
5bdf4c78156c7953567bb5a0aef2fc53、元素尺寸的改变（边框、尺寸、填充、宽度、高度）
23889872c2e8594e0f446a471a78ec4c、内容的改变（比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变）
43ad812d3a971134e40facaca816c822、页面渲染初始化
efbfa0de8737dc86eae413541a49df20、浏览器窗口尺寸的改变-resize事件发生时
回流必将引起重绘，重绘不一定会引起回流
7、对BFC（块级格式化上下文block formatting context）的理解？
简单的来说BFC是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
8、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？
f35d6e602fd7d0f0edfa6f7d103c1b57居中p
<style>
p{
width: 200px;
height: 200px;
margin:0 auto;
background-color: pink;
}
</style>
</head>
<body>
<p></p>
</body>2cc198a1d5eb0d3eb508d858c9f5cbdb居中一个浮动的元素上下左右居中
<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>5bdf4c78156c7953567bb5a0aef2fc53绝对定位水平居中
<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、常见的兼容性问题
f35d6e602fd7d0f0edfa6f7d103c1b57不同浏览器标签默认的padding和margin不一样，*{padding:0;margin:0}
2cc198a1d5eb0d3eb508d858c9f5cbdbchorme浏览器中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入css属性-webkit-text-size-adjust:none;
11、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
浮动带来的问题：
f35d6e602fd7d0f0edfa6f7d103c1b57父元素的高度无法被撑开
2cc198a1d5eb0d3eb508d858c9f5cbdb与浮动元素同级的非浮动元素（内联元素）会跟随其后
5bdf4c78156c7953567bb5a0aef2fc53若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方式：
f35d6e602fd7d0f0edfa6f7d103c1b57 父级p定义高度
2cc198a1d5eb0d3eb508d858c9f5cbdb 最后一个浮动元素后加空p标签，并添加样式clear：both
5bdf4c78156c7953567bb5a0aef2fc53 包含浮动元素的父标签添加样式overflow为hidden和auto
23889872c2e8594e0f446a471a78ec4c 父级定义zoom
相关教程推荐：CSS视频教程
以上是經典CSS面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！