CSS 中可继承与不可继承属性有哪些

什么是 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;并固定在目标位置。元素定位在超过某个阈值之前表现为相对定位,然后是固定定位。此特定阈值是指顶部、右侧或左侧之一,即指定顶部、右侧或左侧阈值之一以使粘性定位生效。否则它的行为与相对定位相同。

© 版权声明
THE END
喜欢就支持一下吧
点赞10赞赏 分享
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容