CSS面经(未完待续)

1. CSS选择器及其优先级

!important > 行内样式 > id选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 子/后台选择器 > *通配符

2. 重排和重绘是什么?浏览器的渲染机制是什么?

重排(回流):当增加或删除dom节点,或者给元素修改宽高时,会改变页面布局,那么就会重新构造dom树,然后再次渲染。

重绘:计算好盒模型的位置,大小和其他一些属性之后,浏览器就会根据每个盒模型的特性进行绘制。

浏览器的渲染机制:当dom的大小,位置发生改变时进行重排,当dom的样式color、background-color改变时进行重绘

3. display有哪些属性值

属性值作用
none元素不显示,并且会从文档流中移除
block块类型,默认宽度为父元素宽度,可设置宽高,换行显示
inline行内元素类型,默认宽度为内容宽度,不可设置宽高,同行显示
inline-block默认宽度为内容宽度,可设置宽高,同行显示
table此元素会作为块级表格来显示,子元素可设置display:table-row、table-cell
flexflex布局
grid网格布局
inherit规定应该从父元素继承display属性的值

网格布局笔记:网格布局

表格布局可以看下面代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.table {display: table;  /* 表格 */width: 800px;height: 500px;margin: 20px auto;border: 3px solid #000;}.row {display: table-row;  /* 表格行 */}.cell {display: table-cell;    /* 表格单元 */border: 1px solid #000;}</style>
</head><body><div class="table"><div class="row"><div class="cell">1</div><div class="cell">2</div><div class="cell">3</div></div><div class="row"><div class="cell">4</div><div class="cell">5</div><div class="cell">6</div></div></div>
</body></html>

结果如下:

在这里插入图片描述

4. display的block、inline和inline-block的区别

block:独占一行,宽度继承至父盒子,多个元素会另起一行,可设置宽高以及marginpadding属性。

inline:元素不会独占一行,宽度、高度由内容撑开,不可设置宽高,但可以设置水平方向的marginpadding

inline-block:行内块,将对象设置为inline对象,但对象的内容作为block对象呈现,也就是说内容排列在一行内显示,但是可以设置宽高。

5. 隐藏的元素的方法有哪些

  1. display: none
  2. visibility: hidden
  3. opacity: 0
  4. position: absolute 移到可视区之外
  5. z-index: 负值 定位的前提下,使其他元素盖住该元素,以此实现隐藏
  6. transform:scale(0, 0) 将元素缩放为0,来实现元素的隐藏,元素仍占据位置。

6. link和@import的区别

两者都是外部引用css的方式,他们的区别如下:

  • 功能上:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务,@import属于CSS范畴,只能加载CSS
  • 效果上:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载
  • 兼容性上:link是XHTML标签,没有兼容性问题;@import是CSS2.1提出的,低版本浏览器不支持
  • js支持上:link支持使用js控制dom去改变样式;而@import不支持

7. transition和animation的区别

  • transition是过渡属性,强调过渡,它的实现需要触发一个事件(比如鼠标移动上去,焦点,点击等)才执行动画,类似于flash的补间动画,设置一个开始关键帧,一个结束关键帧
  • animation是动画属性,它的实现不需要触发事件,设定好时间之后可以自己执行,且可以循环一个动画,它也类似于flash的补间动画,但是它可以设置多个关键帧(用@keyframe定义)完成动画。

8. display:none和visibility:hidden的区别

  • 渲染树上:display:none会让元素从渲染树中消失,渲染时不会占据任何空间,visibility:hidden会占据空间,只是不可见
  • 是否是继承属性:display是非继承属性,子孙节点会随父节点消失,修改显示子孙节点的属性也无法显示,而visibility是继承属性,子孙节点消失是因为子孙节点从父节点继承了hidden,通过设置子孙节点visibility:visible可以让子孙节点显示。
  • 重排与重绘:修改常规文档流的display通常会造成文档的重排,但是修改visibility只会造成重绘
  • 读屏器:如果使用读屏器,设置display:none的内容不会被读取,而visibility:hidden可以被读取

9. li与li之间有看不见的空白间隔是什么原因引起的?如何解决?

li原本是块级标签,如下图

在这里插入图片描述

但当li设置为行内块元素或行元素时,li标签与li标签之间会有看不见的空隙,如下图:

在这里插入图片描述

原因:当元素是行内元素/行内块元素排版时,浏览器会将元素之间的空白符,如空格,换行,tab等渲染成一个空格处理,上图的换行就被渲染成了空格,因此会有上面的结果。

解决方案:

  1. li设置为float:left,缺点:很多容器是不适合设置浮动,并且浮动会将display变为block。
  2. 将所有li写在一行,比较简单粗暴的方法,但是代码会不太美观
  3. ul内的字符尺寸设置为0,缺点:可能会影响到其他字符,其他字符需要额外重新设置font-size
  4. 设置ul的字符间隔letter-spacing: -8px,缺点跟上条一样

10. 什么是物理像素、逻辑像素、像素密度,为什么移动端开发要用到@2x、@3x的图片

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

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

相关文章

超大规模集成电路设计----CMOS反相器(五)

本文仅供学习&#xff0c;不作任何商业用途&#xff0c;严禁转载。绝大部分资料来自----数字集成电路——电路、系统与设计(第二版)及中国科学院段成华教授PPT 超大规模集成电路设计----CMOS反相器&#xff08;五&#xff09; 5.1 静态CMOS反相器综述5.1.1 静态CMOS反相器优点…

自定义连接池 用代码读写全过程

一 package 连接池;import java.sql.*; import java.util.Map; import java.util.Properties; import java.util.concurrent.Executor;public class MyConnection implements Connection {private MyDateSource myDateSource;private Connection connection;public MyConnec…

【C语言:自定义类型(结构体、位段、共用体、枚举)】

文章目录 1.结构体1.1什么是结构体1.2结构体类型声明1.3结构体变量的定义和初始化1.4结构体的访问 2.结构体对齐2.1如何对齐2.2为什么存在内存对齐&#xff1f; 3.结构体实现位段3.1什么是位段3.2位段的内存分配3.3位段的跨平台问题3.4位段的应用3.5位段使用注意事项 4.联合体4…

Chapter 6 Managing Application Engine Programs 管理应用程序引擎程序

Chapter 6 Managing Application Engine Programs 管理应用程序引擎程序 Running Application Engine Programs 运行应用程序引擎程序 This section provides an overview of program run options and discusses how to: 本节提供程序运行选项的概述&#xff0c;并讨论如何…

上下拉电阻会增强驱动能力吗?

最近看到一个关于上下拉电阻的问题&#xff0c;发现不少人认为上下拉电阻能够增强驱动能力。随后跟几个朋友讨论了一下&#xff0c;大家一致认为不存在上下拉电阻增强驱动能力这回事&#xff0c;因为除了OC输出这类特殊结构外&#xff0c;上下拉电阻就是负载&#xff0c;只会减…

RT-Thread Studio文件消失不见或被排除构建

不得不说RT-Thread Studio里面配置真多&#xff0c;今天我同事的电脑发现根本没有被画斜杠的文件夹&#xff0c;导致我想移植f1的写内部flash这个&#xff08;可以看上一个文章&#xff09;时候不能直接点击属性排除构建&#xff0c;然后在网上查找的时候也没怎么找到说法&…

《漫长的等待》—— 读后感

前几天下班地铁上&#xff0c;人太多&#xff0c;看技术书籍看不进去&#xff0c;翻阅微信读书&#xff0c;看到了这本书&#xff0c;看了几章免费的章节&#xff0c;因为后续需要买会员就没有继续读&#xff0c;但是这几天偶尔还是会想到书籍中的情节&#xff0c;所以今天充了…

基于SQL语言的数据库管理系统

zstarling 常见的SQL数据库管理系统具体区别PLPGSQL和MYSQL的区别 常见的SQL数据库管理系统 下面是一些常见的SQL数据库管理系统和它们的语法联系和区别 数据库管理系统语法联系法区别Oracle基于SQL的语言拥有自身独特的函数和特性&#xff0c;例如行级锁和高级分组处理Micro…

代码随想录算法训练营 ---第五十五天

今天是 动态规划&#xff1a;编辑距离问题。 第一题&#xff1a; 简介&#xff1a; 动态规划五部曲&#xff1a; 1.确定dp数组的含义 dp[i][j] 表示以下标i-1为结尾的字符串s&#xff0c;和以下标j-1为结尾的字符串t&#xff0c;相同子序列的长度为dp[i][j]。 2.确定递推公…

智能优化算法应用:基于寄生捕食算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于寄生捕食算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于寄生捕食算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.寄生捕食算法4.实验参数设定5.算法结果6.参考…

玩转Omniverse | 将FBX文件导入Omniverse View,以及step等3D格式如何转换为USD文件的过程

1&#xff0c;参考这个过程&#xff0c;玩转Omniverse | 将FBX文件导入Omniverse View 2&#xff0c;实际操作&#xff1a; 在omniverse中安装usd explorer 打开usd explorer 选择step&#xff0c;然后右键选择convert to USD&#xff0c;点击确认&#xff0c;稍等一会就会转换…

Python神器解析时间序列数据:数据分析者必读

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 时间序列数据是在许多领域中都至关重要的数据类型&#xff0c;它涵盖了一系列按时间顺序排列的数据点。Python作为一种强大的数据分析工具&#xff0c;提供了许多库和工具&#xff0c;能够有效地处理、分析和可视…

高级搜索——伸展树Splay详解

文章目录 伸展树Splay伸展树Splay的定义局部性原理Splay的伸展操作逐层伸展双层伸展zig-zig/zag-zagzig-zag/zag-zigzig/zag双层伸展的效果与效率 伸展树的实现动态版本实现递增分配器节点定义Splay类及其接口定义伸展操作左单旋右单旋右左/左右双旋伸展 查找操作删除操作插入操…

基于Java SSM邮局订报管理系统

尽管电子读物越来越普及&#xff0c;但还是有很多读者对纸质刊物情有独钟&#xff0c;所以邮局的报刊征订业务一直非常受欢迎。邮局订报管理系统就是对客户在邮局订阅报刊进行管理&#xff0c;包括查询报刊、订阅报刊、订阅信息的查询、统计等的处理&#xff0c;系统的主要业务…

C语言初学4:C 存储类

auto 存储类 auto 是所有局部变量默认的存储类&#xff0c;只能用在函数内&#xff0c;在函数开始时被创建&#xff0c;结束时被销毁 #include<stdio.h>int main(){/*定义两个具有相同存储类的变量 */int mouth;auto int month;} register 存储类 意味着变量可能存储…

springcloud整合Oauth2自定义登录/登出接口

我使用的是password模式&#xff0c;并配置了token模式 一、登录 (这里我使用的示例是用户名密码认证方式) 1. Oath2提供默认登录授权接口 org.springframework.security.oauth2.provider.endpoint.postAccess; Tokenpublic ResponseEntity<OAuth2AccessToken> pos…

使用docker搭建『Gitea』私有仓库

文章目录 一、安装 docker 环境1、移除以前的 docker 相关包2、配置yum源3、安装 docker4、启动 docker 二、安装 docker compose1、安装docker compose2、赋予下载的docker-compose执行权限 三、安装 gitea1. 创建工作目录2. 创建 Docker Compose 文件3. 启动 Gitea4. 访问 Gi…

【活动】还记得当初自己为什么选择计算机?

方向一&#xff1a;为什么当初选择计算机行业 从小就想当一个生物学家&#xff0c;奈何高考分数不够上哪怕是中国药科大学的药学专业&#xff08;还是计算机更好就业&#xff0c;少不更事不知道这些&#xff0c;一心只想着什么科学信仰之类的&#xff09;&#xff0c;后来被父母…

c++操作数据库(增删改查)------otl库----c++

文章目录 一, insert 插入数据库二, select 查询select 写法一select 写法二 三, update 修改四, delete 删除 包含头文件&#xff1a;#include <otl/otlv4.h> 一, insert 插入数据库 #include <iostream> #include <otl/otlv4.h> // 请确保正确包含 OTL 头…

回溯算法题型分类

题型一&#xff1a;排列、组合、子集相关问题 提示&#xff1a;这部分练习可以帮助我们熟悉「回溯算法」的一些概念和通用的解题思路。解题的步骤是&#xff1a;先画图&#xff0c;再编码。去思考可以剪枝的条件&#xff0c; 为什么有的时候用 used 数组&#xff0c;有的时候设…