007 CSS的继承和层叠 元素特性

文章目录

  • CSS属性的继承
  • CSS属性的层叠
    • 选择器的权重
  • HTML元素的类型
  • 编写HTML注意事项
  • 元素隐藏方法
  • CSS属性-overflow
  • CSS样式不生效可能原因

CSS属性的继承

如果一个属性具备继承性,那么在该元素上设置后,它的后代元素都可以继承这个属性
如果后代元素自己有设置该属性,优先使用后代元素自己的属性
继承过来的是计算值,不是设置值

<html><head><style>.box {/* 相对于自身字体(父元素的字体)*//*浏览器默认设置为16px*/font-size:2em; /*32px*/}p {/*32px*/}</style></head><body><div class="box"><p>p元素</p></div></body>
</html>

inherit属性值可用来强制继承

CSS属性的层叠

对于一个元素来说,相同一个属性可以通过不同的选择器给它进行多次设置
属性会被一层层覆盖上去
最终只有一个会生效

判断哪个会生效
判断一:选择器的权重,权重大的生效,根据权重可以判断出优先级
判断二:先后顺序,权重相同时,后面设置的生效

选择器的权重

为了方便比较CSS属性的优先级,可以给CSS属性所处的环境定义一个权值
!important:10000
内联样式:1000
id选择器:100
类选择器、属性选择器、伪类:10
元素选择器、伪元素:1
通配符:0
选择器的权重

HTML元素的类型

块级元素(block-level elements):独占父元素的一行
行内级元素(inline-level elements):多个行内级元素可以在父元素的同一行中显示

元素没有本质区别,比如div是块级元素是因为浏览器默认设置了display属性

div {display: block;
}

CSS的display属性,能修改元素的显示类型,有4个常用值
block:让元素显示为块级元素,独占一行,可以设置宽度和高度
inline:让元素显示为行内级元素,和其他行内级元素在同一行显示,不可以设置宽度和高度,宽高是由内容决定(包裹内容)。注:行内替换元素可以设置宽高
inline-block:让元素同时具备行内级、块级元素的特征,可以和其他元素在同一行显示,也可以设置宽高
none:隐藏元素

编写HTML注意事项

块级元素、inline-block元素一般情况下,可以包含其他任何元素
特殊情况,p元素不能包含其他块级元素

行内级元素
一般情况下,只能包含行内级元素

元素隐藏方法

方法一:display设置为none
元素不显示出来,并且也不占据位置,不占据任何空间(和不存在一样)

方法二:visibility设置为hidden
设置为hidden,虽然元素不可见,但是会占据元素应该占据的空间
默认为visible,元素是可见的

方法三:rgba设置颜色,将a的值设置为0
rgba的a设置的是alpha值,可以设置透明度,不影响子元素

color : rgba(0,0,0,0);
background-color:transparent;/*rgba(0,0,0,0)*/

方法四:opacity设置透明度,设置为0
设置整个元素的透明度,会影响所有的子元素

(alpha:只是设置当前color/bgc其中的颜色透明度为某一个值,不会影响子元素
opacity:设置透明度,并且会携带所有的子元素都有一定的透明度
)

CSS属性-overflow

overflow用于控制内容溢出时的行为
visible:溢出的内容照样可见
hidden:溢出的内容直接裁剪
scroll:溢出的内容被裁剪,但可以通过滚动机制查看
会一直显示滚动条区域,滚动条区域占用的空间属于width、height
auto:自动根据内容是否溢出来决定是否提供滚动机制

CSS样式不生效可能原因

选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对
元素不支持此CSS属性,比如span默认不支持width和height
浏览器不支持此CSS属性,比如旧版本的浏览器不支持一些css module3的某些属性
被同类型的CSS属性覆盖,比如font覆盖font-size

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

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

相关文章

2023年度总结:允许迷茫,破除迷茫;专注自身,把握当下

0、前言 &#x1f4dc;为什么24年已经过了几个月&#xff0c;才提笔写这年度总结呢&#xff1f;毫不羞愧直问我的内心&#xff0c;其实就是懒罢了。直到前几天朋友看到了我去年写的总结&#xff0c;我自己点进那篇总结&#xff0c;完完整整的看了一遍&#xff0c;又翻看我23年…

C语言 | Leetcode C语言题解之第12题整数转罗马数字

题目&#xff1a; 题解&#xff1a; const char* thousands[] {"", "M", "MM", "MMM"}; const char* hundreds[] {"", "C", "CC", "CCC", "CD", "D", "DC"…

Vue2(完结):replace属性、编程式路由导航、缓存路由组件、两个新钩子、路由守卫、history与hash

一、router-link的replace属性 1、作用&#xff1a;控制路由跳转时操作浏览器历史记录的模式 2、浏览器的历史记录有两种写入方式&#xff1a;分别为push和replace&#xff0c;push是追加历史记录&#xff0c;replace是替换当前记录。路由跳转时候默认为push 3、如何开启repla…

敏感信息泄露漏洞

法律声明 参与培训需要遵守国家法律法规&#xff0c;相关知识只做技术研究&#xff0c;请勿用于违法用途&#xff0c;造成任何后果自负与本人无关。 中华人民共和国网络安全法&#xff08;2017年6月1日起施行&#xff09; 第二十二条 任何个人和组织不得从事入侵他人网络、干扰…

C——找单身狗2

题目内容&#xff1a; 在一个数组中&#xff0c;室友两个数字出现了一次&#xff0c;其他所有数字都出现了两次。找出只出现一次的数字。 如&#xff1a;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff…

【云计算】云数据中心网络(一):VPC

云数据中心网络&#xff08;一&#xff09;&#xff1a;VPC 1.什么是 VPC2.VPC 的组成2.1 虚拟交换机2.2 虚拟路由器 3.VPC 网络规划3.1 VPC 数量规划3.2 交换机数量规划3.3 地址空间规划3.4 不同规模企业地址空间规划实践 4.VPC 网络高可靠设计4.1 单地域单可用区部署4.2 单地…

【Vue3】自定义Modal的fixed无效

现有一个模态框&#xff0c;目前一切正常&#xff0c;Modal可以在视口正确位置展示 <template><div class"father"><h3>模态框的父组件</h3><button click"showModal !showModal">显示/隐藏modal</button><div …

NzN的C++之路--this指针

在已经入门了类和对象之后&#xff0c;今天我们来到了类和对象的part2部分--this指针。先三连后看是好习惯&#xff01;&#xff01;&#xff01; 目录 一、this指针的引入 二、this指针的特性 三、this指针必会 四、C语言和C实现Stack的对比 1. C语言实现 2. C实现 一、…

如何确认RID池是否耗尽,以及手动增加RID池大小

确认RID池是否耗尽&#xff1a; 事件查看器&#xff1a; 在RID主控域控制器上打开事件查看器&#xff0c;导航至“Windows日志 > 应用程序和服务日志 > Microsoft > Windows > Directory Service > Operations”。搜索事件ID 16656和16657。事件ID 16656表明RID…

Jupyterlab+内网云穿透傻瓜式教程

文章目录 Jupyterlab内网云穿透傻瓜式教程1、Miniforge安装2、Jupyter Lab安装3、Python语言服务器安装4、PowerShell 7安装5、更改jupyter lab配置6、内网穿透7、高级体验 Jupyterlab内网云穿透傻瓜式教程 1、Miniforge安装 如下图&#xff0c;以Windows安装为例&#xff0c…

DFS:floodfill算法解决矩阵联通块问题

floodfill&#xff0c;翻译为洪水灌溉&#xff0c;而floodfill算法本质上是为了解决在矩阵中性质相同的联通块问题。 一、图像渲染 . - 力扣&#xff08;LeetCode&#xff09; class Solution { public:int dx[4]{0,0,1,-1};int dy[4]{1,-1,0,0};int prev;//记住初始值int m,…

LangChain-10(2) 加餐 编写Agent获取本地Docker运行情况 无技术含量只是思路

可以先查看 上一节内容&#xff0c;会对本节有更好的理解。 安装依赖 pip install langchainhub编写代码 核心代码 tool def get_docker_info(docker_name: str) -> str:"""Get information about a docker pod container info."""result…

色彩在设计中的重要性

title: 色彩在设计中的重要性 date: 2024/4/6 19:08:21 updated: 2024/4/6 19:08:21 tags: 色彩心理品牌识别用户体验文化差异创意设计视觉传达易读性 色彩是设计中不可或缺的元素&#xff0c;它不仅可以影响人的情绪和心理状态&#xff0c;还可以在品牌识别、用户体验、文化差…

【C++练级之路】【Lv.19】【STL】unordered_set类和unordered_map类的模拟实现

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、哈希表&#xff08;改造版&#xff09;1.1 结点1.2 迭代器1.2.1 operator 1.3 本体1.3.1 成员变量和…

掌握 TypeScript 核心:从基本类型到面向对象编程,理论详解与Vue3实践运用

TypeScript 是一种开源的编程语言&#xff0c;由微软公司开发&#xff0c;于2012年10月首次公开发布。 TypeScript 是 JavaScript 的超集&#xff0c;这意味着任何合法的 JavaScript 代码都是有效的 TypeScript 代码。它在 JavaScript 的基础上添加了静态类型系统、类、接口、模…

【Linux】有关时间的命令(date、timedatectl)

专栏文章索引&#xff1a;Linux 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、data命令 1.介绍 2.常用参数 3.常用选项 二、timedatectl命令 1.介绍 2.常用子命令 一、data命令 1.介绍 date命令用于显示或设置系统的时间与日期&#xff0c;语法格式为&a…

Nacos 入门篇---客户端如何发起服务注册?怎么发送服务心跳的(二)

一、引言 上个章节我们简单学习和使用了下Nacos服务自动注册&#xff0c;本文就来分析下Nacos客户端自动注册服务是怎么实现的&#xff5e; 二、目录 目录 一、引言 三、Nacos 源码编译 1.1 拉取代码 1.2 运行起来 四、客户端使用版本选择 五、Nacos客户端项目启动为什么会…

java数据结构与算法刷题-----LeetCode415. 字符串相加

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 模拟小学加法运算 模拟小学加法运算 解题思路&#xff1a;时间复…

深入浅出 -- 系统架构之分布式集群的分类

一、单点故障问题 集群&#xff0c;相信诸位对这个概念并不陌生&#xff0c;集群已成为现时代中&#xff0c;保证服务高可用不可或缺的一种手段。 回想起初集中式部署的单体应用&#xff0c;因为只有一个节点&#xff0c;因此当该节点出现任意类型的故障&#xff08;网络、硬件…

MySQL复制拓扑4

文章目录 主要内容一.启用GUID并配置循环复制1.其中&#xff0c;UUID用来唯一标识每一个服务器&#xff0c;事务的编号记录了在该服务器上执行的事务的顺序。使用SELECT server_uuid\G命令可以查看服务器的UUID&#xff0c;sever1的UUID值显示如下&#xff1a;代码如下&#xf…