css经典面试题(二)

文章目录

    • 1、清除浮动
    • 2、opacity: 0、visibility: hidden、display: none 的区别
    • 3、css画一个三角形
    • 4、常见的主流浏览器前缀
    • 5、重绘与重排的区别?
    • 6、如何优化图片
    • 7、CSS3 中 transition 和 animation 的属性分别有哪些
    • 8、居中为什么要使用 transform(为什么不使用 marginLeft/Top)
      • marginleft/top如何居中
      • transform如何居中
      • transform不会造成页面大面积的重绘与重排
    • 9、 用于控制图像滚动的属性是什么?
    • 10、伪类与伪元素
    • 11、css样式权重(优先级)

1、清除浮动

先来回答一个问题,为什么会需要清除浮动?

如果一个dom内的所有子dom都是float:left 或者float:right,那么所有的子dom都处于另外一个层级,父dom所在的层级将为空,所以如果不规定父dom的高度,那父dom的高度就是0

1.清除浮动最简单的方式就是规定父dom的高度 height:xxxpx;
2.给父级dom添加overflow:hidden 清除浮动方法 当overflow 属性不为 visible时,会形成一个BFC的独立渲染区域,这个区域将会视float为同一个独立层级进行渲染,所以float dom的高度,就是整个BFC渲染区域的高度
3.万能清除法 ::after 伪元素清浮动(现在主流方法,推荐使用)给父dom加一个clear类名。

	.clear::after {content:"";display:block;height:0;clear:both;visibility:hidden;}

2、opacity: 0、visibility: hidden、display: none 的区别

display: none (让dom彻底不排布也不渲染,自然是不占空间,也不能点击)
visibility: hidden(让dom只排布,不渲染,所以占据空间,但不能点击)
opacity: 0(让dom既排布,又渲染出来,只不过颜色是透明的,看不见,但不代表没渲染出来,它是存在的,占据空间,可以点击)

3、css画一个三角形

div{width: 0;height: 0;border: 10px solid red;border-top-color: transparent;border-left-color: transparent;border-right-color: transparent;
}

4、常见的主流浏览器前缀

-moz-:firefox 火狐浏览器兼容性前缀
-o-:opera 浏览器兼容性前缀
-ms-:早期ie浏览器以及edge浏览器兼容性前缀
-webkit-:主流的google浏览器以及Safari,Opera的较新版本,几乎所有的iOS浏览器 的兼容性前缀

随着前端技术的发展,曾经的五大主流浏览器也会使用统一的内核,目前来看webkit最有希望。

5、重绘与重排的区别?

首先确立一点,渲染树是合成了html和css之后才渲染到页面上的,也就是说,至少会有一次排布和绘图的过程。css计算->排布->绘图,总是这样一个过程。
排布就是计算dom放置在页面的位置和大小,绘图就是将dom的每一个像素点展示出来。

1.如果用户的操作,或者前端程序的变化,导致页面发生了变化,就可能发生重绘和重排。
2.通俗意义上讲,如果一个dom的大小,位置发生变化,就会造成重排,如果一个dom只是颜色,背景发生变化,可能只会造成重绘。
3.重排必定会重绘,而重绘不一定会重排。
4.重绘与重排也是有范围的,页面的dom不总是处于同一层级,比如position:fixed/absolute,z-index,transform等动画,都会让部分dom在一个全新的层级中进行布局,层与层之间是相互独立的,层内的重绘与重排不会影响到层外,所以开发过程中,合理切割层级将会有效降低重绘与重排带来的性能消耗。

6、如何优化图片

css处理图片也有多种手段
1.将多个图标文件整合到一张图片中(雪碧图或者精灵图)在background中我们可以设置position的xy坐标,来展现不同的内容。
2.一般图片的size小于8k的情况下,直接转为base64使用。
3.对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量,缺点就是兼容性并不好
4.对于移动端来说,屏幕宽度就那么点,完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载,可以计算出适配屏幕的宽度,然后去请求相应裁剪好的图片。
5.一些简单的装饰图片,或者是简单的动图,尽量使用css动画效果或者css来实现。

7、CSS3 中 transition 和 animation 的属性分别有哪些

transition 过渡动画:

transition-property:指定过渡的 CSS 属性
transition-duration:指定过渡所需的完成时间
transition-timing-function:指定过渡函数
transition-delay:指定过渡的延迟时间

animation 关键帧动画:

animation-name:指定要绑定到选择器的关键帧的名称
animation-duration:动画指定需要多少秒或毫秒完成
animation-timing-function:设置动画将如何完成一个周期
animation-delay:设置动画在启动前的延迟间隔
animation-iteration-count:定义动画的播放次数
animation-direction:指定是否应该轮流反向播放动画
animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
animation-play-state:指定动画是否正在运行或已暂停

8、居中为什么要使用 transform(为什么不使用 marginLeft/Top)

先说一下transform和marginleft/top是如何居中的

marginleft/top如何居中

.position-outter {position: relative;width: 300px;height: 300px;background-color: plum;
}.position-center {position: absolute;left: 50%;top: 50%;width: 100px;height: 100px;margin-left: -50px;margin-top: -50px;background-color: pink;
}

transform如何居中

.translate-position-outter { position: relative; width: 300px; height: 300px; background-color: plum; 
}.translate-position-center {position: absolute;left: 50%;top: 50%;background-color: pink;transform: translate(-50%, -50%);
}

transform不会造成页面大面积的重绘与重排

transform 属于合成属性(composite property),对合成属性进行 transition/animation 动画将会创建一个合成层(composite layer),这使得被动画元素在一个独立的层中进行动画。只要该层的内容不发生改变,就没必要进行重绘(repaint),浏览器会通过重新复合(recomposite)来形成一个新的帧。

top/left属于布局属性,该属性的变化会导致重排(reflow/relayout),所谓重排即指对这些节点以及受这些节点影响的其它节点,进行CSS计算->重排->重绘过程,浏览器需要为整个层进行重绘造成了极大的性能开销。

9、 用于控制图像滚动的属性是什么?

background-attachment:该属性设置背景图像是随页面其余部分滚动还是固定滚动。

.box {background-image: url("img.png");background-repeat: no-repeat;background-attachment: fixed;
}

10、伪类与伪元素

伪元素:能够在视觉上呈现出来,但在又无法在dom中找到的元素,常见一些页面icon或者tooltip是通过伪元素实现的,伪元素常用的有,xxx::after,xxx::before,xxx::first-line,xxx::first-letter
伪类:将特殊的效果添加到特定选择器上。它是已有元素上添加类别的,不会产生新的元素,常见的包括,:hover,:nth-child(),:first-child,等

11、css样式权重(优先级)

!important > 内联样式 > id > class > tag

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/81123.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

The driver has not received any packets from the server

在测试数据迁移时遇到的错误。 目录 一、错误 二、解决 三、数据迁移测试 3.1 环境 3.2 源码及测试 3.2.1 源码 3.2.2 测试结果(太慢) 3.2.3 源码修改 3.2.4 异常及解决 一、错误 The driver has not received any packets from the server. 二…

数学建模——微分方程介绍

一、基础知识 1、一阶微分方程 称为一阶微分方程。y(x0)y0为定解条件。 其常规求解方法: (1)变量分离 再两边积分就可以求出通解。 (2)一阶线性求解公式 通解公式: 有些一阶微分方程需要通过整体代换…

四种常用的自动化测试框架

一直想仔细研究框架,写个流水账似的测试程序不难,写个低维护成本的测试框架就很难了,所以研究多种测试框架还是很有必要的,知道孰优孰劣,才能在开始编写框架的时候打好基础,今天读到了KiKi Zhao的翻译文章&…

Java实现Ip地址获取

Java实现Ip地址获取 一、两种实现方式二、测试结果 一、两种实现方式 package com.lyp;import org.apache.commons.lang3.ObjectUtils;import java.net.*; import java.util.ArrayList; import java.util.Enumeration; import java.util.List; import java.util.Optional;/***…

Linux Ubuntu20.04深度学习环境快速配置命令记录

一、驱动安装 1、更新系统包 sudo apt-get updatesudo apt-get upgrade 2、安装显卡驱动 使用apt方式安装驱动,多数情况不容易成功, 使用一下方法更佳: 1.查看合适显卡的驱动版本 ubuntu-drivers devices NVIDIA GeForce 驱动程序 - …

git压缩仓库

git 压缩仓库 git gc命令压缩增量存储单元,节省磁盘空间 du -sh 查看当前文件夹占用多少K 快照的存储: 对于修改的内容,做快照处理并保存. 对于未修改的文件,做引用处理.

SOLIDWORKS Composer位置关键帧的使用

SOLIDWORKS Composer是专业的SOLIDWORKS及3D文件处理的动画制作软件,作为SOLIDWORKS 产品线下的一个明星存在。 SOLIDWORKS Composer几乎可以处理任何SOLIDWORKS的模型文件并将之转化成可以动作的机械动画,可以引用在企业的网站、产品说明书以及工作指导…

MySQL 面试题——MySQL 基础

目录 1.什么是 MySQL?有什么优点?2.MySQL 中的 DDL 与 DML 是分别指什么?3.✨数据类型 varchar 与 char 有什么区别?4.数据类型 BLOB 与 TEXT 有什么区别?5.DATETIME 和 TIMESTAMP 的异同?6.✨MySQL 中 IN …

Golang开发--计时器(Timer)和定时器(Ticker)

计时器(Timer) 在 Go 中,可以使用 time 包提供的计时器(Timer)来执行定时任务。计时器允许你在指定的时间间隔后执行某个操作。 time.Timer结构表示一个计时器,它会在指定的时间段后触发单次操作。 创建计…

STM32F4X SPI W25Q128

STM32F4X SPI W25Q128 什么是SPISPI的特点SPI通信引脚SPI接线方式SPI速率SPI通信方式SPI时钟相位和时钟极性 STM32F4X SPISTM32F4X SPI配置STM32F4X SPI频率 W25Q128W25Q128存储结构W25Q128读写操作W25Q128常用指令读取ID命令(0x90)写使能命令(0x06)禁止写使能命令(0x04)读取W2…

黑马JVM总结(七)

(1)StringTable_编译器优化 “a”“b”对应#4:是去常量池中找ab的这个符号 astore 5:是把这个存入编号为5的局部变量 “ab”对应的指令 #4,跟“a”“b”对应#4下面弄是一样的 在执行s3“ab”这行个代码时&#xf…

在PHP8中向数组添加元素-PHP8知识详解

在php8中向数组添加元素有多种方法,在这里主要讲解几个常用的方法:使用方括号[]添加元素、使用array_unshift()函数,向数组的头部添加元素、使用array_push()函数,向数组的尾部添加元素、使用array_splice()函数添加元素。 1、使用…

学习Bootstrap 5的第十三天

目录 提示框 如何创建提示框 实例 指定提示框的位置 实例 弹出框 如何创建弹出框 实例 指定弹出框的位置 实例 关闭弹出框 实例 提示框 提示框是一个小小的弹窗,在鼠标移动到元素上显示,鼠标移到元素外就消失。 如何创建提示框 Bootstrap…

MATLAB入门一基础知识

MATLAB入门一基础知识 此篇为课程学习笔记 链接: link 什么是MATLAB 平时所说的MATLAB既是一款软件又是一种编程语言,只是这种高级解释性语言是在配套的软件下进行开发的 MATLAB的一个特性 MATLAB的一个特性,如果一条语句以英文分号‘;’结尾&…

Ghidra Software Reverse Engineering Framework

安装 Install JDK 17 64-bit 下载 JDK 17 64-bit,并解压 vi ~/.bashrc export JAVA_HOME/usr/local/java/jdk1.8.0_361(jdk路径) export JRE_HOME${JAVA_HOME}/jre export CLASSPATH.:${JAVA_HOME}/lib:${JRE_HOME}/lib export PATH${JAVA_HOME}/bin:$PATHsource…

【题解】JZOJ6703 tree

题意 给定 n n n 个点的树,每个点有点权,每次询问点权大于等于 x x x 的点构成的子图有多少个连通块,动态修改点权,保证修改后点权不小于修改前。 题解 首先有一个显然的结论:森林的连通块个数 点数 - 边数。 这…

LeetCode 332. Reconstruct Itinerary【欧拉回路,通路,DFS】困难

本文属于「征服LeetCode」系列文章之一,这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁,本系列将至少持续到刷完所有无锁题之日为止;由于LeetCode还在不断地创建新题,本系列的终止日期可能是永远。在这一系列刷题文章…

Vue3+ElementUI使用

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><meta name"viewport" content"initial-scale1.0,maximum-scale1.0,minimum-scale1.0,user-scalable0, widthdevice-width"/><!-- 引入样式 --><lin…

【C++】list的模拟实现【完整理解版】

目录 一、list的概念引入 1、vector与list的对比 2、关于struct和class的使用 3、list的迭代器失效问题 二、list的模拟实现 1、list三个基本函数类 2、list的结点类的实现 3、list的迭代器类的实现 3.1 基本框架 3.2构造函数 3.3 operator* 3.4 operator-> 3…

JavaScript 基础 - 第1天笔记

JavaScript 基础 - 第1天 了解变量、数据类型、运算符等基础概念&#xff0c;能够实现数据类型的转换&#xff0c;结合四则运算体会如何编程。 体会现实世界中的事物与计算机的关系理解什么是数据并知道数据的分类理解变量存储数据的“容器”掌握常见运算符的使用&#xff0c;了…