深入解析CSS第一章继承——读书笔记

最新推荐文章于 2026-06-17 09:54:33 发布
原创 最新推荐文章于 2026-06-17 09:54:33 发布 · 147 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #html
本文探讨了CSS中元素如何继承祖先的属性，如颜色、字体等，并介绍了可被继承的列表和边框样式。讲解了如何在合适场景下利用继承保持统一风格，以及如何通过开发者工具查看样式传递过程。
  • 如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值
    在这里插入图片描述
  • 可以被继承的属性
    1. 跟文本相关的属性
      color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。
    2. 列表属性
      list-style、list-style-type、list-style-position以及list-style-image
    3. 表格的边框属性
      border-collapse和border-spacing
  • 在合适的场景使用继承
    在这里插入图片描述
    让后代元素继承相同的字体
  • 继承属性会顺序传递给后代元素，直到它被层叠值覆盖。
  • 使用开发者工具可以看到一个元素应用了哪些样式
深入解析CSS读书笔记-第一章-层叠、优先级和继承
qq_42776612的博客
07-13 369
1.1层叠 层叠（cascade）决定了如何解决冲突，是css语言的基础。 声明发生冲突时，层叠会根据三种条件去解决冲突。 样式表的来源：自己定义的样式或是浏览器默认样式。 选择器的优先级：哪些选择器的优先级更高。 源码的顺序：样式在样式表声明的顺序。 下图展示了规则的用法： 术语解释： “color:black” 前面是css的一行。它被称作一个声明。该声明由一个属性（color）和一个值（black）构成。 不要将CSS属性（property）跟HTML属性（attribute）混淆。 包含在
深入解析CSS第一章特殊值——读书笔记
AnitaSun的博客
01-22 254
使用inherit关键字 可以该元素继承父元素的值 例：给网页加上一个浅灰色的页脚 这么做的好处是，如果页脚发生任何样式改变的话（比如修改第二个规则集，或者被别的样式覆盖），页脚链接的颜色就会跟着页脚其他内容一起改变。比如，当页脚文本变为更深的灰色时，其中的链接也会跟着改变。 使用initial关键字 撤销某个元素的样式 例：在大多数浏览器中，黑色是color属性的初始值 如果想删除一个元素的边框，设置border: initial即可。 如果想让一个元素恢复到默认宽度，设置widt.
深入解析CSS第一章层叠——读书笔记
AnitaSun的博客
01-22 363
盒模型和border-box 当指定一个元素的宽度或高度时，便设置了元素内容的尺寸——任何内边距（padding）、边框（border）、外边距（margin）都会基于它叠加。 给元素设置box-sizing: border-box会改变盒模型，使其获得更好的可预测性。指定宽度或高度时，会设置整个元素尺寸，包括内边距和边框 第一章 层叠、优先级和继承 1.1 层叠 概念 //包含在大括号内的一组声明被称作一个声明块 //声明块前面有一个选择器 //选择器和声明块组成了规则集 body {
《CSS设计指南》笔记--CSS工作原理
后乐的博客
04-28 6945
《CSS设计指南》总结 CSS工作原理
懒加载的实现
AnitaSun的博客
01-31 6576
一、什么是懒加载？ 懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载 二.为什么要懒加载？ 减少无用资源的加载 提升用户体验 防止加载过多图片而影响其它资源文件的加载 三.懒加载的实现原理？ 图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。根据这个原理，我们使用 HTML5 的 data-xxx 属性
TailWind 使用指南
AnitaSun的博客
08-30 2818
TailWind 使用指南
HTML-script标签异步加载
AnitaSun的博客
03-14 1352
HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本。 默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。 如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。 <script src=".
深入解析CSS第三章容器内的元素间距——读书笔记
AnitaSun的博客
01-25 995
容器内的元素间距 给侧边栏加上，两个社交按钮 设置侧边栏按钮的大小、字体、颜色 此时，没有外边距的它们直接上下堆叠在一起。现在有两个选择，分别或同时指定他们的上下外边距，两个按钮之间会发生外边距折叠 然而不管选择哪种方式，都会遇到一个问题：侧边栏的内边距需要跟按钮的外边距接触。如果加上margin-top: 1.5em，最终效果如图3-20所示。 有以下几种方法解决上述问题 ——————————————相邻的兄弟组合器 —————————————— 使用相邻兄弟组合给按钮之间加上一个外边距
emmmmm 一个简单的HTML切换图片Demo
AnitaSun的博客
11-13 764
前提 最近正在复习 html，作为一个前端程序员，竟然不太会写html，实在是惭愧… 刚才做一个简单的Demo，发现了一个很有意思的错误，话不多说，让咱们来看 代码 请检查以下代码，为什么点击图片无法实现切换呢？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
深入解析CSS第三章元素高度问题——读书笔记
AnitaSun的博客
01-24 571
3.2 元素高度的问题 最好避免给元素指定明确的高度，因为子元素可以撑大父元素盒子。 普通文档流：指的是网页元素的默认布局行为。行内元素跟随文字的方向从左到右排列，当到达容器边缘时会换行。块级元素会占据完整的一行，前后都有换行。 3.2.1 控制溢出行为 当明确设置一个元素的高度时，内容可能会溢出容器。 使用overflow属性可以控制溢出内容的行为 ❑ visible（默认值）——所有内容可见，即使溢出容器边缘。 ❑ hidden——溢出容器内边距边缘的内容被裁剪，无法看见。 ❑ scroll——
如何封装 svg
AnitaSun的博客
08-02 470
封装 svg
深入解析CSS第三章元素宽度问题——读书笔记
AnitaSun的博客
01-24 408
3.1 元素宽度的问题 如何构建下面这个简单的网页呢？ 先写好HTML 写好基本样式的CSS代码 说明因为IE有一个bug，它会默认将<main>元素渲染成行内元素，而不是块级元素，所以代码中我们用声明display: block来纠正。 使用浮动布局 结果： 出现这种结果的原因是因为盒模型的模型。当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。 侧边栏的宽度等于30%宽度加上各1.5em的左右内边距，主容器的宽度只占70%。两列宽
深入解析CSS第二章无单位的数值和行高——读书笔记
AnitaSun的博客
01-23 343
2.5 无单位的数值和行高 允许无单位值的属性：line-height、z-index、font-weight 任何单位长度（px、em、rem）都可以用无单位的值的0，但是不能用于角度值，比如度，或者时间相关的值，比如秒。 line-height属性比较特殊，它的值既可以有单位也可以无单位。通常我们应该使用无单位的数值。 line-height的有单位和无单位 无单位：行高 = line-height * 文字大小 这个段落继承了行高1.2。因为段落字号是32px（2em × 16px，浏览器默认
深入解析CSS第二章视口的相对单位——读书笔记
AnitaSun的博客
01-23 327
2.4 视口的相对单位 相对于浏览器视口定义长度的视口的相对单位 视口——浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。 vh：视口高度的1/100。 vw：视口宽度的1/100。 vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）。 vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax 50vw等于视口宽度的一半，25vh等于视口高度的25%。vmin取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏
深入解析CSS第一章简写属性——读书笔记
AnitaSun的博客
01-22 304
简写属性 font: font-style、font-weight、font-size、font-height以及font-family。 background: background-color、background-image、background-size、background-repeat、background-position、background-origin、background-chip以及background-attachment。 border: border-width、border
深入解析CSS第三章外边距折叠——读书笔记
AnitaSun的博客
01-25 278
3.4 外边距折叠 当顶部和/或底部的外边距相邻时，就会重叠，产生单个外边距。这种现象被称作折叠 3.4.1 文字折叠 段落（<p>）默认有1em的上外边距和1em的下外边距。由于会折叠，只产生1em的间隔 标题的下方有19.92px的外边距（24px字号× 0.83em外边距），段落顶部有16px的外边距（16px字号×1em外边距）。它们中的较大者是19.92px，也就是最终渲染的两个元素之间的间距。 3.4.2 多个外边距折叠 包裹在div里的段落也会产生外边距折叠 &lt
深入解析CSS第三章负外边距——读书笔记
AnitaSun的博客
01-24 258
3.3 负外边距 负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。 如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动 如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来 如果不给一个块级元素指定宽度，它会自然地填充容器的宽度。但如果在右边加上负外边距，则会把它拉出容器。如果在左边再加上相等的负外边距，元素的两边都会扩展到容器外面 负外边距并不常用，但是在某些场景下很实用，尤其是当创建列布局的时候。不过应当避免频繁使用，不然网页的样式就会失控。 ...
CSS 悬挂空白与选区溢出
luemeon的博客
06-16 420
在（或pre-line）模式下，浏览器被要求既要保留空格，又要自动换行。原则 A：空格必须保留（因为是pre-wrap原则 B：空格后面没有宽度了，必须换行。如果把这些行尾空格硬塞在当前行，气泡盒子就会被撑大；如果把它们带到下一行开头，下一行的文本又会无故缩进（这通常不是用户想要的）。这些行尾的空白字符不消失，而是“悬挂”在行末的边界之外。它们存在于这一行，但被当作“零零兵”，不占用整行盒子的实际布局宽度（Advance Width）。
04_CSS及案例开发
最新发布
人生得意须尽欢
06-17 294
本文摘要介绍了网页布局的核心概念和CSS盒子模型的应用要点。主要内容包括：1）盒子模型的基本用法，重点讲解内边距(padding)的四种设置方式及其对布局的影响；2）外边距(margin)的概念及其在调整元素位置时的作用；3）块元素与行内元素的区别及转换方法；4）浮动和定位技术的应用场景与实际案例开发。学习目标要求掌握盒子模型居中设置、元素类型转换、浮动布局实现、定位技术等核心技能，并通过案例练习巩固这些布局技术在实际网页开发中的应用。课程强调通过div标签划分网页结构，使用边距属性精细控制元素位置，为后续
Javascript技术:CSS 中rem、vh 和 px各有其最佳适用场景-由Deepseek产生
格码老师教编程
06-15 239
单位相对基准最佳场景px物理/设备像素边框、阴影、精细细节，不随任何缩放变化rem根元素font-size文本、内外边距、组件尺寸，便于全局缩放和可访问性vh视口高度的 1%全屏容器、占屏比例布局，依赖视口高度的模块视口的宽度是整个内容区域（包含滚动条占位）的宽度，拉动滚动条不影响视口宽度，只改变看到的内容位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值