常用的CSS样式、CSS变量、JS添加样式、JS实现hover事件

发表于 更新于 分类于
文本样式、自定义滚动条、阴影、CSS3动画、父盒子未撑开

CSS变量

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

使用方式

1
color: var(--blue);

语法

CSS 变量（Custom Properties）是一种保存和重复使用值的机制，可以在 CSS 中使用。

它们提供了一种更灵活和可维护的方式来管理和修改样式。

以下是 CSS 变量的用法：

定义变量：使用 “:root” 选择器为根元素定义变量。

在其中使用双破折号（–）来命名变量，并为其赋值。

例如：

1
2
3
:root {
  --color-primary: blue;
}

使用变量：使用 var() 函数在 CSS 中引用变量。

可以在任何可以设置属性值的地方使用该函数。

例如：

1
2
3
.element {
  color: var(--color-primary);
}

这将应用 --color-primary 变量的值作为颜色。

变量的继承：变量可以在 CSS 中进行继承。

当一个元素没有指定某个变量的值时，它会从父级元素中继承该变量的值。

例如：

1
2
3
4
5
6
7
8
9
10
11
:root {
  --color-primary: blue;
}

.parent {
  --color-primary: red;
}

.child {
  color: var(--color-primary); /* 继承父级的变量值 */
}

在这个例子中，.child 元素的颜色将是红色，因为它继承了 .parent 元素中的 --color-primary 变量的值。

动态修改变量：可以使用 JavaScript 动态修改 CSS 变量的值。通过操作根元素的样式属性或使用 CSSOM 来完成。例如：

1
document.documentElement.style.setProperty('--color-primary', 'green');

这将把 --color-primary 变量的值更改为绿色。

CSS 变量提供了更强大和灵活的样式控制方式，使得样式的修改和维护更加简单和可维护。

判断IE版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    #no-ie {
        display: none;
    }
</style>
<!--[if lt IE 8]>
<style>
    #no-ie {
        display: block;
    }
</style>
<![endif]-->
<body>
    <div id="no-ie">IE版本太低</div>
</body>

Flex容器适配子元素

Flex布局默认宽高是适配父元素的。

有时候我们想让Flex的容器的宽度随着子元素自动适配，可以这样设置：

1
2
3
4
5
.container {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

文本样式

文字竖排

1
2
writing-mode: vertical-lr;
letter-spacing: 4px;

禁止选择

1
2
3
4
5
6
7
moz-user-select: -moz-none;/*火狐浏览器*/
-moz-user-select: none;/*火狐浏览器*/
-o-user-select: none;/*opera浏览器*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;

字体

1
font-family: "Microsoft YaHei", "Arial", simsun, sans-serif;

字体小于12px

避免不支持CSS3浏览器的情况，我们也可以通过降级处理，将字体变回12px；最后兼容 IE：*font-size:10px;

1
2
3
4
5
.font{
    font-size : 12px;
    transform : scale(0.83,0.83) ;
    *font-size: 10px;
}

自动换行

1.强制换行：

1
2
3
4
/* 按字符截断换行 支持IE和chrome，FF不支持*/
word-break: break-all;
/* 按英文单词整体截断换行 以上三个浏览器均支持 */
word-wrap: break-word;

注意：单词换行需要父盒子为块级元素

2.自动换行：

1
2
word-wrap:break-word;
word-break:normal;

3.强制不换行：

1
white-space:nowrap;

行样式

1
2
3
line-height:200% !important;
letter-spacing:2px !important;
text-align: start;

字符间距

  • 中文字间距(letter-spacing)
  • 字母间距(word-spacing)

缩进

1
p{text-indent:2em;}

本来想让P标签内容首行缩进2个字，但是很不幸，文章有P标签下有img标签，导致图片也跟着缩进了，版式很糟糕

解决方法

text-indent遇到display:block 或者float 就不生效了，也就是给图片加上display:block 即可

示例

1
2
3
4
5
6
7
8
p{
    padding: 0 !important;
    text-indent: 2em;
}

p img{
    display: block;
}

下划线

1
p a{text-decoration:underline;}

文字前面小圆点

1
2
3
4
5
6
span.success {
  display: list-item;
  list-style-type: disc;
  margin-left: 10px;
  color: #3CB46C;
}

删除线

1
2
3
.z_del {
	text-decoration: line-through;
}

text-decoration属性有以下几个取值：

  • none：默认值，没有装饰线。
  • underline：文字带下划线。
  • overline：文字带上划线。
  • line-through：文字中间有一条删除线。

超出显示省略号

1
2
3
4
5
6
7
.z_ellipsis_item {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

关键属性

1
2
3
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

单选按钮

1
2
3
4
5
6
7
8
<div class="hl">
    <div class="hl_item">
        <input type="radio" v-model="hl" value="h" name="行列" id="m_radio01" /><label for="m_radio01">行</label>
    </div>
    <div class="hl_item ml6">
        <input type="radio" v-model="hl" value="v" name="行列" id="m_radio02" /><label for="m_radio02">列</label>
    </div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
input[type="radio"] {
  -webkit-appearance: none;
  margin: 0 4px;
  width: 16px;
  height: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 0.4em white, 0 0 0 0.15em;
  border-radius: 50%;
  transition: .2s;
  cursor: pointer;
  color: #b5c2c7;
}

input[type="radio"]:hover,
input[type="radio"]:checked {
  background: #1e70e2;
  box-shadow: inset 0 0 0 0.3em white, 0 0 0 0.15em;
}

input[type="radio"]:checked {
  background: #ffffff;
  box-shadow: inset 0 0 0 0.3em #1e70e2, 0 0 0 0.15em #1e70e2;
}

input[type="radio"]:focus {
  outline: 0;
}

圆角

1
2
3
-moz-border-radius: 6px; /* Mozilla浏览器的私有属性 */
-webkit-border-radius: 6px; /* Webkit浏览器的私有属性 */
border-radius: 6px 6px 6px 6px; /* 四个半径值分别是左上角、右上角、右下角和左下角 */

边框

1
border: 1px solid #ddd;

边框渐变

1
2
border: 1px solid #25b7e5;
border-image: linear-gradient(to right, #25b7e5, #1e58c4) 1;

背景

背景图

1
background: url('../images/arrow_up.png') center center no-repeat;

背景颜色渐变

1
2
3
4
5
6
7
8
9
10
.leftbar {
    font-size: 14px;
    writing-mode: vertical-lr;
    letter-spacing: 4px;
    border-radius: 4px;
    color: white;
    background: linear-gradient(#4496FC, #52AFFD, #58BAFD);
    padding-top: 6px;
    padding-bottom: 6px;
}

径向渐变

1
background-image: radial-gradient(circle at 50% 55%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20%, #00243A 70%, #00243A 100%);

其中

  • circle at 50% 55% 这个是设置中心点。

垂直渐变

1
2
3
.d_btn {
    background: linear-gradient(#f7af04, #f7a31c, #f59335);
}

背景渐变

image-20230326111831706 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.title2 {
    height: 40px;
    flex: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #028EDD;
    font-size: 30px;
    font-weight: bold;
    border-top: 1px solid #E9D261;
    border-bottom: 1px solid #E9D261;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0), #E9D261, rgba(0, 0, 0, 0)) 1;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), #D7DDBF, rgba(0, 0, 0, 0));
}

水平渐变

1
background: linear-gradient(90deg, red, blue);

禁用li样式

1
list-style: none;

相同间距等宽

每行3个元素，中间间距是10px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.banklist {
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .bankitem {
    width: calc((100% - 20px) / 3);
    margin-left: 10px;
    height: 200px;
    border: 1px solid #e9e9e9;
    box-sizing: border-box;
    background-color: white;
  }

  .bankitem:nth-child(3n+1) {
    margin-left: 0;
  }
}

注意

nth-child(3n+1)选择元素是从1开始的。元素第一个是1，n是从0开始算的。

calc((100% - 20px) / 3)这个表达式是支持乘除的。

滚动条

自定义滚动条

1
2
3
4
5
6
7
8
9
10
11
12
13
::-webkit-scrollbar { /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
  border-radius: 5px;
  background: #1890ff;
}

::-webkit-scrollbar-track { /*滚动条里面轨道*/
  background: #EDEDED;
}

隐藏滚动条

隐藏滚动条但是可以滚动

1
2
3
.content::-webkit-scrollbar {
  display: none;
}

Table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
table {
  width: 100%;
  height:100%;
  border-collapse: collapse;
  border-width: 1px;
  border-spacing: 0px;
}

tr,
td,
th {
  height: 40px;
  border: 1px solid #dcdee2;
  text-align: center;
  vertical-align: middle;
}

textarea

禁止拖拽大小

1
resize:none;

阴影

1
2
3
4
box-shadow: 0 0 10px 2px #ccc;
-webkit-box-shadow: 0 0 10px 2px #ccc;
-o-box-shadow: 0 0 10px 2px #ccc;
-moz-box-shadow: 0 0 10px 2px #ccc;

使用 CSS 的 box-shadow 属性我们可以为 HTML 元素设置阴影效果，属性的语法格式如下：

box-shadow: h-shadow v-shadow blur spread color inset;

语法说明如下：

  • h-shadow：必填参数，设置阴影水平方向的偏移量，可以为负值；
  • v-shadow：必填参数，设置阴影垂直方向的偏移量，可以为负值；
  • blur：可选参数，设置模糊的半径，值越大，模糊越大，阴影的边缘越模糊，不允许使用负值；
  • spread：可选参数，设置阴影的尺寸；
  • color：可选参数，设置阴影的颜色；
  • inset：可选参数，将默认的外部阴影 (outset) 改为内部阴影。

内部阴影

1
box-shadow: 2px 2px 5px #000 inset;

渐变同心圆

1
2
3
4
5
6
7
8
9
10
.img_div {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fe9237;
    box-shadow: 0 0 0 16px #fbb254, 0 0 0 30px #f3a546;
    color: white;
    font-size: 30px;
    line-height: 44px;
}

效果如图

image-20220319110851801

注意

box-shadow配置的颜色是自内到外的，并且后面的宽度一定要比前面的大，否则会被前面的遮住。

粘性定位

要想实现元素滚动后会定在固定的位置,如果用JS就是判断根据用户滚动的高度 把元素的位置移动一下，还是相对麻烦的。

但是使用粘性定位就很简单了

在每一个元素上面 加两行样式代码就搞定了

1
2
position: sticky;
top: 0;

粘性定位可以被认为是相对定位和固定定位的混合。

元素在跨越特定阈值前为相对定位，之后为固定定位。

兼容IE

https://github.com/wilddeer/stickyfill

HTML

1
2
<div class="sticky">
</div>

CSS

1
2
3
4
5
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

JS

静态页面中：

下载JS

https://raw.githubusercontent.com/wilddeer/stickyfill/master/dist/stickyfill.min.js

页面引用

1
<script src="path/to/stickyfill.min.js"></script>

使用

1
2
var elements = document.querySelectorAll('.sticky');
Stickyfill.add(elements);

Webpack中：

使用NPM

1
npm install stickyfilljs --save

使用

1
2
3
4
5
import Stickyfill from "stickyfilljs";

// js usage
let sticky_divs = document.querySelectorAll(".sticky");
Stickyfill.add(sticky_divs);

JS添加样式

方式1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var css = `
    .zmenu{
      background:#ffffff;
      border:1px solid #ddd;
      border-radius:4px;
    }

    .zmenu_item{
      height:30px;
      width:100%;
      display:flex;
      align-items:center;
      justify-content: center;
      cursor:pointer;
    }

    .zmenu_item:hover{
      background:#f0f0f0;
    }
    `;
var style = document.createElement("style");

if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName("head")[0].appendChild(style);

添加样式

1
2
3
4
let item2 = document.createElement("div");
item2.classList.add("zmenu_item");
item2.innerText = "删除";
menu_div.appendChild(item2);

方式2

1
2
3
4
5
menu_div.style.cssText = `
        background:#ffffff;
        border:1px solid #ddd;
        border-radius:4px;
      `;

方式3

1
2
3
4
5
menu_div.style.position = "absolute";
menu_div.style.top = y + "px";
menu_div.style.left = x + "px";
menu_div.style.width = 80 + "px";
menu_div.style.height = 60 + "px";

JS添加hover样式

方式1

1
2
3
4
5
6
7
8
9
10
11
let test_div = document.querySelector('.test');

// 鼠标移入事件
test_div.onmouseover = function() {
  document.querySelector('.test').style.color = 'blue'
}

// 鼠标移出事件
test_div.onmouseout  = function() {
  document.querySelector('.test').style.color = 'unset'
}

方式2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var css = `
    .zmenu{
      background:#ffffff;
      border:1px solid #ddd;
      border-radius:4px;
    }

    .zmenu_item{
      height:30px;
      width:100%;
      display:flex;
      align-items:center;
      justify-content: center;
      cursor:pointer;
    }

    .zmenu_item:hover{
      background:#f0f0f0;
    }
    `;
var style = document.createElement("style");

if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName("head")[0].appendChild(style);

添加样式

1
2
3
4
let item2 = document.createElement("div");
item2.classList.add("zmenu_item");
item2.innerText = "删除";
menu_div.appendChild(item2);

父盒子未撑开

有这么一种情况，子盒子的宽度比较大，父盒子没有设置宽度，但是父盒子没有被子盒子撑开，父盒子的宽度是父盒子的外部盒子的宽度。

解决方式有以下几种

方式1(推荐)

父盒子设置

1
display:inline-block;

inline-block的特点：

  1. 设置为inline-block的元素仍然呈现为inline元素，但是其中的内容作为block内容呈现。
  2. width，height，margin，padding属性有效。
  3. 相邻的元素仍然在同一行内排列。
  4. 如果不设置宽高，宽高根据内部计算。

方式2

父盒子设置

1
float:left;

方式3

父盒子设置

1
overflow: auto;

但是这种方式会导致滚动调在父盒子内部。

CSS3按钮

步骤

  1. 做出圆角图形
  2. 在圆角图像实现渐变
  3. 给图形加阴影
  4. 给文字加阴影

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.button {
  display: inline-block;
  outline: none;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3); /*文字阴影*/
  -webkit-border-radius: .5em; /*圆角*/
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); /*阴影*/
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.button:hover {
  text-decoration: none;
}

.button:active {
  position: relative;
  top: 0px;
}

.orange {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); /*渐变*/
  background: -webkit-linear-gradient(top, #faa51a, #f47a20);
  background: -moz-linear-gradient(top, #faa51a, #f47a20);
  background: -o-linear-gradient(top, #faa51a, #f47a20);
  
  /*IE不支持渐变，可以借助滤镜，但是滤镜无法实现圆角渐变，如果按钮要圆角可以把IE这两句去掉，即IE无渐变*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); 
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#faa51a, endColorstr=#f47a20)";
}

.orange:hover {
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -moz-linear-gradient(top, #f88e11, #f06015);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

.orange:active {
  color: #fcd3a5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  background: -moz-linear-gradient(top, #f47a20, #faa51a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

调用方式

1
<a href="#" class="button orange">Orange</a>

声音跳动效果

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="p-waves-group">
    <div class="p-waves p-waves__left">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="p-waves p-waves__right">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
.p-waves-group {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .p-waves {
        position: absolute;
        top: 9px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        @keyframes mywaves {
            0% {
                height: 8px;
                bottom: 0
            }
            25% {
                height: 14px;
                bottom: 0
            }
            50% {
                height: 20px;
                bottom: 0
            }
            75% {
                height: 14px;
                bottom: 0
            }
            100% {
                height: 8px;
                bottom: 0
            }
        }

        span {
            display: inline-flex;
            width: 3px;
            height: 8px;
            border-radius: 1.5px;
            background: hsla(0, 0%, 100%, .3);
            -webkit-animation: mywaves 1.2s ease-in-out infinite;
            animation: mywaves 1.2s ease-in-out infinite;
            margin-left: 4px;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            background-clip: content-box;
        }

        span:first-child, span:nth-child(5) {
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
        }

        span:nth-child(1), span:nth-child(4) {
            -webkit-animation-delay: .2s;
            animation-delay: .2s;
        }

        span:nth-child(2) {
            -webkit-animation-delay: .6s;
            animation-delay: .6s;
        }

        span:nth-child(3) {
            -webkit-animation-delay: .9s;
            animation-delay: .9s;
        }
    }

    .p-waves__left {
        left: 8px;
    }

    .p-waves__right {
        right: 8px;
    }
}

iOS Webview兼容

内部可视区域高度

浏览器兼容，内部可视区域高度，最好的解决方式是用js动态计算

方式1

1
2
3
4
5
6
7
8
9
10
.content {
  overflow-y: auto;
  width: 100vw;
  //浏览器运行的话，100vh慎用：
  //问题本身就是部分浏览器100vh是不包含地址栏的
  height: 100vh;
  //兼容性有待验证
  //fill-available表示撑满可用空间（包括高度，宽度）
  max-height: -webkit-fill-available;   
}

方式2

1
2
3
4
5
6
7
8
.content {
  overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

居中

通过display:flex

可以垂直居中和水平居中

父元素中添加样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.outdiv {
    width: 600px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1890ff;
}

.indiv {
    background: red;
    width: 200px;
    height: 100px;
}

通过绝对定位和transform

可以垂直居中和水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.outdiv {
  position: relative;
  width: 600px;
  height: 300px;
  display: block;
  background: #1890ff;
}

.indiv {
  background: red;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

通过绝对定位和Margin

可以垂直居中和水平居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.outdiv {
    position: relative;
    width: 600px;
    height: 300px;
    display: block;
    background: #1890ff;
}


.indiv {
    background: red;
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}

vertical-align

可以垂直居中和水平居中

支持vertical特性的对象是内联块，意思就是两个内联块中部对齐。

所以我们可以利用这个幽灵空白节点，让图片与这个空白节点的中部对齐就可以实现图片的垂直居中。

通过vertical-align:middle和伪元素实现CSS垂直居中。

但是有一点需要格外注意。

vertical-align生效的前提是元素的display:inline-block。

在使用vertical-align:middle的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。

vertical-align对齐的方法是寻找兄弟元素中最高的元素作为参考。

通过伪元素

具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.outdiv {
  width: 600px;
  height: 300px;
  display: block;
  background: #1890ff;
  text-align: center;
}

.outdiv::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.indiv {
  background: red;
  width: 200px;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
}

或者

利用line-height

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.outdiv {
  width: 600px;
  height: 300px;
  display: block;
  background: #1890ff;
  line-height: 300px;
  text-align: center;
}

.indiv {
  background: red;
  width: 200px;
  height: 100px;
  display: inline-block;
  vertical-align: middle;
}

还有其它的方式，但是随着浏览器的更新很多都无效了，推荐前两种。

文字居中

如果是让一段文字居中
需要在css样式中敲入：

1
2
3
.outdiv {
    text-align:center;
}

居中不生效

CSS margin:0 auto 不居中的解决方法

必须是块级元素

如果是块级元素居中
如div等元素,需要在css样式中敲入

1
2
3
4
.outdiv {
    width:400px;
    margin:0 auto;
}

如果是非块级元素居中
如video,a,canvas等元素，需要在css样式中敲入

1
2
3
4
5
.outdiv {
    display:block;
    width:400px;
    margin:0 auto;
}

calc计算错误

1
width: calc(100% - 40px);

Less 本身会进行计算。所以编译完就是calc(60%);

可以写成

1
width: calc(~"100% - 40px");

或者

1
width: ~"calc(100% - 40px)";

Vue引用样式

局部引用

引入方式

1
<style src="@/assets/scss/common.scss" lang="scss" scoped></style>

下面的方式会导致污染

在vue文件中的<style>内填写需要引用的文件

1
2
3
<style scoped lang="scss">
  @import "@/assets/scss/common.scss";
</style>

注意

使用@import引入样式文件，就算加scoped，其它没有引入的模块还是可以访问到你的样式，如果某个组件的类名一致，则就会被污染到。

全局引入

main.js

1
import './assets/css/common.css'