CSS基础（2）

最新推荐文章于 2024-04-19 20:41:06 发布

金清泽

最新推荐文章于 2024-04-19 20:41:06 发布

阅读量266

点赞数

分类专栏：前端文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_53752829/article/details/120199222

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的标签分类，包括块级、行级和行级块标签，以及如何通过display属性转换标签特性。深入探讨了盒子模型，边框、外边距和内边距的设置方法。此外，还讲解了浮动和定位的概念，如何利用它们实现网页布局。通过实例展示了如何使用div和span标签，以及如何解决浮动带来的问题。最后，讨论了相对、绝对和固定定位的用法，帮助理解CSS在页面布局中的重要作用。

摘要由CSDN通过智能技术生成

学习目标：

掌握CSS样式

学习内容：

1、标签分类 2、 display,div,span标签 3、盒子模型 4、浮动和定位

学习时间：

2021年9月3日 2021年9月5日

学习产出：

1、技术笔记 1 遍 2、CSDN 技术博客 1 篇

标签分类

以前 < b > aaa < /b >闭合标签，< br/ >自闭标签

一些标签内容少，会占一行，有些不会占一行

块级标签

无论内容多少，都会独自占据一行

默认宽：与父级标签一致

默认高：0

但是它可以设置宽高

例如

、

、
、
、
等。

<p style="width: 200px;height: 200px;"></p>

行级标签

只占自身大小，不占一行，即使设置了宽高也无效

例如、、、等。

<!-- 虽然给a标签设置了宽度，但是没有效果 -->
		<a href="" style="width: 200px;">百度</a><a href="">百度</a><a href="">百度</a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAuegpPE-1631164598662)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630583571085.png)]

行级块标签

不占一行，可以有宽高

例如等

<img src="img/photo.jpg" width="200px" height="200px">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EgDg9tnv-1631164598669)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630583673265.png)]

注意：

一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。

a可以包含任何标签，除去a本身；

p标签不可以包含任何的块标签。

display标签

display可以修改标签属性

display:none; 在网页中让标签隐藏，并不占用网页空间

<p style="display: none;">aaa</p>

display:line; 将标签修改为行级标签

<p style="display: inline;">bbb</p>

display:block; 将标签修改为块级标签

<a href="" style="display: block;">百度</a>

display:inline-block; 将标签修改为行级块标签

<a href="" style="display: inline-block;">搜狗</a>

div标签

div是块级标签

h1,p 也是块级标签，有默认的样式，或者其他缺陷

div可以包含任何标签，没有任何的默认样式，主要用于网页布局

		<div style="width: 400px; height: 400px; background-color: #0000FF;">
			我是div,是一个纯净版的块级标签
			<p> 我是p标签</p>
		</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttPx5m52-1631164598671)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630585986694.png)]

span标签

span是行级标签

没有任何的附加样式，作用是用来选中网页上的文本，并为文本添加CSS样式

		<span style="color: red;">
			我是span标签，是一个纯净版的行级标签
		</span>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0GlRYXDL-1631164598671)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630586061174.png)]

盒子模型

标签的内部构成的4个部分

margin:外边距过道

border：边框墙

padding：内边距内容区到边框的距离

content：内容区放内容的区域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dFjLzEPa-1631164598672)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630630413583.png)]

width,height只是设置内容区大小,不是整个标签大小,
如果标签没有设置内边距大小和边框大小,那么盒子大小=内容区大小
标签的大小 = 内容区大小+内边距大小+边框大小

		<style type="text/css">
			div{
				background-color: #008000;
				width: 180px;
				height: 180px; /* 设置的是内容区大小*/
				
				/* padding-top 设置内边距 */
			/* 	padding-top: 10px;
				padding-left: 10px;
				padding-right: 10px;
				padding-bottom: 10px; */
				
			/* 	padding: 20px;  为上下左右添加内边距*/
			
			 /* padding: 10px 5px; padding:上下  左右 */
			 
			   /* padding: 5px 10px 15px 20px;  padding:上 右 下 左*/
			}
			
			/*
			   在div中放一张图片,最终div的大小为200*100
			   要求图片在div中水平,垂直居中
			 */
		</style>

边框

可以在标签周围创建边框，边框是标签可见框的最外部。

可以使用border属性来设置盒子的边框：

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样式。

也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

边框可以设置样式：

dotted （点线） dashed （虚线） solid （实线） double （双线） groove

（槽线）

border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 178px;
				height: 178px;
				padding: 10px;
				/*
				分开设置边框属性
				 border-right-color: red;
				border-right-width: 1px;
				border-right-style: solid; */
				/* 一句话设置所有边框属性 */
				border: 1px red solid;
				
				/* 设置一个角为圆角边框 
				border-top-left-radius: 30px; */
				/* 同时设置4个角为圆角边框 */
				border-radius: 30px;
			}
			.search{
				width: 300px;
				height: 40px;
				font-size: 20px;
				border: 5px;
				border-width: 2px;
				border-color: #00FFFF;
				border-style: solid;
				border-radius: 5px;
			}
			
				
			.search:hover{
				border: red 2px solid;
			}
			
		</style>
	</head>
	<body>
		<div id="">
			<img src="img/logo.png" >
		</div>
		<input type="text" class="search" />
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ioFc8cQT-1631164598673)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630669251825.png)]

外边距

外边距是标签边框与周围标签相距的空间。使用margin属性可以设置

外边距。用法和padding类似，同样也提供了四个方向的。

margin-top/right/bottom/left。

margin的值可以为负值。

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为

auto时，浏览器会将左右外边距设置为相等。

垂直设置为auto时值为0，所以水平居中也可以简写为margin:auto

	<style type="text/css">
        *{
			/* 去掉所有的内外边距 */
			margin: 0;
			padding: 0;
		}
		div{
			background-color: aqua;
			width: 200px;
			height: 200px;
			/* margin-left: 20px;/* 设置单边外边距 */ */
			margin-left: auto;/* 左右设置外边距auto时，外边距自动为最大值 */
			margin-right: auto;/* 将左右外边距设置为auto时，水平居中 */
			margin-top: 100px;/* 上下外边距只能给具体的数值 */
			/* margin: 10px auto; 简写，前面为上下，后面为左右*/
		}
	</style>

文档流

文档流:指标签在网页中默认的排放顺序
从左至右,从上向下一个标签接着一个标签排放
块级标签占一行,行级标签一个接着一个,直到一行放不下,才会重新开启一行.

网页布局就是通过浮动,定位来打破这种默认的文档流

浮动

浮动: 让标签脱离原来的文档流,漂浮起来,原来的空间释放出来
行级标签,块级标签都可以浮动,浮动后,标签的宽度为内容的宽. 可以设置宽度
float: left right none(默认)

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				background-color: #008000;
				height: 30px;
				width: 100px;
				float: left;/* 让div浮动起来 */
			}
			.div2{
				background-color: red;
				height: 30px;
				width: 100px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div2"></div>
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6NcAYXAp-1631164598673)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630674694255.png)]

浮动的问题: 不占原来文档流中的空间,下面的标签就会向上移动
如果直接用div包起来，会高度塌陷,不占原来空间,导致父级标签没有撑开。

解决办法:1.我们给父级标签设置一个高度
2.清除浮动, 自动根据浮动标签的高度撑开父级标签

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			 .dh{
				 background-color: #0000FF;
				 float: left;
				 width: 200px;
				 text-align: center;
				 padding: 10px 0px;
				 color: white;
				 font-weight: bold;
			 }
			 .dh:hover{
				 background-color: #00FFFF;
			 }
			 
			 .dh_box{
				margin: 10px auto;
				width: 1000px;
			 }
		</style>
	</head>
	<body>
		<div class="dh_box">
			<div class="dh">首页</div>
			<div class="dh">公司新闻</div>
			<div class="dh">产品介绍</div>
			<div class="dh">联系我们</div>
			<div class="dh">关于我们</div>
            <!-- 清除浮动, 自动根据浮动标签的高度撑开父级标签 -->
			<div style="clear: left;"></div>
		</div>
		
		<div style="background-color: #7FFF00;width: 700px; height: 100px; margin: auto;">
			
		</div>
		 
	</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OVEjsuW9-1631164598674)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630674783269.png)]

CSS定位(Position)

定位的基本思想很简单，它允许你定义的标签相对于其正常位置，或者相对

于父标签、另一个标签甚至浏览器窗口本身而出现的位置。

相对定位

相对于它的起点进行移动，移动后原来的位置还被占用。可以通过position:relative; 开启相对定位，

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				background-color: #008000;
				width: 100px;
				height: 100px;
				position: relative;/* 开启了相对定位 如果不给偏移量,标签不会发生任何变化 
				                       相对于标签原来的位置进行移动,
									   标签不会脱离原来的文档流
				                    */
				left: 100px;
				top: 100px;
			}
			.div2{
				background-color: red;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		
		<div class="div1">div1</div>
		<div class="div2">div2</div>
		
	</body>
</html>

绝对定位

绝对定位是不占空间的，运用了绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。

绝对定位的特点

1.开启绝对定位，会使标签脱离文档流

2开启绝对定位以后，如果不设置偏移量，则标签的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的祖先标签进行定位（一

般情况，开启了子标签的绝对定位都会同时开启父标签的相对定位）

如果所有的祖先标签都没有开启定位，则会相对于浏览器窗口进行定位

4.绝对定位会使标签提升一个层级

5.绝对定位会改变标签的性质，行级标签变成块标签

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.div1{
				background-color: #008000;
				width: 100px;
				height: 100px;
				position: absolute;
				left: 100px;
				top: 100px;
				/* 
				   position: absolute; 开启标签的绝对定位 
				   开启后标签就脱离了原来的文档流
				   left top right bottom设置偏移
				   绝对定位是相对于离他最近的 开起了定位的父级标签进行定位,
				   如果父级标签都没有开启定位,就以浏览器的边框为参照物定位.
				   (一般情况下开启了子标签的绝对定位,同时会开启父级标签的相对定位)
				 */
			}
			.div2{
				background-color: red;
				width: 100px;
				height: 100px;
			}
			
			.div3{
				background-color: #7FFF00;
				width: 200px;
				height: 200px;
				position: relative;
			}
		</style>
	</head>
	<body>
		
		<div class="div3">
			div3
			<div class="div1">div1</div>
		</div>
		<div class="div2">div2</div>
		
	</body>
</html>

固定定位

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.back_top{
				background-color: #DCDCDC;
				width: 50px;
				height: 50px;
				position: fixed;
				bottom: 50px;
				right: 20px;
			}
		</style>
	</head>
	<body style="margin-top: 1000px;">
		 ssss
		 <div class="back_top">
			 返回<br/>顶部
		 </div>
	</body>
</html>