你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

CSS浮动+背景图片+边框+文字排版+段落设置_如何给浮动得元素直接间隙添加背景色

作者：你好赵伟 | 2024-02-18 20:51:58

踩

如何给浮动得元素直接间隙添加背景色

一.CSS浮动

1.简介

默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动

float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值,元素不浮动

浮动意思是取消原来所占的一行,让浮动标签后面的一个标签样式接上浮动标签的样式
1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div {
				/* float: left; */
				/* margin-left: 100px; */
			}

			/* 浮动意思是取消原来所占的一行,让浮动标签后面的一个标签样式接上浮动标签的样式 */
			#div1 {

				/* left表示左浮动
					right表示右浮动
					none表示不浮动
				 */
				float: left;
			}
			#div2 {
				float: left;
			}

			#div3 {
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="div" style="background-color: red;">
			芜湖,起飞
		</div>
		<div id="div2" class="div" style="background-color: yellow;">
			啊哈,金色传说
		</div>
		<div id="div3" class="div" style="background-color: aqua;">
			这把我门就遇到了高手了
		</div>
		<!-- 清除浮动 -->
		<div id="div4" class="div" style="clear: both;">
			外币外币,外币巴布
		</div>
	</body>
</html>

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

在这里插入图片描述

2.CSS浮动图片

当对图片进行浮动时,图片会取消边框,按照浮动顺序排列;
当调整窗口时,图片大小不变,会自动调整位置
1
2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css浮动图片</title>
		<style type="text/css">
			img{
				float: left;
			}
		</style>
	</head>
	<body>
		<img src="img/girl1.jpg" width="400px" height="300px">
		<img src="img/girl2.jpg" width="400px" height="300px">
		<img src="img/girl3.jpg" width="400px" height="300px">
		<img src="img/girl4.jpg" width="400px" height="300px">
		
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

3.边框塌陷

作用:清除浮动

属性值	说明
left	在左侧不允许出现浮动元素
right	在右侧不允许出现浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧
1
2
3
4
5
6
7

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css清除浮动</title>
		<style type="text/css">
			img {
				float: left;
				margin-left: 20px;
			}
			#div2{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="div1">图片</div>
		<img src="img/girl1.jpg" width="400px" height="300px">
		<img src="img/girl2.jpg" width="400px" height="300px">
		<!-- 清除浮动 
			如果不添加clear,文字会出现在图片右侧
		-->
		<div id="div2">图片2</div>
		<img src="img/girl3.jpg" width="400px" height="300px">
		<img src="img/girl4.jpg" width="400px" height="300px">
		<img src="img/girl5.jpg" width="400px" height="300px" >

	</body>
</html>

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.display属性

属性值			说明
block			块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline			内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none			设置元素不会被显示

块元素排在一起有两种方法：
inline-block
float
1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>display属性</title>
		<style type="text/css">
			p{
				background-color: red;
				display: inline;
			}
		</style>
	</head>
	<body>
		<p>芜湖起飞</p>
		<p>外币外币</p>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这里插入图片描述

二.CSS属性

1.字体的设置

1.font-family设置字体形式,如黑体隶书楷书等
2.font-size:绝对尺寸/关键字/相对尺寸/百分比
 		关键字:xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
3.font-style  设置字体的样式
		font-style  设置字体的样式（设置字体是否为斜体字）
		normal----正常显示字体
		italic---斜体字
		oblique--歪斜体（倾斜角度大一点）
4.font-weight  设置字体的加粗
	取值：
		normal  ---- 正常显示
		bold ----粗体（数字700粗细值）
		bolder ---加粗
		lighter ---细体（比正常字体稍微细一点）
		number  ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）
5.text-shadow设置字体的阴影
		从左到右依次为阴影的左右距离,上下距离,阴影范围,阴影颜色
6.font-variant 设置字体的变体
		设置字体是否显示为小型的大写字母
		主要用于设置英文字体
		normal  --正常字体
		small-caps  表示英文字母显示为小型的大写字母
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				color: red;
				font-family: 楷体;
				font-style: normal;
				font-weight: bold;
				/* text-shadow设置字体的阴影 */
				/* 左右位置 上下位置 阴影范围 阴影颜色 */
				text-shadow: 1px 1px 5px aqua;
			}
			h2{
				/* font-size设置字体大小 */
				font-size: 100px;
				color: #000000;
				font-style: italic;
				font-weight: normal;
			}
			div{
				font-size: x-large;
				font-style: oblique;
				font-weight: lighter;
			}
			#div2{
				font-variant: small-caps;
			}
			#div3{
				font-variant: normal;
			}
		</style>
	</head>
	<body>
		<h1>芜湖起飞</h1>
		<h2>外币外币</h2>
		<p>啊哈,金色传说</p>
		<div id="div1">
			这把我们就遇到了高手了
		</div>
		<div id="div2">
			HelloWorld!
		</div>
		<div id="div3">
			buffterflaay
		</div>
	</body>
</html>

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

在这里插入图片描述

2.颜色的设置

1.color 设置颜色
2.background-color设置背景颜色
3.background-image设置背景图片
1
2
3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色的设置</title>
		<style type="text/css">
			#div1{
				color:red;
			}
			#div2{
				background-color: #FFD700;
			}
			.div{
				background-image: url(img/girl1.jpg);
			}
		</style>
		
		
	</head>
	<body>
		<div id="div1">
			外币外币,外币巴布
		</div>
		<div id="div2">
			飞吧
		</div>
		<div id="div3" class="div">
			芜湖
		</div>
		<div id="div4" class="div">
			起飞
		</div>
	</body>
</html>

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

在这里插入图片描述

3.背景的设置

(1)背景的颜色+图片+尺寸

1.background-color设置背景颜色
2.background-image设置背景图片
3.background-size设置背景图片的尺寸,第一个参数表示左右拉伸,第二个参数表示上下拉伸
4. background-repeat设置背景图片是否重复
  	设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
 	 	repeat   背景图片在水平和垂直方向平铺
  		repeat-x  背景图片在水平方向平铺
  		repeat-y  背景图片在垂直方向平铺
  		no-repeat  背景图片不平铺
5.background-attachment设置背景图片是否随着滚动条的滚动而滚动
		scroll  ---表示背景图片随着滚动条的移动而移动
		fixed---表示背景图片固定在页面上不动，不随滚动条移动而移动
1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景的设置</title>
		<style type="text/css">
			body{
				background-image: url(img/girl3.jpg);
				/* 是否随着滚动条的滚动而滚动 */
				background-attachment: scroll;
				/* 设置图片不平铺 */
				background-repeat: no-repeat;
				/* 设置图片尺寸 */
				background-size: 800px 1800px;
			}
			/* 字出现在图片上,且字和图片一起随着滚动条的滚动而滚动 */
			#div1{
				height: 50rem;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			芜湖
		</div>
		
	</body>
</html>
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

在这里插入图片描述

(2)背景图片的位置

background-position:
		关键字            百分比              位置说明
		top left          0%  0%              左上位置
		top center        50%  0%             靠上居中
		top right         100%  0%            右上位置
		left  center      0%  50%             靠左居中
		center center     50%  50%            正中位置
		right center      100%  50%           靠右居中
		bottom  left      0%  100%            左下位置
		bottom  center    50%  100%            靠下居中
		bottom  right     100%  100%           右下位置

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		
		#div1{
			width: 1400px;
			height: 1100px;
			background-image: url(img/bb.png);
			background-repeat: no-repeat;
			border: 1px #00FFFF solid;
			/* 设置图片的位置 */
			background-position: right center;
		}
		</style>
	</head>
	<body>
		<div id="div1" style="height: 800px;">
			
		</div>
	</body>
</html>

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

在这里插入图片描述

4.边框的设置

(1)边框的基本设置

边框线条的粗细     边框的颜色       边框的粗细
border:  1px        black           solid; 

1.边框的宽度
  border-width
  基本语句：
		border-width
		border-top-width	上宽
		border-bottom-width	下宽
		border-left-width	左宽
		border-right-width	右宽
		取值；
		thin  ----细边框
		medium  ---中等边框
		thick--粗边框
		长度---数字
2.边框的颜色
	border-color
   	border-top-color
   	border-bottom-color
   	border-left-color
   	border-right-color
3.边距
	border
		边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离
		上边距  margin-top
		下边距  margin-bottom
		左边距  margin-left
		右边距  margin-right
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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1 {
				width: 300px;
				height: 400px;
				/* border: 1px red solid; */
				border-width: 10px;
				border-color: red;
				border-style: solid;
				/* 上边框的宽 */
				border-top-width: 1px;
				/* 下边框的颜色 */
				border-bottom-color: #FFD700;
				/* 左边框的格式 */
				border-left-style: none;
				/* 上边距 */
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">

		</div>
	</body>
</html>

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

在这里插入图片描述

(2)边框的圆角和阴影

border-radius设置边框圆角,注意先把边框设置后再设置圆角
		div { border:2px solid; border-radius:25px;  }
		
box-shadow设置边框阴影
1
2
3
4

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 400px;
				border: 1px darkred solid;
				background-image: url(img/girl2.jpg);
				background-repeat: no-repeat;
				/* 设置边框的圆角 */
				border-radius: 10px;
				/* 设置边框的阴影 */
				box-shadow: 1px 1px 1px #8B0000
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

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

(3)内边距

	用来设置边框和其内部的元素之间的空白距离
			上边距  padding-top距离顶部的距离
			下边距  padding-bottom
			左边距  padding-left
			右边距  padding-right
注意:
	添加距离后,会把原有的边框进行扩大
	
如果想要不扩大原有的边框,通过设置box-sizing为:border-box即可
1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 400px;
				height: 300px;
				border: 1px #000000 solid;
				/* 外边距 */
				margin-top: 100px;
				/* 内边距 */
				padding-left: 100px;
				padding-top: 100px;
				/* 不扩大原有的边框 */
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			芜湖,起飞
		</div>
	</body>
</html>

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

在这里插入图片描述

5.CSS对文字的排版

1.letter-spacing,调整字符间距,用来控制字符之间的间距，这个间距实际上就是在浏览器
	中所显示的字符间的空格距离。
		取值：
			  normal ---表示正常显示（默认）
			  长度--可以使用负数，带上单位
			  单位px(像素)
2.添加下划线+删除线等
 text-decoration
  属性的取值：
		  underline----添加下划线
		  overline---添加上划线
		  line-through--添加删除线
		  blink---添加闪烁效果（只能在Netscape的浏览器中正常显示）
		 none--没有任何的修饰
3.文本的对齐方式
	text-align
		用来控制文本的排列和对齐方式
		属性的取值：
		left--左对齐
		right--右对齐
		center--居中对齐
		justify--两端对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				/* letter-spacing,调整字符间距 */
				letter-spacing: 2px;
				/* 添加下划线 */
				/* text-decoration: underline; */
				/* 添加删除线 */
				text-decoration: line-through;
				/* 文本的对齐方式 */
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<div id="div1">
			出题人一到店，所有喝酒的人便都看着他笑，有的叫道，“出题人，你又出景点了！
			”他不回答，对柜里说，“温两碗酒，要一叠景点报告。”便排出九张试卷。他们又故意
			的高声嚷道，“你一定又欺负高考考生了！“出题人睁大眼睛说，“你怎么这样凭空污
			人清白……”“什么清白？我昨天亲眼见你偷偷溜进胡夫金字塔，被巴耶克吊着打。”
			出题人便涨红了脸，额上的青筋条条绽出，争辩道，“偷入景点不能算偷……潜入！
			……读书人的事，能算偷么？”接连便是难懂的话，什么“葛军我大哥”，什么“巴黎圣母
			院”之类，引得众人都哄笑起来：店内外充满了快活的空气。
		</div>
	</body>
</html>

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

在这里插入图片描述

6.字母大小写转换

text-transform: uppercase;转换为大写
text-transform: lowercase;转换为小写
1
2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				/* text-transform: uppercase; */
				text-transform: lowercase;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			With the rapid development of computer technology, information security has become a major problem in the
			development of the Internet. Secret sharing is an important guarantee mechanism to ensure information security. It
			can share secrets among a group of participants and provide a good security mechanism for the confidentiality of the
			key, so it has been widely used.
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

7.段落的设置

text-indent  
	  用来控制每个段落的首行缩进的距离。
	  属性取值：
	  长度（数字）带上单位
	  百分比相对于上一级元素的宽度
em 倍数
		对p标签中的文本进行首行缩进

line-height: 2em;设置行高
1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1{
				/* 首行缩进两个字符 */
				text-indent: 2em;
			}
			#p2{
				/* 设置行高 */
				line-height: 2em;
			}
		</style>
	</head>
	<body>
		<p id="p1">美国参众两院于 1948 年 6 月同意美国加入世卫组织时的联合决议案（joint
			resolution）中其实有相关规定。
		</p>
		<p id="p2">决议案的第四条款提到：因应世卫组织章程没有关
			于退会之条文，美国保留退出组织之权利，但需在一年前提出（one year
			notice），且美国应已付清对世卫组织的一切债务。这是当时美国加入世卫组织时，
			认可的条款。也就是说即使美国国会应特朗普要求，同意通过退出世卫组织，也至少是
			2021年7月以后。并且付清对世卫组织的一切债务。美国人在世卫组织有一万多员工，
			世卫组织的费用都是用来发工资，做研究烧钱。其中很大一部分是被美国人拿走了，
			包括工资和研发经费。不可能这么轻易一句话就退出，我无法猜测如果美国真的这么轻
			飘飘的拍拍屁股走人，世界会怎么看待美国加入的组织，后面大家都会后怕，你美国
			人来拿工资，烧研发经费，又不付清债务就跑了。

		</p>
	</body>
</html>

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

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/110488