【CSS in Depth 2 精译_020】3.3 元素的高度

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型
    • 3.1 常规文档流(已完结)
      • 3.1.1 内容水平居中
      • 3.1.2 逻辑属性
      • 3.1.3 用好逻辑属性的简写形式
    • 3.2 盒模型(已完结)
      • 3.2.1 避免使用魔数
      • 3.2.2 调整盒模型
      • 3.3.3 全局设置 border-box
    • 3.3 元素的高度 ✔️
      • 3.3.1 控制溢出行为 ✔️
      • 3.3.2 百分比高度的备选方案 ✔️
      • 3.3.3 使用 min-height 和 max-height ✔️
    • 3.4 负的外边距(精译中 ⏳)

文章目录

    • 3.3 元素的高度
      • 3.3.1 控制溢出行为
      • 3.3.2 百分比高度的备选方案
      • 3.3.3 使用 min-height 和 max-height

3.3 元素的高度

元素的高度(即块的尺寸)处理起来可能会比较麻烦。按照常规流的设计,宽度是受限的,而高度则不受限。因此,容器的高度是由其内容天然决定的,而非容器自身决定。通常情况下,最好避免给元素(尤其对包含大量内容的元素)设置确切的高度,尽管时常会有这样的冲动。

3.3.1 控制溢出行为

当元素高度被设为一个固定值,内容就可能 溢出(overflowing 容器。当内容在限定区域放不下而被迫渲染到父元素外面时,就会发生这种现象,如图 3.10 所示。文档流不考虑溢出的情况,容器后面的所有内容都会渲染到溢出内容的上面(译注:原书这里并没有配图,源代码中也没有相应页面,因此我手动补了一个截图 3.10.1,以方便理解)。

图 3.10 内容溢出了容器

图 3.10 内容溢出了容器

图 3.10.1 容器后续内容渲染到溢出内容的上方示意图

图 3.10.1 容器后续内容渲染到溢出内容的上方示意图

overflow 属性可以控制溢出内容的行为,该属性支持以下 5 个值:

  • visible(默认值)—— 所有内容都可见,即使溢出容器边缘。
  • hidden —— 溢出容器内边距边缘的内容将被裁剪而不可见;用户也无法通过正常滚动看到这些内容,但仍能通过 JavaScript 编程的方式来滚动该元素。
  • clip —— 类似于 hidden ,但通过编程实现滚动的方式也被禁用了。
  • scroll —— 容器出现滚动条,用户可以滚动查看剩余内容。在某些操作系统中,即便内容都可见,也会出现水平和垂直两种滚动条,只是在这种情况下滚动条会被禁用(置灰)。
  • auto —— 仅在内容溢出容器时出现滚动条。

图 3.11 展示了内容溢出时四种 overflow 取值下的容器渲染情况。

图 3.11 从左至右 overflow 取值分别为 visible、hidden、scroll、auto 的对比效果

图 3.11 从左至右 overflow 取值分别为 visible、hidden、scroll、auto 的对比效果

通常情况下,我更倾向使用 auto 而非 scroll,因为在大多数情况下,我并不想让滚动条一直出现,除非万不得已。

水平方向的溢出

除了垂直溢出,内容也可能在水平方向溢出。比如,当在一个很窄的容器中放入一条很长的 URL 地址;或者在一个小型移动设备上查看一个包含很多列的表格的时候。此时适用的溢出规则与垂直溢出时一致。

也可以使用 overflow-x 属性单独控制水平方向的溢出,或者用 overflow-y 来控制垂直溢出。这些属性都支持 overflow 的所有值。但若将 xy 方向显式声明为不同的取值时,一旦其中一个为 hidden,往往会产生不可预知的效果;在这种情况下,应该改用 clip

使用滚动条时务须谨慎。浏览器已经自带一个滚动条来滚动页面,如果网页内部再嵌套多个滚动区,用户体验可能会很糟糕。如果用户使用鼠标滚轮向下滚动页面,当鼠标到达一个较小的滚动区,滚轮就会停止滚动页面,转而去滚动较小的区域。

3.3.2 百分比高度的备选方案

用百分比来指定高度也有问题。百分比参考的是元素包含块(containing block)的大小,而容器的高度通常是由子元素的高度决定的。这样就产生了循环定义(circular definition),浏览器没法解析,从而会忽略该声明。想让百分比高度生效,就必须给父元素一个确切的高度。

百分比高度的一个有效应用场景是用在绝对定位的元素上,此时元素的尺寸与其容器息息相关。本书后续章节会专门介绍定位相关的知识。

开发者往往会在下面两个应用场景中,因为尝试百分比高度而陷入困境:

第一个场景,是想让容器填满整个屏幕。这时可能需要将 height: 100% 给到某个元素,进而到其容器,并沿着 DOM 树一直向上,直到将它应用到 <body><html> 元素。其实更好的方案是使用视口相对单位(viewport-relative units,相关内容第二章已有论述),因为此时无非是想要一个 100svh/lvh 的高度效果。

第二个应用场景,是需要创建等高列的时候。页面设计往往需要两个或多个元素并排且具有相同的高度。而让一个元素的尺寸去参照同级别相邻元素的做法,在 CSS 的历史上是一件非常棘手的事。要实现这一需求,以前需要一些非常取巧的手段;而如今只要应用更现代的技术就能轻松搞定。在后续介绍 flexbox 弹性盒布局和 grid 网格布局的相关章节中,我们将一探究竟。

3.3.3 使用 min-height 和 max-height

min-heightmax-height(以及对应的逻辑属性 min-block-sizemax-block-size)是两个非常有用的属性(properties)。通过这两个属性设置一个最小或最大值,就能让元素在给定范围内缩放自如,不用再显式定义高度了。

如果要将一张大图放在一大段文字后面,但又担心图片溢出容器,就可以用 min-height 给容器设置一个最小高度,而不必指定确切的高度。这么一来,该容器的高度最小也不会低于设定的值;要是内容过多,浏览器则会让其高度自然升高,以免内容溢出。

如图 3.12 所示的三个元素,左侧的元素没有设置 min-height,因此高度是由内容自然决定的;其余两个元素的 min-height 均设为 3em。对于中间的元素,自然高度虽然不足 3em,但 min-height 将其补到了 3em;而右边的元素内容够多,其高度已然超过了 3em,此时容器则会自然升高来容纳它们。

图 3.12 三个元素、一个没有指定高度、另两个设置了 min-height 为 3em 的效果对比

图 3.12 三个元素、一个没有指定高度、另两个设置了 min-height 为 3em 的效果对比

如果要在容器上设置高度 height,大多数情况下我都会改用 min-height。这样做往往就不必为后续的溢出问题伤脑筋了。

相应地,属性 max-height 则会让元素尺寸自然增大到某个值,一旦达到该值,元素就不再升高,其内容也将随之溢出。类似的属性还有 min-widthmax-width(以及 min-inline-sizemax-inline-size),用于限定元素的宽度。

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

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

相关文章

【proteus经典实战】定时器控制交通灯指示灯

一、简介 基于8051系列单片机实现&#xff0c;旨在模拟一个简单的交通灯系统&#xff0c;实现红、黄、绿灯的交替亮灭。使用了特殊功能寄存器&#xff08;SFR&#xff09;和位操作来控制硬件&#xff0c;使用定时器0的中断功能来控制交通灯信号的切换。通过软件控制&#xff0…

解决selenium打印保存为PDF时图片未加载成功的问题

使用selenium打印网页时&#xff0c;如果程序运行很快的话&#xff0c;可能会导致图片没有加载成功即进行了保存&#xff0c;出现这个问题最初的思考是在执行打印任务时使用js进行强制等待&#xff0c;后发现实现效果并不好。在加载页面时使用自动下滑的方式将网页拉到底&#…

uniapp动态计算并设置元素高度

<template><view><scroll-view id"sv-box" :scroll-y"true" :style"{height:navHeightpx}"></scroll-view><view id"btn-box"><button>取消</button><button>确认</button><…

Linux Vim教程(三):插入模式与命令模式

目录 1. Vim的基本模式介绍 2. 插入模式 2.1 进入插入模式 2.2 退出插入模式 2.3 插入模式下的快捷键 2.4 插入模式中的光标移动 3. 命令模式 3.1 进入命令模式 3.2 常用命令 3.3 搜索和替换 3.4 其他有用的命令 3.5 配置与优化 3.5.1 自动补全 3.5.2 自定义快捷…

【前后端联调】HttpMessageNotReadableException

【前后端联调】HttpMessageNotReadableException 01 问题描述 在前后端联调时产生的问题&#xff0c;关键是下面这句翻译JSON解析错误&#xff1a;无法构造“java.util.ArrayList”的实例 org.springframework.http.converter.HttpMessageNotReadableException: JSON parse …

记录贴-NGINX相关

链接: NGINX相关配置信息说明

在 CI/CD 中怎么使用 Docker 部署前端项目?

本项目代码已开源&#xff0c;具体见&#xff1a; 前端工程&#xff1a;vue3-ts-blog-frontend 后端工程&#xff1a;express-blog-backend 数据库初始化脚本&#xff1a;关注公众号程序员白彬&#xff0c;回复关键字“博客数据库脚本”&#xff0c;即可获取。 前言 在上一篇文…

Web Pages 表单

Web Pages 表单 介绍 Web pages 表单是现代网页设计中不可或缺的组成部分&#xff0c;它们允许用户与网站进行交互&#xff0c;提交信息&#xff0c;如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各…

快速上手AI指令:打造个性化智能交互体验的全面指南

快速上手AI指令&#xff1a;打造个性化智能交互体验的全面指南 一、初识文心一言1.1 文心一言简介1.2 文心一言的特点 二、准备工作2.1 获取访问权限2.2 熟悉界面布局2.3 了解基础指令 三、基础指令操作3.1 问答互动3.2 文本创作3.3 任务规划 四、进阶指令操作4.1 复杂查询4.2 …

Python酷库之旅-第三方库Pandas(035)

目录 一、用法精讲 106、pandas.Series.iloc方法 106-1、语法 106-2、参数 106-3、功能 106-4、返回值 106-5、说明 106-6、用法 106-6-1、数据准备 106-6-2、代码示例 106-6-3、结果输出 107、pandas.Series.__iter__魔法方法 107-1、语法 107-2、参数 107-3、…

Java程序的故障排查

文章目录 Linux命令关机/重启/注销系统信息和性能查看磁盘和分区⽤户和⽤户组⽹络和进程管理常⻅系统服务命令⽂件和⽬录操作⽂件查看和处理打包和解压RPM包管理命令YUM包管理命令DPKG包管理命令APT软件⼯具 JDK命令jpsjstatjinfojmapjhatjstackjcmdjconsole 分析工具VisualVME…

ios 设置行距和获取文本行数

设置文本行距 UILabel *label [[UILabel alloc] init];label.font [UIFont systemFontOfSize:12];label.numberOfLines 0;label.lineBreakMode NSLineBreakByWordWrapping;label.textColor [UIColor colorWithHexString:"B3B3B3"];label.text textDes;//设置行…

blender和3dmax和maya和c4d比较

Blender、3ds Max、Maya和Cinema 4D (C4D)都是强大的3D建模和动画软件&#xff0c;但它们各有特点和适用领域。以下是它们的比较&#xff1a; Blender: 开源免费全面的功能&#xff0c;包括建模、动画、渲染、视频编辑等学习曲线较陡峭&#xff0c;但社区支持强大适合独立艺术家…

自动驾驶-预测概览

通过生成一条路径来预测一个物体的行为&#xff0c;在每一个时间段内&#xff0c;为每一辆汽车重新计算预测他们新生成的路径&#xff0c;这些预测路径为规划阶段做出决策提供了必要信息 预测路径有实时性的要求&#xff0c;预测模块能够学习新的行为。我们可以使用多源的数据…

超简单安装指定版本的clickhouse

超简单安装指定版本的clickhouse 命令执行shell脚本 idea连接 命令执行 参考官网 # 下载脚本 wget https://raw.githubusercontent.com/183461750/doc-record/d988dced891d70b23c153a3bbfecee67902a3757/middleware/data/clickhouse/clickhouse-install.sh # 执行安装脚本(中…

【漏洞复现】Netgear WN604 downloadFile.php 信息泄露漏洞(CVE-2024-6646)

0x01 产品简介 NETGEAR WN604是一款由NETGEAR&#xff08;网件&#xff09;公司生产的无线接入器&#xff08;或无线路由器&#xff09;提供Wi-Fi保护协议&#xff08;WPA2-PSK, WPA-PSK&#xff09;&#xff0c;以及有线等效加密&#xff08;WEP&#xff09;64位、128位和152…

机器学习 -逻辑回归的似然函数

公式解释 公式如下&#xff1a; L ( θ ) ∏ i 1 m P ( y i ∣ x i ; θ ) ∏ i 1 m ( h θ ( x i ) ) y i ( 1 − h θ ( x i ) ) 1 − y i L(\theta) \prod_{i1}^m P(y_i | x_i; \theta) \prod_{i1}^m (h_\theta(x_i))^{y_i} (1 - h_\theta(x_i))^{1 - y_i} L(θ)i1∏…

亲测--linux下安装ffmpeg最新版本---详细教程

下载地址 Download FFmpeg 下载最新的https://ffmpeg.org/releases/ffmpeg-7.0.1.tar.xz 上传到服务器 解压 tar xvf ffmpeg-7.0.1.tar.xz 编译 cd ffmpeg-7.0.1 ./configure --prefix=/usr/local/ffmpeg make && make install 报错: 解决:在后面加 跳过检测…

上海市计算机学会竞赛平台2022年9月月赛丙组二叉树的遍历

题目描述 有一棵二叉树&#xff0c;结点数量不超过 2626 个&#xff0c;树上的每个结点都有一个大写字母。 给定这棵二叉树的前序遍历及中序遍历&#xff0c;请输出它的后序遍历。 输入格式 第一行&#xff1a;一个字符串&#xff0c;表示二叉树的前序遍历&#xff1b;第二…

【分布式存储系统HDFS】架构和使用

分布式存储系统HDFS&#xff1a;架构和使用 目录 引言HDFS简介HDFS的架构 NameNodeDataNodeSecondary NameNode HDFS的工作原理 数据读写流程数据冗余与恢复 HDFS的安装和配置 环境准备HDFS安装步骤HDFS配置文件启动HDFS HDFS的使用 基本命令HDFS Shell操作Java API操作 HDFS…