
Camila Waz
发布于
2020-09-01 15:33:28
CSS3面试题2020
上一篇文章:
ES6常见面试题总结(四)
下一篇文章:
Chartist.js的 React组件
1.盒模型
-水平居中1:给 div 设置一个宽度,然后添加 margin:0 auto; 属性
·新增各种CSS选择器(:not(.input) 所有class不是“input”的节点)
·圆角(border-radius: 8px;)
·多列布局(multi-columnlayout)
·阴影和反射(Shadow/Reflect)
·文字特效(text-shadow)
·文字渲染(Text-decoration)
·线性渐变(gradient)
·旋转(transform)
·任何一个容器都可以指定为 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 创建一个三角形?
·上面的 div 宽100%
·下面的两个 div 分别宽50%
① 浏览器默认的 margin 和 padding 不同
解决:加一个全局 *{ margin: 0; padding: 0; }来统一
② 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示
解决:使用-webkit-transform:scale(.75);收缩的是整个span盒子大小,这时候,必须将span准换成块元素。
③ 超链接访问过后hover样式就不会出现了,被点击访问过的超链接样式不再具有hover 和active 了
·width: 100% 会使元素box的宽度等于父元素的contentbox的宽度
·base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,
在页面上显示时可用该字符串来代替图片的url属性
·使用base64的优点:
① 减少一个图片的 HTTP 请求
·使用base64的缺点:
① 根据base64的编码原理,编码后的大小会比源文件大小大1/3,如果把大图片编码到html/css中,
不仅会造成文件体积增加,影响文件的加载速度,还会增加浏览器对html或css文件解析渲染的时间。
② 使用base64无法直接缓存,要缓存只能缓存包含base64的文件,比如HTML 或CSS,
这相比于直接缓存图片的效果要差很多。
③ ie8以前的浏览器不支持
·清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,
而高度的塌陷使我们页面后面的布局不能正常显示。
① 额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear: both;)(不推荐)
优点:通俗易懂,方便
缺点:添加无意义标签,语义化差
② 父级添加 overflow 属性(父元素添加 overflow: hidden)(不推荐)
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行,导致内容被隐藏掉,无法显示要溢出的元素
③ 使用 after 伪元素清除浮动 (推荐使用)
缺点:IE6-7不支持伪元素:after,使用zoom:1触发hasLayout
④ 使用before 和 after 双伪元素清除浮动
·加载性能:
① CSS 压缩:将写好的CSS 进行打包压缩,可以减少很多的体积。
② CSS单一样式:当需要下边距和左边距的时候,很多时候选择:margin: top 0 bottom 0;
但margin-top: top;margin-bottom: bottom;执行的效率更高。
·选择器性能:
① 关键选择器。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。
·标准盒模型 border, padding, content, margin ·IE盒模型 border, padding, content ·通过 box-sizing属性改变元素的盒模型2.CSS选择符
·id选择器(#myId) ·类选择器(.myClassName) ·标签选择器(div, 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.如何居中div
-水平居中1:给 div 设置一个宽度,然后添加 margin:0 auto; 属性
div{ 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; }-让绝对定位的div居中
div{ positionn: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */ }-水平垂直居中1
/* 确定容器的宽高,宽500高300 */ div{ position: absolute; width:500px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; background-color: pink; }-水平垂直居中2
/* 未知容器宽高,利用 transform 属性 */ div{ 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 div{ 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)
·缩放,定位,倾斜,动画,多背景
·任何一个容器都可以指定为 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.一个满屏“品”字布局如何设计?
·上面的 div 宽100%
·下面的两个 div 分别宽50%
·然后用 float 或者 inline 使其不换行
① 浏览器默认的 margin 和 padding 不同
解决:加一个全局 *{ margin: 0; padding: 0; }来统一
② 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示
解决:使用-webkit-transform:scale(.75);收缩的是整个span盒子大小,这时候,必须将span准换成块元素。
③ 超链接访问过后hover样式就不会出现了,被点击访问过的超链接样式不再具有hover 和active 了
解决:改变css 属性的排列顺序L-V-H-A
·width: 100% 会使元素box的宽度等于父元素的contentbox的宽度
·width: auto 会时元素撑满整个父元素,margin, border, padding, content 区域会自动分配水平空间
·base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,
在页面上显示时可用该字符串来代替图片的url属性
·使用base64的优点:
① 减少一个图片的 HTTP 请求
·使用base64的缺点:
① 根据base64的编码原理,编码后的大小会比源文件大小大1/3,如果把大图片编码到html/css中,
不仅会造成文件体积增加,影响文件的加载速度,还会增加浏览器对html或css文件解析渲染的时间。
② 使用base64无法直接缓存,要缓存只能缓存包含base64的文件,比如HTML 或CSS,
这相比于直接缓存图片的效果要差很多。
③ ie8以前的浏览器不支持
一般一些网站的小图标可以使用base64图片引入
·清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,
而高度的塌陷使我们页面后面的布局不能正常显示。
① 额外标签法(在最后一个浮动标签后,新加一个标签,给其设置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;执行的效率更高。
·选择器性能:
① 关键选择器。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。
最后生成于 2020-12-28 15:07:58
上一篇文章:
ES6常见面试题总结(四)
下一篇文章: