经典CSS面试题-百分百源码网

经典CSS面试题

发布时间：09/01 来源：未知浏览：关键词：

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