1. 文字水平垂直居中
第1种写法：
<div class="div-container">文本内容</div>
.div-container{width: 200px;height: 200px;background-color: #ccc;display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}
第2种写法：
<div class="div-center-text">文本内容2</div>
.div-center-text {width: 200px;height: 200px; /* 设置div的高度 */margin-top: 10px;background-color: #ccc;text-align: center; /* 水平居中 */line-height: 200px; /* 行高与div高度相同实现垂直居中 */}
display 属性
主要用于控制元素的布局，display 属性可以设置元素的 内部和 外部 显示类型。
（1）外部显示类型：
- block：元素显示为块级元素，占用整个可用宽度并从新行开始。
- inline：元素显示为行内元素，与其他元素在同一行内并不会换行。
- inline-block：结合了 block 和 inline 的特征，允许元素占用宽度，但仍然可以在同一行内与其他元素一起显示。
（2）内部显示类型：
-
none：元素不显示在页面上。
-
grid：使元素成为 grid 布局的容器。
-
flex：使元素成为 flexbox 布局的容器。
容器属性：flex-direction、flex-direction
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
justify-content
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content
定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
儿子序选择器
:first-child 第一个儿子
:last-child 最后一个儿子
:nth-child(n) 第n个儿子
:nth-child(an+b) 连续多个
:nth-last-child(n) 表示倒数n个
代码示例如下：
- 只第一个标签显示该样式
.home-about_item:first-child {border-right:1px solid #FFFFFF;
}
- 最后一个标签不显示该样式
.home-about_item:not(:last-child) {border-right:1px solid #FFFFFF;
}
- 对偶数个p标签定义样式
p:nth-child(2n){
}
图片放大效果
.home-product_box--img img{display: block;width: 100%;height: 100%;cursor: pointer;transition: all .2s;
}
.home-product_box--child img:hover {//放大1.2倍并向上移动20像素：transform: scale(1.2) translateY(-20px);// 放大1.5倍并向右上角移动transform: scale(1.5) translate(20px, -20px);// 旋转45度transform: rotate(-45deg);
}
为防止其超出边框，在img的外层div添加样式
// 裁剪并隐藏溢出内容，不显示滚动条
overflow: hidden;
button按钮效果
- 添加hover效果
.button {cursor: pointer;
}
.button:hover {color: #XXXopacity: .8;
}
wow
- bounceInUp
这是一种弹跳进入效果，元素会从上方进入视窗，并且在进入的过程中会有弹跳的动作
<h1 class="title wow bounceInUp">Our Products</h4>
// 添加`data-wow-delay`延迟展示
<h2 class="categories wow bounceInUp" data-wow-delay=".2s">PRODUCT CATEGORIES</h1>
- fadeInUp
这是一种淡入并且向上移动的效果，元素会从上方进入视窗，并且在进入的过程中逐渐显示出来。使用方式同上
边框效果
- 外边框阴影
box-shadow: 0rem 0rem 0.7rem 0rem #B5B5B5;
- 外边框
border: 0.06rem solid #B5B5B5
- 将border和padding数值包含在width和height之内
好处：修改border和padding数值盒子的大小不变
box-sizing: border-box;
- 边框外轮廓
outline: 0.06rem solid #389FF2;outline-offset: 0.25rem; // 边框与轮廓的间距
添加背景图片
background-image: url(../assets/imgs/home/station_bg.png);// 图像将被调整大小以适应容器background-size: cover
添加icon
图标在线地址
<i class="ri-time-line"></i>
)
