CSS 中哪些属性可继承,哪些不可以
2023-06-14
625 字约 3 分钟
...一、能继承的属性
- 字体系列属性:font、font-family、font-weight、font-size、font-style;
- 文本系列属性: 2.1)内联元素:color、line-height、word-spacing、letter-spacing、 text-transform; 2.2)块级元素:text-indent、text-align;
- 元素可见性:visibility
- 表格布局属性:caption-side、border-collapse、border-spacing、empty-cells、 table-layout;
- 列表布局属性:list-style
二、不能继承的属性
- display:规定元素应该生成的框的类型;
- 文本属性:vertical-align、text-decoration;
- 盒子模型的属性:width、height、margin 、border、padding;
- 背景属性:background、background-color、background-image;
- 定位属性:float、clear、position、top、right、bottom、left、min-width、 min-height、max-width、max-height、overflow、clip;
如果您觉得这篇文章有帮助,请点个赞吧~
相关文章
更多文章 →css2025-03-04
CSS 实现文本省略显示【单行,2行,多行】
在 中,长文本内容可能会超出其容器的范围。为了保持良好的用户体验,我们通常会将超出的文本部分以省略号显示。本文将详细介绍如何在CSS中限制文本显示一行、两行或多行,超过部分显示省略号。 1\. 前言 限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS,可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。 2\. 单行文本省略 要实现单行文本省略,主要使用以下CSS属性: : 禁止文本换行。 :...
学习面试
css2025-03-04
css中,有哪些方式可以隐藏页面元素?区别?
一、前言 在平常的样式排版中,我们经常遇到将某个模块隐藏的场景 通过 隐藏元素的方法有很多种,它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过 实现隐藏元素方法有如下: display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip path dis...
学习面试
css2025-03-04
css实现正方形的几种方案及优缺点
前言 在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景,自适应正方形布局是必须要掌握的;接下来采黎带大家揭开css自适应正方形神秘的面纱 正方形 这很简单,设置盒子宽高都为200px就可以了 自适应正方形 青铜 提起自适应,想必都会想到 rem 、 vw 等相对单位,我们分别用这些单位来实现一下。 rem 屏幕宽度大于1200px时,字体为16px,rem的盒子的大小为 160px \ 160px; 屏幕宽度小于120...
学习面试
css2025-03-04
Flexbox 弹性布局
一、是什么 简称 box,意为”弹性布局”,是一种一维的布局模型。一次只能处理一个维度上的元素布局,一行或者一列。 采用Flex布局的元素,称为 容器( ),简称”容器“;它的所有子元素自动成为容器成员,称为 项目( ),简称”项目“。 容器中默认存在两条轴, 主轴 和 交叉轴 。项目默认沿主轴排列,通过 来决定主轴的方向。 每根轴都有起始线和终止线,用来描述flexbox元素的方向。 任何一个容器都可以指定为 布局。设为 Flex 布...
学习面试
css2025-03-04
提升CSS渲染性能
1\. 提升CSS渲染性能: 2\. 合适使用css选择器: 3\. 提升css文件加载的性能: 4\. 精简css代码: 5\. 合理使用web fonts: 6\. css动画优化:
学习面试
css2024-08-29
CSS 终于在 2024 年增加了垂直居中功能
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 进行垂直居中。 支持情况: | Chrome: 123 | Firefox: 125 | Safari: 17.4 | | | | | CSS 对齐一般会使用 或 布局,因为 在默认的流式布局中不起作用。在 2024 年,浏览器实现了 。 你不需要 flexbox 或 grid,只需要 1 个 CSS 属性就可以进行对齐。 因此内容不需要包裹在 div 中。 令人惊讶...
学习面试
评论
请登录后发表评论
去登录