經典CSS面試題-css教學-PHP中文網

首頁

web前端

css教學

經典CSS面試題

coldplay.xixi

Aug 03, 2020 pm 03:18 PM

css面試題

經典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部分的高寬

專題推薦：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,則稱為重繪。 ############回流：當頁面中的佈局和幾何屬性改變時就需要回流，例如是：############、新增或刪除可見的DOM元素######

、元素位置的改变

、元素尺寸的改变（边框、尺寸、填充、宽度、高度）

、内容的改变（比如文本的改变和图片大小的改变而引起的计算值宽度和高度的改变）

、页面渲染初始化

、浏览器窗口尺寸的改变-resize事件发生时

回流必将引起重绘，重绘不一定会引起回流

7、对BFC（块级格式化上下文block formatting context）的理解？

简单的来说BFC是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

8、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？

居中p

<style>
p{
width: 200px;
height: 200px;
margin:0 auto;
background-color: pink;
}
</style>
</head>
<body>
<p></p>
</body>

居中一个浮动的元素上下左右居中

<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>

绝对定位水平居中

<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的值？