网页常用css总结：上

最新推荐文章于 2024-04-27 12:50:08 发布

梦忆长安

最新推荐文章于 2024-04-27 12:50:08 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/qq_44971038/article/details/103370462

版权

css样式很多很多，这里不会一一介绍，仅会将最最常用的罗列出来；

display

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				display: none; 
				border: red 1px solid;
			}
			div{
				display: inline;
				border: blue 1px solid;
			}
			#u1{
				display: block;
				border: black 1px solid;
			}
			#u2{
				display: inline-block;  /*使span标签可以使用块级css样式*/
				height: 36px;
				width: 144px;
				border: red 1px solid;
			}
		</style>
	</head>
	<body>
		<p>我在家乡</p>
		<div>我在家乡</div>
		<span id="u1">
			我在家乡
		</span>
		<span id="u2">我在家乡</span>
	</body>
</html>

display的作用就是使行级元素和块级元素相互转换；

none 就是不显示，即在浏览器端是看不到使用该样式的元素的；
inline 将块级元素转成行级元素；
block 将行级元素转成块级元素；
inline-block 将行级元素从意义上转成块级元素，即不发生变化，但可以使用块级元素才支持的样式；

margin

我们一连串写很多个行级标签时，标签会挤在一起，想要使各个标签之间存有我们想要的间距该怎么办呢？这时候就是margin登场的时候了，margin可以设置元素的外边距；看代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border: cyan 1px solid;
			}
			a{
				border: blue 1px solid;
			}
			span{
				/*margin:12px;*/
				/*margin:10px 20px;*/
				/*margin: 10px 20px 30px;*/
				/*margin: 10px 20px 30px 50px;*/
				margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 30px;
				margin-left: 40px;
				border: red 1px solid;
				display:inline-block;
				
			}
		</style>
	</head>
	<body>
		<div>我在家乡</div>
		<a href="http://www.baidu,com">百度</a><span>kongbai</span><a href="http://www.qq,com">腾讯</a>
		<div>我在家乡</div>
	</body>
</html>

为了便于理解，我们一共写了5个标签，上下两个div标签，中间两个a标签夹一个span标签，这里以中间的span标签为例来说margin样式的作用；如果我们不使用margin样式，我们得到的会是这种界面：

后面没有截完；我们可以看到标签全挤在了一起；然后我们加上上述代码的margin样式：

标签之间有了空隙是不是？看一波注释的内容

margin:12px 中间的span标签上下左右与其他标签的间距都是12px；
margin:10px 20px 中间的span标签上下与其他标签的间距为10px，左右与其他标签的间距为20px；
margin:10px 20px 30px 中间的span标签与上面的标签的间距为10px，与左右其他标签的间距为20px，与下面的标签的间距为30px；
margin:10px 20px 30px 40px 中间的span标签与上面的标签的间距为10px，与右边的标签的间距为20px，与下面的标签的间距为30px，与左面的标签的间距为40px；
margin-top/right/bottom/left 分别为设置中间的span标签与上/右/下/左边标签的间距；

注意：当行级标签和块级标签挤在一起使用margin样式时，要使用 display:inline-block 将行级标签提升，才能与块级标签产生间距；

padding

margin是设置元素的外边距的，那么我们想要设置内边距呢?对，就是padding样式；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				/*padding:12px;*/
				/*padding: 10px 20px;*/
				/*padding: 10px 20px 30px;*/
				/*padding: 10px 20px 30px 60px;*/
				padding-top: 10px;
				padding-right: 20px;
				padding-bottom: 30px;
				padding-left: 60px;
				
				border: red 1px solid;
			}
			span{
				border: yellow 1px solid;
			}
		</style>
	</head>
	<body>
		<div>
			<span>我在家乡</span>
		</div>
	</body>
</html>

我们这次在div标签内部定义一个span标签，并在div标签中设置padding样式，效果如下：

同样，图没有截完；因为padding的用法和margin一模一样，因此，这里不再详述；

注意：因为div标签是块级标签，打通浏览器的一整行，因此这里设置的右边距没有效果（右边距远大于设置的边距）

position

position样式的作用主要有三种：fixed、relative、absolute，我们一个一个的看；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#out{
				width: 300px;
				height: 300px;
				border: black 1px solid;
			}
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="out">
			<div class="in" style="background-color: red;"></div>
			<div class="in" style="background-color: yellow;"></div>
			<div class="in" style="background-color: blue; width: 150px;"></div>
		</div>
	</body>
</html>

我们先定义一个div标签，再在里面定义三个div标签，具体参数如上；效果如下；

然后我们给内部的第二个div便签添加position:fixed 样式，如下；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#out{
				width: 300px;
				height: 300px;
				border: black 1px solid;
			}
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="out">
			<div class="in" style="background-color: red;"></div>
			<div class="in" style="background-color: yellow; position:fixed ;"></div>  <!--这里添加position样式-->
			<div class="in" style="background-color: blue; width: 150px;"></div>
		</div>
	</body>
</html>

然后我们就会得到下图的效果；

我们可以看出似乎是设置了position:fixed样式的div标签变成了悬浮状态，即脱离文本流了，不再占用父类div标签的空间，使得第三个div标签（蓝色的）补充了上去；position:fixed的作用正是如此，它可以使添加了该样式的元素固定在浏览器的某个固定位置，使其不会随着浏览器页面的滚动而移动；我们看个小例子；

将上个例子中的第二个div代码作出修改，并添加大量换行符，其他保持不变；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#out{
				width: 300px;
				height: 300px;
				border: black 1px solid;
			}
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="out">
			<div class="in" style="background-color: red;"></div>
			<div class="in" style="background-color: yellow; position:fixed;right: 10px;bottom: 10px;"></div>
			<div class="in" style="background-color: blue; width: 150px;"></div>
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
	</body>
</html>

这个图我截了下，发现太宽，被csdn的这个界面压窄了，看不出明显的效果；这里我叙述一下，还是懵逼的话可以直接运行我的代码，会得到更好的效果；

我们将黄色div标签的位置固定在了浏览器的右下角的位置，与右和下的间距均为10px，之后我们拉动右边的上下滚动，我们发现只有蓝色div和红色的div标签随着浏览器的界面动，而使用position样式的黄色div标签不会改变其在浏览器页面的相对位置；

这就是position:fixed的作用；

relative：不会脱离文本流，但是可以根据其原本位置的相对位置设置新的位置；代码如下；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#out{
				width: 300px;
				height: 300px;
				border: black 1px solid;
			}
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="out" >
			<div class="in" style="background-color: red;"></div>
			<div class="in" style="background-color: yellow; position: relative; right: 10px; bottom: 10px;"></div>
			<div class="in" style="background-color: blue;width: 150px;"></div>
		</div>
	</body>
</html>

效果如下；理解了fixed属性就很容易理解这个，因此不再详述；

absolute： 脱离文档流，相对于第一个position不为static的父元素定位，代码如下；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#out{
				width: 300px;
				height: 300px;
				border: black 1px solid;
			}
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="out" style="position: relative;">
			<div class="in" style="background-color: red;"></div>
			<div class="in" style="background-color: yellow; position: absolute; right: 10px; bottom: 10px;"></div>
			<div class="in" style="background-color: blue;width: 150px;"></div>
		</div>
	</body>
</html>

效果如下：理解上面两个，这个也很好理解，因此也不再详述；

float、clear

给标签添加浮动的效果，会脱离正常文件流；看代码；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#out{
				border: black 1px solid;
			}
			.in{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="out" >
			<div class="in" style="background-color: red;"></div>
			<div class="in" style="background-color: yellow;"></div>
			<div class="in" style="background-color: blue; width: 150px;"></div>
		</div>
	</body>
</html>

同样是div标签里面创建三个div标签；然后效果如下；

然后我们给内部的三个div标签添加float浮动效果：将以下代码替换上面代码相应位置（其实就是添加了个float:left）；

.in{
	width: 100px;
	height: 100px;
	float: left;
}

我们就会得到浮动之后的效果；

添加浮动效果之前有点类似于内部的三个div标签撑起了外部的大div标签，添加之后，三个div变横排列，不再撑起外部div，与实际外部div标签两条线紧靠着形成了一条更粗的线；

想要得到既使内部三个div有浮动效果，又要使内部三个div撑起外部div效果，我们就需要clear样式了，它的左右就是取消浮动效果，代码如下；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#out{
				border: black 1px solid;
			}
			.in{
				width: 100px;
				height: 100px;
				float: left;
			}
			/*#out:after{
				content: "";
				display: block;
				clear: left;
			}*/
		</style>
	</head>
	<body>
		<div id="out" >
			<div class="in" style="background-color: red;"></div>
			<div class="in" style="background-color: yellow;"></div>
			<div class="in" style="background-color: blue; width: 150px;"></div>
			<div style="clear: left;"></div>
		</div>
	</body>
</html>

即再在我们需要浮动效果的div后面再加个div，不需要设置其他属性，直接使用样式clear清除掉浮动效果即可，可得到如下效果；

注意：平时我们一般不使用再写一个div的方法来清除float的浮动效果，一般会采用上述代码被注释掉的方法来解除float的浮动效果，即在需要浮动效果的div之后添加一个内容为空的对象，并将其提升至块级标签，然后调用clear清除浮动效果，可得到和上图一样的效果。

注意：以上例子仅是为了便于更好地看出效果而使用的，并不是这些样式仅能在这种情况下使用！

梦忆长安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页常用css总结：上

css样式很多很多，这里不会一一介绍，仅会将最最常用的罗列出来；display<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> p{ display: none; ...
复制链接

扫一扫