三、css技巧

发表于 | 分类于


1.如何实现div全屏展示？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">123</div>
div{
	width:100%;
	height:100%;
	background-color:#f40;
}
只是水平方向填满屏幕，竖直方向只是行高变为红色，根本没有全屏。 要全屏得要将html,body标签的高度都得设为100%

方式一：
html, body{
	height:100%;
};
div{
	width:100%;
	height:100%;
	background-color:#f40;
}
这样div就充满全屏了。

方式二

1
height : 100vh

方式三(考虑到兼容性)：

1
2
3
4
5
position: absolute,
top: 0,
left: 0,
right: 0,
bottom: 0

以上三种方式都可以设置全屏。方式一有个坑：我在reactjs中。不用标签选择器，而是用下面的class选择器，就不能全屏
.container{
width:100%;
height:100%;
background-color:#f40;
}
推荐使用方式2或者方式3


2.通配符选择器作用？

日常开发中，通配符选择最大作用是剔除 部分 html标签的默认样式。 比如 a标签自带的下划线,蓝色字体， ol li标签前面的实心圆。还有各标签默认的margin,padding等属性。
*{
margin:0;
padding:0;
list-style:none;
text-deoration:none;
color:#000
}

3. 让div相对于浏览器文档居中显示：







如果文档内容很多，有很多页，上下滚动时就会发现不会居中了。要想做到类似居中广告的效果：不论页面怎么滚动，都居中显示。只要将 position: fixed即可。代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
	<style>
		div{
			width:200px;
			height:200px;
			background-color:#f40;
			position:fixed;
			left:50%;
			top:50%;
			margin-left: -100px;
			margin-top: -100px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
这叫相对于可视区居中。上面那个absolute叫相对于文档居中。

###4. 如何样 让背景色随着 滚动条一直延续下去
html源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>如何样 让背景色随着 滚动条一直延续下去</title>
    <style type="text/css">
		.root{
			height: 100vh;
			background-color:#f40
		}
       
    </style>
</head>
<body>
	<div class="root">
		
	</div>
</body>
</html>

可以看到整屏都是红色。但是如果内容很多。比如我在div里添加很多个

内容。导致内容过多要滚动。此时就会发现滚动条下面的内容的背景色变为白色，不再是刚才设置的红色。
给body添加背景色就可以达到不论怎么滚动，背景色都是设置的颜色。代码如下：
1
2
3
body{
	background-color:#f40
}


###5. 多个标签如何共用相同的css属性？很简单，以逗号分隔即可。见如下代码：

1
2
3
4
5
6
7
8
9
10
.leftContainer li, .rightContainer li{
    padding-left: 15px;
    height: 45px;
    line-height: 45px;
    font-size: 13px;
    border-bottom: solid 1px #ddd;
}
.leftContainer li{
    background-color: #fff;
}

类似于京东商城app的分类页面。有左右两个list. 我这里都用li实现。其中左右的两边的li都有相同属性，唯独左侧的需要设置一个白色背景。参考如上方式即可。


###6. 如何设置底部边框
我在用li标签做list列表控件时，每个item要有个间隔线。我是这么写的

1
2
border-bottom-width: 1px;
border-bottom-color: #f40;

费了老大劲，结果间隔线就是不显示。换一种写法就可以了。

1
border-bottom: solid 1px #ddd;


###7. How to position a div after a fixed div?
网页顶部有一个搜索输入框。搜索结果会在输入框下面展示。当搜索结果内容较多，网页需要滚动时。我想要搜索框能一直在顶部显示。类似广告效果。很显然用position:fixed就可以做到。
我们知道 使用position:fixed就会使组件脱离文档标准流，而只是相对浏览器进行定位。那如何让内容显示在其之下并有一定间距呢？很简单。对内容区设置position:relative即可。见如下代码：

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
<head>
	<title>How to position a div after a fixed div</title>
	
	<style>
		*{
			margin:0;
			padding:0;
		}
		.header{
			width:100%;
			height:50px;
			background-color:#f40;
			position:fixed;
			z-index:990;
			top:0;
			left:0;
		}
		.content{
			height:200px;
			background-color:green;	
			position:relative;
			margin-top:55px;
		}
	
	</style>
</head>

<body>
	<div class="header"></div>
	<div class="content"></div>
</body>

只要给内容区的content设置 position:relative; 即可。

###8. 移动端浏览器禁止横向滚动，竖向可以滚动,代码：

1
2
3
4
html, body{
	overflow:hidden;
    overflow-y:auto;
}