大前端面试题集锦——CSS篇

Midshar.top

已于 2024-08-30 12:49:00 修改

阅读量451

点赞数 26

文章标签：前端 css

于 2024-07-29 13:41:59 首次发布

本文链接：https://blog.csdn.net/qq_41455525/article/details/140720571

版权

CSS篇

1. `px`和`em`的区别？

px是绝对单位,但是是相对于设备的屏幕分辨率而言的,在同一个设备上是绝对单位,在不同的设备上又是相对单位
em是相对单位,具体大小相对于父元素计算

2.`vw`与`vh`代表什么?

两者是CSS3新增的度量单位,vw表示视口的宽度,vh表示视口的高度

3.什么是`BFC`,应用在哪些地方?

BFC是一个独立的布局区域,其中的布局不会受到外界的影响;通过设置float,overflow及position属性可以触发
解决浮动元素令父元素高度塌陷问题;
解决非浮动元素被浮动元素遮挡问题;
解决垂直排列的两个元素外边距重合的问题

4.介绍`BFC`,`IFC`,`GFC`与`FFC`分别是什么?

BFC指的是块级格式化上下文,会形成一块独立的布局区域,其内部布局与外部布局不会互相应影响
IFC指行内格式化上下文,将一块区域以行内元素形式格式化
GFC指网格布局格式化上下文,将一块区域以网格布局形式格式化
FFC指弹性盒布局格式化上下文,将一块区域以弹性盒形式格式化

5.`flex`布局如何实现?

通过设置容器元素的display:flex来实现,容器会成为弹性盒布局容器,其中的元素会成为容器内的元素
对于容器
- flex-warp设置容器内元素在主轴上的换行效果
- flex-direction设置容器的主轴方向
- justify-content设置容器内元素在主轴上的排列方式
- align-items设置容器内元素在交叉轴上的排列方式
- align-content在有多行元素的情况下,设置多行元素在交叉轴的排列方式
对于容器内元素
- order设置元素的排列顺序,值越小越靠前
- flex-grow设置元素的放大比例
- flex-shrink设置元素的缩小比例
- flex-basis设置在分配多余空间之前元素占据主轴的大小
- flex是上述三个属性的缩写
- align-self设置元素在交叉轴上的排列方式,会覆盖容器的排列方式

6.`display:none`,`visibility:hidden`,`opacity:0`三者的区别?

三者在肉眼上均不可见
结构上
- display:none会将元素从渲染树中移除,目标元素无法被点击
- visibility:hidden仍然占据页面空间,目标元素无法被点击
- opacity:0仍然占据页面空间,目标元素可以被点击
继承性
- display:none与opacity:0不具有继承性,更改子元素的对应属性设置无效
- visibility:hidden具有继承性,可以更改子元素的属性使子元素显示
性能消耗
- display:none会造成回流,影响了页面的整体布局,对性能消耗较大
- visibility:hidden与opacity:0只会造成重绘,性能消耗较小

7.如何使用`CSS`或者`JS`实现多行文本溢出的省略效果?

使用CSS实现

// 单行文本
selector{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
// 多行文本
selector{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}

使用JS实现

// 获取元素
let ele=document.querySelector("tagName")
// 拆分字符串到数组
let words=str.spllit("")
// 定义插入到元素中的内容数组
let content=[]
// 遍历字符串数组
for(let i=0:i<words.length;i++){
	content.push(words[i])
	ele.innerText=content.join("")
	if(ele.clientHeight<ele.scrollHeight){
		content.pop() // 根据情况进行删除
		ele.innerText=content.join("")+"..."
		break
	}
}

8.什么是粘性布局?

粘性布局是CSS3新增的内容,在视口内,它不会受到定位属性top,left等的影响,但是当将要到达目标距离时,它又会受到定位属性的影响,在固定位置定位
设置粘性布局的元素仍然在文档流中
当到达设定好的临界位置时,会在固定位置定位
固定的偏移量是相对于离他最近的具有滚动框的祖先元素,如果没有,偏移量相对于视口设定

9.`space-between`与`space-around`的区别?

space-between指的是两端对齐,最左侧与最右侧的元素紧贴容器
space-around指的是元素之间的左右间隔被平均分配

10.`CSS3`中的`transition`与`animation`有什么区别?

transition
- transition-property设置要执行过渡的属性
- transition-delay设置开始执行过渡的延迟
- transition-duration设置执行过渡的持续时间
- transition-timing-function设置执行过渡的函数
animation
- animation-name设置执行动画的名称
- animation-delay设置执行动画的延迟
- animation-duration设置执行动画的持续时间
- animation-timing-function设置执行动画的函数
- animation-direction设置动画执行的方向
- animation-iteration-count设置动画执行的次数
- animation-play-state设置动画是否暂停
- animation-fill-mode设置当未开始播放动画时元素的样式

11.说明`png8`,`png24`与`png32`的区别?简单说明`png`的压缩原理?

png8中的8代表8bit,即利用8bit来表示颜色的种类,可以表示2*8=256种颜色,一般适用于颜色简单的图像
png24使用3个8bit代表颜色的种类,每个8bit分别表示RGB,可以表示256*256*256种颜色类型
png32在png24的基础上,还有一个8bit用来表示透明度的颜色类型
png的压缩分为预解析与压缩两个阶段,预解析阶段做准备工作方便后期的压缩,使用Deflate进行压缩,该算法结合LZ77算法与Huffman算法

12.如何使用`CSS`绘制一个三角形?

设置元素的高度与宽度为0
设置元素的所有边框为透明色,并指定边框的样式与粗细
设置元素某个方向的边框为可见颜色

13.如何实现一个自适应的正方形?

使用vw或者vh来设置元素的宽度与高度,这样在不同的设备可视范围内会呈现出不同大小的正方形
利用百分比%设置,使用width设置元素的宽度,使用padding来撑开高度,将元素的height设置为0,为元素添加背景颜色即可

14.如何清除浮动元素的影响?

使用clear属性清除(被覆盖元素)
与浮动元素的父元素同级的元素也设置为浮动(被覆盖元素)
为浮动元素的父元素添加高度
为浮动元素的父元素添加overflow属性
为浮动元素的父元素使用伪元素::after,并设置clear:both属性

15.简述两种盒模型的区别?

任何元素都遵循盒模型,它用来规定元素各个部分的占用空间
W3C盒模型
- 定义元素的width与height时,不会包含元素的边框与内边距
IE盒模型
- 定义元素的width与height时,会包含元素的边框与内边距

16.如何触发重排和重绘?

添加或者删除Dom(两者)
设置元素的display:none属性(两者)
设置元素的visibility:hidden属性(重绘)
移动或者为Dom节点添加动画(两者)
用户行为(两者)

17.重排与重绘有何区别?

重排
- 渲染树需要重新分析,节点需要重新计算尺寸,表现为重新计算布局,重新排列元素
- 重排消耗的性能较大
重绘
- 节点的几何属性或者样式发生更改,屏幕中的部分内容发生改变
- 重绘消耗的性能较小
重排一定会触发重绘,重绘不一定会重发重排

18.如何优化图片?

对于修饰图片,比如项目符号,可以使用CSS替代
小图使用base64格式
将多个图标文件整合到一张图片中
非必要时不必请求原图
选择合适的图片格式
- 照片使用jpeg/jpg
- 小图使用png
- 矢量图使用svg
- 尽量使用webp格式图片

19.渐进增强与优雅降级有什么区别?

渐进增强指的是先针对低版本浏览器实现基本的功能,然后对于高版本浏览器逐渐增加各种功能
渐进增强是从基础到完善的过程
优雅降级指的是先针对高版本浏览器实现完善的功能,然后针对低版本浏览器特殊处理
优雅降级是从完善到基础的过程

20.`CSS3`新增了哪些内容?

选择器(:not())
盒子模型属性(border-radius,border-image,box-shadow)
背景(background-size,background-origin,background-clip)
文本效果(text-shadow,word-warp)
颜色(RGBA,HSLA)
渐变(linear-gradient,radial-gradient)
字体(@font-face)
2D/3D转换(transform,transform-origin)
过渡与动画(transition,animation,@keyframs)
多列布局(multi-column,layout)
媒体查询(@media)

21.隐藏页面中某个元素有哪些方法?

设置display:none
设置visibility:hidden
设置opacity:0
设置transform:scale(0,0)
设置width:0;height:0;overflow:hidden
设置position:fixed/relative;left:99999px;height:0
设置margin:99999px;height:0
设置标签属性hidden

22.`CSS`选择器及优先级?

选择器	优先级
id选择器	100
类选择器,伪类选择器,属性选择器	10
标签选择器,伪元素选择器	1
通配符选择器,兄弟选择器,子代选择器	0

使用!important会优先套用该样式
优先级相同的情况下,最后设置的样式会被应用
内联样式>内部样式表>外部样式表>浏览器用户代理样式表>默认样式

23.`CSS`可继承的属性与不可继承的属性有哪些?

可继承
- 字体属性:font-size,font-weight,font-family等
- visibility属性
- 一些文本属性:text-align,line-height,letter-spacing,text-indent,color
- 光标属性:cursor
- 列表属性:list-style
不可继承
- 一些文本属性:
- 与盒模型相关的属性:margin,padding,border
- display属性,opacity属性
- 背景颜色属性:background-color,background-image,background-repeat等
- 定位属性:left,right,top,bottom
- 轮廓样式:outline

24.`display`有哪些属性值?分别有什么作用?

属性值	作用
none	将元素从文档流中移除
block	以块级形式显示元素
inline	以行内形式显示元素
inline-block	以行内块的形式显示元素
table	以表格形式显示元素
list-item	以列表项的形式显示元素
inherit	继承父元素的设置

25.`display`的`inline`,`inline-block`与`block`分别有什么区别?

inline表示以行内元素的形式显示元素,设置元素的width与height不生效,且仅能设置margin-left/right,padding-left/right,元素在同一行进行显示
inline-block表示以行内块元素的形式显示元素,可以设置元素的width与height,且能够设置margin与padding,元素在同一行进行显示
block表示以块级元素的形式显示元素,可以设置元素的width与height,且能够设置margin与padding,元素在不同的行进行显示

26.`link`与`@import`有什么区别?

`link`	`@import`
能够引入其他类型文件	只能够用来引入外部`CSS`样式
不存在兼容性问题	存在兼容性问题
页面载入时会同时载入该引入的文件	页面载入完成才会载入引入文件
支持使用`js`控制`Dom`样式	不支持使用`js`控制`Dom`样式

27.`transition`与`animation`有什么区别?

transition表示过渡,需要手动触发才能够实现变换,只存在开始和结束两个关键帧
animation表示动画.不需要手动触发就可以实现动画,可以自定义动画的效果,设置多个关键帧

28.`display:none`与`visibility:hidden`有哪些区别?

display:none将元素从渲染树中移除,不占据页面空间,读屏器不会读出它的内容,不具有继承性,修改该属性会造成重排
visibility:hidden将元素设置为不可见,仍然占据页面空间,读屏器会读出它的内容,具有继承性,可以通过修改子元素的属性显示可见,修改该属性仅会造成重绘

29.伪元素和伪类有什么区别?

伪元素指在内容元素的前后插入内容或者样式,插入的元素不会在文档中生成,在浏览器中可见
伪类指的是添加某个效果到特定的元素选择器中,不会产生新元素
伪类是通过对元素选择器添加伪类来操作元素的状态;伪元素是通过对元素的操作改变元素的状态

30.谈谈对盒模型的理解?

每个元素都遵循盒模型,盒模型包括margin,padding,border与content区域
盒模型分为W3C标准盒子模型与IE怪异盒子模型
默认情况下是采用标准盒子模型,通过设置box-sizing:content-box/border-box可以相互切换盒子模型
标准盒模型在设置元素的height与width时,不会计算内边距与边框的宽度
怪异盒子模型会计算元素的内边距与边框宽度作为width与height的一部分

31.采用`translate`改变位置与采用`position`定位有什么不同?

translate是transform的一个效果,改变transform或者opacity不会触发重排或者重绘,仅仅会触发复合;而采用position定位会触发重排
使用transform会为元素创建一个GPU图层,改变绝对定位会使用CPU
使用translate时,元素依然会占据原始空间,而position不会.

32.`li`与`li`之间的空白间隔是如何形成的?应当如何解决?

浏览器会将空格,换行与制表符渲染成为一个可见的空白符
解决办法
- 为li元素设置float属性
- 设置ul/ol字体大小font-size:0
- 设置ul/ol字间距letter-spacing:0
- 将所有li元素同行显示

33.什么是替换元素?

替换元素指的是浏览器根据HTML标签自动生成的元素,它们一般都有自己的样式
如img,input,select,video,audio,textarea元素

34.列举常见的图片格式与使用场景?

图片格式	使用场景	特点
`bmp`	未经压缩的原图	无损
`png24`	体积更小,效果较好	无损
—	—	—
`gif`	支持动画,对色彩要求不高,体积较小	无损
`png8`	体积更小	无损
`png32`	支持透明	无损
—	—	—
`svg`	适用于矢量图	无损
`jpeg`	存储照片	有损
`webp`	在相同质量的情况下,体积更小,适用于网页	无损/有损

35.什么是`CSSSprites`?

精灵图,又称雪碧图
指的是将页面需要用到的所有图片包含到一张大图中,利用background属性对背景定位
优点
- 极大地减少了网页的请求,提升页面性能
- 合并后的大图比分散的图片字节更少
缺点
- 需要精确地测量每个图片在大图中地位置,操作复杂
- 合并图片时,需要将图片有序,合理地拼接,防止背景出错
- 维护时,如果页面背景存在改动,就需要对背景进行改动

36.什么是物理像素,逻辑像素与像素密度?

物理像素指的是设备实际存在的最小显示单元
逻辑像素指的是在设置CSS像素时设置的尺寸
移动设备往往是2倍或者3倍屏,这就是像素密度
- 在2倍屏上,1个逻辑像素=2个物理像素
- 在3倍屏上,1个逻辑像素=3个物理像素

37.何时使用`margin`?何时使用`padding`?

当需要在元素的边框外留白时,使用margin
当需要在元素的边框内留白时,使用padding,可以填充背景色

38.对`line-height`的理解?

line-height指文本的行高,表示从下一行基线到上一行基线的距离
line-height设置为元素height的高度,可以实现文字垂直居中
如果元素没有设置height,那么元素的高度将由line-height决定,并不是由文字的高度决定

39.`CSS`优化与提高性能的方法有哪些?

加载性能
- 使用link而不是@import
- 使用压缩后的CSS样式
- 使用单一样式而不是复合样式
选择器性能
- 使用关键选择器,CSS选择符是从右向左匹配
- 过滤无关的选择器,比如使用id选择器时不再需要添加标签名
- 减少使用*通配符选择器
- 减少直接使用标签作为选择器
- 减少使用后代选择器
- 利用样式的继承规则
渲染性能
- 减少使用浮动或者定位属性
- 减少页面的重排与重绘
- 去除空规则集
- 属性为0时不必携带单位
- 标准化浏览器前缀
- 避免选择器嵌套层级过深
- 考虑使用雪碧图/精灵图
- 正确使用display属性
- 不滥用web字体

40.什么是`CSS`预处理器/后处理器?为什么使用?

预处理器
- 如sass,less,stylus用来预编译CSS代码,这些工具中可以使用函数,嵌套,变量的形式来编写CSS
后处理器
- 如postCss,在完成样式表中规范处理CSS代码,可以添加浏览器前缀等
使用原因
- 结构清晰,便于扩展,使用方便
- 屏蔽浏览器私有语法的差异
- 轻松实现多重继承,减少代码的嵌套
- 兼容性更好,适用于老的CSS代码

41.伪元素`::before`与`:after`单双冒号的区别是什么?

单冒号适用于伪类,双冒号适用于伪元素
- 最初伪元素也是使用的单冒号,在CSS3之中,语法改为了双冒号
伪元素相当于元素的子元素,只存在于页面之中,并不存在于真实的Dom之中

42.`display:inline-block`什么时候会显示空隙?

当元素之间存在空格,换行或者制表符时会显示空袭
使用margin:负值可以解决
使用font-size:0,word-spacing,letter-spacing可以解决
将元素排列在同一行可以解决

43.对媒体查询的理解?

使用媒体查询包含了一个可选的媒体类型和零个或多个具体的媒体限制表达式
当媒体查询中的表达式为true时,那么就会应用该媒体查询中的样式
适用于对不同设备进行适配,做出响应式的网页

44.如何判断元素是否到达可视区域?

页面顶部卷动的距离:document.body.scrollTop||document.documentElement.scrollTop
当前视口的高度:window.innerHeight
目标元素距离页面顶部的偏移量:Dom.offsetTop
判断window.scrollTop<Dom.offsetTop<window.innerHeight+document.body(documentElement).scrollTop

45.`z-index`属性在什么情况下会失效?

z-index属性用来控制重叠的元素叠放顺序,值越大,越靠上层显示
z-index适用于在position属性值为relative,absolute,fixed,父元素没有设置position属性时子元素会失效
z-index属性与float属性同时在元素中存在

46.常见的`CSS`单位有哪些?

px,em,rem,vw与vh,%
浏览器的默认字体大小是16px

单位	特点
`px`	像素是屏幕能够显示的最小的区域
`em`	相对单位,相对于父元素的字体大小而言
`rem`	相对单位,相对于`html`根元素的字体大小而言
`vw`与`vh`	相对单位,相对于视口的宽度与高度而言
`%`	相对单位,相对于祖先元素而言,也有相对于自身的属性(`translate`)

47.`px`,`em`,`rem`的使用场景?

在适配少数移动设备的情况下,如果分辨率对页面影响不大,可以选择使用px
需要适配大部分移动设备,且设备分辨率差别较大,选择使用rem

48.两栏布局如何实现?

两栏布局中,左侧往往有固定的宽度,右侧宽度自适应
使用浮动与margin

.container{
	height:400px;
}
.left{
	width:100px;
	height:100%;
	float:left;
}
.right{
	height:100%;
	margin-left:100px;
}

使用浮动与overflow

.container{
	height:400px;
}
.left{
	width:100px;
	float:left;
	height:100%;
}
.right{
	overflow:hidden;
	height:100%;
}

使用flex弹性盒布局

.container{
	display:flex;
	height:400px;
}
.left{
	width:100px;
}
.right{
	flex:1;
}

使用position定位与margin外边距

.container{
	height:400px;
	position:relative;
}
.left{
	position:absolute;
	width:100px;
	height:100%;
}
.right{
	margin-left:100px;
	height:100%;
}

使用position定位

.container{
	height:400px;
	position:relative;
}
.left{
	width:100px;
	height:100%;
}
.right{
	position:absolute;
	top:0;
	bottom:0;
	left:100px;
	right:0;
	height:100%;
}

49.如何实现三栏布局?

三栏布局中,两侧往往有固定的宽度,中间的宽度自适应
左右两侧使用position绝对定位

.container{
	position:relative;
	height:400px;
}
.left{
	width:100px;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
.right{
	width:100px;
	height:100%;
	position:absolute;
	right:0;
	top:0;
}
.center{
	height:100%;
	margin-left:100px;
	margin-right:100px;
}

使用flex弹性盒布局

.container{
	height:400px;
	display:flex;
}
.left{
	height:100%;
	width:100px;
}
.right{
	height:100%;
	width:100px;
}
.center{
	flex:1;
}

使用float浮动

.container{
	height:400px;
}
.left{
	width:100px;
	height:100%;
	float:left;
}
.right{
	width:100px;
	height:100%;
	float:right;
}
.center{
	height:100%;
	margin-left:100px;
	margin-right:100px;
}

使用圣杯布局(需要将center列放到最前面)
- 结构

<div class="container">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>

- 样式

.container {
      padding-left: 200px;
      padding-right: 300px;
      min-width: 500px; // 设置最小宽度
      height: 100vh;
    }
	// 布局的结构都需要浮动
    .container>div {
      height: 100%;
      float: left;
    }

    .left {
      width: 200px;
      background-color: yellow;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }

    .center {
      width: 100%;
      background: #e4a;
    }

    .right {
      width: 300px;
      background: #a22;
      margin-right: -300px;
    }

使用双飞翼布局(center需要单独设置)
- 结构

<div class="container column">
    <div class="center"></div>
</div>
<div class="left column"></div>
<div class="right column"></div>

- 样式

.column{
      float: left;
      height: 100vh;
    }
    .container{
      width: 100%;
    }
    .left{
      width: 200px;
      background-color: yellow;
      margin-left: -100%;
    }
    .center{
      margin-left: 200px;
      margin-right: 300px;
      background-color: green;
      height: 100%;
    }
    .right{
      width: 300px;
      background: salmon;
      margin-left: -300px;
    }

50.如何实现水平与垂直居中？

利用绝对定位

// 方法一
.container{
	position:relative;
}
.box{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);// 也可以使用 margin 使得元素实现居中效果
}
// 方法二
.container{
	position:relative;
}
.box{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
}

使用flex弹性盒

.container{
	display:flex;
	justify-content:center;
	align-items:center;
}

51.如何根据设计稿进行移动端适配?

适配不同像素密度
- 针对不同的像素密度,利用媒体查询使用不同的图片
适配不同的屏幕大小
- 根据不同设备的设备像素比,在css中按照相应的比例来实现设计稿的内容
- 为了使页面自适应,推荐使用rem,vw/vh单位

52.对`flex`布局的理解以及它的使用场景?

flex布局是css3新增的布局方式,称作弹性盒布局
当元素添加了display:flex后,就创建了一个弹性盒布局,该元素被称作容器,它的亲子元素被称作容器成员,任何元素都能够作为容器
弹性盒容器默认存在两条轴线,水平方向上为主轴,垂直方向上为交叉轴,容器成员默认按照主轴横向排列
当父元素成为弹性盒容器后,子元素的float,clear,vertical-align等属性将失效
创建弹性盒后,可以使用flex-direction修改主轴的方向,flex-warp修改项目的换行方式,justify-content修改项目在主轴上的对齐方式,align-items修改项目在交叉轴上的对齐方式等
创建弹性盒后,可以使用order修改项目的排列顺序,align-self修改项目在交叉轴上的排列位置,flex修改项目占据的空间大小

53.响应式设计的概念及基本原理?

响应式设计概念指网页不单单是为固定的设备而设计,应当兼顾多种不同类型的设备
响应式设计的原理一般是使用媒体查询进行实现,符合媒体查询的标准时应用当前样式
页面往往需要使用meta标签设计viewport信息

54.为什么需要清除浮动？如何清除？

浮动指的是float属性,当元素设置该属性后,可能会造成父元素高度塌陷,将同层次的非浮动元素覆盖
- 浮动元素会脱离文档流
- 浮动元素会停留在包含该元素的边框处或者遇到另一个浮动元素
清除浮动
- 为浮动元素的父元素设置height属性
- 为浮动元素的父元素添加overflow属性
- 为浮动元素的父元素添加display:inline-block属性
- 为浮动元素的父元素设置伪类,并设置clear:both属性
- 在最后一个浮动元素之后添加空标签并设置clear:both属性

55.清除浮动的原理?

清除浮动指的是取消浮动带来的负面影响,并非将浮动元素的浮动属性清除
官方解释是元素盒子的边不能够和前面的浮动元素相邻
一般用来清除浮动的方法是为浮动元素的父元素添加伪元素::after,并且将display设置为block,并设置clear:both

56.对`BFC`的理解?如何创建`BFC`?

BFC指的是块级格式化上下文
BFC内部的布局与外部的布局不会互相影响
BFC区域中的元素默认按照从上至下排列
BFC区域中计算高度会计算浮动元素的高度
BFC区域中的元素不会与浮动的元素发生重叠
创建BFC
- 为元素设置overflow:hidden/auto属性
- 为元素设置display:inline-block/fixed属性
- 为元素设置position:absolute/fixed属性
- 为元素设置float属性
创建BFC能够解决元素的外边距重叠问题,浮动元素零父元素高度塌陷问题,创建自适应两栏布局

57.什么是`margin`重叠问题?如何解决?

margin外边距重叠问题指的是在垂直排列的块级元素之间
- 如果外边距均为整数,外边距会以最大的值作为结果,而不会叠加
- 如果外边距一正一负,外边距是两者之和
- 如果外边距均为负数,则为绝对值较大的一方
兄弟元素之间折叠
- 底部元素触发BFC(display:inlin-block,float,position)
父子元素之间折叠
- 父元素设置overflow
- 父元素添加透明边框
- 子元素设置float
- 子元素设置display:inline-block

58.元素的层叠顺序是什么样的?

默认情况下,从底部向顶部依次为
- background,border属性
- z-index为负数
- block块级元素
- float浮动元素
- inline内联元素
- z-index为0
- z-index为正数

59.`position`有哪些属性值?分别表示什么意思?

属性值	特点
`relative`	相对于元素自身的原始位置设置偏移
`absolute`	相对于最近的具有定位的祖先元素设置偏移,脱离文档流
`fixed`	相对于浏览器视口设置偏移,不会岁页面滚动,脱离文档流
`sticky`	根据设置的阈值在`relative`与`fixed`之间进行切换
`inherit`	继承父元素的定位属性
`static`	默认定位方式

60.`display`,`float`与`position`的关系?

首先判断元素的display:none属性,如果存在,那么其余两者不起作用
其次判断元素的position:fixed/absolute属性
- 如果存在,那么float失效,且元素的display将被设置为table或者block
- 如果不存在
  - float不为none,那么元素实现浮动, display属性按照上述设置
  - float为none,判断元素是否为根元素,如果是,display属性按照上述设置;如果不是,按照自定义的display属性值设置

61.`absolute`与`fixed`定位的共同点与不同点?

定位属性	不同点
`absolute`	相对于最近的具有定位的祖先元素设定偏移量;元素会随页面滚动
`fixed`	相对于浏览器视口设定偏移量;元素不会随页面滚动

相同点
- 元素都会脱离文档流
- 会覆盖非定位元素

62.如何理解`sticky`定位?

粘性定位是CSS3新增的功能,在可视区域内,sticky不会受到设置的定位属性top,left,right,bottom的影响,表现为相对定位;当元素靠近设置的阈值时,会固定在当前位置,表现为固定定位
粘性定位的元素不会完全脱离文档流,元素仍然存在于原始位置

63.如何画出一个扇形?

.box{
	width:0;
	height:0;
	border:100px solid transparent;
	border-top-color:black;
	border-radius:50%;
}

64.如何设置一条`0.5px`的线条?

使用transform:scale(0.5,0.5)将原1px的线条缩放一半
在移动端上,设置viewport的initial-scale,minimum-scale,maximum-scale的属性值为0.5

65.如何设置小于`12px`的字体大小?

使用transform:scale()来设置
将文字裁剪成为图片,控制图片的缩放大小

66.如何解决`1px`的问题?

根据设备像素比设置对应的css样式
如果设备像素比为2,那么代表1个css逻辑像素等于2个设备物理像素,如果设置css为0.5px,那么设备中实际显示的就是1px
通过设置viewport的初始缩放比例,最小缩放比例与最大缩放比例

Midshar.top

关注

26
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

大前端面试题集锦——CSS篇

CSS篇

1. px和em的区别？

2.vw与vh代表什么?

3.什么是BFC,应用在哪些地方?

4.介绍BFC,IFC,GFC与FFC分别是什么?

5.flex布局如何实现?

6.display:none,visibility:hidden,opacity:0三者的区别?

7.如何使用CSS或者JS实现多行文本溢出的省略效果?

8.什么是粘性布局?

9.space-between与space-around的区别?

10.CSS3中的transition与animation有什么区别?

11.说明png8,png24与png32的区别?简单说明png的压缩原理?

12.如何使用CSS绘制一个三角形?

13.如何实现一个自适应的正方形?

14.如何清除浮动元素的影响?

15.简述两种盒模型的区别?

16.如何触发重排和重绘?

17.重排与重绘有何区别?

18.如何优化图片?

19.渐进增强与优雅降级有什么区别?

20.CSS3新增了哪些内容?

21.隐藏页面中某个元素有哪些方法?

22.CSS选择器及优先级?

23.CSS可继承的属性与不可继承的属性有哪些?

24.display有哪些属性值?分别有什么作用?

25.display的inline,inline-block与block分别有什么区别?

26.link与@import有什么区别?

27.transition与animation有什么区别?

28.display:none与visibility:hidden有哪些区别?

29.伪元素和伪类有什么区别?

30.谈谈对盒模型的理解?

31.采用translate改变位置与采用position定位有什么不同?

32.li与li之间的空白间隔是如何形成的?应当如何解决?

33.什么是替换元素?

34.列举常见的图片格式与使用场景?

35.什么是CSSSprites?

36.什么是物理像素,逻辑像素与像素密度?

37.何时使用margin?何时使用padding?

38.对line-height的理解?

39.CSS优化与提高性能的方法有哪些?

40.什么是CSS预处理器/后处理器?为什么使用?

41.伪元素::before与:after单双冒号的区别是什么?

42.display:inline-block什么时候会显示空隙?

43.对媒体查询的理解?

44.如何判断元素是否到达可视区域?

45.z-index属性在什么情况下会失效?

46.常见的CSS单位有哪些?

47.px,em,rem的使用场景?

48.两栏布局如何实现?

49.如何实现三栏布局?

50.如何实现水平与垂直居中？

51.如何根据设计稿进行移动端适配?

52.对flex布局的理解以及它的使用场景?

53.响应式设计的概念及基本原理?

54.为什么需要清除浮动？如何清除？

55.清除浮动的原理?

56.对BFC的理解?如何创建BFC?

57.什么是margin重叠问题?如何解决?

58.元素的层叠顺序是什么样的?

59.position有哪些属性值?分别表示什么意思?

60.display,float与position的关系?

61.absolute与fixed定位的共同点与不同点?

62.如何理解sticky定位?

63.如何画出一个扇形?

64.如何设置一条0.5px的线条?

65.如何设置小于12px的字体大小?

66.如何解决1px的问题?

1. `px`和`em`的区别？

2.`vw`与`vh`代表什么?

3.什么是`BFC`,应用在哪些地方?

4.介绍`BFC`,`IFC`,`GFC`与`FFC`分别是什么?

5.`flex`布局如何实现?

6.`display:none`,`visibility:hidden`,`opacity:0`三者的区别?

7.如何使用`CSS`或者`JS`实现多行文本溢出的省略效果?

9.`space-between`与`space-around`的区别?

10.`CSS3`中的`transition`与`animation`有什么区别?

11.说明`png8`,`png24`与`png32`的区别?简单说明`png`的压缩原理?

12.如何使用`CSS`绘制一个三角形?

20.`CSS3`新增了哪些内容?

22.`CSS`选择器及优先级?

23.`CSS`可继承的属性与不可继承的属性有哪些?

24.`display`有哪些属性值?分别有什么作用?

25.`display`的`inline`,`inline-block`与`block`分别有什么区别?

26.`link`与`@import`有什么区别?

27.`transition`与`animation`有什么区别?

28.`display:none`与`visibility:hidden`有哪些区别?

31.采用`translate`改变位置与采用`position`定位有什么不同?

32.`li`与`li`之间的空白间隔是如何形成的?应当如何解决?

35.什么是`CSSSprites`?

37.何时使用`margin`?何时使用`padding`?

38.对`line-height`的理解?

39.`CSS`优化与提高性能的方法有哪些?

40.什么是`CSS`预处理器/后处理器?为什么使用?

41.伪元素`::before`与`:after`单双冒号的区别是什么?

42.`display:inline-block`什么时候会显示空隙?

45.`z-index`属性在什么情况下会失效?

46.常见的`CSS`单位有哪些?

47.`px`,`em`,`rem`的使用场景?

52.对`flex`布局的理解以及它的使用场景?

56.对`BFC`的理解?如何创建`BFC`?

57.什么是`margin`重叠问题?如何解决?

59.`position`有哪些属性值?分别表示什么意思?

60.`display`,`float`与`position`的关系?

61.`absolute`与`fixed`定位的共同点与不同点?

62.如何理解`sticky`定位?

64.如何设置一条`0.5px`的线条?

65.如何设置小于`12px`的字体大小?

66.如何解决`1px`的问题?