css写法汇总

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: #XXX
	opacity: .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>