前端CSS常考问题总结

目录

CSS盒模型

CSS选择器的优先级

隐藏元素的方法

px和rem的区别是什么?

重绘重排有什么区别?

重排（回流）：

重绘：

浏览器的渲染机制:

浏览器如何解析CSS？

元素水平垂直居中的方式

CSS的哪些属性哪些可以继承

CSS预处理器

预处理器作用：

盒子塌陷

现象：

原因：

解决方案：

伪类和伪元素

伪类：

伪元素：

css3新特性

CSS3 边框

CSS3 背景

CSS3 文本效果

CSS3 字体

CSS3 2D 转换

用flex实现九宫格

CSS盒模型

在HTML页面中的所有元素都可以看成是一个盒子

盒子的组成：内容content、内边距padding、边框border、外边距margin

盒模型的类型：

  • 标准盒模型 margin + border + padding + content
  • IE盒模型 margin + content(border + padding)
标准盒模型
IE盒模型

控制盒模型的模式：

  • box-sizing:   ①content-box（默认值，标准盒模型） ②border-box（IE盒模型）

CSS选择器的优先级

CSS的特性：

  • 继承性、层叠性、优先级

优先级：

  • 写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式

添加样式的方式：

  • 标签、类/伪类/属性、全局选择器、行内样式、id、!important

优先级顺序：

  • !important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

隐藏元素的方法

  • display:none; ——元素在页面上消失，不占据空间
  • opacity:0; ——设置了元素的透明度为0，元素不可见，但仍然占据空间位置
  • visibility:hidden; ——让元素消失，占据空间位置，一种不可见的状态
  • position:absolute;——定位
  • clip-path——裁剪

px和rem的区别是什么?

px（像素）：

  • 绝对单位长度，显示器上给我们呈现画面的像素，每个像素大小一样

rem：

  • 相对单位，相对于html根节点的font-size的值
  • 默认html根节点font-size=16px,  1rem = 16px;
  • 直接给html节点的font-size:62.5%; 1rem = 10px; （16px*62.5%=10px）

重绘重排有什么区别?

重排（回流）：
  • 布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
  • 对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排
重绘：
  • 计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制
  • 对DOM的样式进行修改，如color等，浏览器不需要重新计算几何属性时，直接修改绘制元素的新样式，就是重绘
浏览器的渲染机制:

浏览器如何解析CSS？
  • CSS选择器的解析是从右向左解析的。
  • 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很 多性能。
  • 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
  • 两种匹配规则的性能差别很大，是因为从右向左的 匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪 费在了失败的查找上面。
  • 而在 CSS解析完毕后,需要将解析的结果与DOM Tree的内容-起进行分析建立一棵Render Tree，最终用来进行绘图。
  • 在建立Render Tree时(WebKit 中的「Attachment」过程)， 浏览器就要为每个DOM Tree中的元素根据CSS的解析结果(Style Rules)来确定生成怎样的Render Tree

元素水平垂直居中的方式

1.定位+margin

.father{width: 400px;height: 400px;border: 1px solid;position: relative;}
.son{position: absolute;width: 200px;height: 200px;background-color: red;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}

2.定位+transform

.father{width: 400px;height: 400px;border: 1px solid;position: relative;}
.son{position: absolute;width: 200px;height: 200px;background-color: blue;top: 50%;left: 50%;transform: translate(-50%,-50%);}

3.flex布局 

.father{display: flex;justify-content: center;align-items: center;width: 400px;height: 400px;border: 1px solid;}
.son{width: 200px;height: 200px;background-color: green;}

4.grid布局

5.table布局

CSS的哪些属性哪些可以继承

CSS的三大特性：

  • 继承性
  • 层叠性
  • 优先级

子元素可以继承父类元素的样式 ：

  • 字体的一些属性：font
  • 文本的一些属性：line-height
  • 元素的可见性：visibility:hidden
  • 表格布局的属性：border-spacing
  • 列表的属性：list-style
  • 页面样式属性：page
  • 声音的样式属性

CSS预处理器

预处理语言增加了变量、函数、混入等强大的功能

  • ①SASS    ②LESS
  • Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理 器代码，默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名
预处理器作用：
  • 提供变量和函数等高级功能：CSS预处理器允许开发者使用变量和函数来组织和复用代码。这些高级功能使得样式表的编写更加灵活和高效。
  • 支持嵌套规则，简化代码结构：在CSS预处理器中，可以使用嵌套规则来简化代码结构。这使得样式表的编写更加清晰和易于理解。
  • 提供模块化和可复用的组件：CSS预处理器支持将样式表划分为模块和组件，从而提高代码的可复用性和维护性。这使得大型项目或复杂样式的管理更加有序和高效
     

Sass详细语法推荐：

【面试】css预处理器之sass（scss）_sass面试-CSDN博客

盒子塌陷

现象：

本应该在父盒子内部的元素跑到了外部。

原因：

当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文 档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度 就会直接塌陷为零， 我们称这是CSS高度塌陷

解决方案：
  • 最简单，直接，粗暴的方法就是盒子大小写死，给每个盒子设定固定的width和height，直到合 适为止，这样的好处是简单方便，兼容性好，适合只改动少量内容不涉及盒子排布的版面。缺点是非自 适应，浏览器的窗口大小直接影响用户体验
  • 给外部的父盒子也添加浮动，让其也脱离标准文档流，这种方法方便，但是对页面的布局不是很 友好，不易维护
  • 给父盒子添加overflow属性 overflow:auto; 有可能出现滚动条，影响美观。 overflow:hidden; 可能会带来内容不可见的问题
  • 用after伪元素清除浮动 给外部盒子的after伪元素设置clear属性，再隐藏它 这其实是对空盒子方案的改进，一种纯CSS的解决方案，不用引入冗余元素。
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {clear: both;}

这也是bootstrap框架采用的清除浮动的方法。 这是一种纯CSS的解决浮动造成盒子塌陷方法，没有引入任何冗余元素，推荐使用此方法来解决CSS盒 子塌陷。 备注：第五种方法虽好，但是低版本IE不兼容，具体选择哪种解决方法，可根据实际情况决定。

  • 给父盒子添加border
  • 给父盒子设置padding-top

伪类和伪元素

伪类和伪元素存在的意义都是为了操作一些通过普通的CSS选择器无法直接取到的节点。它们都相当于CSS选择器的一种扩展

伪类：

用于已有元素处于某种状态时为其添加对应的样式

常用伪类：

  • :hover 鼠标悬浮的节点
  • :active 当前选中的节点
  • :enabled 启用的元素，通常用于表单
  • :focus 当前取的焦点的元素
  • :checked 选中的元素，通常用于表单 checkbox 元素
  • :disabled 未启用的元素，通常用于表单

例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相 似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式， 所以称为伪类。

伪元素：

用于创建一些不在DOM树中的元素，并为其添加样式。

常用伪元素：

  • ::before 元素内容前插入新内容
  • ::after元素内容之后插入新内容
  • ::selection 选中的内容。常用于文本。
  • ::placeholder 占位符。用于设置占位符的样式。

例如，我们可以通过:before在一个元素之前添加一些文本，并为这些文本添加样式，虽然用 户可以看见 这些文本，但是它实际上并不在DOM文档中。

css3新特性

CSS3 边框

创建圆角

  • 语法： border-radius : length length;
  • length： 由浮点数字和单位标识符组成的长度值（如：20px）。不可为负值，如果为负值则与 0展示效果一样。第一个值设置其水平半径，第二个值设置其垂直半径，如果第二个值省略则默认 第二个值等于第一个值。

边框阴影 

  • 通过属性 box-shadow 向边框添加阴影。
  • 语法： {box-shadow : [inset] x-offset y-offset blur-radius extension-radius spread-radiuscolor} 说明：对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量 模糊半径 阴影扩展半径 阴影 颜色}

边框图片

  • 语法： border-image : border-image-source || border-image-slice [ / border-image-width] || border-image-repeat
  • border-image ： none | image [ number | percentage]{1,4} [ / border-width>{1,4} ] ? [ stretch | repeat | round ]{0,2}
CSS3 背景

background-size 属性

  • 在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以设置背景图片的尺寸， 这就允许我们在不同的环境中重复使用背景图片。可以像素或百分比规定尺寸。如果以百分比规定尺 寸，那么尺寸相对于父元素的宽度和高度。

background-origin 属性

  • 规定背景图片的定位区域，背景图片可以放置于 content-box 、 padding-box 或 border-box 区域

background-clip 属性

  • 与 background-origin 属性相似，规定背景颜色的绘制区域，区域划分与 background-origin 属性 相同。

CSS3 多重背景图片

  • CSS3 允许为元素设置多个背景图像
CSS3 文本效果
  • text-shadow 属性 给为本添加阴影，能够设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

  • text-wrap 属性 设置区域内的自动换行。 语法： text-wrap: normal | none | unrestricted | suppress | break-word

CSS3 字体
  • 在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。但是通过 CSS3，web 设计师 可以使用他 们喜欢的任意字体。当找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务 器上，它会在需要时 被自动下载到用户的计算机上。字体需要在 CSS3 @font-face 规则中定义。
CSS3 2D 转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸，转换是使元素改变形状、尺寸 和位置的一种效果。

  • translate() 方法 通过 translate(x , y) 方法，元素根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数从其当前位置移 动，x为正值向右移动，为负值向左移动；y为正值向下移动，为负值向上移动；

  • rotate() 方法 控制元素顺时针旋转给定的角度。为正值，元素将顺时针旋转。为负值，元素将逆时针旋转

2D Transform 方法汇总

······（太多了不想写了😣😵‍💫）

用flex实现九宫格

  • 利用了padding-top和flex-wrap:wrap
  • 当设置background-color时，是包括盒子模型中的content和 padding的
  • 但是为什么不设置height呢？因为父元素没有高度，所以定义height:30%是没有用的
  • 且若想每个block都为正方形，最好的方式就是设置padding-top/padding-bottom：a%因为此时的百分比是父元素宽度的百分比，而width也为父元素宽度的百分比，所以block可以成为正方形
<!DOCTYPE html>
<html>
<style>
.block {
padding-top: 30%;
margin-top: 3%;
border-radius: 10%;
background-color: orange;
width: 30%;
}
.container-flex2 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>
<body>
<div class="container-flex2">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>

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

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

相关文章

php开发项目 docx,pptx,excel表格上传阿里云,腾讯云存储后截取第一页生成缩略图

php开发项目 docx,pptx,excel表格上传阿里云,腾讯云存储后截取第一页生成缩略图

服务器或者存储上传的word,ppt和excel表格需要截取内容展示的时候,就需要管理后台每次上传文件时根据不同文件类型截取图片保存起来,并讲图片的地址保存到数据字段中.网上搜索了很多相关文章遇到的坑不少，经过２天时间终于完成了，将代码和遇到的问题完整记录下来． 本文用的…
阅读更多...
【前端寻宝之路】总结学习使用CSS的引入方式

【前端寻宝之路】总结学习使用CSS的引入方式

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-BNJBIEvpN0GHNeJ1 {font-family:"trebuchet ms",verdana,arial,sans-serif;f…
阅读更多...
IDEA自动导入provided的依赖

IDEA自动导入provided的依赖

最近在学习flink 流程序&#xff0c;在写demo程序的时候依赖flink依赖&#xff0c;依赖的包在flink集群里面是自己已经提供了的&#xff0c;在导入的时候配置为provided&#xff0c;像下面这样&#xff0c;以使打包的时候不用打到最终的程序包里面。 <dependency><gro…
阅读更多...
Java8,函数式编程应用:

Java8,函数式编程应用:

持续更新中&#xff1a; 函数式(Functional)接口 什么是函数式(Functional)接口 只包含一个抽象方法的接口&#xff0c;称为函数式接口。 你可以通过 Lambda 表达式来创建该接口的对象。&#xff08;若 Lambda 表达式 抛出一个受检异常(即&#xff1a;非运行时异常)&#xff0c…
阅读更多...
js创建对象方式总结

js创建对象方式总结

js创建对象方式总结 字面量方式 使用大括号 {} 创建一个新对象&#xff0c;这是最简单直接的方式。适用于创建单个对象&#xff0c;可以直接在大括号内定义属性和方法。 let person {name: John,age: 30,gender: male};let preson2 {name: John,age: 30,gender: male};cons…
阅读更多...
光伏发电预测

光伏发电预测

XGB、LGB在datacamp（学习网站） data fountain与国家电投系列赛，光伏发电预测 题目：给一组特征，预测瞬时发电量，训练集9000个点，测试集8000个点，特征包含光伏板的属性和外部环境等。 数据字段：ID、光伏电池板背侧温度、光伏电站现场温度、计算得到的平均转换效率、数…
阅读更多...
MySQL学习Day25——数据库其他调优策略

MySQL学习Day25——数据库其他调优策略

一、数据库调优的措施: 1.调优的目标: (1)尽可能节省系统资源&#xff0c;以便系统可以提供更大负荷的服务 (2)合理的结构设计和参数调整&#xff0c;以提高用户操作的响应速度 (3)减少系统的瓶颈&#xff0c;提高MySQL数据库整体的性能; 2.如何定位调优:用户的反馈、日志…
阅读更多...
stm32f103zet6笔记1-led工程

stm32f103zet6笔记1-led工程

1、选择串口调试 2、LED0连接到PB5&#xff0c;PB5设置为推挽输出。PE5同理。 3、生成成对的.c,.h文件。 4、debugger选择j-link。 5、connection选择SWD。 6、编写bsp_led.c,bsp_led.h文件。 7、下载调试&#xff0c;可以看到LED0 500ms闪烁一次&#xff0c;LED1 1000ms闪烁一…
阅读更多...
浅谈一个CTF中xss小案例

浅谈一个CTF中xss小案例

一、案例代码 二、解释 X-XSS-Protection: 0&#xff1a;关闭XSS防护 之后get传参&#xff0c;替换过滤为空&#xff0c;通过过滤保护输出到img src里面 三、正常去做无法通过 因为这道题出的不严谨所以反引号也是可以绕过的 正常考察我们的点不在这里&#xff0c;正常考察…
阅读更多...
Unity之街机捕鱼

Unity之街机捕鱼

目录 &#x1f62a;炮台系统 &#x1f3b6;炮口方向跟随鼠标 &#x1f3b6;切换炮台 &#x1f62a;战斗系统 &#x1f3ae;概述 &#x1f3ae;单例模式 &#x1f3ae;开炮 &#x1f3ae;子弹脚本 &#x1f3ae;渔网脚本 &#x1f3ae;鱼属性信息的脚本 &#x1f6…
阅读更多...
怎样获得CNVD原创漏洞证书

怎样获得CNVD原创漏洞证书

1. 前言 因为工作变动&#xff0c;我最近把这一年多的工作挖漏洞的一些工作成果提交到了CNVD漏洞平台&#xff08;https://www.cnvd.org.cn/&#xff09;&#xff0c;获得了多张CNVD原创漏洞证书。本篇博客讲下怎么获得CNVD原创漏洞证书&#xff0c;以供大家参考。 2. CNVD原创…
阅读更多...
Canvas笔记03：Canvas元素功能、属性、获取、原理等一文讲透

Canvas笔记03：Canvas元素功能、属性、获取、原理等一文讲透

hello&#xff0c;我是贝格前端工场&#xff0c;最近在学习canvas&#xff0c;分享一些canvas的一些知识点笔记&#xff0c;本期分享canvas元素的知识&#xff0c;欢迎老铁们一同学习&#xff0c;欢迎关注&#xff0c;如有前端项目可以私信贝格。 Canvas元素是HTML5中的一个重…
阅读更多...
基于Intel x86的轨道交通/印度地铁自动售检票（AFC）系统

基于Intel x86的轨道交通/印度地铁自动售检票（AFC）系统

印度孟买地铁3号线 目前&#xff0c;印度孟买3号线正在全面建设中&#xff0c;这条全长33.5公里的线路将是孟买第一条地下地铁线路&#xff0c;设有27个地下车站和1个地面车站&#xff0c;此条线路的成功通车将连接其他地铁线路、单轨铁路、郊区铁路、城际铁路和孟买机场等&am…
阅读更多...
解决prettier 报错 Delete `␍`

解决prettier 报错 Delete `␍`

根目录&#xff08;么有的话&#xff09;新建 .prettierrc.js配置文件 module.exports {tabWidth: 2,semi: true,printWith: 80,singleQuote: true,quoteProps: consistent,htmlWhitespaceSensitivity: strict,vueIndentScriptAndStyle: true,// 主要是最后一行endOfLine:aut…
阅读更多...
Ubuntu环境使用docker构建并运行SpringBoot镜像

Ubuntu环境使用docker构建并运行SpringBoot镜像

今天Ubuntu环境使用docker构建并运行SpringBoot镜像&#xff0c;看文章之前建议先查看安装流程: Linux环境之Ubuntu安装Docker流程 一、镜像打包过程及执行 1、创建一个测试目录 mkdir javaDemo 2、springBoot的包复制到此目录下 cp demo1-0.0.1-SNAPSHOT.jar /data/app/…
阅读更多...
计算机网络实验 基于ENSP的协议分析

计算机网络实验 基于ENSP的协议分析

实验二 基于eNSP的协议分析 一、实验目的&#xff1a; 1&#xff09;熟悉VRP的基本操作命令 2&#xff09;掌握ARP协议的基本工作原理 3&#xff09;掌握IP协议的基本工作原理 4&#xff09;掌握ICMP协议的基本工作原理 二、实验内容&#xff1a; 1、场景1&#xff1a;两台PC机…
阅读更多...
React-子传父

React-子传父

1.概念 说明&#xff1a;React中子组件向父组件传递数据通常涉及回调函数和状态提升等方法。 2.代码实现 2.1绑定事件 说明&#xff1a;父组件绑定自定义事件 <Son onGetSonMsg{getMsg}></Son> 2.2接受事件 说明&#xff1a;子组件接受父组件的自定义事件名称…
阅读更多...
前端食堂技术周刊第 114 期：Interop 2024、TS 5.4 RC、2 月登陆浏览器的新功能、JSR、AI SDK 3.0

前端食堂技术周刊第 114 期：Interop 2024、TS 5.4 RC、2 月登陆浏览器的新功能、JSR、AI SDK 3.0

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;凉拌鸡架 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来看下…
阅读更多...
机器学习模型总结

机器学习模型总结

多元线性回归&#xff08;linear regression&#xff09; 自变量&#xff1a;连续型数据&#xff0c;因变量&#xff1a;连续型数据 选自&#xff1a;周志华老师《机器学习》P53-55 思想&#xff1a;残差平方和达到最小时的关系式子即为所求&#xff0c;残差平方和&#xff1a…
阅读更多...
【学习心得】爬虫JS逆向通解思路

【学习心得】爬虫JS逆向通解思路

我希望能总结一个涵盖大部分爬虫逆向问题的固定思路&#xff0c;在这个思路框架下可以很高效的进行逆向爬虫开发。目前我仍在总结中&#xff0c;下面的通解思路尚不完善&#xff0c;还望各位读者见谅。 一、第一步&#xff1a;明确反爬手段 反爬手段可以分为几个大类 &#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023