前端面试——2.CSS部分

最新推荐文章于 2024-08-24 00:18:19 发布

Herstory.Liz

最新推荐文章于 2024-08-24 00:18:19 发布

阅读量200

点赞数

文章标签： css 前端面试

本文链接：https://blog.csdn.net/zhupidaheng/article/details/126841906

版权

CSS

1. 盒子模型

CSS 中的盒子模型包括 IE 盒子模型和标准的 W3C 盒子模型。

box-sizing: content-box（width不算border和padding）、border-box（padding和border算入width）、padding-box(padding算入width)

标准盒子模型：宽高不计算border和padding

IE盒子模型：把padding和border计算到宽高里面

2. 画一条 0.5px 的线

采用 meta viewport 的方式<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">通过设置视口宽度为设备宽度，初始缩放和最大缩放的值都为1，并禁止用户缩放。使得宽度视口中的1px就是物理像素1px
设置一条高为1px的线，通过transform:scaleY(0.5)实现高度缩小到原来的一半，就是0.5px

div{
    height: 1px;
    width: 200px;
    background-color: red;
    transform: scaleY(0.5);
}

3. link 标签和 import 标签的区别

link标签是html标签，@import是css提供的
页面加载时遇到link标签会同时加载，而@import会等页面加载结束后加载
link是html标签，没有兼容性问题，而@import只有IE5之后才能识别
link方式样式权重高于import

4. transition 和 animation 的区别

transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
animation 配合 @keyframe 可以不触发事件就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
animation 可以结合 keyframe 设置每一帧，但是 transition 只有开始和结束状态；
在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

transition 过渡代码示例

div
{
    width:100px;
    transition: width 2s;
}
div:hover {width:300px;}

animation 动画代码示例

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}

先通过@keyframes定义一个动画方法，from中写入元素初始样式，to中写入元素结束样式

通过animation调用定义好的动画方法，实现动画效果

5. Flex 布局

Flex又称弹性布局，布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。

而Flex布局在父元素上（亲爹）添加display：flex，可以使父级的布局模式转换成弹性布局模式。其中默认主轴是水平方向的，而弹性容器中的弹性盒子都是按照主轴方向排列的。

通过justify-content修改主轴对齐方式
通过**align-items** 修改侧轴对齐方式
通过在子元素中align-selfs修改当前子元素的对齐方式
Flex伸缩比，flex : 整数值，表示占用父级盒子剩余尺寸的份数
通过flex-direction修改主轴的对齐方向，row表示主轴横向，col表示主轴竖向，相应侧轴也会随之改变
通过flex-wrap= wrap使得弹性盒子换行排列
在多行flex容器中，设置align-content实现分行之后的多根轴的排列样式，注意：在单行容器中是不生效的

6. 什么是BFC

BFC又称块级格式化上下文，是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局，用于清除浮动，防止 margin 重叠等。

通过一些属性来触发BFC，使得BFC中的子元素不受外面的元素影响。具体触发条件有：

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

BFC的具体规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

7. 垂直居中的方法

通过vertical-align:middle实现CSS垂直居中。vertical生效的前提是元素的display：inline-block。
通过display:flex实现CSS垂直居中，再通过align-items: center设置侧轴居中
给父元素display:table，子元素display：table-cell的方式将子元素设置为父元素表格的单元格，然后设置vertical-align:middle;可使多行文字垂直居中。
通过子绝父相的定位方式，先将子元素定位到top:50%,left:50%的位置，再通过transform:translate(-50%,-50%)移动到垂直居中位置
通过子元素设置margin：auto实现居中

8. 说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置 margin 和 pading 以及高度和宽度

行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的 padding 和 margin会失效，宽高由内容撑开

9. 多行元素的文本省略号

{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

10. visibility=hidden, opacity=0，display:none的区别

opacity=0 ：不透明度0，表示全透明，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件

visibility=hidden：该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

display:none：把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样

11. 双边距重叠问题

相邻的标准流的块级元素垂直方向上margin会重叠

两个相邻的外边距都是正数时，重叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

12. position 属性比较

固定定位 fixed：

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素会和其他元素重叠。

相对定位 relative：

如果对一个元素进行相对定位，然后，通过设置top或left设置垂直水平位置，让这个元素“相对于”它的起点进行移动。 **在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。**因此，移动元素会导致它覆盖其它框。

绝对定位 absolute：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。**absolute 定位使元素的位置与文档流无关，因此不占据空间。**absolute 定位的元素和其他元素重叠。

13. 浮动清除

当父类没有高度同时子类浮动时，因为父类没有高度，浏览器默认看不到父类，同时因为子类浮动不再标准流中，因此后面的内容自动移到前面，导致排版异常的情况，解决方法：

直接给父级强制增加高度（最暴力）
使用带 clear 属性的空元素，父类元素的最后一个位置添加一个空元素如<div class="clear"></div>，并在 CSS 中赋

予.clear{clear:both;}属性即可清理浮动。缺点是增加了额外的结构元素。
使用 CSS 的 overflow 属性，给浮动元素的容器添加 overflow:hidden;或 overflow:auto;。原理是构建了BFC（块级格式化上下文）。缺点是不是所有时候都能生效。
给浮动的元素的容器添加浮动，给父类元素添加浮动，使得父类也脱离标准流。缺点是有可能打乱父类的排列顺序。

使用 CSS 的:after 伪元素，直接复制，给对应父元素添加class="clearfix"类选择器

.clearfix::before, .clearfix::after {

content: "";

display: table;

}

.clearfix::after {

clear: both;

}

.clearfix {

*zoom: 1;

}

14. css3新特性

css3边框：
- border-radius：CSS3圆角边框。
- box-shadow：CSS3边框阴影。
- border-image：CSS3边框图片。
CSS3背景：
- background-size：属性规定背景图片的尺寸。
- background-origin ：属性规定背景图片的定位区域。
CSS3 平面转换transform
- transform : translate()：元素从其当前位置移动
- transform : rotate()：元素顺时针旋转给定的角度。
- transform : scale(): 元素的尺寸会缩放
- transform : rotate(): 元素元素围绕某点以给定的度数进行旋转
CSS3 过渡 transition
CSS3 动画 animation

15.CSS 选择器有哪些，优先级

id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等

优先级顺序为：id 选择器 > class 选择器 > 标签选择器

标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代包含祖先相同的属性则祖先元素的相同的样式属性会被覆盖。

带有!important 标记的样式属性的优先级最高；

样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式

16. css 动画如何实现

创建动画序列，需要使用 animation 属性

首先通过@keyframes定义一个动画过程，from方法中写入原来元素的样式，to方法中写入结果元素的样式
在需要动画的元素添加animation：定义的动画名，去调用定义好的动画

transition属性也能实现过渡动画，但过渡动画只有开始和结束两个状态，中间的状态不受控制。且transition需要搭配事件才能触发。

17. float 的元素，display 是什么

浮动的元素都转换成块级元素，所以display为block

18. 多重实现三栏布局的方法

float布局：首先三个div，左div左浮动，右div右浮动，而中间栏通过margin-left和margin-right强制移动到中间位置。
BFC布局：同float布局，先设置左右div的位置，而中间div不作处理，此时左右div脱标，而中间div仍处于标准流，会占一整行，因此给中间div添加overflow:hidden，使其转换成BFC，达到自适应效果。
flex弹性布局，给父类添加display:flex，这样三个子div就会实现并排布局
position定位，父类采用绝对定位，子类采用相对定位，定位到合适区域
Table布局，父类通过display:table，三个子类添加display:table-cell，将子类设为父类表格的单元格，