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,则就称为重绘。
回流：当页面中的布局和几何属性改变时就需要回流，比如是：
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中文网其他相关文章！
揭开屏幕读取器的神秘面纱：可访问的表格和最佳实践Mar 08, 2025 am 09:45 AM这是我们在形式可访问性上进行的小型系列中的第三篇文章。如果您错过了第二篇文章，请查看“以：focus-visible的管理用户焦点”。在
使用智能表单框架创建JavaScript联系表格Mar 07, 2025 am 11:33 AM本教程演示了使用智能表单框架创建外观专业的JavaScript表单（注意：不再可用）。 尽管框架本身不可用，但原理和技术仍然与其他形式的建筑商相关。
将框阴影添加到WordPress块和元素Mar 09, 2025 pm 12:53 PMCSS盒子阴影和轮廓属性获得了主题。让我们查看一些在真实主题中起作用的示例，以及我们必须将这些样式应用于WordPress块和元素的选项。
使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
SublimeText3 Linux新版
SublimeText3 Linux最新版
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
WebStorm Mac版
好用的JavaScript开发工具
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
