2022面试题CSS

Lilico_

已于 2023-12-28 15:27:15 修改

阅读量756

点赞数 1

分类专栏： 2022面试文章标签： css css3 javascript

于 2022-09-02 17:55:36 首次发布

本文链接：https://blog.csdn.net/Lilico_/article/details/126662697

版权

2022面试专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、CSS选择器的权重优先级
第一等：!important
第二等：行内样式style
第三等：Id选择器
第四等：类、伪类和属性选择器
第五等：标签选择器和伪元素选择器
第六等：继承、通配符

2、标准盒模型和怪异盒模型的区别

标准盒模型
宽高包含content+padding+boder
怪异盒模型
宽高只包含content

标准盒模型转换为怪异盒模型
box-sizing: border-box

3、CSS中的BFC

什么是BFC
- BFC就是块级格式上下文
- 是页面盒模型布局中的一种CSS渲染模式，相当于一个独立容器，里面的元素和外部的元素互不影响
BFC的特性
- 内部的盒子会按照垂直方向一个个排列
- 同一个BFC下的相邻块级元素会发生外边距折叠，创建新的BFC包含其中一个元素可以避免（解决外边距重叠）
- 设置了BFC的区域不会和浮动元素重叠（解决浮动元素覆盖）
- 当BFC中有浮动元素时，该浮动元素的高度也会被计算其中（解决高度塌陷）
如何触发BFC
- 设置float浮动
- 设置overflow: hidden
- position的值设为absolute或fixed
- display: table|flex|grid

4、如何设置三栏布局

方法一：flex布局
两边设置固定宽度，中间设置flex：1

<style>
    .box {

      display: flex;

    }
    .left {

      background: palegreen;

      width: 100px;

      height: 200px;

    }
    .right {

      background: palegreen;

      width: 100px;

      height: 200px;

    }
    .center {

      height: 200px;

      flex: 1;

      background: pink;
    }

  </style>
<body>

  <div class="box">

    <div class="left"></div>

    <div class="center"></div>

    <div class="right"></div>

  </div>

</body>

方法二：浮动布局
左右两栏设置浮动，中间设置margin，中间的div布局放在最后

<style>
    .left {

      float: left;

      background: rgba(0, 0, 0, .1);

      width: 100px;

      height: 200px;

    }
    .right {

      float: right;

      background: palegreen;

      width: 100px;

      height: 200px;
    }
    .center {

      height: 200px;

      margin: 0 100px;

      background: pink;
    }
  </style>
  <body>
  <div class="box">

    <div class="left"></div>

    <div class="right"></div>

    <div class="center"></div>
  </div>
</body>

方法三：定位布局
父元素设置position: relative，左右两栏设置绝对定位，中间设置margin，中间的div布局可以放在任意位置

<style>
    .box {
      position: relative;
    }
    .left {

      position: absolute;

      left: 0;

      top: 0;

      background: rgba(0, 0, 0, .1);

      width: 100px;

      height: 200px;
    }
    .right {

      position: absolute;

      right: 0;

      top: 0;

      background: palegreen;

      width: 100px;

      height: 200px;
    }
    .center {

      height: 200px;

      margin: 0 100px;

      background: papayawhip;
    }
  </style>

方法四：浮动布局+BFC

<style>
	    .left {
	
	      float: left;
	
	      background: rgba(0, 0, 0, .1);
	
	      width: 100px;
	
	      height: 200px;
	
	    }
	    .right {
	      float: right;
	
	      background: palegreen;
	
	      width: 100px;
	
	      height: 200px;
	    }
	    .center {
	
	      height: 200px;
	
	      overflow: hidden;
	
	      background: pink;
	    }
	  </style>

5、盒子水平垂直居中的方法

方法一： flex

.fater {
	display: flex;
	align-item: center;
	justify-content: center;

方法二：利用margin与定位

.fater {
	position: relative;
}
.child {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

方法三：利用position定位实现

.fater {
	position: relative;
}
.child {
	position: absolute:
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) // 未知宽高
	margin-top: -50px; // 已知宽高为100
	margin-left: -50px; // 已知宽高为100
}

6、移动端适配

方法一：设置页面视口viewport

<meta name="viewport" 
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

方法二：配置rem单位
方法三：利用媒体查询

7、对重绘和重排的理解

重绘
- 当元素的外观、背景、颜色等改变，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观就叫重绘
重排
- 当渲染树一部分或者全部因为大小或者边距而改变，需要渲染树重新计算的过程叫做重排
- 重绘不一定需要重排，重排必然会导致重绘
如何避免重绘和重排
- 在元素的显示上尽量使用opacity代替visibility（重绘）
- 元素定位时使用tranform代替top、left（重排）
- 尽量不使用table布局，因为一个小的改动会造成整个table重新布局（重排）
- 减少直接操作DOM元素（重排）
- 为元素添加类，样式都在类中改变（重绘）

8、display、visibility、opacity之间的区别

display: none是将DOM元素设置为隐藏，该隐藏是不占位的
visibility: hidden也是将DOM元素设置为隐藏，但是该隐藏仅仅是看不见而已，还是占位的
opacity: 0是将透明度设置为0，仅仅是看不见而已，还是占位的

9、rgba和opacity的区别

rgba和opacity都可以实现透明效果，但最大的不同是opacity作用于元素以及元素内的所有内容，而rgba只作用于元素的颜色或其背景色

10、css3新增了哪些新特性

选择器：新增了一些选择器，如属性选择器、伪类选择器和伪元素选择器，使得选择元素更加灵活和精确。
盒子模型：引入了box-sizing属性，可以控制元素的盒子模型计算方式，包括content-box、border-box和padding-box。
布局：新增了一些布局模块，如弹性盒子布局（flexbox）、网格布局（grid）和多列布局（multicolumn），可以更方便地实现复杂的页面布局。
动画和过渡：新增了transition和animation属性，可以实现元素的平滑过渡和动画效果，使页面更加生动和有趣。
渐变和阴影：引入了线性渐变、径向渐变和盒阴影等属性，可以实现更丰富的背景效果和阴影效果。
字体和文本效果：新增了@font-face规则，可以使用自定义字体；引入了text-shadow和text-overflow等属性，可以实现文字阴影和溢出时的处理。
背景和边框：新增了background-size、background-origin和border-radius等属性，可以实现更灵活和多样化的背景和边框效果。
变形和过滤：引入了transform和filter属性，可以实现元素的旋转、缩放、倾斜等变形效果，以及图像的滤镜效果。
媒体查询：新增了@media规则，可以根据不同的媒体类型和设备特性，为不同的屏幕尺寸和分辨率提供不同的样式。