当前位置:首页 > 编程技术 > 正文内容

CSS overflow 内容溢出时的显示方式

yc8881年前 (2022-12-06)编程技术223

1. overflow 属性介绍


css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。

当元素框中的内容溢出时,无非就是两种情况: 溢出部分隐藏溢出部分通过滚动条查看

2. overflow 属性的值


描述
visible 默认值。内容不会被修剪,溢出部分会呈现在元素框之外
hidden 内容被修剪,溢出部分不可见
scroll 内容被修剪,无论是否溢出滚动条都会占据空间
auto 当内容溢出时会被修剪且出现滚动条,没有溢出时不显示滚动条

3. 自定义 overflow 的滚动条


以前不知道 overflow 的滚动条样式是可以修改的,最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式,才得知还有这么个东西,在此记录一下自定义滚动条的写法,这样可以更好的理解用法,虽然下次使用还要来这里看

首先,先来做一个有滚动条的容器

  1. <style>
  2. .container {
  3. width: 260px;
  4. height: 100px;
  5. background: lightblue;
  6. display: flex;
  7. overflow-x: scroll;
  8. margin: 20px;
  9. }
  10. .item {
  11. width: 260px;
  12. height: 100px;
  13. line-height: 100px;
  14. flex-shrink: 0;
  15. text-align: center;
  16. }
  17. .item:nth-child(odd) {
  18. background: lightcoral;
  19. }
  20. .item:nth-child(even) {
  21. background: lightgreen;
  22. }
  23. </style>
  24. <div class="container">
  25. <div class="item">1</div>
  26. <div class="item">2</div>
  27. <div class="item">3</div>
  28. <div class="item">4</div>
  29. <div class="item">5</div>
  30. </div>

macOS 中滚动条的默认样式:

可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式

选择器 描述
::-webkit-scrollbar 整个滚动条
::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-scrollbar-thumb 滚动条上的滚动滑块
::-webkit-scrollbar-track 滚动条轨道

自定义滚动条样式代码示例:

  1. /* 整个滚动条 */
  2. .container::-webkit-scrollbar {
  3. width: 4px;
  4. height: 7px;
  5. }
  6. /* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
  7. .container::-webkit-scrollbar-corner {
  8. background: #b9b9b9;
  9. }
  10. /* 滚动条上的滚动滑块 */
  11. .container::-webkit-scrollbar-thumb {
  12. background: #E1660E;
  13. border-radius: 10px;
  14. }
  15. /* 滚动条轨道 */
  16. .container::-webkit-scrollbar-track {
  17. background: #b9b9b9;
  18. border-radius: 2px;
  19. }

本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!


从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!


本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。


本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。


若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。


本文链接:https://www.10zhan.com/biancheng/10180.html

标签: CSS
分享给朋友:

“CSS overflow 内容溢出时的显示方式” 的相关文章

【说站】laravel实现自定义404页面并给页面传值

【说站】laravel实现自定义404页面并给页面传值

以 laravel5.8 为例,虽然有自带的404页面,但太简单,我们更希望能自定义404页面,将用户留在站点。实现的方式很简单,将自定义的视图文件命名为 404.blade.php,并放到 reso...

【说站】Thymeleaf报错Error resolving template “XXX”

【说站】Thymeleaf报错Error resolving template “XXX”

修改了一下开源项目的目录结构访问突然报错Error resolving template “XXX”可能原因有如下三种:第一种可能:原因:在使用springboot的过程中,如果使用thymeleaf...

【说站】Centos8.0如何配置静态IP详解及永久关闭防火墙

【说站】Centos8.0如何配置静态IP详解及永久关闭防火墙

这篇文章主要介绍了详解Centos8 配置静态IP的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来学习一下!1. 查看自己的网关地址点击虚...

【说站】利用Webhook实现Java项目自动化部署

【说站】利用Webhook实现Java项目自动化部署

用webhook就能实现Java项目自动部署,其实原理很简单。费话不多说,直接往下看教程。1. 创建gitee仓库并初始化2. 在linux安装git3. 在宝塔的软件的商店里下载Webhook4....

【说站】电脑安装MySQL时出现starting the server失败原因及解决方案

【说站】电脑安装MySQL时出现starting the server失败原因及解决方案

今天在安装MySQL时出现starting the server失败,经过查询分析得出以下结论,记录一下操作步骤。原因分析:如果电脑是第一次安装MySQL,一般不会出现这样的报错。如下图所示。star...

【说站】vagrant实现linux虚拟机的安装并配置网络

【说站】vagrant实现linux虚拟机的安装并配置网络

一、VirtualBox的下载和安装1、下载VirtualBox官网下载:https://www.virtualbox.org/wiki/Downloads我的电脑是Windows的,所以下载Wind...