css手册完整版(css离线手册)
大家好，今天给各位分享css手册完整版的一些知识，其中也会对css离线手册进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
css手册总结(二)
分拆纵向独立属性。为元素设置上、下外边距。
分拆横向独立属性。为元素设置上、下外边距。
分拆独立属性。为元素单独设置上、右、下、左4个方向的内边距。
属性值描述:
1.阴影类型：此参数可选，默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影。
2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边
3.Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部。
4.阴影模糊半径：此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊
5.阴影扩展半径：此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小
6.阴影颜色：此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
注：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。
3.border-image-width：定义元素边框图像的厚度。
该属性用于指定使用多厚的边框来承载被裁剪后的图像。
当该属性省略未定义时，因为默认值是 1，所以该属性的计算值会是 1* border-width，相当于会直接使用 border-width的定义。
4.border-image-outset：定义边框图像从边框边界向外偏移的距离。
5.border-image-repeat：定义分割图像怎样填充边框图像区域。
2.background-image:定义元素使用的背景图像。
3.background-repeat:定义元素的背景图像如何填充。
4.background-attachment：定义滚动时背景图像相对于谁固定。
5.background-position:指定背景图像在元素中出现的位置。
example:假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
要注意的是：设置3个或4个值，偏移量前必须有边界关键字。也就是说，形如：10px bottom 20px，这样的参数设置是错误的，因为10px前面没有关键字。
6.background-origin:指定的背景图像计算background-position时的参考原点(位置)。
取值：
border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像。（默认）
content-box：从content区域开始显示背景图像。
注意，如果设置background-origin后，设置background-position会相对于background-origin设置的位置做参考来偏移背景图，比如设置在border开始显示图片，这是设置background-position：left 10px top 10px是相对于边框进行左边偏移10px上面偏移10px，如果没设置background-origin，默认是相对于padding处进行偏移。
7.background-clip：指定对象的背景图像向外裁剪的区域。
取值：
border-box：从border区域（含border）开始向外裁剪背景。(默认)
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。
8.background-size：定义背景图像的尺寸大小
TailwindCss速查手册
TailwindCss速查手册
Tailwind CSS是一个功能强大的实用程序优先的 CSS框架，它提供了大量的类名来快速构建和设计用户界面。以下是一些常用的 Tailwind CSS缩写及其对应意义的速查手册：
一、布局
w：设置元素的宽度（width）。max-w：设置元素的最大宽度（max-width）。h：设置元素的高度（height）。max-h：设置元素的最大高度（max-height）。m：设置元素的外边距（margin）。mt：设置元素的上外边距（margin-top）。
mb：设置元素的下外边距（margin-bottom）。
ml：设置元素的左外边距（margin-left）。
mr：设置元素的右外边距（margin-right）。
p：设置元素的内边距（padding）。pt：设置元素的上内边距（padding-top）。
pb：设置元素的下内边距（padding-bottom）。
pl：设置元素的左内边距（padding-left）。
pr：设置元素的右内边距（padding-right）。
二、文本样式
font：设置字体家族（font-family）。text：设置文本颜色、文本对齐方式、文本转换和字体大小。leading：设置行高（line-height）。tracking：设置字母间距（letter-spacing）。uppercase：将文本转换为大写（text-transform: uppercase）。lowercase：将文本转换为小写（text-transform: lowercase）。三、背景和边框
bg：设置背景颜色（background-color）。border：设置边框样式、边框宽度和边框颜色。rounded：设置边框圆角（border-radius）。shadow：设置盒子阴影（box-shadow）。四、弹性盒子布局
flex：将元素设置为弹性盒子容器（display: flex）。justify：设置弹性盒子内项目的对齐方式（justify-content）。items：设置弹性盒子内项目的对齐方式（align-items）。self：设置弹性盒子内单个项目的对齐方式（align-self）。order：设置弹性盒子内项目的排列顺序（order）。flex-grow：设置弹性盒子内项目的放大比例（flex-grow）。flex-shrink：设置弹性盒子内项目的缩小比例（flex-shrink）。五、网格布局
grid-cols：设置网格列的模板（grid-template-columns）。grid-rows：设置网格行的模板（grid-template-rows）。gap：设置网格项之间的间距（grid-gap）。六、响应式设计
sm, md, lg, xl：分别对应移动设备、平板、桌面和大屏幕设备的断点。hover：设置鼠标悬停时的样式。focus：设置元素获取焦点时的样式。七、其他常用缩写
边框和分隔符
divide：设置分隔符（border-color, border-style, border-width）。
divide-x：设置水平分隔符。
divide-y：设置垂直分隔符。
border-collapse：设置边框是否合并。
Flexbox尺寸和排列
flex-wrap：设置弹性盒子是否换行。
flex-row, flex-row-reverse, flex-col, flex-col-reverse：设置弹性盒子的方向。
flex-1...flex-12：设置 flex-grow、flex-shrink和 flex-basis属性。
gap-x：设置水平包裹在对象之间的间距。
gap-y：设置垂直包裹在对象之间的间距。
space-x：设置水平排列中对象之间的空间。
space-y：设置垂直排列中对象之间的空间。
Z-index
z-{n}：设置 z-index的值，其中 n为正整数。
动画
animate-{name}：向元素添加动画（使用@keyframes中定义的动画名称）。
列表样式
list-style-{type}：设置列表项的类型（如 disc, decimal, decimal-leading-zero）。
转换和过渡
transform：让元素旋转、缩放、倾斜、平移等。
transition-{property}：用于添加一个过渡效果，{property}是必需的。
八、颜色和字体
颜色
text-{color}：设置文本颜色。
bg-{color}：设置背景颜色。
border-{color}：设置边框颜色。
fill-{color}：设置 SVG填充颜色。
stroke-{color}：设置 SVG描边颜色。
字体权重
font-thin：字体细。
font-light：字体轻。
font-normal：字体正常。
font-medium：字体中等。
font-semibold：字体半粗。
font-bold：字体粗。
font-extrabold：字体特粗。
font-black：字体黑。
九、显示和隐藏
hidden：隐藏元素（display: none）。invisible：隐藏元素，但仍保留该元素的布局和尺寸。visible：显示元素。十、清除浮动
clear-{direction}：清除某个方向的浮动效果。十一、容器
container：将内容限制在最大宽度的容器内部。mx-auto：实现水平居中（margin-left和 margin-right设置为 auto）。通过掌握这些常用的 Tailwind CSS缩写及其对应意义，你可以更快速地开发出具有良好用户体验的 Web应用程序。
如果你还想了解更多这方面的信息，记得收藏关注本站。