【前端】CSS小技巧


阅读数:   

1_文字垂直居中

1
2
3
<div class='father'>
    <div class="son">这是要居中的文字</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 通用方法，单行多行文字均适用 */ 
.father {
    display: table;
    width: 100%;
}
.son {
    display: table-cell;
    height: 100px;
    background: blue;
    color: #fff;
    vertical-align: middle;
    text-align: center;
}
1
2
3
4
5
6
7
8
/* 单行文字垂直居中 line-height方法 */ 
.son {
    height: 100px;
    line-height: 100px;
    background: blue;
    color: #fff;
    text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 单行文字垂直居中 伪元素方法(适用于line-height不确定的时候，如高度是百分比) */ 
.father {
    height: 200px;
}

.son {
    height: 50%;
    background: blue;
    color: #fff;
    text-align: center;
}

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

参考：Sticky Footer，完美的绝对底部

说明：这里仅记录2种比较认可的css实现方式，它们都有一定的缺陷，看具体的业务需求使用。JS实现较为简单，不做说明。

1
2
3
4
5
6
7
8
<div class="wrapper">
    <!-- 页面主体内容区域 -->
    <div class="content">
    	lorem
    </div>
    <!-- 需要做到 Sticky Footer 效果的页脚 -->
    <div class="footer"></div>
</div>

实现方案一：absolute

这个方案需指定 html、body 100% 的高度，且 content 的 padding-bottom 需要与 footer 的 height 一致。也就是说，对于footer高度不确定的情况，该方式就比较头疼了。margin负值，calc也都是和该原理差不多。好处就是兼容好！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 150px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 150px;
    background-color: black;
}

实现方案二：Flex布局

允许页脚的高度是可变的，但是有兼容性问题，见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

1
2
3
4
5
6
7
8
9
10
11
html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

PS: 原文中table的方式有一个缺陷就是容易触发浏览器的重绘回流，这是table布局的固有缺陷，因此不适合用在顶层DOM结构中，会造成性能影响。

3_flex布局最后一行元素左对齐

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#app {
				width: 800px;
				max-width: 100%;
				border: 5px solid #000;
			}
			
			ul.list {
				list-style: none;
				padding: 0;
				margin: 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			
			ul.list .item {
				width: 250px;
				height: 250px;
			}
			
			ul.list .item img {
				max-width: 100%;
			}
			
			/* 如果3列以上可以用这个类来填充差的元素 */
			ul.list .item.placeholder {
				width: 250px;
				height: 0;
			}
			
			ul.list::after {
				content: '';
				width: 250px;
				/* height: 0; */
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul class="list">
				<li class="item" v-for="item in result" :key="item.id">
					<img :src="item.url" alt="">
				</li>
				<!-- <li class="item placeholder"></li> -->
				<!-- <li class="item placeholder"></li> -->
			</ul>
		</div>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					result: []
				},
				created(){
					axios.get('https://jsonplaceholder.typicode.com/photos?_limit=6').then(({ data }) => {
						this.result = data
					})
				}
			})
		</script>
	</body>
</html>

4_使用伪元素扩大点击区域

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.close {
				position: relative;
				float: right;
			}
			.close::after {
				content: '';
				position: absolute;
				left: -10px;
				right: -10px;
				top: -10px;
				bottom: -10px;
				/* background-color: orange; */
			}
		</style>
	</head>
	<body>
		<div class="wapper">
			<div class="header">
				<span class="close" onclick="alert('你好!')">
					X
				</span>
			</div>
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis nihil ducimus delectus autem magni quam earum dolorum voluptatum tempora doloremque et excepturi quaerat beatae odio inventore. Tempora facere dolorum consequuntur.
			</div>
		</div>
	</body>
</html>

5_禁止元素行为(类似disabled的效果)

1
2
3
4
5
/* 加上类is-disabled */
.is-disabled * {
    color: #6c757d;
    pointer-events: none;
}

6_禁止复制

1
2
3
4
5
6
<style>
    /* 该属性不能继承，但是在部分浏览器上又可以 */
    .disabled-copy * {user-select: none}
</style>

<div class="disabled-copy">我是一段带粘贴的文字</div>

参考：https://segmentfault.com/q/1010000021197092

这里js的实现可以使用下面方式禁止复制黏贴框弹出

1
><div oncontextmenu="return false">我是一段带粘贴的文字</div>

7_样式穿透

在Vue项目中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时候我们就需要样式穿透来实现我们想要的效果。

  1. >>> 只作用于 css
1
2
3
4
5
<style scoped>
外层 >>> 第三方组件 {
  \样式\
}
</style>
  1. ::v-deep 只作用于 sass
1
2
3
4
5
<style lang="scss" scoped>
外层 ::v-deep 第三方组件 {
  \样式\
}
</style>
  1. /deep/ 只作用于 less
1
2
3
4
5
<style lang="less" scoped>
外层 /deep/ 第三方组件 {
  \样式\
}
</style>

8_固定容器宽高比

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定容器宽高比</title>
		<style>
			.container {
				width: 50%;
				margin: 20px auto;
				background-color: red;
				color: #fff;
			}
			.type0 {
				height: 300px;
			}
			.type1 {
				aspect-ratio: 4 / 3;
			}
			.type2 .inner {
				position: relative;
				height: 0;
				padding-bottom: 75%;
			}
			.type2 .inner .inner-container {
				position: absolute;
				insert: 0;
			}
		</style>
	</head>
	<body>
		<div class="container type0">不固定宽高比</div>
		<div class="container type1">通过CSS3的aspect-ratio固定宽高比</div>
		<div class="container type2">
			<div class="inner">
				<div class="inner-container">通过padding的百分比是基于包含块的宽度原理撑开容器来固定宽高比（absolute的包含块是定位的祖先元素或者body，fixed的包含块是transform的元素或者视图，其他的包含块就是父级元素）</div>
			</div>
		</div>
	</body>
</html>

9_滚动条样式美化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  border-radius: 4px
}

::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 8px
}

::-webkit-scrollbar-thumb:window-inactive {
  background: transparent
}

推荐阅读

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/229e087e.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议
置顶

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true