【前端】常用属性及实例

1. 水平居中

1）设置margin

<style>
	div {	
		margin: 0 auto;   
	}
style>
<div>div>
1
2
3
4
5
6

2）设置相对定位

<style>
	div {	
		position: relative; /*相对定位*/
		left: 50%; /*往左移动父级宽度的一半*/
		transform: translateX(-50%); /*往右移动自身宽度的一半*/
	 }
style>
<div>div>
1
2
3
4
5
6
7
8

---

2. 水平垂直居中

1）flex布局实现水平垂直居中

<style>
    .box {
        /* 设置flex布局 */
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }
style>
<div class="box">
    <div class="col">div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13

2）绝对定位实现水平垂直居中

<style>
    .box {;
        /* 相对定位 */
        position: relative;
    }
    .col {
        /* 绝对定位 */
        position: absolute;
        /* 右偏移父级宽度的一半 */
        left: 50%;
        /* 下偏移父级高度的一半 */
        top: 50%;
        /* 向上和向左移动自身高度和宽度的一半 */
        transform: translate(-50%, -50%);
    }
style>
<div class="box">
    <div class="col">div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3）网格布局实现水平垂直居中

<style>
    .box {
        /* 设置网格布局 */
        display: grid;
        /* 水平垂直居中 */
        place-items: center;
    }
style>
<div class="box">
    <div class="col">div>
div>
1
2
3
4
5
6
7
8
9
10
11

4）文字水平垂直居中

(1) 单行文字垂直居中

🔰解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中；

<style>
    .col {
        margin: 1px;
        background: pink;
        width: 150px;
        height: 150px;
        text-align: center;
        font-size: 20px;
        /*文字行高等于盒子高度*/
        line-height: 140px;
    }
style>
<div class="col">你好啊div>
1
2
3
4
5
6
7
8
9
10
11
12
13

(2) 多行文字垂直居中

<style>
    .box {
        background: pink;
        width: 350px;
        height: 150px;
        line-height: 150px;
    }
    .col {
        display: inline-block;
        line-height: 20px;
        vertical-align: middle;
    }
style>
<div class="box">
    <div class="col">
        对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。
    div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(3) 图片/表单和文字垂直居中

🔰给图片/表单设置 vertical-aligin：middle; 属性就可以让文字和图片/表单垂直居中了。

属性值	解析
baseline
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

---

3. css样式设置小技巧

1）改变输入框光标颜色

🔰给表单元素设置 caret-color 样式，就可以改变光标颜色；
input { caret-color: cyan; }

2）去掉输入框默认的边框

🔰给表单元素设置 outline 样式，就可以去掉默认的蓝色边框；
input { outline: none; }

3）将文本域设置为不可拖拽

🔰给表单元素设置 resize 样式，就可以将文本域变为不可拖拽；
textatea { resize: none; }

4）元素内容两端对齐

🔰给元素设置 text-align-last 样式，就可以使内容两端对齐；
text-align-last: justify;

5）输入框提示文本样式设置

🔰给表单元素设置 input::placeholder 选择器，就可以对输入框提示文本进行样式设置；
input::placeholder {}

6）改变表单组件的颜色

🔰给表单元素设置 accent-color 样式，就可以改变表单元素的颜色；
accent-color: cyan;

7）给元素设置纵横比

🔰给元素设置 aspect-ratio 样式，就可以通过宽高比例设置元素的尺寸；
aspect-radio: 4/3;

8）文本颜色渐变

/* 设置渐变色背景*/
background: linear-gradient(90deg, #fa709a, #fee140);
/* 此属性为背景裁剪，值为text代表，把背景按文字形状去裁剪。*/
-webkit-background-clip: text; 
/* 文本颜色为透明色*/
color: transparent;
1
2
3
4
5
6

9）单行文字溢出显示省略号

/* 1. 先强制一行内显示文本*/
white-space: nowrap;
/* 2. 超出部分隐藏*/
overflow:hidden;
/* 3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
1
2
3
4
5
6

10）多行文字溢出显示省略号

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示*/
display: -webkit-box;
/* 限制在一个块级元素显示的文本行数*/
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;
1
2
3
4
5
6
7
8

11）禁止多次点击导致的文字选中

.targetDiv {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
1
2
3
4
5
6

12）网页置灰

利用css滤镜(filter)控制灰度(grayscale)：

html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);/*灰度*/
    filter: gray;
}
1
2
3
4
5
6
7
8
9

---

4. 自定义组件

1）自定义滚动条

/*滚动条外壳进行设置*/
::-webkit-scrollbar {
    width: 8px; // 设置竖进度条框宽度
    height: 8px; // 设置横进度条框高度
}
/*滚动条本身进行设置*/
::-webkit-scrollbar-thumb {
    // 设置进度条背景颜色
    background: linear-gradient(to right, yellow, pink);
    border-radius: 4px;
    border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12

2）自定义文本复制

<span>我们都是好孩子span>  
<img src="./img/复制.png" onclick="copy"/> 

<script>
	// 获取要复制的文本内容
    var text = document.querySelector('span').innerText;
    copy(text); // 调用复制执行函数
    // 复制
    function copy(txt) {
        navigator.clipboard.writeText(txt);
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12

3）自定义进度条

<div class="box">
	<div class="ds">div>
div>
<div class="txt">
	正在为你加载，请等候。<i>i>
div>

<script>
    var ds = document.querySelector('.ds');
    var i = document.querySelector('i');
    var num = 0;
    var ss = 'width: 0%';
    gunDong(); // 进度条开始
    function gunDong() {
        var sss = 0;
        var time = setInterval(() => {
            sss++;
            if (sss >= 100) {
                ds.style.width = '100%';
                i.innerHTML = "100%";
                if (sss == 105) {
                    clearInterval(time);
                }
            } else {
                ds.style.width = sss+'%';
                i.innerHTML = sss+ '%';
            }
        }, 200);
    }
script>
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

4）文件上传

鼠标经过样式改变

input {
    display: none;
}

label {
    height: 20px;
    width: 180px;
    border-radius: 6px;
    border: 1px dashed #999;
}

label:hover {
    color: cyan;
    border: 1px dashed cyan;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5）滑动拼图验证码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            width: 375px;
            margin: 100px auto;
        }
        .check {
            width: 375px;
            height: 250px;
            background-size: 100% 100%;
            background-image: url(./image/1.jpg);
        }
        .check-content {
            position: absolute;
            top: 100px;
            left: 280px;
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #fff;
        }
        .check-block {
            width: 50px;
            height: 50px;
            border: 1px solid #fff;
            background-image: inherit;
            background-repeat: inherit;
            background-size: 375px 250px;
            background-position: -280px -100px;
            position: absolute;
            top: 100px;
            left: 10px;
        }
        .drag {
            width: 375px;
            height: 50px;
            background-color: #e3e3e3;
            margin-top: 10px;
            position: relative;
        }
        .drag-block {
            width: 50px;
            height: 50px;
            background-color: yellowgreen;
            z-index: 10;
            position: absolute;
            top: 0;
            left: 0;
        }
        .drag-tips {
            width: 95%;
            height: 100%;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
            font-size: 12px;
            color: #8a8a8a;
        }
    style>
head>
<body>
    <div class="box">
        <div class="check">
            <div class="check-content">div>
            <div class="check-block">div>
        div>
        <div class="drag">
            <div class="drag-block">div>
            <div class="drag-tips">按住左边按钮向右拖动完成上方图像验证div>
        div>
    div>
body>
<script>
    // 获取校验区域
    const drag = document.querySelector('.drag');
    // 获取两个滑块和拖动按钮
    const dragBlock = document.querySelector('.drag-block');
    const content = document.querySelector('.check-content');
    const check = document.querySelector('.check-block');

    // 随机生成一个x,y坐标 用于设置校验块的位置
    let x = parseInt(Math.random() * 325)
    let y = parseInt(Math.random() * 200)
    
    // 定义运动状态 如果为true 代表鼠标已经按下
    let animating = false

    // 存储鼠标按下的x坐标
    let startX = 0

    // 存储移动的位置
    let offsetX = 0

    // 设置拼图位置随机
    content.style.cssText = `left:${x}px; top:${y}px`
    check.style.cssText = `background-position: -${x}px -${y}px; top: ${y}px`

    // 添加鼠标移动事件
    drag.addEventListener('mousemove', e => {
        // 判断运动状态
        if(!animating) {return}
        // 计算移动位置
        offsetX = e.pageX - startX;
        // 判断可移动距离是否正确
        if(offsetX < 0 || offsetX > 350) {return}
        // 修改可移动盒子的x 轴坐标
        dragBlock.style.transform = `translateX(${offsetX}px)`
        // 设置被验证滑块left值
        check.style.left = `${offsetX}px`
    })

    // 添加鼠标按下事件
    dragBlock.addEventListener('mousedown', (e) => {
        animating = true
        startX = e.pageX
    })

    // 添加鼠标弹起事件
    document.addEventListener('mouseup', () => {
        animating = false
        // 根据移动的位置判断是否成功
        if(offsetX >= x - 2 && offsetX <= x + 2) {
            alert('成功')
        } else {
            // 验证失败，滑块和被验证快恢复坐标
            dragBlock.style.transform = `translateX(0px)`
            check.style.left = `0px`
        }
    })
script>
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

---

3. 背景颜色

1）RGBA

调节颜色和透明度

2） HSLA

调节色调，饱和度，亮度，透明度

3）盒子模糊

内容，背景一同变模糊
filter: blur(3px);

4）玻璃感模糊

只有背景发生变化，内容没有影响
backdrop-filter: blur(8px);

5 ）背景颜色渐变

（1）线性渐变

1. 从上到下
background: linear-gradient(#fff, #000);

2. 从左到右
background: linear-gradient(to right, #fff, #000);

3. 对角线
background: linear-gradient(to bottom right, #fff, #000);

4. 自定义占位大小
background: linear-gradient(#fff 10%, #000 60%);

5. 自定义角度
background: linear-gradient(37deg, #fff, #000);

（2）径向渐变

1. 颜色结点均匀分布
background: radial-gradient(#fff, #000);

2. 颜色结点不均匀分布
background: radial-gradient(#fff 10%, #000 60%);

3. 设置形状
background: radial-gradient(circle, #fff, #000);

4. 重复径向渐变
background: repeating-radial-gradient(#DC1010 5%, #90ED5A 10%, #2F57E8 15%);

5. 设置大小
background: radial-gradient(60% 55%,#DC1010, #90ED5A, #2F57E8);

---

4. 固定在版心右侧位置

1. left: 50%;：走到浏览器可视区(也可以看做版心)的一半位置；
2. margin-life: 版心宽度的一半距离;：多走版心宽度的一半位置；

---

5. CSS 三角

🔰网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标；

.box {
       width: 0;
       height: 0;
       /*边框颜色设置为透明*/
       border: 50px solid transparent;
       border-top-color: pink;
   }
1
2
3
4
5
6
7

          

实例

---

6. CSS 初始化

1）内外边距清零

* { margin: 0;
    padding: 0; }
1
2

2）em 和 i 斜体的文字不倾斜

em, i { font-style: normal; }
1

3）去掉 li 的小圆点

li { list-style: none; }
1

4）解决图片底侧有空白缝隙的问题

img { vertical-align: middle; }
1

5）鼠标经过 button 按钮，变小手

button { cursor: pointer;  }
1

6）取消 a 链接下划线

a { text-decoration: none;}
1

7. 代码直接展示在页面

1）直接在pre标签内写入要展示的代码

<pre>
    ::-webkit-scrollbar {
        width: 8px; // 设置竖进度条框宽度
        height: 8px; // 设置横进度条框高度
    }

    ::-webkit-scrollbar-thumb {
        // 设置进度条背景颜色
        background: linear-gradient(to right, yellow, pink);
        border-radius: 4px;
        border: 1px solid red;
    }
pre>
1
2
3
4
5
6
7
8
9
10
11
12
13

8. 根据内容自适应列数

9. css响应式布局

1. 淘宝无限适配：结合rem，动态修改元素（html）的fontSize
   

2. 子元素占一行，平分父级宽度，布满父级
   
   

3. 子元素设置flex-basis宽度，父级宽度放不下，进行换行
   
   

4. css Grid