前端基础-02-CSS

最新推荐文章于 2022-11-07 15:41:39 发布
最新推荐文章于 2022-11-07 15:41:39 发布
阅读量624 收藏 2
点赞数
分类专栏： python全栈开发学习笔记 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37978800/article/details/124869260
版权

CSS:层叠样式表

  • (英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
  • CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

作用

  • 结构与样式分离的方式，便于后期维护与改版
  • 可以用多套样式，使网页有任意样式切换的效果
  • 使页面载入得更快，降低服务器的成本
  • 等等…

CSS入门

CSS选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BaiDu</title>
</head>
<body>
	<p>http://www.baidu.com</p>
	<p>百度</p>
	<p>全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BaiDu</title>
	<style type="text/css">
		p{
			background-color: red;
			font-size: 40px;
		}
		.p1{
			font-family: 隶书;
		} 
	</style><!--p{标签选择器}， .p1{类选择器}-->
</head>
<body>
	<p>http://www.baidu.com</p>
	<p class="p1">百度</p><!--.p1{font-family: 隶书;}-->
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>

</body>
</html>

在这里插入图片描述

背景样式

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BaiDu</title>
	<style type="text/css">
		p{
			background-color: red;
			font-size: 40px;
		}
		.p1{
			font-family: 隶书;
		} 

		body{
			background-color:yellow;
			background-image: url("img/baidu.jpg");
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: top center;
		}
	</style><!--p{标签选择器}， .p1{类选择器} body{设置背景颜色 背景图片 背景重复方式  背景不跟随页面内容滚动 背景位置设置}--> 
</head>
<body>
	<p>http://www.baidu.com</p>
	<p class="p1">百度</p><!--.p1{font-family: 隶书;}-->
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
		<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
			<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
				<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
					<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
						<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
							<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
								<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
									<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
										<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
</body> <!--body{background-color:yellow;}背景设置-->
</html>

在这里插入图片描述
在这里插入图片描述

外部样式表

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BaiDu</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<p>http://www.baidu.com</p>
	<p class="p1">百度</p>
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
		<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
			<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
				<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
					<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
						<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
							<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
								<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
									<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
										<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
</body> <!--body{background-color:yellow;}背景设置-->
</html>

index.css

p{
	background-color: red;
	font-size: 40px;
}
.p1{
	font-family: 隶书;
} 

body{
	background-color:yellow;
	background-image: url("img/baidu.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top center;
}

文本类样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BaiDu</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<p>http://www.baidu.com</p>
	<p class="p1">百度</p>
	<p>1 2 3 4 5 6 7 8 9</p>
	<p>A B C D E F G H I</p>
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>

</body> <!--body{background-color:yellow;}背景设置-->
</html>

p{
	color: green; /*字体颜色*/
	direction: rtl;/*文本书写方向*/
	letter-spacing: 20px;/*字符间距*/
	line-height: 40px;/*行高*/
	text-align: justify;/*文本对齐方式*/
	/*text-decoration: line-through; 下划线*/
	text-shadow: 5px 5px 1px red; /*阴影*/
	text-transform: capitalize; /*首字母大写*/
	text-indent: 2em; /*首行缩进*/

}
/*（direction和text-align针对文字字母无影响，改变文字的书写方式主要针对阿拉伯有效） */

在这里插入图片描述

字体类样式

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BaiDu</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<p>http://www.baidu.com</p>
	<p class="p1">百度</p>
	<p>1 2 3 4 5 6 7 8 9</p>
	<p>A B C D E F G H I</p>
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>

</body> <!--body{background-color:yellow;}背景设置-->
</html>

p{
	/*color: green; 字体颜色*/
	/*direction: rtl;文本书写方向*/
	letter-spacing: 20px;/*字符间距*/
	line-height: 40px;/*行高*/
	/*text-align: justify;文本对齐方式*/
	/*text-decoration: line-through; 下划线*/
	/*text-shadow: 5px 5px 1px red; 阴影*/
	text-transform: capitalize; /*首字母大写*/
	text-indent: 2em; /*首行缩进*/
	font-style: italic;/*italic斜体效果,oblique所有倾斜显示*/
	font-weight: bold;/*bold加粗，normal取消加粗*/
	font-size: 30px;/*字号*/
	font-family: 隶书;/*字体*/

}

列表样式

在这里插入图片描述
在这里插入图片描述
默认
在这里插入图片描述

在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BaiDu</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<p>http://www.baidu.com</p>
	<p class="p1">百度</p>
	<p>1 2 3 4 5 6 7 8 9</p>
	<p>A B C D E F G H I</p>
	<p class="p1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
	<ul>
		<li>AAAAAAA</li>
		<li>BBBBBBB</li>
		<li>CCCCCCC</li>
		<li>DDDDDDD</li>
		<li>EEEEEEE</li>

	</ul>

	<ol>
		<li>AAAAAAA</li>
		<li>BBBBBBB</li>
		<li>CCCCCCC</li>
		<li>DDDDDDD</li>
		<li>EEEEEEE</li>
	</ol>

</body> <!--body{background-color:yellow;}背景设置-->
</html>

p{
	text-transform: uppercase; 
	text-indent: 2em; /*首行缩进*/
	font-style: italic;/*italic斜体效果,oblique所有倾斜显示*/
	font-weight: bold;/*bold加粗，normal取消加粗*/
	font-size: 30px;/*字号*/
	font-family: 隶书;/*字体*/

}

ul{
	list-style-type:circle;
	list-style-position: inside;
	list-style-image: url(img/1.gif);/*当以图片为样式时 第一项外观就失效了*/

}

ol{
	list-style-type: lower-latin;
	list-style: inside url(img/1.gif); /*综合写法*/
}

在这里插入图片描述

伪类的样式设置

状态伪类

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>百度</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<p>http://www.baidu.com</p>
	<p>百度</p>
	<a href="#">伪类</a>
	<label>用户名</label>
	
</body>
</html>

a:link{
	color: red;/*未被访问显示红色*/
}

a:visited{
	color: green;/*已访问显示绿色字体变成100px*/
}

a:hover{
	color: yellow;
	font-size: 50px;/*鼠标悬停显示换色，字体50px*/
}

a:active{
	color: blue; /*激活，鼠标按下去蓝色*/
}


label:hover{
	color: yellow;
	font-size: 50px;/*鼠标悬停显示换色，字体50px*/
}

结构伪类

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>百度</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<p>http://www.baidu.com</p>
	<p>百度</p>
    <p>淘宝</p>

</body>
</html>


p:first-child{
	background-color: red;
} /*父元素第一个元素*/

伪元素选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>百度</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<h1>好好学习，天天向上</h1>
	<p>http://www.baidu.com</p>
	<p>百度</p>
    <p>全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
    <table border="1" width="400px">
    	<tr>
    		<td>A</td>
    		<td>A</td>
    		<td>A</td>
    		<td>A</td>
    	</tr>
    	<tr>
    		<td>B</td>
    		<td>B</td>
    		<td>B</td>
    		<td>B</td>
    	</tr>
    	<tr>
    		<td>C</td>
    		<td>C</td>
    		<td>C</td>
    		<td>C</td>
    	</tr>
    </table>

</body>
</html>

body::before{
	content: "body，h1，p任何一个能独立区分的标签都能使用 before在最前面添加文字 ";
}
body::after{
	content: "body，h1，p任何一个能独立区分的标签都能使用 after在最后面添加文字";
}


h1::before{
	content: "开始>>>>: ";
}/*每一个p标签前面都会加上上诉文字*/
h1::after{
	content: ":<<<<结束 ";
}/*每一个H标签前面都会加上上诉文字*/


p::before{
	content: "开始>>>>: ";
}/*每一个p标签前面都会加上上诉文字*/
p::after{
	content: ":<<<<结束 ";
}/*每一个p标签前面都会加上上诉文字*/


p::first-line{
	background: yellow;
} /*每一个段落第一行加上背景颜色*/

p::first-letter{
	font-size: 30px;
}/*每一个段落第一个字符改变字体*/

p::selection{
	background-color:red
} /*p每一个段落里面选中的有红色背景，*::selection{所有}*/

在这里插入图片描述

其他选择器

在这里插入图片描述
在这里插入图片描述

CSS浮动

DIV样式设置

在这里插入图片描述
在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>百度</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<h1>好好学习，天天向上</h1>
	<p>http://www.baidu.com</p>
	<p>百度</p>
    <div id="div1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</div>
</body>
</html>

index.css

#div1{
	background-color: yellow;
	width: 150px;
	height: 150px;
	
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

#div1{
	background-color: yellow;
	width: 150px;
	height: 150px;
	top: 200px;
	left: 200px;
	position: absolute;
	overflow: scroll;
}/*背景颜色，方框，显示位置，决定定位,溢出部分hidden隐藏/scroll滚动条*/

在这里插入图片描述
在这里插入图片描述

#div1{
	background-color: yellow;
	width: 150px;
	height: 150px;
	top: 200px;
	left: 200px;
	position: absolute;
	overflow: scroll;
	outline: dashed;
}
/*背景颜色，方框，显示位置，决定定位,
溢出部分hidden隐藏/scroll滚动条,
outline边框：dashed虚线、none不显示*/

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>百度</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<h1>好好学习，天天向上</h1>
	<p>http://www.baidu.com</p>
	<p>百度</p>
    <div id="div1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</div>
    <div id=div2>
    	<label>姓名:</label><input type="text">
    </div>
</body>
</html>

#div1{
	background-color: yellow;
	width: 150px;
	height: 150px;
	top: 200px;
	left: 200px;
	position: absolute;
	overflow: scroll;
	outline: dashed;
}
/*背景颜色，方框，显示位置，决定定位,
溢出部分hidden隐藏/scroll滚动条,
outline边框：dashed虚线、none不显示*/

#div2{
	top: 400px;
	left: 200px;
	position: absolute;
}/*border-bottom: solid下边框*/

input{
	border: none;
	border-bottom: solid;
	outline: none;
}

在这里插入图片描述

盒子模型

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>百度</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
    <div id="div1">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</div>
    <div id="div2">全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。全球领先的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</div>
</body>
</html>



#div1{
	width: 200px;
	height: 200px;
	overflow: hidden;
}
#div1{
	background-color: yellow;
	margin-top: 50px;
	margin-left: 50px;
	margin-bottom: 50px;

}


#div2{
	background-color: blue;
}

*{
	margin: 50px 50px 50px 50px;
} /*  *{}表示所有*/

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

浮动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
    <div id="div1">DIV1</div>
    <div id="div2">DIV2</div>
    <div id="div3">DIV3</div>   
</body>
</html>

div{
	width: 200px;
	height: 200px;
	text-align: center;
	line-height: 200px;
} /*框200*200 文字居中*/

#div1{
	background-color: yellow;
}
#div2{
	background-color: red;
}
#div3{
	background-color: blue;
}

文档流依次从上往下显示
在这里插入图片描述
浮动 脱离标准文档流

div{
	width: 200px;
	height: 200px;
	text-align: center;
	line-height: 200px;
} /*框200*200 文字居中*/

#div1{
	background-color: yellow;
	float: left;
}/*浮动*/
#div2{
	background-color: red;
	width: 300px;
}
#div3{
	background-color: blue;
	width: 400px;
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

float初衷，包裹，崩溃

崩溃

正常的情况，不会出现崩溃的情况

（1）一个空白的div中，如果不进行任何尺寸的设定，并且div里面没有任何内容时，div是没有高度的：
在这里插入图片描述

（2）当在div中添加内容时候：div中内容的高度就是div的高度；即div中的内容会把div给撑起来；
在这里插入图片描述

（3）总结：元素的宽度默认占满父一级元素；；；；元素的高度由子元素撑起来。
在这里插入图片描述

2.出现了崩溃：浮动的子元素不能撑起非浮动的父元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
    <div id="div1">
    	<div id="div2"></div>
    </div>   
</body>
</html>


#div1{
	border: 1px solid black;
	background-color: yellow;

}

#div2{
	background-color: red;
	height: 230px;
	width: 450px;
}

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
    <div id="div1">
    	<div id="div2"></div>
    	<div id="div3"></div>
    </div>   
</body>
</html>


#div1{
	border: 1px solid black;
	background-color: yellow;

}

#div2{
	background-color: red;
	height: 230px;
	width: 450px;
	float: left;
}

#div3{
	background-color: blue;
	height: 160px;
	width: 500px;
	float: left;	
}

div2，div3增加了浮动效果，我们无法看见div1了
崩溃指的是子元素存在浮动后，父元素没有指定高度就会遭到破坏
在这里插入图片描述

包裹

在这里插入图片描述
我们设置完浮动后就产生了包裹
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
    <div id="div1">
    	<img src="img/11.jpg">
    </div>   
</body>
</html>


#div1{
	background-color: yellow;
    float: left;
}

img{
	vertical-align:bottom;
}/*使用图片标签设置对齐方式为底边对齐*/

在这里插入图片描述

初衷

浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
    <div id="div1">
    	<img src="img/2.jpg">
    	<p>浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。浮动能将一个元素（通常是一张图片）拉到容器的一侧，这样文档流就能够包围它。</p>
    </div>   
</body>
</html>


#div1{
	background-color: yellow;
    float: left;
}

img{
	vertical-align:bottom;
	float: left;
}/*使用图片标签设置对齐方式为底边对齐*/

p{
	margin-top: 0px;
	text-align: justify;
	line-height: 1em;
}

在这里插入图片描述

清除浮动

在这里插入图片描述

  • div1，div4文档流 div2，div3浮动 导致4被覆盖
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
		<div id="div3"></div>
		<div id="div4"></div>
	</div>
</body>
</html>

#div1{
	background-color: red;
}
#div2{
	background-color: yellow;
    float: left;
    width: 200px;
    height: 200px;
}

#div3{
	background-color: blue;
    float: left;
    width: 220px;
    height: 220px;
}

#div4{
	background-color: black;
    width: 240px;
    height: 240px;
}

在这里插入图片描述

#div1{
	background-color: red;
}
#div2{
	background-color: yellow;
    float: left;
    width: 200px;
    height: 200px;
}

#div3{
	background-color: blue;
    float: left;
    width: 220px;
    height: 220px;
}

#div4{
	background-color: black;
    width: 240px;
    height: 240px;
    clear: both;
} /*clear: both清除浮动*/

在这里插入图片描述

CSS定位

在这里插入图片描述

相对定位

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<div class="main">
		<div class="div1"></div>
		天不生我李淳罡，剑道万古如长夜。剑来！”要说雪中悍刀行哪一句话最牛皮，得到最广泛的传播，那必然是这一句“天不生我李淳罡”。虽然这句话是烽火大总管对“天不生夫子，万古如长夜”的改编，但是和李淳罡这个羊皮裘老头结合在一起，就具有了新生命。只要是看过雪中的书友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的剑神风范。而且，很搞笑的是，由于这一句太流行了，网上有太多模仿这句话的梗。比如说：“天不生我王境泽，饭道万古如长夜，饭来”，“天不生我吕小树，贱道万古如长夜...
		
	</div>
</body>
</html>

.main{
    width: 600px;
    height: 600px;
    background-color: #123456;
}

.div1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    top: 50px;
    left: 50px;
}/*相对定位 上边距 左边据   相对定位是相对的之前的位置进行偏移*/

在这里插入图片描述

绝对定位

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<div class="main">
		<div class="div1"></div>
		天不生我李淳罡，剑道万古如长夜。剑来！”要说雪中悍刀行哪一句话最牛皮，得到最广泛的传播，那必然是这一句“天不生我李淳罡”。虽然这句话是烽火大总管对“天不生夫子，万古如长夜”的改编，但是和李淳罡这个羊皮裘老头结合在一起，就具有了新生命。只要是看过雪中的书友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的剑神风范。而且，很搞笑的是，由于这一句太流行了，网上有太多模仿这句话的梗。比如说：“天不生我王境泽，饭道万古如长夜，饭来”，“天不生我吕小树，贱道万古如长夜...
		
	</div>
</body>
</html>

.main{
    width: 600px;
    height: 600px;
    background-color: #123456;
    position: absolute;
    top: 50px;
    left: 50px;
}

.div1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 50px;
}/*绝对定位 上边距 左边据   绝对定位是参照父级元素如果没有父级就参照body*/

在这里插入图片描述

相对和绝对

绝对

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
</body>
</html>

div{
    width: 100px;
    height: 100px;
}

.div1{
    background-color: red;
    position: absolute;
    top: 100px;
    left: 100px;
}/*绝对定位有浮动的效果*/
.div2{
    background-color: green;
}
.div3{
    background-color: blue;
}

在这里插入图片描述
在这里插入图片描述
相对

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
</body>
</html>

div{
    width: 100px;
    height: 100px;
}

.div1{
    background-color: red;
    position: relative;
    top: 100px;
    left: 100px;
}/*绝对定位有浮动的效果*/
.div2{
    background-color: green;
    position: relative;
    top: 100px;
    left: 100px;
}
.div3{
    background-color: blue;
    position: relative;
    top: 100px;
    left: 100px;
}

在这里插入图片描述
添加一个父级元素，对父级元素进行偏移

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<div class="div0">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
</body>
</html>

div{
    width: 100px;
    height: 100px;
}
.div0{
    position: relative;
    left: 200px;
}
.div1{
    background-color: red;
}
.div2{
    background-color: green;
}
.div3{
    background-color: blue;
}

div{
    width: 100px;
    height: 100px;
}
.div0{
    position: absolute;
    left: 200px;
}
.div1{
    background-color: red;
}
.div2{
    background-color: green;
}
.div3{
    background-color: blue;
}

在父级元素偏移，相对和绝对基本上无变化
在这里插入图片描述

z-index

  • 决定谁前谁后，数字越大越前
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<div class="div0">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>
</body>
</html>

div{
    width: 100px;
    height: 100px;
}
.div0{
    left: 200px;
}
.div1{
    background-color: red;
    position: absolute;
    top: 20px;
    left: 100px;
}
.div2{
    background-color: green;
    position: absolute;
    top: 40px;
    left: 120px;
}
.div3{
    background-color: blue;
    position: absolute;
    top: 60px;
    left: 140px;
}

在这里插入图片描述

div{
    width: 100px;
    height: 100px;
}
.div0{
    left: 200px;
}
.div1{
    background-color: red;
    position: absolute;
    top: 20px;
    left: 100px;
    z-index: 1;
}
.div2{
    background-color: green;
    position: absolute;
    top: 40px;
    left: 120px;
    z-index: 3;
}
.div3{
    background-color: blue;
    position: absolute;
    top: 60px;
    left: 140px;
    z-index: 2;
}

在这里插入图片描述

固定定位

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DIV</title>
	<link rel="stylesheet" type="text/css" href="index.css"><!--外部样式表调用index.css-->
</head>
<body>
	<div class="div1">李淳罡</div>
	<div class="div2">
		<p>天不生我李淳罡，剑道万古如长夜。剑来！”要说雪中悍刀行哪一句话最牛皮，得到最广泛的传播，那必然是这一句“天不生我李淳罡”。虽然这句话是烽火大总管对“天不生夫子，万古如长夜”的改编，但是和李淳罡这个羊皮裘老头结合在一起，就具有了新生命。只要是看过雪中的书友，基本上忘不了李淳罡，忘不了“天不生我李淳罡”的剑神风范。而且，很搞笑的是，由于这一句太流行了，网上有太多模仿这句话的梗。比如说：“天不生我王境泽，饭道万古如长夜，饭来”，“天不生我吕小树，贱道万古如长夜...</p></div>
	<div class="div3">木马牛</div>
</body>
</html>

.div1{
    width: 5%;
    height: 100px;
    position: fixed;
    top: 200px;
    left: 10px;
    background-color: yellow;
}/*固定定位*/
.div2{
    width: 70%;
    position: relative;
    left: 10%;
}
.div3{
    width: 5%;
    height: 100px;
    position: fixed;
    top: 200px;
    right: 10px;
    background-color: yellow;
}/*固定定位*/

在这里插入图片描述

gemoumou
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础-CSS注释
01-20
三、css注释 语法：/*注释的内容*/ 四、css基本选择器 1.标签选择器 通过标签来选择元素，标签{css样式} 示意图 2.id选择器 通过id属性来选择元素，#id名{css样式} 示意图 注意：id选择要保证...
前端基础--CSS
qq_43813560的博客
08-22 3554
CSS 指层叠样式表 (Cascading Style Sheets) 多重样式将层叠为一个 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 层叠次序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层...
前端基础-CSS缩放zoom
逍遥云恋
03-30 1857
二、缩放zoom 语法：zoom:值 取值：值是一个倍数 <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .box{ width:200px; height:200px; border:1px solid #000; } div.box:hove...
WEB前端基础-HTML CSS总结.xmind思维导图
weixin_44833875的博客
06-11 3843
html 总结 web标准 常用的HTML标签 图片路径 字符实体 CSS总结 选择器 css三大特性 常用的css 属性 css高级技巧
web前端开发--------CSS基础教程
m0_64365419的博客
11-07 2723
为什么要学习CSS？ 在之前的学习中，我们学习了通过html去布局网页，但是html存在非常多的局限性，而它的局限性体现在它只关注内容的语义，html主要做结构，显示元素内容，比如<h1>表名这是一个大的标题，<p>表名这是一个段落，<img>表明这儿有一个图片，<a>表示此处有链接。 CSS简介： CSS是层叠样式表（Cascading Style Sheets）的简称，有时候我们也会将其称之为CSS样式表或级联样式表。 CSS同样也是一种标记语言，主要用于
前端基础--DW的使用
weixin_44540130的博客
01-28 7720
前端基础–DW 开发工具与关键技术：DW/浏览器 ； DW的使用。 作者：刘佳明 撰写时间：2019年1月 28 日 在学习前端的第一步首先便是学会正确的使用DW这一个编程app；下面便由我自己编写关于DW的使用过程 第一步： 在电脑页面打开DW；关于DW 的首页面我已经截图在下面：点击文件；在点开文件后会弹出一个选项框；选择新建；开始创建我们DW 编程 代开新建之后，出现截图如下； 在新建...
前端基础-CSS样式的分类
01-08
css样式的分类 1.内部样式—-内联样式 使用的是style标签 /* 样式 */ 多学一招：把页面的公共样式（不多的情况下）写在style标签中 2.行内样式 直接写在标签上的style属性中 我是盒子 多学一招：通常是后台...
前端基础-CSS标签的显示模式
01-08
标签的显示模式（重点） div和span标签 ​ 1.样式完全相同，标签不同，显示的结果完全不同 ​ 2.每个div会独占一行，多个span会并列一排 1.块元素 特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承...
前端CSS基础-常规流练习.rar
04-09
结合博客前端CSS基础——常规流中练习对应图片代码，三大布局规则之一常规流布局，用常规流布局实现网页效果图。
02-CSS基础.docx
03-06
02-CSS基础.docx
python基础-07-元组/字典的常用基本操作
gemoumou的python学习实记
08-15 1947
题目1 •敏感词判断 li = [“苍井空”,“波多野结衣”,“武藤兰”,“东京热”] •将用户输入的敏感词替换成* •敏感词的长度等于* 如 苍井空等于*** •输入内容 gpc特别喜欢苍井空，偶尔也喜欢波多野结衣，自从放弃了东京热，生活乐无边 content = input (">>>") li = ["苍井空","波多野结衣","武藤兰","东京热"] for ci in li: if ci in content: #判断ci是否出现content输入中 co
python基础-02-基础的数据类型
gemoumou的python学习实记
08-16 1235
数字（Number） Python 支持三种不同的数值类型：整型（int）、浮点型（float）、复数（complex） 整型：通常称为整数，是整数或者负数，不带小数点。python3整型类型没有大小限制。int型数字：0、10 -780、-089、-0x270、0x90。 浮点型：浮点型由整数部分与小数部分组成。float型数字：0.0、15.2、-2.9、-32.5e10、32+e18。 浮点数可以用科学计算法表示：2.5e2 = 2.5 x 10^2 = 250 复数型：复数由实数部分和虚数部分构成，
python开发-23-python数据库开发实战
gemoumou的python学习实记
05-15 1021
用户管理系统
python基础-21-进程与线程
gemoumou的python学习实记
05-05 1020
进程与线程 一、什么叫多任务 多任务就是操作系统可以同时运行多个任务。比如你一边在用浏览器上网，一边在用慕课网官网学习，还一边在听音乐，这就是多任务，至少同时有3个任务正在运行。还有很多任务悄悄地在后台同时运行着，只是桌面上没有显示而已。 二、什么是进程 对于操作系统来说，一个任务就是一个进程（Process），比如打开一个浏览器就是启动一个浏览器进程，打开一个word就启动了一个word进程，打开两个记事本就启动了两个记事本进程。大家可以在电脑上查看操作系统打开的进程，具体方法，以win8操作系统为例：在
python基础-19-初始面向对象
gemoumou的python学习实记
05-04 965
面向对象 面向过程编程 面向过程编程的核心是过程，就是分析出实现需求所需要的步骤，通过函数一步一步实现这些步骤，接着依次调用即可，再简单理解就是程序从上到下一步步执行,从头到尾的解决问题。举例：假设有一辆汽车，它的速度是80km/h，要从A地出发到B地，其中AB两地的距离是200km。要计算这辆车从A地到B地所花费的时间，用面向过程实现如下： Python是一门面向对象编程，而面向对象编程是程序员发展的分水岭，尤其对很多初学者来说，有时会因无法理解面向对象而放弃学习编程，所以接下来带大家了解面向对象编程
python基础-11-函数的应用（函数名=变量）
gemoumou的python学习实记
08-18 781
a = 10 b = 20 a = b # = 赋值把b的值赋值给a所以a就是20 print (a+50) #70 print (a) # 20 # -*- coding: utf-8 -*- def func(): print(666) func() #666 #1，函数名指向的是函数的内存地址 #2,函数名+（）就可以执行函数 #函数名就是变量 def func(): print ("哈哈") a = func # 把一个函数赋值给变量a print (a) # <fu
python基础-10-函数的基本操作
gemoumou的python学习实记
08-17 770
函数：对功能或者动作的封装（对一段代码进行封装） 语法： def 函数名（形参）#创建函数 函数体->或者return 函数名（实参）#调用 返回值： 1，不写return，没有返回值，返回None 2，写了return，return后面没写值，返回是None 3，写了return值，返回了一个值 4，写了return值1，值2....（封装到元组中） 返回值返回在哪里呢？返回到调用位置如(返回给变量a)： a = func(
python基础-05-字符串的常用基本操作
gemoumou的python学习实记
08-15 723
•1，upper（）把字符串更改为大写字母，忽略大小写时使用 •2，strip（）默认去掉字符串左右两端的空白（\n \t space） •3，replace （） 字符串替换 •4，split （）字符串切割 •5，isdigit（）判断转这个字符串是否由数字组成 •6, count () 计数器 •7, index()和find() 查找字符串在字符串中出现的位置 index会报错find不会 •8 ,len（）它是一个内置函数，和其他函数调用方法不一样 计算字符串，字典，列表等中的长度 •9，star
抽签页面前端代码css
最新发布
01-07
抽签页面前端代码CSS主要用于布局和样式设计，下面是一个简单的抽签页面前端...以上是一个基础的抽签页面前端代码CSS示例，你可以根据实际需求进行自定义修改，添加一些动画效果或其他样式来增强页面的美观性和交互性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值