您的位置：首页 > 技术中心 > 前端框架 >

经典CSS面试题

时间：2020-08-08 18:42

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的开发

响应式开发

单页面应用开发

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