2020 CSS3面试题

1.盒模型·标准盒模型 border, padding, content, margin ·IE盒模型 border, padding, content ·通过 box-sizing属性改变元素的盒模型专题推荐：
2020年CSS面试题汇总（最新）2.CSS选择符·id选择器（#myId）·类选择器（.myClassName）·标签选择器（p, h1, p）·后代选择器（h1 p）·相邻后代选择器（子）选择器（ul > li）·兄弟选择器（li~a）·相邻兄弟选择器（li+a）·属性选择器（a[rel="external"]）·伪类选择器（a:hover, li:nth-child）·伪元素选择器（::before, ::after）·通配符选择器（*）3.::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？·在 CSS3 中 : 表示伪类， :: 表示伪元素·想让插入的内容出现在其他内容前，使用::befroe。
否则，使用::after4.CSS中哪些属性可以继承？·每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值 来作为自己的值。
·一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。
·文本相关的属性，color和text-align等。
·表格的一些布局属性、列表属性如list-style等。
·还有光标属性cursor、元素可见性visibility。
·当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。
5.如何居中p-水平居中1：
给 p 设置一个宽度，然后添加 margin:0 auto;
属性p{
width: 200px;
margin: 0 auto;
}
-水平居中2：
利用 text-align:center 实现.container{
background: rgba(0, 0, 0, .5);
text-align: center: font-size: 0;
}
.box{
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
-让绝对定位的p居中p{
positionn: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink;
/* 方便看效果 */}
-水平垂直居中1/* 确定容器的宽高，宽500高300 */p{
position: absolute;
width:500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
background-color: pink;
}
-水平垂直居中2/* 未知容器宽高，利用 transform 属性 */p{
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
-水平垂直居中3/* 利用 flex 布局实际使用时应考虑兼容性 */.container{
display: flex;
align-items: center;
/* 垂直居中 */ justify-content: center;
/* 水平居中 */}
.container p{
width: 100px;
height: 100px;
background-color: pink;
}
6.CSS3有哪些新特性·新增各种CSS选择器（:not(.input) 所有class不是“input”的节点）·圆角（border-radius: 8px;
）·多列布局（multi-columnlayout）·阴影和反射（Shadow/Reflect）·文字特效(text-shadow)·文字渲染(Text-decoration)·线性渐变(gradient)·旋转(transform)·缩放，定位，倾斜，动画，多背景7.解释一下 Flexbox (弹性盒布局模型)？及适用场景？·任何一个容器都可以指定为 flex 布局。
行内元素也可使用 flex 布局。
·一下6个属性设置在容器上 flex-direction 定义主轴的方向 flex-wrap 定义“如果一条轴线排不下，如何换行” flex-flow 上述2个属性的简写 justify-content 定义项目在主轴上对齐方式 align-items 定义项目在交叉轴上如何对齐 align-content 定义多根轴线的对齐方式 ·flex 布局是CSS3新增的一种布局方式， 我们可以通过将一个元素的display属性设置为flex 从而使他成为一个flex容器， 他对我所有子元素都会称谓他的项目。
·一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。
我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式， 使用align-items来指定元素在交叉轴上的排列方式。
还可以使用flex-wrap来规定当一行排列不下时的换行方式。
8.用纯 CSS 创建一个三角形？/* 采用的是相邻边框链接处的均分原理 将元素的宽高设为0，只设置 border , 将任意三条边隐藏掉（颜色设为 transparent ）,剩下的就是一个三角形 */#demo{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
9.一个满屏“品”字布局如何设计？·上面的 p 宽100% ·下面的两个 p 分别宽50% ·然后用 float 或者 inline 使其不换行10.浏览器兼容性有哪些？*****① 浏览器默认的 margin 和 padding 不同 解决：
加一个全局 *{
margin: 0;
padding: 0;
}
来统一 ② 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示 解决：
使用-webkit-transform:scale(.75);
收缩的是整个span盒子大小，这时候，必须将span准换成块元素。
③ 超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了 解决：
改变css 属性的排列顺序L-V-H-A11.width: auto 和 width: 100% 的区别·width: 100% 会使元素box的宽度等于父元素的contentbox的宽度 ·width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间12.使用 base64 编码的优缺点·base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串， 在页面上显示时可用该字符串来代替图片的url属性 ·使用base64的优点：
① 减少一个图片的 HTTP 请求 ·使用base64的缺点：
① 根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到html/css中， 不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。
② 使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML 或CSS， 这相比于直接缓存图片的效果要差很多。
③ ie8以前的浏览器不支持 一般一些网站的小图标可以使用base64图片引入13.为什么要清除浮动？清除浮动的方式？·清除浮动是为了清除使用浮动元素产生的影响。
浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。
① 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear: both;
）(不推荐)优点：
通俗易懂，方便缺点：
添加无意义标签，语义化差② 父级添加 overflow 属性（父元素添加 overflow: hidden）(不推荐)优点：
代码简洁缺点：
内容增多的时候容易造成不会自动换行，导致内容被隐藏掉，无法显示要溢出的元素③ 使用 after 伪元素清除浮动 （推荐使用）.clearfix::after{
/* 伪元素是行内元素，正常浏览器清除浮动方法 */ content: "";
dispaly: block;
height: 0;
clear: both;
visibility: hiden;
}
.clearfix{
/* *ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行 */ *zoom: 1;
}
优点：
符合闭合浮动思想，结构语义化正确缺点：
IE6-7不支持伪元素：
after,使用zoom：
1触发hasLayout④ 使用before 和 after 双伪元素清除浮动.clearfix::after, .clearfix::before{
content: "";
display: table;
}
.clearfix::after{
clear: both;
}
.clearfix{
*zoom: 1;
}
14.CSS优化，提高性能的方法有哪些？·加载性能：
① CSS 压缩：
将写好的CSS 进行打包压缩，可以减少很多的体积。
② CSS单一样式：
当需要下边距和左边距的时候，很多时候选择：
margin: top 0 bottom 0;
但margin-top: top;
margin-bottom: bottom;
执行的效率更高。
·选择器性能：
① 关键选择器。
选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。
相关教程推荐：
CSS视频教程以上就是2020 CSS3面试题的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
CSS3面试题本文转载于：
zhuanlan，如有侵犯，请联系a@php.cn删除
上一篇：
前端常见css的面试题目
下一篇：
CSS面试题（参考）相关文章相关视频CSS3如何实现图片木桶布局？（附代码）九款纯CSS3绘制的复古相机特效代码经典CSS面试题七道重要CSS面试题2020 CSS3面试题使用CSS3属性前的准备使用CSS3边框图像(border-image)属性（上）使用CSS3文本属性使用CSS3渐变、倒影属性 [做网站css教程]