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,一经查实,立即删除!

相关文章

v-on内联语句

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>v-on内联语句</title> </head> …

如何用图形化工具远程连接MySQL或MariaDB

2024年4月7日&#xff0c;周日上午 在远程连接数据库时&#xff0c;可能会遇到如下问题&#xff1a; Lost connection to MySQL server at ‘reading initial communication packet, system error: 0 解决的办法 第一步&#xff1a;修改my.cnf my.cnf一般在/etc/mysql里面&a…

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"…

职业教育的痛点

一是毕业生不能满足产业的用人需求&#xff08;职教的经济属性&#xff09;。我国产业从中低端向中高端延伸&#xff0c;生产方式从流水线模式向复合化、集成化、绿色制造、柔性定制等转变&#xff0c;复合型的岗位增多。数字化转型要求每个岗位都需要掌握必要的“数字思维、数…

中国电子学会(CEIT)2021年12月真题C语言软件编程等级考试四级(含详细解析答案)

中国电子学会(CEIT)考评中心历届真题(含解析答案) C语言软件编程等级考试四级 2021年12月 编程题五道 总分:100分一、移动路线(25分) 桌子上有一个m行n列的方格矩阵,将每个方格用坐标表示,行坐标从下到上依次递增,列坐标从左至右依次递增,左下角方格的坐标为…

Go语言如何处理整数溢出

如果不了解在Go语言中如何处理整数溢出问题,可能会导致非常严重的错误。下面我们来讨论这个主题。在讨论之前,我们需要记住一些与整数有关的概念。 1. 概念 Go总共提供了10种整数类型。有4种有符号整数类型和4种无符号整数类型,具体如下表所示。 有符号整数无符号整数int8 …

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

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

4.6

数求和阶乘和质数 #include <iostream> using namespace std; int mproduct(int a) { if(a>1) { return a*mproduct((a-1)); } else { return 1; } } class number { int a; public: number():a(5){}; number(int a):a(a){…

HTTPS中的TLS和TCP能同时握手吗

一般情况下&#xff0c;不管 TLS 握手次数如何&#xff0c;都得先经过 TCP 三次握手后才能进行 因为 HTTPS 都是基于 TCP 传输协议实现的&#xff0c;得先建立完可靠的 TCP 连接才能做 TLS 握手的事情。 「HTTPS 中的 TLS 握手过程可以同时进行三次握手」对不对呢&#xff1f…

敏感信息泄露漏洞

法律声明 参与培训需要遵守国家法律法规&#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 单地…

(delphi11最新学习资料) Object Pascal 学习笔记---第8章第7节(可视化窗体继承)

8.7 可视化窗体继承 ​ 继承不仅用于库类或你编写的类&#xff0c;而且在整个基于 Object Pascal 的开发环境中相当普遍。正如我们所看到的&#xff0c;当你在集成开发环境中创建一个窗体时&#xff0c;这个窗体就是一个继承自 TForm 的类的实例。因此&#xff0c;任何可视化应…

【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…

蓝桥杯嵌入式之模块驱动

一、LED驱动 1.头文件 #ifndef __LED_H__ #define __LED_H__ #include "main.h" void led_disp(u8 uled); void Led_dispos(u8 pos); void LED_Disp(u8 dsLED); void TurnOn_LED(uint8_t _led); void TurnOff_LED(uint8_t _led); void Toogle_LED(uint8_t _…

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,…