2022面试题CSS

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新增了哪些新特性

  1. 选择器:新增了一些选择器,如属性选择器、伪类选择器和伪元素选择器,使得选择元素更加灵活和精确。

  2. 盒子模型:引入了box-sizing属性,可以控制元素的盒子模型计算方式,包括content-box、border-box和padding-box。

  3. 布局:新增了一些布局模块,如弹性盒子布局(flexbox)、网格布局(grid)和多列布局(multicolumn),可以更方便地实现复杂的页面布局。

  4. 动画和过渡:新增了transition和animation属性,可以实现元素的平滑过渡和动画效果,使页面更加生动和有趣。

  5. 渐变和阴影:引入了线性渐变、径向渐变和盒阴影等属性,可以实现更丰富的背景效果和阴影效果。

  6. 字体和文本效果:新增了@font-face规则,可以使用自定义字体;引入了text-shadow和text-overflow等属性,可以实现文字阴影和溢出时的处理。

  7. 背景和边框:新增了background-size、background-origin和border-radius等属性,可以实现更灵活和多样化的背景和边框效果。

  8. 变形和过滤:引入了transform和filter属性,可以实现元素的旋转、缩放、倾斜等变形效果,以及图像的滤镜效果。

  9. 媒体查询:新增了@media规则,可以根据不同的媒体类型和设备特性,为不同的屏幕尺寸和分辨率提供不同的样式。

这只是CSS3的一部分新特性,还有很多其他的功能和属性。总的来说,CSS3的引入使得网页设计更加丰富多样,效果更加炫目,用户体验也得到了提升。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值