css面试问题

weixin_46051260

已于 2022-07-21 20:33:19 修改

阅读量97

点赞数

分类专栏：基础巩固文章标签： css 面试 css3 前端

于 2022-07-17 21:40:33 首次发布

本文链接：https://blog.csdn.net/weixin_46051260/article/details/125834286

版权

基础巩固专栏收录该内容

50 篇文章 0 订阅

订阅专栏

什么是BFC（Block Formatting Context）

1）块级格式化上下文==》如果拥有BFC的特性，就会导致内容元素再怎么样，都不会影响外面的元素
2）W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context，即块级格式上下文）。
3）由W3C对BFC的定义也可得出，触发BFC的方式：

float的值不为none
overflow的值不为visible
display的值为table-cell、table-caption和inline-block之一
position的值不为static或者releative中的任何一个
更细分一点：

4）BFC渲染规则

BFC垂直方向边距重叠（两个盒子的边距一个设置为100px，一个设置为200px，最后会选取200px做为他们的距离）
BFC的区域不会与浮动元素的box重叠（制作右侧自适应盒子）
BFC是一个独立的容器，外面的元素不会影响到里边的元素
计算BFC高度的时候浮动元素也会参加计算（https://www.jianshu.com/p/7f82ab2542bd可参考，有具体代码及效果示意）

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：margin，border，padding，和context。

box-sizing:border-box（盒子大小为width+padding+border）
box-sizing:content-box（盒子大小为width，默认标准盒子模型）

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
1）标准盒子模型
在这里插入图片描述
2）IE盒子模型

content=width+border+padding
一：如果width>border+padding，content显示时宽度为width的宽度
二：如果width<border+padding，cotent显示时宽度为border+padding

position有哪些值，有什么作用

1）absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
绝对定位不占有原来的位置（脱标）
没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。如果祖先元素有定位，则以最近一级的有定位的祖先元素为参考点移动

2）fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
固定定位不再占有原先的位置（脱标）
固定定位的盒子要写在参照物的前面

3）relative

生成相对定位的元素，相对于其正常位置（自身位置）进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
不脱标，移动之后原来标准流的位置继续占有。不影响后面盒子

4）static （默认值）
没有定位，元素出现在正常的流中（

5）inherit
规定应该从父元素继承 position 属性的值。

6）延伸问题：absolute和ralative的区别

relative不脱离标准流，absolute脱力标准流
relative只有两个值（left、right、top、bottom如果同时存在，left干掉right，top干掉bottom），absolute可以写四个值

什么是雪碧图（精灵图、sprites）

1）目的：有效的减少服务器接受和发送请求的次数，提高页面的加载速度
2）将网页中的一些小背景图像整合到一张大图中，这样服务器只需一次请求就可以了
3）缺点：图片比较大、放大缩小会失真、制作完毕后更换复杂

display有哪些值，说明他们的作用

1）display: none
是CSS1规范，无兼容性问题，该属性值表示此元素不会被显示，当使用该属性将元素从显示状态切换为隐藏状态时，元素不占据原本的空间，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在，但在DOM中依然可以访问到这个元素，也可以通过DOM来操作它。

2）display: block
是CSS1规范，无兼容性问题，该属性值表示此元素将显示为块级元素，此元素前后会带有换行符，元素独占一行，封闭后自动换行，默认宽度为100%，可以指定宽度和高度，内外边距对于四个方向有效。

3）display: inline
是CSS1规范，无兼容性问题，该属性值表示此元素会被显示为内联元素，元素会生成一个或多个内联元素框，这些框不会在自身之前或之后产生换行符，在正常流中，如果有空间，则下一个元素将在同一行上，元素排在一行，封闭后不会自动换行，不能指定高度与宽度，可以使用line-height来指定高度，外边距对于水平方向有效，垂直方向无效，内边距对于水平方向正常有效，垂直方向只有效果，对其他元素无任何影响。

display: inline-block
是CSS2规范，无兼容性问题，该属性值表示此元素将显示为内联块元素，该元素生成一个块元素框，该框将随周围的内容一起流动，就好像它是单个内联框一样，与被替换的元素非常相似，它等效于内联流根inline flow-root，可以指定宽度和高度，内外边距对于四个方向有效元素排在一行，但是在回车后会有空白缝隙。

清除浮动有哪些方式

清除浮动原因：父盒子很多情况下，不方便给高度，但是子盒子浮动不占有位置，脱标，父级盒子高度为0，就会影响下面标准流的盒子

1）额外标签法（必须是块级元素）例：style=‘clear:both’
2）父元素添加overflow属性：overflow:hidden（无法显示溢出的部分）
3）父元素添加after伪元素
4）父元素添加双伪元素

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }

5）给父元素添加高度

什么是CSS reset

reset重置css样式，但是体积有一点点大
现在在常用的是mormalize.css，增强跨浏览器渲染的一致性（一定程度上），css重置样式库

display:none和visibility:hidden的区别

1）display:none，隐藏后不保留原来位置，会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的，他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在，但在DOM中依然可以访问到这个元素，也可以通过DOM来操作它。
2）visibility:hidden，隐藏后继续占有原来位置。两个具有继承性，给父元素设置隐藏；⼦元素也会继承这个属性。但是如果父元素设置visibility:hidden，重新给⼦元素设置visibility: visible，则⼦元素⼜会显示出来。这个和display: none有着质的区别

不占有位置的原因：visibility：hidden进行第一次绘制，display:none不进行第一次绘制，而是在整个页面绘制（合并DOM和css，layout放置元素的位置）完成后再绘制一次，所以就不占有位置