经典CSS面试题

2020-10-22

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

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视频教程

以上就是经典CSS面试题的详细内容，更多请关注php中文网其它相关文章！

经典CSS面试题

发表回复 取消回复

发表回复取消回复