行高 body背景

已于 2023-03-22 19:10:14 修改
阅读量41 收藏
点赞数 1
文章标签： css html 前端
于 2023-03-22 19:08:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyscq/article/details/129699699
版权
文章探讨了CSS中line-height的取值，包括px、无单位数字和em单位的计算。同时，详述了body背景与canvas的关系，以及HTML和body背景的覆盖规则。此外，还讨论了画布背景图的百分比计算方式和图片在父元素中的垂直对齐及消除底部白边的技巧。
摘要由CSDN通过智能技术生成

行高的取值

line-height

  • px,像素值
  • 无单位的数字 先继承，在计算
  • em单位（ 2em当前字体大小2倍）、*先计算像素值，在继承
  • 百分比

body背景

画布 canvas
特点：

  • 最小宽度是视口宽度
  • 最小高度是视口高度
    HTML的背景
    覆盖画布
    BODY元素的背景
    如果HTML元素有背景，body元素正常（背景覆盖边框盒）
    如果HTML元素没有背景，body元素覆盖画布

以下基于不给html设置背景，只给body设置背景
关于画布背景图

  • 背景图的宽度百分比相对于视口
  • 背景图的高度百分比相对于html
  • 背景图横向的位置百分比，预设值，都是相对于视口
  • 背景图纵向的位置百分比，预设值，都是相对于html

行盒的垂直对齐

多个行盒在垂直方向上的对齐

通过vertical-align进行调整

图片底部白边

图片的父元素是一个块盒，图片和边框底部之间有白边

  1. 设置父元素字体大小为0，但副作用是div里面字体会消失
  2. 将图片设置为块盒 display:block;
桃良之伊123
关注
css简单背景实例
12-03
例如，使用`background-color`属性可以设定元素的背景色，如`body { background-color: #f0f0f0; }`将整个页面背景设置为浅灰色。 2. **背景图片**：在本实例中，"风景.jpg"可能被用作背景图片。我们可以使用`...
jquery实现控制表格行高亮实例
01-19
[css] 代码如下:<style> .height{ background:#666666; /*背景颜色为灰色*/ } tr{ cursor: pointer; /*手形*/ } <...body> ”1″ width=”40%”> <tr><th></th><th align=”left”>姓名</th><
jquery简单实现鼠标经过导航条改变背景图
12-09
4. `.head_ul li` 定义导航条列表项的基本样式，包括宽度、高度、行高、字体大小、背景图片等。 5. 其他CSS规则定义了页面其他部分的样式，如主容器`#container`、左侧`#left`和右侧`#right`区域的布局。 jQuery是...
js实现的黑背景灰色二级导航菜单效果代码
10-23
例如，通过给`BODY`标签设置背景颜色为深灰色（#26272b），可以实现黑色背景的效果。对于主菜单项，通过设置`a`标签的颜色为白色，以及给`LI`标签指定特定的字体、大小、行高和颜色，可以达到设计要求。 3. **页面...
CSS-Day3
m0_74039531的博客
09-29 164
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
前端工程规范-3：CSS规范（Stylelint）
Vinca@的博客
09-26 1006
Stylelint 是一个灵活且强大的工具，适用于保持 CSS 代码的质量和一致性。结合其他工具（如 Prettier 和 ESLint），可以更全面地保障前端代码的整洁性和可维护性。
CSS开发全攻略
邓邓子的博客
09-25 1344
在网页设计与开发的世界中，CSS（Cascading Style Sheets，层叠样式表）是一种不可或缺的技术，它允许开发者对网页的布局和样式进行精细的控制。本文将从CSS的基本概念、作用以及它在现代网页设计中的重要性等方面进行详细概述。CSS是一种用于描述HTML或XML文档样式的样式表语言。它定义了如何将结构化文档（例如HTML文档或XML应用程序）呈现为网页。CSS的主要作用是分离文档的内容（HTML或XML结构）与文档的表现形式（布局、颜色、字体等），从而实现更高效的页面设计与维护。
CSS学习 - 常用属性
Aaron121314的博客
09-25 442
font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的简写属性。要按照顺序，可以不设置某个值，未设置的使用默认值。border-width、border-style 以及 border-color 的简写属性。可以去这边查看几乎所有的属性。
如何只用 CSS 制作网格？
偶尔记一下 - mybatis.io
09-24 1149
在看这篇文章时，对其中的网格比较好奇，作者提供了 stackoverflow 的链接，就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式，贴在下面展示。
CSS 的user-select属性，控制用户是否能够选中文本内容
读心悦
09-29 230
CSS的属性是一个在CSS3 UI规范中新增的功能，用于控制用户是否能够选中文本内容。这个属性在保护网站内容不被轻易复制、提高用户体验等方面有重要作用。以下是关于。
CSS-Day2
m0_74039531的博客
09-26 797
padding: 0;} 移除列表前面的标记。
css 下拉框展示：当hover的时候展示下拉框 z-index的用法解释
jjw_zyfx的博客
09-26 469
css 下拉框展示：当hover的时候展示下拉框
CSS 中的@media print 是干什么用的？
最新发布
读心悦
09-29 76
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
【CSS/HTML】左侧固定，右侧自适应的布局方式理解margin负值理论
mengran_code的博客
09-29 390
简单解释下flex: 0 0 200px的用处，flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。它的默认值为auto，即项目的本来大小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。是固定宽度的div脱离文档流。
【CSS in Depth 2 精译_043】6.5 CSS 中的粘性定位技术 + 本章小结
PeacefulWinter的博客
09-29 641
本篇为《CSS in Depth》全新第2版6.5小节内容，主要介绍了CSS中新增的粘性定位技术，并对本章的示例页略作调整，在实际演练的过程中对粘性定位的用法及注意事项进行了详细讲解。对上一章中的部分兼容性方面的描述也做了删减。建议有志进阶CSS的朋友收藏、实测。
HTML/CSS/JS学习笔记 Day7（CSS--C4 CSS的三大特性）
给bug两拳的博客
09-20 1504
C4.CSS的三大特性：4.1 层叠性、4.2 继承性、4.3 优先级（权重优先级 / 权重叠加）
vue2中使用tailwindCss 详细教程
weixin_45859470的博客
09-26 316
通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。由于最新的tailwind css使用post css 8版本，vue2框架暂时还不支持，所以需要指定安装postcss7的版本。在tailwind.config.js文件中，将配置修改为以下内容。
26 Vue3之unocss原子化
qq_37550440的博客
09-29 122
原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。 现在你可以直接使用class="m-1"来设置边距。但正如你所见，用这种方法的情况下，你不能使用除了 1 到 10 之外的边距，而且，即使你只使用了其中一条 CSS 规则，但还是要为其余几条规则的文件体积买单。如果之后你还想支持不同的 margin 方向，使用比如mt代表margin-top，mb代表margin-bottom等，加上这 4 个方向以后，你的 CSS 大小会变成原来的
Html CSS 布局，位置处理 居中 对齐
weixin_42462436的博客
09-27 549
/</
lvgl list设置行高
05-18
在使用 LVGL 中的列表控件时，可以通过 `lv_list_set_style` 函数来设置行高。具体步骤如下： 1. 定义一个样式对象： ```c static lv_style_t style_list; ``` 2. 设置样式对象的属性，包括行高、字体大小等： `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值