前端常见css的面试题目
阅读 23202 · 发布日期 2020-08-24 11:46 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
随着疫情的不断好转,各地都开始逐步的复工,当然对我们来说,也马上迎来所谓的金三银四跳槽季。在此,分享自己在前端领域中积累的一些经验,供自己温故知新。 对于前端来说,涉及的知识面广,内容繁多,但是万变不离其宗,主要也就是围绕着html(5),css(less,scss,sass,styus,css3),js(es5,e... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
随着疫情的不断好转,各地都开始逐步的复工,当然对我们来说,也马上迎来所谓的金三银四跳槽季。
在此,分享自己在前端领域中积累的一些经验,供自己温故知新。
对于前端来说,涉及的知识面广,内容繁多,但是万变不离其宗,主要也就是围绕着html(5),css(less,scss,sass,styus,css3),js(es5,es6),以及常见的几大热门框架vue,react等,话不多说,直接开始进入主题。
专题推荐:
2020年CSS面试题汇总(最新)1.请说出几个html5新特性答:
html5增加的新特性具体为:
1、新增的语义/结构化标签,如增加了footer,article,main,nav等;2、新增的input的type类型和属性,如:
email,tel,number等;3、HTML5专有的API 地理位置 本地存储 缓存等4、新的图形标签 svg canvas 二者区别5、新的多媒体标签 video audio source6、废弃的一些元素标签,如:
font7、自定义元素标签8、DOCTYPE 和字符编码charset声明2.z-index的使用答:
z-index是用于设置标签的层级关系,使用z-index的时候需要同时设置标签的position属性(如relative或者absolute或者fixed都可),标签的默认z-index为0,可以设置负数,值越大,越在顶部3.position的属性以及使用方式答:
position是css的定位属性,其主要包括以下几个不同的属性值,具体如下:
absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative生成相对定位的元素,相对于其正常位置进行定位。
因此,”left:20” 会向元素的 left 位置添加 20 像素。
static默认值。
没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit规定应该从父元素继承 position 属性的值。
4.float的使用答:
属性定义元素在哪个方向浮动。
以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素。
具体如下:
float造成的效果使元素本身变成了类似于inline-block的元素使包裹它的元素忽略它的高度,即父元素没有了高度如:
给子元素box设置了height:100px;
此时的父元素height也是100px。
float的影响float使元素脱离了文档流按照指定的方向发生了移动,直到它的外边缘碰到包含框或者另一个浮动的边框为止。
浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的 如果父元素太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会换行显示。
以换行的那个元素为基准,如果有浮动元素的高度大于换行的那个元素,那么当换行元素换行时会被高的那个元素"卡住"5.清除浮动影响的方式答:
float会造成文档流的破坏,因此,需要消除float所造成的影响一般有如下几种方案解决:
针对子元素:
给浮动的子元素后面再加一个元素,加上一个clear:
both属性即可正常显示,缺点是随意添加了一个空元素,不符合代码规范针对父元素:
给父元素后面添加一个相邻的空元素,设置clear属性,但只是让后面的元素正常显示,并没有撑开父元素的高度针对父元素:
给父元素设置高度,可以正常显示,但扩展性不好,因为一般都是由里面的内容来撑开高度针对父元素:
给父元素设置display: inline-block,可以正常显示,但父元素的margin:
auto失效了,而且会发现上下两个部分会出现间隙针对父元素:
给父元素设置overflow: hidden,可以正常显示了,但需要配合宽度,否则会默认占满一行。
6.css动画属性(如使用css制动一个旋转三角形)答:
制作一个三角形可以直接使用border的属性,具体为可以设置盒子的高宽度为0px,然后设置对应宽度的不同border的颜色属性,三角形对应的底边设置为具体的三角形颜色,其对应变不设置或者设置为宽度为0 另外两个斜边设置为transparent旋转动画会涉及到css的两个属性,分别为:
1)transition:
动画属性,可以写四个值 分别为对应动画的属性名称或者直接设置all、动画完成的时间(单位为s或者ms)、动画的变化曲线、动画开始的时间2)transform:
旋转属性 主要有rotate(弧度旋转分别还有rotate3d,rotateX,rotateY,rotateZ),translate(同理有四个),scale(同理有四个)7.正规盒子模型和非正规盒子模型答:
盒子模型主要是计算标签的宽度或高度不一致,标准的盒子模型的包括:
margin,border,padding以及内容的宽度,即:
盒子的实际宽度=内容的左右margin+左右border+左右padding+内容的实际宽度;而在css3中引入了box-sizing属性,可以改变标准盒子模型的计算方式,具体为:
设置box-sizing:
border-box的时候,盒子的实际宽度=内容的左右margin+内容的实际宽度,当然可以直接设置box-sizing:
content-box的时候即可恢复正常的标准盒子模型8.flex弹性布局答:
1.设置盒子的display属性为flex,或者line-flex,其对应还有六个css属性,分别为:
1)flex-direction:
设置子元素的排列方式(row,column,row-reverse,column-reverse)2)flex-warp:
设置子元素的是否换行(nowarp,warp,warp-reverse)3)flex-flow:
flex-direction和flex-warp的缩写,默认为row nowarp4)justify-content:
设置子元素的水平排列方式(flex-start,flex-end,center,span-around,span-between)5)align-items:
设置子元素的垂直方式(flex-start,flex-end,center,stretch,baseline)6)align-content:
设置多个轴线的排列方式(flex-start,flex-end,center,spand-around,spand-between,stretch)2. 对应的子元素项目也拥有自身的六个css属性,分别为:
1)order:
设置元素的排列权重 值越大越在后2)flex-grow:
设置元素的放大比例3)flex-shrink:
设置元素的缩小比例4)flex-basis:
设置多余空间项目主轴所占比例空间5)flex:
flex-grow和flex-shrink和flex-basis的缩写方式 默认为0 1 auto6)align-self:
设置子元素自己的垂直排列方式,默认为盒子的align-items的值:warning::
设置flex布局后,子元素的float,clear,vertical-align都无效9.grid网格布局答:
1. 设置盒子的网格布局需要设置display为grid或者line-grid,其对应包括以下属性:
1)grid-template-columns:
定义每一列的宽度2)grid-template-rows:
定义每一行的高度3)grid-row-gap:
定义行之间的间隙4)grid-column-gap:
定义列之间的间隙5)grid-gap:
定义行和列之间的间隙缩写6)grid-teamplate-areas:
定义一个区域由多个单元格组成7)grid-auto-flow:
定义容器排列顺序8)justify-items:
定义子元素的内容水平排列顺序9)align-items:
定义子元素的内容垂直排列顺序10)place-items:
定义子元素的内容水平和垂直顺序的缩写方式11)justify-content:
定义容器(网格)的水平排列顺序12)align-content:
定义容器(网格)的垂直排列顺序13)place-content:
定义容器的水平和垂直排列顺序的缩写方式2. 子元素的属性包括:
1)grid-column-start:
列开始的位置2)grid-column-end:
列结束的位置3)grid-row-start:
行开始的位置4)grid-row-end:
行结束的位置5)grid-column:
列开始和结束位置6)grid-row:
行开始和结束的位置7)grid-area:
定义元素放置在哪个区域8)justify-self:
定义元素自己的水平排列方式9)align-self:
定义元素自己的垂直排列方式10)place-self:
定义元素自己的水平和垂直排列方式:warning::
当设置为网格布局后,子元素的float,inline-block,table-cell,column-*属性全部失效10.常见居中方案答:
1. 行内元素水平居中:
直接使用text-align:
center2. 行内元素垂直居中:
vertical-align:
middle并设置父级元素的行高为父级元素的高度3. 固定宽度的元素 水平居中使用:
magin:
0 auto4. flex弹性布局:
设置justify-content:
center水平居中,align-items:
垂直居中5. 通过padding属性进行垂直居中6. 设置父级元素为:
display:
table-cell,vertical-align:
middle7. 通过伪元素设置垂直居中:
设置父级元素一个伪元素 并设置其为inline-block,同时设置vertical-align:
middle8. 高度确定的时候:
绝对定位+margin来垂直居中9. 高度不确定的时候:
绝对定位+transform,具体为:
设置需要垂直居中的元素为:
position:
absolute,top:
50%,transform:
translateY(-50%)10. 通过flex-duration:
column来垂直居中:
display:
flex,flex-duration:
column,justify-content:
center水平垂直居中方法:
1. 父级元素高度已知,子元素高宽固定(高度可不固定):
text-align:
center,line-height:
父级高度2.绝对定位+margin实现垂直水平居中,需要知道子元素高宽度3. 绝对定位+transform实现垂直水平居中,可以不知道子元素高宽度:
position:
absolute;top:
50%;left:
50%;transform:
translate(-50%,-50%)4. 使用display为table,子元素为display:
table-cell;vertical-align:
center;text-align:
center子子元素设置为vertical-align:
center5. 使用父元素的伪元素进行垂直居中(父元素需要知道高度),设置伪元素的高度为100%,并设置vertical-align:
middle,display:
inline-block;子元素设置vertical-align:
center;display:
inline-block(子元素水平居中可以采用text-align:
center或者margin:
0 auto)6. 子元素设置为margin:
auto;position:
absolute;top:
0;left:
0;right:
0;bottom:
0;11.伪元素的使用答:
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标12.css选择器答:
通配符选择器,标签选择器,类选择器,id选择器,属性选择器,空格选择器 大于选择器 加号选择器13.p设置padding为100%的表现形式答:
不管是标准模式还是box-sizing模式下,padding都为元素的总宽度是部分,所以此时p的表现为对应p的颜色14.em、rem、px的用法答:
em是相对长度单位。
相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
rem相对的只是HTML根元素的font-size的大小来进行计算px像素(Pixel)。
相对长度单位。
像素px是相对于显示器屏幕分辨率而言的。
15.margin的用法及注意事项答:
margin在使用的时候因为会出现相邻两个标签之间的margin进行合并,即设置上下两个标签的margin-top和margin-bottom的时候,会进行自动的合并,以最大的那个属性值为两者之间的实际间隔16.列举几个常见的css3的属性及用途答:
常见的有:
border-radius:设置标签的圆角;box-shadow:
设置阴影,box-sizing:
改变盒子模型等17.less和sass的用比较答:
不同之处Less环境较Sass简单Sass的安装需要安装Ruby环境,Less基于Javascript,是需要引入Less.js来处理代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放在项目中。
Less使用较Sass简单Less并没有裁剪CSS原有的特性,而是在现有CSS语法的基础上,为CSS加入程序式语言的特性。
Sass功能较Less强大1、sass有变量和作用域2、sass有函数的概念3、进程控制:
条件、循环遍历、继承、引用4、数据结构:
数组、mapLess和Sass处理机制不一样前者是通过客户端处理的,后者是通过服务端处理,相比较之下前者解析会比后者慢一点。
关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$相同之处Less和Sass在语法上有些共性,比如下面这些:
1、混入(Mixins)——class中的class;2、参数混入——可以传递参数的class,就像函数一样;3、嵌套规则——Class中嵌套class,从而减少重复的代码;4、运算——CSS中用上数学;5、颜色功能——可以编辑颜色;6、名字空间(namespace)——分组样式,从而可以被调用;7、作用域——局部修改样式;8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
当然,在涉及到css的时候还会询问有关css预处理语言,如less,scss等,可自行查看相应的资料,在此不做过多的讲解相关教程推荐:
CSS视频教程以上就是前端常见css的面试题目的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
css 面试题目 前端面试本文转载于:
jb51,如有侵犯,请联系a@php.cn删除
上一篇:
web前端面试中10个关于css高频面试题
下一篇:
2020 CSS3面试题相关文章相关视频HTML css面试题_html/css_WEB-...2020年大前端面试题汇总(收藏)经典CSS面试题七道重要CSS面试题前端常见css的面试题目和页面布局有关的CSS属性(一)和页面布局有关的CSS属性(二)和页面布局有关的CSS属性(三)LESS CSS框架简介 [做网站css教程]