CSS overflow 内容溢出时的显示方式
CSS 内容 溢出 overflow
2023-09-11 14:18:27 时间
- 1. overflow 属性介绍
- 2. overflow 属性的值
- 3. 自定义 overflow 的滚动条
1. overflow 属性介绍
css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。
当元素框中的内容溢出时,无非就是两种情况: 溢出部分隐藏
、溢出部分通过滚动条查看
2. overflow 属性的值
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,溢出部分会呈现在元素框之外 |
hidden | 内容被修剪,溢出部分不可见 |
scroll | 内容被修剪,无论是否溢出滚动条都会占据空间 |
auto | 当内容溢出时会被修剪且出现滚动条,没有溢出时不显示滚动条 |
3. 自定义 overflow 的滚动条
以前不知道 overflow 的滚动条样式是可以修改的,最近做的一个官网项目中前端提供的静态模板自定义了滚动条样式,才得知还有这么个东西,在此记录一下自定义滚动条的写法,这样可以更好的理解用法,虽然下次使用还要来这里看
首先,先来做一个有滚动条的容器
<style>
.container {
width: 260px;
height: 100px;
background: lightblue;
display: flex;
overflow-x: scroll;
margin: 20px;
}
.item {
width: 260px;
height: 100px;
line-height: 100px;
flex-shrink: 0;
text-align: center;
}
.item:nth-child(odd) {
background: lightcoral;
}
.item:nth-child(even) {
background: lightgreen;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
macOS 中滚动条的默认样式:
可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式
站长源码网
选择器 | 描述 |
---|---|
::-webkit-scrollbar | 整个滚动条 |
::-webkit-scrollbar-corner | 当同时有垂直滚动条和水平滚动条时交汇的部分 |
::-webkit-scrollbar-thumb | 滚动条上的滚动滑块 |
::-webkit-scrollbar-track | 滚动条轨道 |
自定义滚动条样式代码示例:
/* 整个滚动条 */
.container::-webkit-scrollbar {
width: 4px;
height: 7px;
}
/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
.container::-webkit-scrollbar-corner {
background: #b9b9b9;
}
/* 滚动条上的滚动滑块 */
.container::-webkit-scrollbar-thumb {
background: #E1660E;
border-radius: 10px;
}
/* 滚动条轨道 */
.container::-webkit-scrollbar-track {
background: #b9b9b9;
border-radius: 2px;
}
相关文章
- Java-Web 用html和css写一个EasyMall注册界面
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
- 【Css】css中class之间>(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解(转载,笔记用)
- 【css】css中实现首行缩进效果(已解决)
- 【CSS】css弹出菜单设置示例
- CSS Modules 解决 react 项目 css 样式互相影响的问题
- 81Vue - CSS 过渡
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
- CSS: double coin
- java去除html代码中含有的html、js、css标签,获取文字内容
- CSS(字体相关知识以及css三种样式表使用方法)
- css动画库
- CSS 选择器继承和层叠
- 《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 1.3 使用浏览器浏览HTML文件
- 《高性能响应式Web开发实战》一2.2 CSS像素
- css样式美化 下拉框 select 样式
- 【前端领域】3D旋转超美相册(HTML+CSS)
- css 自定义滚动条样式
- makingcss 一个提高CSS编写效率的网站
- 通过CSS控制window.print打印样式浅析
- 浅析如何给css加上模块的功能以及CSS Modules用法介绍
- 解决CSS浏览器兼容性问题的一些方案浅析
- CSS学习知识整理(六)Css position(定位)、margin 简写
- CSS学习知识整理(五)Css display(显示)
- CSS学习知识整理(一)Css 布局
- 11个实用的CSS学习工具
- java--css+js做的树形菜单(完整版)
- html css的简单学习(三)