经典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的开发
响应式开发
单页面应用开发
混合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视频教程
Atas ialah kandungan terperinci 经典CSS面试题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1666
14
1426
52
1328
25
1273
29
1255
24
Perbandingan pembekal bentuk statik
Apr 16, 2025 am 11:20 AM
Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda
Bukti konsep untuk menjadikan sass lebih cepat
Apr 16, 2025 am 10:38 AM
Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula
Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom
Apr 17, 2025 am 10:55 AM
Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC
Beberapa tangan dengan elemen dialog HTML
Apr 16, 2025 am 11:33 AM
Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan
Kertas kerja
Apr 16, 2025 am 11:24 AM
Beli atau Membina adalah perdebatan klasik dalam teknologi. Membina barang sendiri mungkin berasa lebih murah kerana tidak ada item baris pada bil kad kredit anda, tetapi
Di manakah 'Langgan Podcast' pautan ke?
Apr 16, 2025 pm 12:04 PM
Untuk sementara waktu, iTunes adalah anjing besar dalam podcasting, jadi jika anda mengaitkan "Langgan Podcast" untuk suka:
Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet React
Apr 15, 2025 am 11:01 AM
Ketua dokumen mungkin bukan bahagian paling glamor dari laman web, tetapi apa yang masuk ke dalamnya boleh dikatakan sama pentingnya dengan kejayaan laman web anda sebagai
Pilihan untuk menganjurkan analisis berasaskan bukan JavaScript anda sendiri
Apr 15, 2025 am 11:09 AM
Terdapat banyak platform analisis untuk membantu anda mengesan data pelawat dan penggunaan di laman web anda. Mungkin paling penting Google Analytics, yang digunakan secara meluas
