04 【布局之Overscroll Behavior 定位偏移量】
1.布局-Overscroll Behavior
overscroll behavior
用于控制浏览器到达滚动区域边界时的行为的功能类。这个属性可以用来防止在有多个滚动区域的页面中出现不必要的滚动。
1.1 快速参考
Class | Properties |
---|---|
overscroll-auto | overscroll-behavior: auto; |
overscroll-contain | overscroll-behavior: contain; |
overscroll-none | overscroll-behavior: none; |
overscroll-y-auto | overscroll-behavior-y: auto; |
overscroll-y-contain | overscroll-behavior-y: contain; |
overscroll-y-none | overscroll-behavior-y: none; |
overscroll-x-auto | overscroll-behavior-x: auto; |
overscroll-x-contain | overscroll-behavior-x: contain; |
overscroll-x-none | overscroll-behavior-x: none; |
1.2 基本用法
1.2.1 阻止父元素的过度滚动
overscroll-auto
说明:它用于将滚动行为设置为默认。即使到达元素的边界,整个页面也会连同元素一起滚动。它是默认值。
overscroll-contain
说明:用来设置滚动行为,只对所使用的元素进行默认。在元素到达边界后进一步滚动,不会滚动它后面的元素。在相邻的滚动区域不会发生滚动链。
<html lang="en"><head><link rel="stylesheet" href="../dist/output.css" /></head><body class="text-center"><h1 class="text-green-500 text-5xl font-bold">Tailwind CSS overscroll-behavior</h1><b>Tailwind CSS overscroll-auto and overscroll-contain Class</b><div class="flex"><divclass="bg-green-500 mx-24 p-4 w-1/3 h-16 overscroll-contain overflow-y-auto text-justify">Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "NewYork Public Library"? Well that may not mean anything to you, but that means a lot to me.One whole hell of a lot.</div><div class="bg-pink-500 p-2 w-1/4 h-24 overscroll-auto overflow-y-auto">Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene,flaunting convention. Yeah, I know what you're thinking. What's this guy making such a bigstink about old library books? Well, let me give you a hint, junior.</div></div><div class="h-[2000px]"></div></body>
</html>
- 左边的
div元素
设置了overscroll-contain
,即使滚动到底,只要在这个元素滚动就不会影响父元素的滚动条。 - 右边的
div元素
设置overscroll-contain
,滚动到底后,在这个元素里面滚动,父元素的滚动条也会跟着滚动
1.2.2 阻止过度滚动的反弹
暂时未发现这个属性的作用
以后发现了会补充
1.3 有条件的应用
1.3.1 悬停、焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用效用类。例如,使用 仅在悬停时应用该实用程序。hover:overscroll-contain``overscroll-contain
<div class="overscroll-auto hover:overscroll-contain"><!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看 Hover、Focus 和 Other State 文档。
1.3.2 断点和媒体查询
您还可以使用变体修饰符来定位媒体查询,如响应式断点、深色模式、首选减少运动等。例如,用于仅在中等屏幕尺寸及以上位置应用该实用工具。md:overscroll-contain``overscroll-contain
<div class="overscroll-auto md:overscroll-contain"><!-- ... -->
</div>
若要了解详细信息,请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。
2.布局-Top/Right/Bottom/Left
2.1 快速参考
属性很多,请点击链接进入官网查看Top / Right / Bottom / Left - Tailwind CSS (wyz.xyz)
2.2 基本用法
2.2.1 放置定位元素
使用 {top|right|bottom|left|inset}-0
功能类,将绝对定位的元素锚定在最近定位的父元素的任何边缘上。
结合 Tailwind 的 padding 和 margin 功能类,您可能会发现这些是所有的您需要的用来精确控制绝对定位元素的功能类。
<html lang="en"><head><link rel="stylesheet" href="../dist/output.css" /></head><body class="text-center"><h1 class="text-green-500 text-5xl font-bold">Tailwind CSS Top/Right/Bottom/Left</h1><div class="flex w-72 sm:w-96 mx-auto justify-between flex-shrink-0 flex-wrap"><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute left-0 top-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">01</div></div><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute inset-x-0 top-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">02</div></div><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute top-0 right-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">03</div></div><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute inset-y-0 left-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">04</div></div><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute inset-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">05</div></div><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute inset-y-0 right-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">06</div></div><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute left-0 bottom-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">07</div></div><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute inset-x-0 bottom-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">08</div></div><div class="relative w-20 h-20 sm:w-28 sm:h-28 bg-purple-500 rounded-lg m-2"><divclass="absolute right-0 bottom-0 p-4 flex justify-center items-center text-white bg-purple-900 rounded-lg">09</div></div></div></body>
</html>
sm屏幕显示
其他情况:
2.2.2 使用负值
若要使用负上/右/下/左值,请在类名前面加上短划线前缀,以将其转换为负值。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="../dist/output.css" /></head><body><div class="relative top-10 w-20 h-20 sm:w-28 sm:h-28 mx-auto bg-purple-500 rounded-lg"><div class="absolute -left-4 -top-4 p-8 bg-purple-900 rounded-lg"></div></div></body>
</html>
2.3 有条件的应用
2.3.1 悬停、焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用效用类。例如,使用 仅在悬停时应用该实用程序。hover:top-6``top-6
<div class="top-4 hover:top-6"><!-- ... -->
</div>
有关所有可用状态修饰符的完整列表,请查看 Hover、Focus 和 Other State 文档。
2.3.2 断点和媒体查询
您还可以使用变体修饰符来定位媒体查询,如响应式断点、深色模式、首选减少运动等。例如,用于仅在中等屏幕尺寸及以上位置应用该实用工具。md:top-6``top-6
<div class="top-4 md:top-6"><!-- ... -->
</div>
若要了解详细信息,请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。
2.4 自定义主题
默认情况下,Tailwind 为默认间距比例的组合以及一些其他分数值的组合提供上/右/下/左/插图实用程序。auto``full
您可以通过编辑或在文件中自定义间距比例。theme.spacing``theme.extend.spacing``tailwind.config.js
tailwind.config.js
module.exports = {theme: {extend: {spacing: {4: '0.8rem',}}}
}
或者,您可以通过编辑或在文件中仅自定义上/右/下/左/插图比例。theme.inset``theme.extend.inset``tailwind.config.js
<div class="relative top-10 w-20 h-20 sm:w-28 sm:h-28 mx-auto bg-purple-500 rounded-lg"><div class="absolute -left-4 -top-4 p-8 bg-purple-900 rounded-lg"></div>
</div>
可以观察到-left-4
就是-0.8rem = -12.8px
tailwind.config.js
module.exports = {theme: {extend: {spacing: {4: '0.8rem',}}}
}
有关自定义默认主题的详细信息,请参阅主题自定义文档。
04 【布局之Overscroll Behavior 定位偏移量】相关推荐
- CSS布局之浮动和定位
目录 1. 浮动 1.1 浮动元素的特性 1.2 浮动不会压住文字 1.3 清除浮动 1.3.1 额外标签法 1.3.2 父盒子添加overflow属性 1.3.3 父盒子添加after伪元素 1.3 ...
- CSS Overscroll Behavior Module Level 1
编者按:本文作者奇舞团前端开发工程师何文力,同时也是 W3C CSS 工作组成员. 6 月 6 日,W3C 发布了第一份滚动溢出行为工作组草案 CSS Overscroll Behavior Modu ...
- CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法...
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- Ubuntu16.04中的可重定位目标文件
最近在看<CSAPP>这本神书,其中看到了第七章链接中的可重定位目标文件,自己动手在ubuntu16.04上试了一试,发现有很多都做了一些改动,在此记录 1.源程序 main.c stat ...
- Flutter基础—布局模型之层叠定位
Stack即层叠布局控件,能够将子控件层叠排列. Stack控件的每一个子控件都是定位或不定位,定位的子控件是被Positioned控件包裹的.Stack控件本身包含所有不定位的子控件,其根据alig ...
- CSS静态布局——常规流,定位,浮动。
合理的网页布局方式 合理的网页布局可以使网页内容以整洁有序的方式展示给用户.凌乱的布局则会使网页的信息无法正确传达,用户的目的没有达到等问题. 合理的网页布局应有: 1.合理地把页面切分为多个具有具体 ...
- Flutter教程04——布局01
目录 1.约束 1.1BoxConstraints 1.2ConstrainedBox 1.3SizedBox 1.4多重限制 1.5UnconstrainedBox 2.线性布局 2.1Row 2. ...
- 27.html的定位(position)和偏移量(offset)
文章目录 定位 偏移量(offset) 相对定位 绝对定位 固定定位 粘滞定位 定位 定位(position)是一种高级的布局手段,通过定位可以将元素摆放到页面的任意位置 可选值: static:默认 ...
- CSS布局相关知识(四):定位(相对、绝对、固定、粘滞)、层级
一.定位 position 定位是什么: 定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置 怎么设置定位: 使用position属性来设置定位,可选值: static 默认值,元素 ...
最新文章
- 2017-09-22 前端日报
- 分布式理论(一) - CAP定理
- LeetCode:汇总区间【228】
- 踩不出足迹(牛客练习赛88 )
- android x86 笔记本卡屏,笔记本死机卡屏怎么办
- Kubernetes 诞生七年,凭什么成为主流?
- 6 只能在公司代码xxxx的期间2020/08和2020/07中记账
- 探索C#之6.0语法糖剖析
- java输入某年某个季度_Java获取某年某季度的第一天出错
- cp210x驱动运行不了怎么解决_【问题】解决Android8.0以上运行不了uiautomatorviewer的办法...
- Codeforces 1105C (DP)
- Android 通过WebService进行网络编程,使用工具类轻松实现
- How to install innotop and percona tookit on centos
- tensorflow两种padding方式
- 蒙特卡洛估值计算(欧式期权)
- 如何批量新建文件夹并命名
- msdtc.exe是微软分布式传输协调程序。该进程调用系统Microsoft Personal Web Server和Microsoft SQL Server。该服务用于管理多个服务
- ps在当前的图片添加一张图片进来
- java程序报stream has already been operated upon or closed异常错误解决方案
- Hostapd.conf详细释义
热门文章
- 我有两把枪,一把叫射,另一把叫啊!!手机可以玩英雄联盟手游了,重新拾起大学时代的记忆
- jquery 删除元素的onclick事件
- Linux Pycharm中文输入候选框跟随光标
- 几分惊喜,几分收获--我的2015年总结
- 用 Python 写了个简单的股票量化交易框架
- js关闭当前网页,去掉弹窗
- Django的Ajax上传文件简单记录
- Linux查看文件创建时间
- java用户名一样_请问,若想判断输入的中文用户名是否与给定用户名相同,如何判断?...
- 微软游戏服务器崩溃地平线4,极限竞速 地平线4无法正常游戏,经常在载入游戏或者游玩时游戏崩溃返回到桌面...