一、div
1. 边框阴影
使用box-show实现阴影效果，常用于图片、盒子阴影效果
.img{
/* 方向x 方向y 偏移量 模糊半径 阴影颜色 */
box-shadow: -5px 8px 1px 1px rgb(209, 209, 209);
}
box-shadow 属性还支持以下参数：
- inset：指定阴影是否在元素内部显示。如果设置了 inset，阴影将在元素内部显示，否则将在元素外部显示。
- spread：指定阴影的扩散半径，可以是正数、负数或零。正数将使阴影扩大，负数将使阴影缩小。
- multiple shadows：可以在一个 box-shadow 属性中设置多个阴影效果，多个阴影效果之间用逗号隔开。
2. 分布
2.1 水平分布
使用 display:flex 实现子div相对父div水平分布，配合margin:auto可以水平均匀分布；其中flex-wrap: wrap;决定是否换行（nowarp）为不换行
.planb {
display: flex;
text-align: center;
flex-wrap: wrap;
}
.planb .imag {
width: 600px;
margin: 15px auto;
}
2.2 多个div水平居中
通过赋予父元素text-align: center;及子元素display: inline-block;实现多个子元素居中排布
<div style="text-align: center;width: 100%;height: auto;">
<div style="display: inline-block;width: 100px;height: 50px;background-color: bisque;margin: 10px;">1</div>
<div style="display: inline-block;width: 100px;height: 50px;background-color: bisque;margin: 10px;">2</div>
</div>
2.3 多个div垂直居中
通过赋予父元素display:flex;及align-items: center;以实现多个子元素垂直居中排布
<div class="container">
<div class="child">子div 1</div>
<div class="child">子div 2</div>
<div class="child">子div 3</div>
</div>
<style>
.container {
display: flex;
flex-direction: column; /* 垂直排列子元素 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
height: 100vh;
}
.child {
width: 200px;
height: 50px;
border: 1px solid #000;
margin: 10px;
}
</style>
3. 内容
3.1 内容溢出overflow
overflow 是 CSS 的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。
包含的值：
-
auto
取决于用户代理。如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。 -
visible
内容不能被裁减并且可能渲染到边距盒（padding）的外部。 -
hidden
如果需要，内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。 -
clip
类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。 -
scroll
如果需要，内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。 -
overlay 已弃用
行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。
3.2 滚动条样式修改
当overflow:auto时，内容溢出会自动生成滚动条
/* 隐藏滚动条 */
/*
::-webkit-scrollbar {
display: none;
}
*/
/* 滚动条样式 */
::-webkit-scrollbar {
width: 10px; /* 滚动条宽度 */
height: 10px; /* 滚动条高度 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background: #f1f1f1; /* 滚动条轨道背景色 */
}
/* 滚动条thumb */
::-webkit-scrollbar-thumb {
background: #888; /* 滚动条thumb背景色 */
}
/* 滚动条hover状态的thumb */
::-webkit-scrollbar-thumb:hover {
background: #555; /* 滚动条hover状态的thumb背景色 */
}
详情可见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow
4. 悬浮hover
4.1 悬浮鼠标变手
.div:hover{
cursor:pointer
}
5. 动画
Transform 是 CSS3 中的一个属性，可以用来对元素进行 2D 或 3D 转换。Transform 可以通过设置一系列函数来实现不同的变换效果，Transform 属性不会改变元素的文档流位置，仅仅是在视觉上对元素进行了变换，常用的函数有：
- translate()：平移，可用来调整元素的位置。使用 translate() 函数可以在水平和垂直方向上移动元素。例如，可以使用 translate(10px, 20px) 来将元素向右移动 10 像素，向下移动 20 像素。
移动+阴影
.article:hover {
box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.2);
transform: translate(2px, -2px);
}
-
rotate()：旋转，可用来实现元素的旋转效果。使用 rotate() 函数可以将元素旋转指定的角度，角度可以用 deg、grad 或 rad 来表示。例如，可以使用 rotate(45deg) 来将元素顺时针旋转 45 度。
-
scale()：缩放，可用来调整元素的大小。使用 scale() 函数可以将元素的大小按指定的比例进行缩放。例如，可以使用 scale(2, 2) 来将元素在水平和垂直方向上都放大为原来的两倍。
变大+阴影
.img3:hover {
transform: scale(1.1);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
}
-
skew()：倾斜，可用来实现元素的倾斜效果。使用 skew() 函数可以将元素沿着水平或垂直方向进行倾斜。例如，可以使用 skew(30deg, 0) 来将元素在水平方向上倾斜 30 度。
-
matrix()：矩阵变换，可用来实现复杂的变换效果。使用 matrix() 函数可以通过一个 6x1 的矩阵来对元素进行变换。matrix() 函数可以实现 translate()、rotate()、scale() 和 skew() 函数的所有功能，也可以实现更加复杂的变换效果。
详情可见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
5. 文本
5.1 文本两端对齐
实现文本两端对齐（text justify）可以使用 text-align 属性，它有一个属性值为 justify，表示文本两端对齐。
- 但是，text-align: justify 对于英文单词或字母的排版效果较好，而对于中文排版可能会出现单词和字母之间的间距过大，导致排版效果不美观。因此，我们可以结合使用 word-spacing 和 letter-spacing 属性来调整单词和字母之间的间距，以达到更好的排版效果。
<style>
.text-justify {
text-align: justify;
text-justify: inter-ideograph; /* 中文文本两端对齐 */
word-spacing: 2px; /* 单词间距 */
letter-spacing: 1px; /* 字母间距 */
}
</style>
<div class="text-justify">
<p>这是一段文本，可以通过 text-align: justify 实现两端对齐的效果。同时，结合使用 word-spacing 和 letter-spacing 属性可以调整单词和字母之间的间距，以达到更好的排版效果。</p>
</div>
上述代码中，text-justify 属性设置为 inter-ideograph 表示中文文本两端对齐。通过调整 word-spacing 和 letter-spacing 属性的值，可以进一步调整单词和字母之间的间距，以达到更好的排版效果。
5.2 下划线到文字的距离
text-underline-offset 属性设置文本装饰下划线（使用 text-decoration 应用）与其原始位置的偏移距离。
/* 单个关键字 */
text-underline-offset: auto;
/* length */
text-underline-offset: 0.1em;
text-underline-offset: 3px;
/* percentage */
text-underline-offset: 20%;
二、img
1. 原生组件圆角
使用 object-fit: cover，对这些img、video进行保留原始比例的剪切、缩放或者直接进行拉伸等
.video {
border-radius: 10px;
object-fit: cover;
}
三、自适应
1. 媒体查询
媒体查询（Media Queries）是 CSS3 中的一个特性，用于根据不同的媒体类型、设备特性等条件来应用不同的 CSS 样式。通过媒体查询，可以使得网页在不同的设备上以不同的方式展现，从而实现响应式设计。
媒体查询通过在 CSS 中使用 @media 关键字来定义一个查询，其基本语法如下：
@media mediatype and (条件) {
/* CSS 样式 */
}
其中，mediatype 可以是 all（所有设备）、print（打印设备）、screen（屏幕设备）、speech（语音阅读器等）等。而条件则是指一些媒体特性，如屏幕宽度、高度、方向、分辨率等。
下面是一个示例，它会在屏幕宽度小于等于 600 像素时，应用特定的样式：
@media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
上述代码中，@media screen and 表示只应用于屏幕设备，(max-width: 600px) 表示屏幕宽度小于等于 600 像素时，应用样式。这样，当浏览器窗口的宽度小于等于 600 像素时，背景颜色会变成黄色。
2. 流体布局
流体布局（Fluid Layout）是响应式 Web 设计中常用的一种布局方式，它的特点是页面布局随着浏览器窗口大小的改变而自动调整，以适应不同屏幕和设备的显示。
下面是一个示例，它的宽度和高度将会随父div的大小二变化
.ullist img {
width: 80%;
height: 100%;
}
在流体布局中，页面元素的宽度不是固定的，而是使用百分比、em、rem 等相对单位来设置，使得页面元素可以根据浏览器窗口大小进行自适应。具体来说，流体布局常用的技术包括以下几种：
-
使用百分比：将页面元素的宽度设置为百分比，以相对于其父元素的宽度计算。例如，将一个容器的宽度设置为 80%，则该容器的宽度将会随着其父元素的宽度改变而自适应。
-
使用 em 和 rem：将页面元素的宽度设置为 em 或 rem，以相对于其父元素或根元素的字体大小计算。例如，将一个容器的宽度设置为 20em，则该容器的宽度将会随着其父元素的字体大小改变而自适应。
-
使用 max-width 和 min-width：使用 max-width 和 min-width 属性来限制页面元素的最大和最小宽度，以避免在屏幕过大或过小时出现不必要的空白或重叠现象。
通过使用流体布局，可以使得页面在不同设备和屏幕大小下都能呈现出最佳的布局效果，提升用户的浏览体验。不过，流体布局也有其局限性，例如在设计某些特定功能或交互时可能需要使用绝对布局或固定宽度的元素，这时需要在设计时进行权衡和取舍。
3. window.innerWidth
window.innerWidth 是一个 JavaScript 属性，返回当前窗口（浏览器）的宽度，即可视区域宽度，以像素为单位。它不包括滚动条的宽度，如果需要包含滚动条的宽度，可以使用 document.documentElement.clientWidth 属性。
以函数通过window.innerWidth当前窗口（浏览器）的宽度并作出相应的措施
该函数须在created等钩子函数调用才能生效
get() {
this.$nextTick(() => {
const screenWidth = window.innerWidth
if (screenWidth < 768) {
this.abImg = 'https://i.tosoiot.com/20230509/t/8f00a73bf95a98df.jpg'
}
})
}
扫一扫
1734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
