什么是 CSS 中的可继承和不可继承属性
可继承：
字体系列 font-font-font-size
文本行颜色 text-align line-
可见系列像
由于属性太多，这里只列出常见的可继承属性
属性值及其作用
物业价值
功能
没有
元素不显示并从文档流中移除。
阻止
块类型。默认宽度为父元素的宽度，可以设置宽高，换行显示。
内联元素类型。默认宽度为内容宽度，不能设置宽度和高度，显示在同一行。
-阻止
默认宽度为内容宽度，可以设置宽度和高度，并在同一行显示。
列表项
像块类型元素一样显示并添加样式列表标签。
表格
此元素显示为块级表格。
指定属性的值应该从父元素继承。
block和-block的区别
block：会单独成一行，可以设置宽度、、属性；
：元素不占一行，设置宽度和属性无效。但是你可以在水平方向设置and属性，但不能在垂直方向；
-block：将对象设置为对象，但对象的内容渲染为块对象，后续的内联对象会排在同一行。
隐藏元素的方法有哪些
: none: 渲染树不会渲染对象
: : 元素仍然占据页面空间，但不响应绑定的监听事件。
: 0: 元素仍然占据页面空间，并且能够响应元素绑定的监听事件。
: : 通过使用绝对定位将元素从可见区域中移除来隐藏元素。
z-index：负值：使其他元素覆盖该元素，从而实现隐藏。
clip/clip-path：元素在页面上仍然占据一个位置，但不响应绑定的监听事件。
: scale(0,0): 将元素缩放到0，该元素在页面上仍然占据一个位置，但不会响应绑定的监听事件。
链接和@的区别
都是外部引用 CSS 的方式，区别如下：
link是一个XHTML标签，除了加载CSS，还可以定义RSS等其他事务； @ 只能加载 CSS。
当链接引用CSS时，会在页面加载的同时加载； @要求页面完全加载后才加载。
link 是一个 XHTML 标签，没有兼容性问题； @在CSS2.1中提出，低版本浏览器不支持。
link 支持使用控件 DOM 改变样式； @ 没有。
和的区别
是一个多余的属性，它的实现需要触发一个事件（如鼠标上移、焦点、点击等）来执行动画。类似于flash中的补间动画，设置一个开始关键帧和一个结束关键帧。
是一个动画属性。它的实现不需要触发事件。设置好时间后，可以自行执行，循环播放一个动画。它也类似于flash tween动画，但它可以设置多个关键帧（用@定义）来完成动画。
:none 和 :的区别
这两个属性都使元素隐藏和不可见。两者的区别如下：
1. 在渲染树中
2.是不是继承属性
3. 回流和重绘
伪元素和伪类有什么区别？
-：在内容元素前后插入额外的元素或样式，但这些元素实际上并没有在文档中生成。它们仅在外部可见，但在文档的源代码中找不到，因此称为“伪”元素。例如：
p::{: ” 1:”;}p::after{: “Hot!”;}p::first-line{: red;}p::first-{font-size: 30px ; }复制代码
伪类：为特定的选择器添加特殊效果。它将类别添加到现有元素，而不创建新元素。例如：
a:hover{color: #}p:first-child {color: red}复制代码
了解盒子模型
CSS3中有两种盒子模型：标准盒子模型和IE盒子模型
盒子模型由 、 、 四个部分组成。
标准盒子模型和IE盒子模型的区别在于，在设置width和时，对应的范围不同：
标准盒子模型的宽度和属性的范围只包括，
IE框模型的宽度和属性范围包括 、 、 。
元素的盒子模型可以通过修改元素的box-属性来改变：
box-:-box 表示标准盒子模型（默认）
box-:-box表示IE盒子模型（奇怪的盒子模型）
为什么有时用改变位置而不是定位？
不会触发浏览器重排和重绘，只会触发复合，使用GPU效率很高
绝对定位会引起重排，会触发重绘，使用CPU效率低
是什么导致 li 和 li 之间出现不可见的空白？如何解决？
浏览器会将内联元素之间的空白字符（空格、换行符、制表符等）呈现为单个空格。为了美观，通常一个放在一行上，导致换行后换行，变成一个空格，占据一个字符的宽度。
解决方案：
CSS3有哪些新特性 添加了各种CSS选择器 – ext – Other GIFs PNG无损，体积小，支持透明，SVG放大不失真，适合logo无损、未压缩、大文件. WebP 谷歌新的图片格式比 png 小，兼容性差。常见图片格式及使用场景了解CSS
CSS（ image），将一个页面中涉及的所有图片包含在一个大图中，然后使用CSS的-image,-,-属性组合进行背景定位。
优点：
缺点：
什么是物理像素、逻辑像素和像素密度，为什么在移动开发中需要使用@3x、@2x 图像？
以XS为例，在编写CSS代码时，对于单位px，它的宽度是414px & 896px，也就是说，当一个div元素被赋予414px的宽度时，这个div会填满它的宽度手机；
p>
而如果有尺子来实际测量这款手机的物理像素，其实是1242*2688物理像素；经过计算，1242/414=3，也就是说一侧，一个逻辑像素=3，据说这块屏幕的像素密度是3，也就是常说的3倍屏幕。
对于图片来说，为了保证不失真，1个图片像素必须至少对应1个物理像素。如果原图是500*300像素，那么1500*900像素的图片应该放在3x屏幕上，保证1个物理像素至少对应1个图片像素，以免失真。
当然，也可以只为所有屏幕提供最高分辨率的图像。虽然低密度屏幕不会使用那么多的图像像素，并且由于下载过多的像素而导致带宽浪费和下载延迟，但保证结果在所有屏幕上都不会失真。
您还可以使用 CSS 媒体查询来确定不同的像素密度并选择不同的图像：
我的图像 { : (low.png); }@ and(min–pixel-ratio: 1.5) {
#my-image{ : (high.png); }
}复制代码
有哪些方法可以优化 CSS 并提高性能？
加载性能：
选择器性能：
渲染性能：
可维护性：
什么是 CSS 预处理器/后处理器？为什么要使用它们？
预处理器，如：less、sass，用于预编译sass或less，增加了css代码的复用性。层次结构、循环、变量、循环和其他功能更容易为 UI 组件开发和维护。
后处理器，例如： ，通常可以根据最终样式表中的 CSS 规范来处理 CSS。最常见的做法是添加浏览器私有前缀，解决跨浏览器兼容性问题。
使用理由：
结构清晰，易于扩展，可以轻松屏蔽浏览器私有语法的差异，完美兼容CSS代码，可应用于老项目，轻松实现多重继承——什么时候会显示出块的差距？
p>
主要有三种情况：
单行、多行文字溢出隐藏
单行文字溢出
: ; // 溢出隐藏文本-: ; // 溢出用省略号显示空白： ; // 指定段落中的文本不换行复制代码
多行文字溢出
: ; // 溢出隐藏文本-: ; // 溢出用省略号显示：–box; // 显示为 模型。
–box-: ; // 设置伸缩箱子元素的排列方式：垂直从上到下
–线夹：3； // 显示的行数
了解媒体查询？
复制代码
简单来说，@media 可以为不同的屏幕尺寸设置不同的样式，尤其是需要设计为响应式的页面。
了解 CSS 工程
CSS 旨在解决以下问题：
宏观设计：如何组织CSS代码，如何拆分，如何设计模块结构？
编码优化：如何编写更好的 CSS？
构建：我应该如何处理我的 CSS 以便优化打包？
可维护性：易于更改，易于接管
以下三个方向是流行且普遍的 CSS 工程实践：
预处理器：Less、Sass等；
后处理器：
等等
如何使用实现CSS处理：
css-：导入CSS模块并编译CSS代码；
style-：创建样式标签，将CSS内容写入标签中。
实际使用中，css-的执行顺序必须排在style-前面。因为只有在编译过程完成后才能插入css代码；如果提前插入未编译的代码，就无法理解这玩意儿，也就没有信息和错误了。
如何判断一个元素是否到达了可见区域
以图片展示为例：
z-index 属性什么时候失效
通常z-index的使用是当有两个重叠标签时，z-index值越高，层越高。 z-index 元素的属性需要是 , 或者是固定的。
z-index 属性在以下情况下无效：
CSS3 CSS 布局单元中常见的属性有哪些
像素px基本布局单位
%%，相对于父元素的百分比，从而达到响应式的效果。
em 是相对于父元素的文本的倍数。如果父元素没有设置字体大小，则相对于浏览器的默认字体大小（默认 16px）。
rem 是根元素字体大小的倍数。功能：使用rem实现简单的响应式布局。可以使用html元素中的字体大小与屏幕的比例来设置font-size的值，使元素随着屏幕分辨率的变化而变化。
vw：相对于窗口的宽度，窗口的宽度为100vw；
vh：相对于窗口的高度，窗口的高度为100vh；
vmin：vw和vh中较小的一个；
vmax：vw和vh中较大的一个；
vw和百分比的区别是：vw是相对于视口，%是相对于父元素
px、em、rem的区别及使用场景
三者的区别：
使用场景：
如何根据设计稿适配移动端？
移动适配主要有两个维度：
适应不同的像素密度，对不同的像素密度使用CSS媒体查询，选择不同精度的图片，保证图片不会失真；
适应不同的屏幕尺寸。由于不同的屏幕具有不同的逻辑像素大小，如果直接使用 px 单位，开发的页面会在某部手机上准确显示，但在另一部手机上显示不出来。会失真。为了适应不同屏幕的大小，设计稿的内容要按比例还原。
为了使页面大小自适应，可以使用rem、em、vw、vh等相对单位
响应式设计的概念和基本原则
响应式网站是指兼容多种终端的网站。
关于原理：基本原理是通过媒体查询（@media）查询来检测不同的设备屏幕尺寸。
关于兼容性：页面头部必须有meta语句。
复制代码
为什么我需要清除浮动？如何清除浮动
浮动的定义：在非IE浏览器中，当容器没有高度且子元素浮动时，容器的高度不能被内容拉伸。此时内容会溢出容器，影响布局。这种现象称为浮动（溢出）。
浮动的工作原理：
浮动元素可以左右移动，直到遇到另一个浮动元素或在其外边缘的包含框。浮动框不属于文档流中的正常流。当元素浮动时，不会影响块级元素的布局，只会影响内联元素的布局。这时，文档流中的正常流会显示浮动框没有相同的布局模式。当包含框的高度小于浮动框的高度时，就会发生“高度塌陷”。
浮动元素引起的问题？
如何使用 clear 属性来清除浮动？
使用clear属性清除浮动，语法如下：
clear: none|left|right|both复制代码
如果看字面意思，clear:left表示“清除左浮动”，clear:right表示“清除右浮动”，其实这样解释是有问题的，因为float还在，没有被清除.
clear属性官方解释：“元素框的边缘不能与上一个浮动元素相邻”。在元素上设置clear属性是为了避免浮动元素对元素的影响，而不是清除浮动。
还需要注意的是，clear属性意味着元素框的边缘不能与前一个浮动元素相邻。注意这里的“”三个字，即clear属性对“”浮动元素是无所谓的。的。考虑到float属性不是left就是right，不可能同时存在，而且由于clear属性忽略了“后面”的浮动元素，所以当clear:left有效时，clear:right一定是无效的，而且此时 clear:left 相当于设置 clear:both;同样，如果 clear:right 有效，则 clear:right 等效于设置 clear:both。可见clear:left和clear:right这两个声明没有任何使用价值，至少在CSS世界里，直接用clear:both就好了。
一般使用伪元素来清除浮动：
.clear::after{
: ”;
：阻塞；
明确：两者；
}复制代码
clear 属性只对块级元素有效，而 ::after 等伪元素默认是 级的，这就是为什么在使用伪元素清除浮动效果时需要设置属性值的原因。
了解BFC，如何创建BFC
我们先来看两个相关的概念：
块格式化上下文（Block，BFC）是网页视觉CSS渲染的一部分，是在布局过程中生成块级框的区域，也是浮动元素与其他元素交互的区域。
通俗的讲：BFC是一个独立的布局环境，可以理解为一个容器，其中物品按照一定的规则放置，不会影响其他环境中的物品。如果一个元素符合触发 BFC 的条件，那么 BFC 中的元素布局不受外部影响。
创建BFC的条件：
BFC 的特点：
BFC 的作用：
.左{
宽度：100px；
：200像素；
：红色；
浮动：左；
}
.对{
：300像素；
：蓝色；
: ;
}复制代码
左设置浮动：左，右设置：。这样BFC在右侧触发，BFC的区域不会和浮动元素重叠，所以两侧不会重叠，实现了自适应的两列布局。
什么是重叠问题？如何解决？
问题描述：
两个块级元素的上下边距可以合并（折叠）为一个边距，其大小取较大的边距值。这种行为是边距折叠。请注意，超出文档流的浮动元素和绝对定位元素的边距不会折叠。重叠只会垂直显示。
计算原理：
折叠合并后边距的计算原则如下：
解决方案：
对于折叠的情况，主要有两种：兄弟之间的重叠和父子之间的重叠
重叠的父子元素之间重叠元素的堆叠顺序
堆叠顺序，英文称为order，是指元素在堆叠时有特定的垂直显示顺序。以下是盒子模型的堆叠规则：
对于上图，从上到下分别是：
背景和边框：建立当前堆叠上下文元素的背景和边框。负 z-index：当前堆叠上下文中具有负 z-index 属性的元素。块级框：文档流中的非内联级、非定位的后代元素。浮动框：非定位浮动元素。内联框：文档流中的内联级非定位后代元素。 z-index:0：堆栈级别为 0 的定位元素。正 z-index：具有正 z-index 属性值的定位元素。
:::tip Tip 使用 z-index:auto 定位元素时，生成的盒子在当前堆叠上下文中的层级为 0，除非是根元素，否则不会创建新的堆叠上下文。 :::
有什么属性，有什么区别
具有以下属性值：
物业价值
概览
生成一个绝对定位的元素，相对于定位以外的父元素定位。元素的位置由left、top、right、属性指定。
生成一个相对定位的元素，相对于其原始位置定位。元素的位置由left、top、right、属性指定。
固定
生成一个绝对定位的元素，指定元素相对于屏幕视口的位置()。屏幕滚动时元素的位置不会改变，比如按钮回到顶部，一般用于这个设置
默认值，无定位，元素出现在正常的文档流中，忽略top、left、right或z-index声明，块级元素从上到下垂直排列，行级元素从左到右排列
p>
指定继承自父元素的属性值
前三个位置如下：
：元素的定位始终是相对于元素本身的，与其他元素无关，也不影响其他元素。
fixed：元素的定位是相对于（或）边界的，与其他元素无关。但它具有破坏性，会导致其他元素的位置发生变化。
：元素的定位比前两个要复杂的多。如果 top 和 left 设置为 ，浏览器将使用什么来确定其垂直和水平偏移量？答案是浏览器会递归搜索元素的所有父元素。如果找到带有://fixed 的元素，则根据该元素定位，如果没有找到，则以浏览器边界定位。如下两图所示：
之间的关系
，float，先判断属性是否为none。如果为none，则和float属性的值不会影响元素的最终性能。然后判断是is还是fixed，如果是，float属性无效，应该设置为table或者block。具体转换取决于初始转换值。如果of的值不是或固定的，则判断float属性的值是否为none，如果不是，则按上述规则转换of的值。请注意，如果 is 的值和 float 属性的值存在，则相对于浮动的最终位置定位。如果float的值为none，则判断该元素是否为根元素。如果是根元素，属性会按照上面的规则进行转换。否则，指定的属性值将保持不变。
一般来说，可以看成是一种类优先级的机制。 : 和 :fixed 具有最高优先级。存在时，float不起作用，需要调整元素的值；其次，当元素的float属性的值不是none或者是根元素时，调整后的值；最后，非根元素、非浮动元素、非绝对定位元素，属性值与设置值相同。
与固定的异同
常见：
区别：
对定位的理解
字面意思是粘贴，所以你可以称之为粘性定位。句法： ： ;基于用户滚动位置的位置。
Stick 定位元素依赖于用户的滚动，在 : 和 :fixed 定位之间切换。它的行为类似于:;当页面滚动到目标区域之外时，它的行为类似于 :fixed;并固定在目标位置。元素定位在超过某个阈值之前表现为相对定位，然后是固定定位。此特定阈值是指顶部、右侧或左侧之一，即指定顶部、右侧或左侧阈值之一以使粘性定位生效。否则它的行为与相对定位相同。
暂无评论内容