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。不然，使用::after

4.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-A

11.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面试题的具体内容，更多请关注百分百源码网其它相关文章！