tailwind中的盒子模型
qingheluo2023-12-07清河洛938
盒子类型block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents ...
盒子类型
block display: block;
inline-block display: inline-block;
inline display: inline;
flex display: flex;
inline-flex display: inline-flex;
flow-root display: flow-root;
grid display: grid;
inline-grid display: inline-grid;
contents display: contents;
list-item display: list-item;
hidden display: none;
除了none改为了hidden，其余的就是将display属性的值作为类名浮动
float-right float: right;
float-left float: left;
float-none float: none;清除浮动
clear-left clear: left;
clear-right clear: right;
clear-both clear: both;
clear-none clear: none;盒子阴影
shadow-[*] ：星号为阴影的设定值
从前到后使用下划线连接
水平偏移量_垂直偏移量_模糊值_延伸半径_阴影颜色
shadow-[color]/n ：单独设置阴影颜色
shadow-inner ：内部阴影
shadow-none ：去除阴影透明度
opacity-[num] ：设置盒子的透明度
num为由0-1的小数
整数位的0可以省略：opacity-[.5]盒子的尺寸
计算方式
box-border box-sizing: border-box;
指定高度或宽度时包括元素的边框和填充
box-content box-sizing: content-box;
指定高度或宽度时不包括元素的边框和填充纵横比
任意值： aspect-[w/h]
aspect-auto aspect-ratio: auto;
aspect-square aspect-ratio: 1 / 1;
aspect-video aspect-ratio: 16 / 9;宽度
任意值： w-[*]
w-0 width: 0px;
w-px width: 1px;
w-auto width: auto;
w-full width: 100%;
w-screen width: 100vw;
w-min width: min-content;
w-max width: max-content;
w-fit width: fit-content;最小宽度
任意值： min-w-[*]
min-w-0 min-width: 0px;
min-w-full min-width: 100%;
min-w-min min-width: min-content;
min-w-max min-width: max-content;
min-w-fit min-width: fit-content;最大宽度
任意值： max-w-[*]
max-w-0 max-width: 0rem;
max-w-none max-width: none;
max-w-full max-width: 100%;
max-w-min max-width: min-content;
max-w-max max-width: max-content;
max-w-fit max-width: fit-content;
max-w-prose max-width: 65ch;
max-w-screen-sm max-width: 640px;
max-w-screen-md max-width: 768px;
max-w-screen-lg max-width: 1024px;
max-w-screen-xl max-width: 1280px;
max-w-screen-2xl max-width: 1536px;高度
任意值： h-[*]
h-0 height: 0px;
h-px height: 1px;
h-auto height: auto;
h-full height: 100%;
h-screen height: 100vh;
h-min height: min-content;
h-max height: max-content;
h-fit height: fit-content;最小高度
任意值： min-h-[*]
min-h-0 min-height: 0px;
min-h-full min-height: 100%;
min-h-screen min-height: 100vh;
min-h-min min-height: min-content;
min-h-max min-height: max-content;
min-h-fit min-height: fit-content;最大高度
任意值： max-h-[*]
max-h-0 max-height: 0px;
max-h-px max-height: 1px;盒子内外边距
内边距
p[t/b/l/r]-[*] ：指定的内边距
px-[*] ：左右内边距
py-[*] ：上下内边距
p-[*] ：所有方向边距
ps-[*] ：根据文本方向距离开始方向的内边距
padding-inline-start
pe-[*] :根据文本方向距离结束方向的内边距
padding-inline-end外边距
m[t/b/l/r]-[*] ：指定的外边距
mx-[*] ：左右外边距
my-[*] ：上下外边距
m-[*] ：所有方向边距
使用负值，在类名前面添加符号即可，如"-ml-[10px]"
ms-[*] ：根据文本方向距离开始方向的内边距
margin-inline-start
me-[*] :根据文本方向距离结束方向的内边距
margin-inline-end
以上的星号可以为auto，表示自动值子元素外边距
space-x-[*] ：子元素水平间距
space-y-[*] ：子元素垂直间距
使用负值，在类名前面添加符号即可，如"-space-y-[10px]"
space-x-reverse ：水平方向反向排序子元素
space-y-reverse ：垂直方向反向排序子元素盒子的定位
static position: static;
fixed position: fixed;
absolute position: absolute;
relative position: relative;
sticky position: sticky;
inset-[*] ：四个方向上的定位
inset-x-[*]：左右方向上的定位
inset-y-[*]：垂直方向上的定位
top-[*]、bottom-[*]、left-[*]、right-[*]
start-[*]、end-[*]
使用负值，在类名前面添加符号即可
以上的星号除了百分比或长度单位外，还可以是auto和full尺寸冲突
指定了width和height的元素如何处理指定的尺寸和元素本身的尺寸冲突，主要用于img和video
object-contain object-fit: contain; 保持原宽高比缩放，不会被裁切
object-cover object-fit: cover; 保持原宽高比缩放，会被裁切
object-fill object-fit: fill; 不考虑本身宽高，按照指定显示
object-none object-fit: none; 按照原有宽高
object-scale-down object-fit: scale-down; 将其缩小以适合其容器可见性
visible visibility: visible;
invisible visibility: hidden;
z-[*]
z-auto
使用负值，在类名前面添加符号即可内容的分列显示
columns-[*]
为数字则表示将内容平均分为的列数
为长度值表示每列的宽度
gap-[*] 等同于 gap-x-[*]，用于设置水平方向列间距内容的滚动条
overscroll-auto overscroll-behavior: auto;
overscroll-contain overscroll-behavior: contain;
overscroll-none overscroll-behavior: none;
overscroll-[x/y]-auto overscroll-behavior-y: auto;
overscroll-[x/y]-contain overscroll-behavior-y: contain;
overscroll-[x/y]-none overscroll-behavior-y: none;
auto：默认效果，当容器中滚动触底后继续滚动会带动父元素的滚动
contain：当容器中滚动触底后继续滚动父元素不会滚动，且滚动边界行为不变（“触底”效果或者刷新）
none：父元素不会滚动，且滚动边界行为也被阻止内容溢出
overflow-auto overflow: auto;
overflow-hidden overflow: hidden;
overflow-clip overflow: clip;
overflow-visible overflow: visible;
overflow-scroll overflow: scroll;
overflow-x-auto overflow-x: auto;
overflow-y-auto overflow-y: auto;
overflow-x-hidden overflow-x: hidden;
overflow-y-hidden overflow-y: hidden;
overflow-x-clip overflow-x: clip;
overflow-y-clip overflow-y: clip;
overflow-x-visible overflow-x: visible;
overflow-y-visible overflow-y: visible;
overflow-x-scroll overflow-x: scroll;
overflow-y-scroll overflow-y: scroll;