CSS overflow-anchor

overflow-anchor

为了认识这个属性, 我们需要先看一种常见的现象. 即在网页加载中, 图片常常比文字加载更慢, 这样图片加载完成后可能会将文字向下顶. 比如下图演示

在这里插入图片描述

<div class="overflow"><img id="bg" src="" height="150" alt="" srcset="">Lorem...
</div>
const bg = document.getElementById('bg')
setTimeout(() => {bg.src = 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
}, 3000)

但是如果你把代码拷贝运行, 你却得不到上图的效果, 因为我有一个属性没有告诉你.

其实浏览器厂商早就注意并修复了这个问题, 真实的情况是图片加载后文字也不会向下滚动. 如下图, 注意右边代码中 <img> 标签的 src 有值后文字并没有向下滚动, 这才是浏览器的默认行为.

在这里插入图片描述

那究竟是哪个属性起了作用呢? 就是今天的主角 overflow-anchor. 下面的代码是第一个动图对应的代码.

.overflow {height: 300px;overflow: auto;border: 1px solid #111;overflow-anchor: none;font-size: 2em;
}

⚠️ 在上面的例子中, 为了演示效果我们先把内容往下滚动了一部分让图片在黑色框框之外. 不然如果一点也不滚动图像就在框框里, 那么图像加载完成后肯定会将文字挤下去.

auto 和 none

overflow-anchor 可以是 autonone. 其中 auto 是默认值, 使用 none 就会禁止浏览器的默认行为.

兼容性

Safari 不支持这个属性😭 不愧是当代 IE.
在这里插入图片描述

谢谢你看到这里😊

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

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

相关文章

【NI-RIO入门】使用其他文本语言开发CompactRIO

1.FPGA 接口Python API Getting Started — FPGA Interface Python API 19.0.0 documentation 2.FPGA接口C API FPGA 接口 C API 是用于 NI 可重配置 I/O (RIO) 硬件&#xff08;例如 NI CompactRIO、NI Single-Board RIO、NI 以太网 RIO、NI FlexRIO、NI R 系列多功能 RIO 和…

STM32的以太网外设+PHY(LAN8720)使用详解(7):以太网数据接收及发送测试

0 工具准备 1.野火 stm32f407霸天虎开发板 2.LAN8720数据手册 3.STM32F4xx中文参考手册 4.Wireshark1 以太网数据接收测试 1.1 以太网数据接收测试&#xff08;轮询&#xff09; 我们在主循环内轮询RX DMA描述符标志位查看是否接收到了数据&#xff0c;如果接收到了则将数据…

CSS3 面试题

CSS3 面试题 CSS3 是什么&#xff1f;它与 CSS 的关系是什么&#xff1f; CSS3 是 Cascading Style Sheets&#xff08;层叠样式表&#xff09;的第三个版本&#xff0c;它引入了许多新特性和增强功能&#xff0c;用于美化和布局网页。CSS3 是 CSS 的升级版本&#xff0c;扩展了…

校园助手示例安卓、ios基于Flutter,小程序基于mpvue,前端基于VueJS,后端Flask(附源码)

warning master分支正在经历大量的重写&#xff0c;请至v4分支查看可运行的版本。 <div align"center"> <img src"logo.png" width "200" height "200" alt"SHUhelper" aligncenter /> <h3>SHUh…

网络通信--深入理解网络和TCP / IP协议

计算机网络体系结构 TCP/IP协议族 TCP / IP 网络传输中的数据术语 网络通信中的地址和端口 window端查看IP地址和MAC地址&#xff1a;ipconfig -all MAC层地址是在数据链路层的&#xff1b;IP工作在网络层的 MAC是48个字节&#xff0c;IP是32个字节 在子网&#xff08;局域…

【已解决】Spring data jpa的@query的传入参数是对象怎么匹配参数

我们知道&#xff0c;在使用JPA的时候&#xff0c;如果参数是一个一个的话&#xff0c;有两种方式匹配 ①&#xff1a;根据位置匹配。如下&#xff1a; Query(value "SELECT * FROM employee WHERE c_id?1 and id?2", nativeQuery true) EmployeeEntity getUni…

Ubuntu 常用命令之 scp 命令用法介绍

&#x1f4d1;Linux/Ubuntu 常用命令归类整理 SCP&#xff08;Secure Copy&#xff09;是一种基于SSH&#xff08;Secure Shell&#xff09;的文件传输协议&#xff0c;它可以在本地和远程主机之间安全地复制文件。在Ubuntu系统下&#xff0c;我们可以使用scp命令来实现这个功…

java-sec-code中rmi

java-sec-code中rmi 暂时没有搞懂原理&#xff0c;这里只说明利用方法 java-sec-code 作者给出的是使用ysoserial进行利用 测试环境搭建 docker环境下&#xff0c;1099端口默认不开启&#xff0c;这里使用idea运行org.joychou.RMI.Server即可 个人电脑java环境分为1.8.381 1.8.…

Spring核心源码解析

Spring 框架核心源码 1、使用 Spring 框架 2、反射机制 IoC 控制反转 Inverse of Control 创建对象的权限&#xff0c;Java 程序中需要用到的对象不再由程序员自己创建&#xff0c;而是交给 IoC 容器来创建。 IoC 核心思想 1、pom.xml <dependencies><!-- 引入 …

38.常用shell之 jobs - 列出后台作业 的用法及衍生用法

jobs 是一个在类 Unix 系统的 shell&#xff08;如 bash&#xff09;中常用的命令&#xff0c;用于列出当前 shell 会话中的后台作业。一个“后台作业”是指在后台运行的进程&#xff0c;即它在没有占用终端的情况下执行。以下是 jobs 命令的基本用法和一些衍生用法&#xff1a…

html基础2

视频video <video src"视频的路径"controls"控制播放、暂停、音量等"autoplay"自动播放"loop"循环播放"width"视频播放器的宽度"height"视频播放器的高度"> </video>还有做浏览器兼容的方式&#xf…

pytorch张量的创建

张量的创建 张量&#xff08;Tensors&#xff09;类似于NumPy的ndarrays &#xff0c;但张量可以在GPU上进行计算。从本质上来说&#xff0c;PyTorch是一个处理张量的库。一个张量是一个数字、向量、矩阵或任何n维数组。 import torch import numpy torch.manual_seed(7) # 固…

04-基于GEC6818开发板的触摸实现——电子相册实例

基于GEC6818开发板的触摸实现——电子相册 本文主要涉及GEC6818开发板实现对触摸屏的相关操作&#xff0c;可以识别上下左右的滑动&#xff0c;通过滑动来进行图片的切换——电子相册。 其他相关GEC6818开发板的内容可以参考&#xff1a; 01-基于粤嵌GEC6818实现屏幕的显示固定…

一步一步写线程之二线程应用管理

一、多线程使用 多线程在实际的应用中非常广泛&#xff0c;它在实际应用中遇到的主要的问题有以下几类&#xff1a; 1、线程自身的控制 线程自身的控制包括&#xff1a;线程结束控制&#xff08;join/detach&#xff09;&#xff0c;所有权控制和数量选择。 2、线程的传参 线程…

docker学习(十五、Dockerfile之python示例)

文章目录 一、python的Dockerfile二、Dockerfile分析总结 一、python的Dockerfile # 使用官方的 Python 作为基础镜像 FROM python:3.8# 将工作目录设置为 /app WORKDIR /app# 将当前目录下的所有文件复制到工作目录 /app 下 COPY . /app# 安装所需的依赖库 RUN pip install -r…

机器学习-数学学习汇总

***I数学只是一个工具&#xff0c;会使用&#xff0c;能解决问题就可以了&#xff0c;精确例如到3.14够用就可以了*** 微积分作用&#xff1a;解决非线性问题 学习&#xff1a;27分。 高中数学&#xff1a; 1.高中数学所有知识点表格总结&#xff0c;高中知识点一个不漏&am…

RLHF对LLM泛化性和多样性的影响

paper&#xff1a;Understanding the effects of RLHF on LLM generalisation and diversity 0 背景知识 标准的RLHF finetuning pipeline一般包含3个阶段&#xff1a; supervised fine-tuning (SFT)。对预训练的模型进行用language modeling的方式进行微调。reward modelin…

C++ 之函数重写

在C中&#xff0c;函数重写&#xff08;Function Overriding&#xff09;是一种面向对象编程的概念&#xff0c;它允许派生类重新定义基类中已经定义的虚函数。函数重写用于实现多态性&#xff0c;使得程序能够在运行时选择调用哪个版本的函数&#xff0c;以便适应不同的对象类…

【湖仓一体尝试】MYSQL和HIVE数据联合查询

爬了两天大大小小的一堆坑&#xff0c;今天把一个简单的单机环境的流程走通了&#xff0c;记录一笔。 先来个完工环境照&#xff1a; mysqlhadoophiveflinkicebergtrino 得益于IBM OPENJ9的优化&#xff0c;完全启动后的内存占用&#xff1a; 1&#xff09;执行联合查询后的…

AI时代Python量化交易实战:ChatGPT引领新时代

文章目录 《AI时代Python量化交易实战&#xff1a;ChatGPT让量化交易插上翅膀》关键点内容简介作者简介购买链接 《AI时代架构师修炼之道&#xff1a;ChatGPT让架构师插上翅膀》关键点内容简介作者简介 赠书活动 《AI时代Python量化交易实战&#xff1a;ChatGPT让量化交易插上翅…