携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

🤵‍♂️ 个人主页: [@Flyme awei 个主页](blog.csdn.net> 🤵‍♂️ 个人主页: @Flyme awei 个主页
👨‍💻 作者简介：Python领域新星创作者。
📒 系列专栏：《在线编程-Python篇》
🌐推荐一款找工作神器网站：《牛客网》|笔试题库|面试经验|
🐋 希望大家多多支持😘一起进步呀！
📝 如果文章对你有帮助的话，欢迎评论 💬点赞 👍收藏 📂加关注

前端技术之CSS

在这里插入图片描述

前言

HTML可以让我们实现静态页面效果，但是页面没有炫酷好看的效果，通过CSS技术可以对静态页面进行修饰，让页面更加好看美观。

一、CSS的引入

1.1为什么要学习CSS？

（HTML画页面）这个页面就是页面上需要的元素罗列起来，但是页面效果很差，不好看，为了让页面好看，为了修饰页面,引入CSS。

1.2CSS的作用

修饰HTML页面
用了CSS之后，样式和元素本身做到了分离的效果。（降低了代码的耦合性）

1.3HTML和CSS的关系？

先有HTML，先有页面，CSS修饰页面

1.4CSS名字

层叠样式表CSS：cascading style sheets 。

层叠：样式的叠加
样式表：各种各样样式的集合

二、CSS的三种书写方式

2.1内联样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css内联样式</title>
	</head>
	<body>
	<!--
		书写方式：内联样式
		在标签中加入一个style属性，css的样式作为属性值
		多个标签之间用；进行连接
	-->
		<h1 style="color: deeppink; font: '微软雅黑';">CSS内联样式</h1>
	</body>
</html>

在这里插入图片描述

2.2内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css内部样式</title>
		<!--
			书写方式：内部样式
			head标签中加入一个style标签，在里面定位到你需要修饰的元素，
			然后再{}中加入你要修饰的样式
		-->
		<style type="text/css">
			h1{font: "微软雅黑";color: aqua;}
		</style>
	</head>
	<body>
		<h1>css内部样式</h1>
	</body>
</html>

在这里插入图片描述

2.3外部样式

首先要创建一个css文件，css文件的后缀.css

h1{
	color: red;
	font-family: "宋体";
}

再创建html页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--y引入外部资源：link-->
		<link rel="stylesheet" href="css/css外部样式.css" />
	</head>
	<body>
		<h1>css外部样式</h1>
	</body>
</html>

在这里插入图片描述

实际开发中三种书写方式用的最多的是：外部样式：因为这种方式真正做到了元素页面和样式分离

2.4三种书写方式优先级

就近原则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--外部样式-->
		<link rel="stylesheet" href="css/css外部样式.css" />
		<!--内部样式-->
		<style type="text/css">h1{color: coral;}</style>
	</head>
	<body>
		<!--内部样式-->
		<h1 style="color: darkorchid;font-family: '微软雅黑';">css的书写方式</h1>
	</body>
</html>

在这里插入图片描述

三、学习CSS的重点

css的作用：修饰页面上的元素
利用选择器定位页面上要修饰的元素

四、基本选择器

4.1元素选择器

通过元素的名字进行定位，，他会获取页面上所有这个元素
格式:
元素名{css样式;}

4.2类选择器

应用场合：不同的类型标签使用相同的类型
格式:
.clss的名字{css样式；}

4.3id选择器

应用场合，可以定位唯一的元素
不同的标签确实可以使用相同的id，但是一般会进行人为的控制，让id可以是唯一定位到一个元素
格式：
#id名字{css样式}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			/*
			 【1】基本选择器：元素选择器
			 通过元素的名字进行定位，，他会获取页面上所有这个元素
			 格式；
			 元素名{css样式;}
			 * */
			h1{color: #00FFFF;}
			h2{color: chartreuse;}
			i{color: #FF7F50;font: "微软雅黑";}
			
			/*
			 【2】基本选择器：类选择器
			 应用场合：不同的类型标签使用相同的类型
			 格式：
			 .clss的名字{css样式；}
			 * */
			.mycls{color: #FF7F50;}
			
			/*
			 【3】id选择器
			 应用场合，可以定位唯一的元素
			 不同的标签确实可以使用相同的id，但是一般会进行人为的控制，让id可以是唯一定位到一个元素
			  格式：
			 #id名字{css样式}
			 * */
			#myid{color: blueviolet;}
		</style>
	</head>
	<body>
		<h1>css基本选择器</h1>
		<h1>这是<i>一个h1</i>标题</h1>
		<h1>这是一个h1标题</h1>
		<h1 class="mycls">这是一个h1标题</h1>
		<h2>这是一个h2标题</h2>
		<h2 id="myid">这是一个h2标题</h2>
		<h2 class="mycls">这是一个h2标题</h2>	
	</body>
</html>

在这里插入图片描述

4.4基本选择器优先级

id选择器>class选择器>元素选择器

五、关系选择器

5.1 div 和 span

可以把div理解为一个框
div叫做块级元素，有换行效果	 
span属于行内元素，没有换行效果
span：里面内容占多大，span包裹的区域就有多大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*
		 可以把div理解为一个框
		 div叫做块级元素，有换行效果
		 
		 span属于行内元素，没有换行效果
		 span：里面内容占多大，span包裹的区域就有多大
		 * */
		div{border: 1px red solid;}
		span{border: 1px darkmagenta solid;}
		</style>
	</head>
	<body>
		<div>关系选择器</div>
		<div>关系选择器</div>
		<span>选择器</span>
		<span>选择器</span>
		<span>关系选择器</span>
	</body>
</html>

div和span 结合css用于页面的布局。div+css 用于页面布局。

5.2关系选择器

关系选择器
后代选择器：只要是这个元素的后代，样式都会发生变化
div下面的所有h1标签都会发生变化
子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*关系选择器
			 后代选择器：只要是这个元素的后代，样式都会发生变化
			 div下面的所有h1标签都会发生变化
			 * */
			div h1{color: #00FFFF;}
			/*子代选择器*/
			div>h1{color: #8A2BE2;}
		</style>
	</head>
	<body>
		<div>
			<h1>关系选择器</h1>
			<h1>关系选择器</h1>
			<span>
				<h1>关系选择器</h1>
				<h1>关系选择器</h1>
			</span>
		</div>
	</body>
</html>

在这里插入图片描述

六、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*属性选择器*/
			input[type="password"]{
				color: #00FFFF;background-color: cadetblue;
			}
			input[type="text"]{
				background-color: cyan;
			}
		</style>
	</head>
	<body>
		<form>
			用户名<input type="text" value="Flyme awei"/><br />
			密&emsp;码<input type="password" value="123123"/>
			<input type="submit" value="登录"/>
		</form>
	</body>
</html>

在这里插入图片描述

七、伪类选择器

伪类选择器向某些选择器添加特殊效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 伪类选择器:
			 鼠标悬浮在上面才变色*/
			h1:hover{color: #00FFFF;}
		</style>
	</head>
	<body>
		<h1>伪类选择器</h1>
	</body>
</html>

一般用在超链接上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*设置静止状态*/
			a:link{color: black;}
			/*设置鼠标悬浮状态*/
			a:hover{color: red;}
			/*设置触发状态*/
			a:active{color: blue;}
			/*设置完成状态*/
			a:visited{color: green;}
		</style>
	</head>
	<body>
		<h1><a href="index.html" target="_blank">超链接</a></h1>
	</body>
</html>

八、练习百度导航栏

在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*取消无序列表前的图标*/
			ul{list-style-type: none;}
			
			/*设置鼠标悬浮效果*/
			a:hover{color: deepskyblue;}
			
			/*设置静止状态 去除下划线*/
			a:link{
				color: black; 
				text-decoration: none;
				font: 13px;
			}
			
			li{
				float: left; /*向左浮动*/
				margin-left: 15px;} /*设置间隔15px*/
		</style>
	</head>
	<body>
		<ul>
			<li><a href="http://news.baidu.com/" target="_blank">新闻</a></li>
			<li><a href="" target="_blank">hao123</a></li>
			<li><a href="" target="_blank">地图</a></li>
			<li><a href="" target="_blank">贴吧</a></li>
			<li><a href="" target="_blank">视屏</a></li>
			<li><a href="" target="_blank">图片</a></li>
			<li><a href="" target="_blank">网盘</a></li>
			<li><a href="" target="_blank">更多</a></li>
		</ul>
	</body>
</html>

效果图：

在这里插入图片描述

九、浮动的原理

9.1什么是浮动？

浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。

CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

9.2浮动初衷

浮动初衷：文字环绕图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			img{float: left;}
		</style>
	</head>
	<body>
		<img src="img/css.png" />
		&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。&emsp;&emsp;浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷，不能违背的。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。
	</body>
</html>

在这里插入图片描述

9.3浮动原理

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
在这里插入图片描述

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
在这里插入图片描述

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
在这里插入图片描述

9.4浮动语法

值	语法
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

9.5感受浮动效果

先设置一个大的div，然后里面放入三个小的div:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div style="background-color: pink;">
			<div style="width: 100px;height: 100px; background-color:chartreuse;"></div>
			<div style="width: 200px; height: 200px;background-color: coral;"></div>
			<div style="width: 300px;height: 300px; background-color: yellow;"></div>
		</div>
	</body>
</html>

效果：没有浮动效果
在这里插入图片描述
先给绿色div加上浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"></style>
	</head>
	<body>
		<div style="background-color: pink;">
			<div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
			<div id="div02" style="width: 200px; height: 200px;background-color: coral;">2</div>
			<div id="div03" style="width: 300px;height: 300px; background-color: yellow;">3</div>
		</div>
	</body>
</html>

在这里插入图片描述
在给橙色加上浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"></style>
	</head>
	<body>
		<div style="background-color: pink;">
			<div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
			<div id="div02" style="width: 200px; height: 200px;background-color: coral;float: left;">2</div>
			<div id="div03" style="width: 300px;height: 300px; background-color: yellow;">3</div>
		</div>
	</body>
</html>

在这里插入图片描述
在给黄色加上浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"></style>
	</head>
	<body>
		<div style="background-color: pink;">
			<div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
			<div id="div02" style="width: 200px; height: 200px;background-color: coral;float: left;">2</div>
			<div id="div03" style="width: 300px;height: 300px; background-color: yellow;float: left;">3</div>
		</div>
	</body>
</html>

在这里插入图片描述
现在在三个div下面再加上一个紫色div：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"></style>
	</head>
	<body>
		<div style="background-color: pink;">
			<div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
			<div id="div02" style="width: 200px; height: 200px;background-color: coral;float: left;">2</div>
			<div id="div03" style="width: 300px;height: 300px; background-color: yellow;float: left;">3</div>
		</div>
		<div style="width: 600px;height: 400px;background-color: #8A2BE2;">4</div>
	</body>
</html>

在这里插入图片描述用浮动要考虑影响，看看是否对其他的元素有影响。

十、消除浮动影响

方式1：
给浮动的父节点加入一个属性overflow:hidden

方式2：
给父节点加一个高度

方式3：
被影响的元素加一个属性clear:both

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"></style>
	</head>
	<body>
		<div style="background-color: pink;height: 300px;overflow: hidden;">
			<div id="div01" style="width: 100px;height: 100px; background-color:chartreuse;float: left;">1</div>
			<div id="div02" style="width: 200px; height: 200px;background-color: coral;float: left;">2</div>
			<div id="div03" style="width: 300px;height: 300px; background-color: yellow;float: left;">3</div>
		</div>
		<div style="height: 400px;background-color: #8A2BE2;clear:both">4</div>
	</body>
</html>

在这里插入图片描述

十一、定位position

position 属性指定了元素的定位类型。

值	属性
static	默认值。没有定位，元素出现在正常流中（忽略`top，bottom，left，right，z-index`声明）
relative	生成相对定位元素，相当于其正常位置进行定位。因此“left：20”会向元素的LEFT位置添加20像素。
absolute	生成绝对定位，相当于static定位以外的第一个元素进行定位。元素通过`left，right，top，bottom`属性进行规定。
fixed	生成绝对定位元素，相当于浏览器窗口进行定位。元素通过`left，right，top，bottom`属性进行规定。

11.1静态定位：static

如果我们不写position属性的话，相当于默认效果就是静态定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			静态定位：
			如果我们不写position属性的话，相当于默认效果就是静态定位。
		-->
		<img src="img/css4.png" style="position: static;"/>
	</body>
</html>

11.2相对点位：relative

相对于元素自身所在的位置进行定位。

可以设置left，right，top，bottom四个属性。

效果：在进行相对定位以后，元素原来的位置被保留了，其它元素位置不会发生移动。

一般情况下，left和right不会同时使用，top和bottom不会同时使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--相对点位：
			相对于元素自身所在的位置进行定位。
			可以设置left，right，top，bottom四个属性。
			效果：在进行相对定位以后，元素原来的位置被保留了，其它元素位置不会发生移动
			一般情况下，left和right不会同时使用，top和bottom不会同时使用
		-->
		<div style="width: 500px;height: 500px;background-color: pink;">
			<div style="width: 100px;height: 100px;background-color: aquamarine;"></div>
			<div style="width: 100px;height: 100px;background-color: chartreuse;
				position: relative;bottom: 10px;right: 20px;"></div>
			<div style="width: 100px;height: 100px;background-color: coral;"></div>
		</div>
	</body>
</html>

在这里插入图片描述
相对定位的应用场合：

（1）元素在小范围移动的时候
（2）结合绝对定位使用

再说一个属性：z-index

设置堆叠顺序，设置元素谁在上谁在下。
注意：z-index属性要设置在定位的元素上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--相对点位：
			相对于元素自身所在的位置进行定位。
			可以设置left，right，top，bottom四个属性。
			效果：在进行相对定位以后，元素原来的位置被保留了，其它元素位置不会发生移动
			一般情况下，left和right不会同时使用，top和bottom不会同时使用
		-->
		<div style="width: 500px;height: 500px;background-color: pink;">
			<div style="width: 100px;height: 100px;background-color: aquamarine;"></div>
			<div style="width: 100px;height: 100px;background-color: chartreuse;
				position: relative;bottom: 10px;right: 20px;z-index: 10;"></div>
			<div style="width: 100px;height: 100px;background-color: coral;
	"></div>
		</div>
	</body>
</html>

11.3绝对定位：absolute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#outher{
				width: 500px;
				height: 500px;
				background-color:pink;
				margin-left: 200px;
			}
			#div01{
				width: 200px;
				height: 200px;
				background-color: blue;
				position: absolute;
				left: 50px;
				top: 50px;
			}
			#div02{
				width: 200px;
				height: 200px;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div id="outher">
			<div id="div01"></div>
			<div id="div02"></div>
		</div>
	</body>
</html>

在这里插入图片描述

暂时来说看到的效果：蓝色div相对body产生的位移，相对body进行位置的改变，然后蓝色div发生位移以后，原位置得到了释放。橙色div移动上去了！

实际开发中，我们往往让蓝色div在粉色div中发生位移效果：
配合定位来使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#outher{
				width: 500px;
				height: 500px;
				background-color:pink;
				margin-left: 200px;/*粉色div距离左边两百像素*/
				/*直接设置一个相对定位*/
				position: relative;
			}
			#div01{
				width: 200px;
				height: 200px;
				background-color: blue;
				position: absolute;
				left: 50px;
				top: 50px;
			}
			#div02{
				width: 200px;
				height: 200px;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div id="outher">
			<div id="div01"></div>
			<div id="div02"></div>
		</div>
	</body>
</html>

在这里插入图片描述
总结：

当给一个元素设置了绝对定位的时候，它相对谁变化呢？它会向上一层一层的找父级节点是否有定位，如果直到找到body了也没有定位，那么就相对body进行变化，如果父级节点有定位（绝对定位，相对定位，固定定位），但是一般我们会配合使用父级为相对定位，当前元素为绝对定位，这样这个元素就会相对父级位置产生变化。无论是上面的哪一种，都会释放原来的位置，然后其他元素会占用那个位置。

开发中建议使用：父级节点relative定位，子级节点使用绝对定位。

11.4固定定位：fixed

应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个元素位置不动。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#mydiv{
				width: 50px;
				height: 300px;
				background-color: gainsboro;
				/*固定定位*/
				position: fixed;
				top: 200px;
				right: 5px;
			}
		</style>
	</head>
	<body>
		<div id="mydiv"></div>
	</body>
</html>

在这里插入图片描述

十二、盒子模型引入

页面上也有很多元素，元素之间的布局/设计依靠盒子模型：
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述
在浏览器端验证盒子模型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: aqua;
				margin-left:100px ;
				border: 4px red solid;
			}
		</style>
	</head>
	<body>
		<div>div</div>
	</body>
</html>

在这里插入图片描述

十三、盒子模型代码演示

感受盒子模型：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
			}
			#outer{
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				margin-left: 100px;
				margin-top: 100px;
				padding-top:100px;
				padding-left: 100px;
			}
			#mydiv{
				width: 100px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			<div id="mydiv"></div>
		</div>
	</body>
</html>

十四、盒子模型练习题

接下来，做一个小小的练习，实现12306右侧的固定定位。

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div01{
				position: fixed;
				right: 0px;
				top: 100px;
				width: 62px;
				height: 66px;
				background: url(img/731d6dba28ef5ca7c53a381202c0cc5.png) no-repeat 10px 4px;
				background-color: #EFEFEF;
				font-size: 22px;
				font-family: "微软雅黑";
				color: #666666;
				padding-top: 40px;
				text-align: center;
			}
			#div02{
				position: fixed;
				right: 0px;
				top: 220px;
				width: 62px;
				height: 66px;
				background: url(img/948d5e97e3483622e786751e597db8d.png)no-repeat 6px 1px;
				background-color: #EFEFEF;
				font-size: 22px;
				font-family: "微软雅黑";
				color: #666666;
				padding-top: 40px;
				text-align: center;
			}#div03{
				position: fixed;
				right: 0px;
				top: 340px;
				width: 62px;
				height: 66px;
				background: url(img/586bf3990b9745851e3b13d6b01efcf.png) no-repeat 10px 4px;
				background-color: #EFEFEF;
				font-size: 22px;
				font-family: "微软雅黑";
				color: #666666;
				padding-top: 40px;
				text-align: center;
			}#div04{
				position: fixed;
				right: 0px;
				top: 460px;
				width: 62px;
				height: 66px;
				background: url(img/cef0738f020acc31b33a98293cbb2a0.png) no-repeat 4px 4px;
				background-color: #EFEFEF;
				font-size: 22px;
				font-family: "微软雅黑";
				color: #666666;
				padding-top: 60px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="div01">最新<br/>发布</div>
		<div id="div02">联系<br/>客服</div>
		<div id="div03">APP<br/>下载</div>
		<div id="div04">关闭</div>
	</body>
</html>

效果：
在这里插入图片描述
可以看出效果还是挺不错的哦。

在这里插入图片描述注：部分素材来源于网络，如有侵权请联系博主删除。

【Web前端】——CSS基础知识总结

前端技术之CSS

前言

文章目录

一、CSS的引入

1.1为什么要学习CSS？

1.2CSS的作用

1.3HTML和CSS的关系？

1.4CSS名字

二、CSS的三种书写方式

2.1内联样式

2.2内部样式

2.3外部样式

2.4三种书写方式优先级

三、学习CSS的重点

四、基本选择器

4.1元素选择器

4.2类选择器

4.3id选择器

4.4基本选择器优先级

五、关系选择器

5.1 div 和 span

5.2关系选择器

六、属性选择器

七、伪类选择器

八、练习百度导航栏

九、浮动的原理

9.1什么是浮动？

9.2浮动初衷

9.3浮动原理

9.4浮动语法

9.5感受浮动效果

十、消除浮动影响

十一、定位position

11.1静态定位：static

11.2相对点位：relative

11.3绝对定位：absolute

11.4固定定位：fixed

十二、盒子模型引入

十三、盒子模型代码演示

十四、盒子模型练习题