04_CSS及案例开发

文章目录

主要内容
学习目标
第一节：盒子模型
第二节：浮动和定位
第三节：列表标签及案例开发
第四节：总结回顾

主要内容

1.盒子模型

2.定位和浮动及案例开发

3.列表标签及案例开发

4.网页布局相关的CSS样式以及案例

学习目标

知识点	要求
盒子模型基本用法	掌握
盒子模型设置居中	掌握
块元素和行内元素转换	掌握
浮动	掌握
浮动案例	练习
定位	掌握
定位案例	练习
列表标签及案例开发	练习

第一节：盒子模型

Q：什么是网页的布局？

房子 >>> 格局

网页 >>> 格局网页内容的主体规划

1.盒子模型 >>>> 标签和标签存在包含关系时位置的调整

2.浮动 >>>> 多个块标签处于同一行的位置处理问题

3.定位 >>>> 块标签在页面指定位置的处理问题

块标签>>>> 独立占用一行的标签

行内标签>>>> 不会独立占用一行的标签

网页的布局基本都是用块标签来完成的，一般行内标签不具备能够调整网页结构的功能。

一般做布局使用的标签是div ，帮助我们将网页划分成多个小方块。

Div边线的类型：

（1）盒子模型基本用法

其实就是通过标签的内边距和外边距 的特点调整两个有包含关系的标签的位置。

好比两个盒子，一大一小，大盒子装小盒子，小盒子在大盒子内部位置如何调整。

1、内边距

现在写一对div标签，所有标签都可以往div里面放。

html 复制代码

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div1{
				border: 1px solid red;
				width:400px;
				height:400px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			闻我此言良久立
		</div>
		
	</body>
</html>

现在的效果如下：

可以看到文字是默认在左上角的。

我想让文字不要在图中的位置，往下去一点，往右去一点。

使得文字往右去一点，需要设置内边距：

内边距： 内部元素距离当前块元素边界的距离。

比如将左内边距设置为100px：

内边距通过padding调整。

比如：（调整一下宽和高设置为400px，懒得重新截图了）

此时可以文字就是从下图蓝色部分开始放：

看一下前后效果对比：

我们发现改变内边距之后，块变得更大了。

这是什么原因？

当我们将原本400*400的块设置四个内边距为100px之后，内边距不会向内占用空间，而是将块标签放大。

所以盒子模型设置完内边距之后，内边距的值并不是向内侵略的，而是向外扩张的，用以保证原本400*400的容量大小不变。如下：

内边距空出来的部分，是不允许放东西的。如果想放东西，就不要空出来。

<1>

padding同时设置上下左右四个内边距都是100px。

html 复制代码

padding:100px;

图示：

<2>

设置上下内边距为50px 左右内边距为100px

html 复制代码

padding:50px 100px;

图示：

<3>

设置上右下左 四个内边距

html 复制代码

padding: 10px 20px 30px 40px;

网页展示：

<4>

分别单独设置四个内边距

html 复制代码

<!-- 上 右 下 左  -->
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div1{
				border: 1px solid red;
				width:400px;
				height:400px;
        /* 内边距:内部元素距离当前块元素边界的距离(向外扩张,原块大小不动) */
        
				/* 1.上下左右边距都是100Px */
				padding:100px;
				
				/* 2.上下往外推50，左右往外推100 */
				padding:50px 100px;
				
				/* 3.设置上右下左四个外边距(顺时针) */
				padding:10px 20px 30px 40px;
				
				/* 4.单独设置四个内边距 */
				padding-top:10px;
				padding-right: 20px;
				padding-bottom: 30px;
				padding-left: 40px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			感我此言良久立
		</div>
	</body>
</html>

2、外边距

还是先用div写一个盒子：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div2{
				border:1px solid lightcoral;
				background-color: lavenderblush;
				width:300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div id="div2">却坐促弦弦转急</div>
	</body>
</html>

输出：

现在想让这个盒子往右边去一点，再往下去一点：

用刚才的内边距也是可以调整的，因为此时盒子div是包含在body内部的。

可以通过调整body的上内边距和左内边距来达到目的，比如：

html 复制代码

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div2{
				border:1px solid lightcoral;
				background-color: lavenderblush;
				width:300px;
				height: 300px;
			}
			#b1{
				padding-top: 100px;
				padding-left: 200px;
			}
		</style>
	</head>
	<body id="b1">
		<div id="div2">却坐促弦弦转急</div>
	</body>
</html>

输出效果：

我们在这里也可以使用外边距。

外边距：设置当前块标签外部 的和父级块标签之间的距离。

现在的盒子div与外部父标签body：

假设将盒子往下挪200px，往右挪200px：

设置外边距需要用到margin。

<1>

设置当前模块上下左右四个外边距都是200px

html 复制代码

margin: 200px;

图示：

快捷键F12可以看到外边距都是200px：

<2>

设置上下外边距为50px 设置左右外边距为100px

html 复制代码

margin: 50px 100px;

图示：

<3>

设置上右下左四个外边距

html 复制代码

margin: 10px 20px 30px 40px;

图示：

<4>

单独设置四个外边距

html 复制代码

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div2{
				border:1px solid lightcoral;
				background-color: lavenderblush;
				width:300px;
				height: 300px;
				/* 外边距:设置当前块标签外部的和父级块标签之间的距离 */
				
				/* 1.设置当前块上下左右四个外边距都是200px */
				margin:200px;
				
				/* 2.设置上下外边距为50px,左右外边距为100px */
				margin:50px 100px;
				
				/* 3.设置 上 右 下 左 四个外边距 */
				margin:10px 20px 30px 40px;
				
				/* 4.单独设置四个外边距 */
				margin-top:10px;
				margin-right: 20px;
				margin-bottom: 30px;
				margin-left: 40px;
			}
			/* #b1{
				padding-top: 100px;
				padding-left: 200px;
			} */
		</style>
	</head>
	<body id="b1">
		<div id="div2">却坐促弦弦转急</div>
		凄凄不似向前声
		满座重闻皆掩泣
	</body>
</html>

（2）盒子模型设置横向居中

先写两个盒子，大盒子包裹着小盒子：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.outterdiv{
				border:1px solid red;
				width:400px;
				height: 400px;
			}
			.innerdiv{
				border:1px solid green;
				width:200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="outterdiv">
			<div class="innerdiv">
				风雨廊亭梦已醒
			</div>
		</div>
	</body>
</html>

效果如图：

现在我想调整这两个地方的边距，使得里面的绿色盒子往下移，往右移：

<1>

第一种方式，可以调整外部盒子内边距：

外面盒子控制里面盒子往中间推：

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.outterdiv{
				border:1px solid red;
				width:400px;
				height: 400px;
				/* 1.设置外面盒子的内边距 */
				padding-top:20px;
				padding-left: 20px;
			}
			.innerdiv{
				border:1px solid green;
				width:200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="outterdiv">
			<div class="innerdiv">
				风雨廊亭梦已醒
			</div>
		</div>
	</body>
</html>

注意内边距是往外扩张的，原本的400不变，往上往左扩张20px，如下：

<2>

第二种方式，可以设置内部盒子的外边距。

现在绿色盒子为主导，主动远离红色盒子：

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.outterdiv{
				border:1px solid red;
				width:400px;
				height: 400px;
			}
			.innerdiv{
				border:1px solid green;
				width:200px;
				height: 200px;
				/* 2.设置内部盒子的外边距 */
				margin-top:20px;
				margin-left:20px;
			}
		</style>
	</head>
	<body>
		<div class="outterdiv">
			<div class="innerdiv">
				风雨廊亭梦已醒
			</div>
		</div>
	</body>
</html>

注意现在是内部盒子主动往内挪动：

<3>

盒子模型还可以用来设置居中。

让红色盒子置于网页横向的中间：

我们可以看一下盒子多宽，网页多宽，然后计算一下，设置外边距就可以居中了。

比如此时网页宽1000px，红色盒子400px，计算一下还有600px，让红色盒子外边距为300px即可让红色盒子往右挪至中间。如下：

但是按照上面的分析，网页的大小是变化的，当我们缩小网页的时候横向宽度就变化了。

我们可以这样来设置：

输出可以看到红色盒子就居中于网页了（红色盒子的父级是body网页）：

同样我们也可以设置里面绿色盒子横向居中红色盒子，那么就只需要设置绿色盒子左右外边距自动平均分配的即可。如下：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.outterdiv{
				border:1px solid red;
				width:400px;
				height: 400px;
				
				/* 3.通过外边距设置横向居中 */
				margin: 0px auto;
			}
			.innerdiv{
				border:1px solid green;
				width:200px;
				height: 200px;

        /* 3.通过外边距设置横向居中 */
				margin:0px auto;
			}
		</style>
	</head>
	<body>
		<div class="outterdiv">
			<div class="innerdiv">
				风雨廊亭梦已醒
			</div>
		</div>
	</body>
</html>

输出：

注意，只能设置盒子横向居中，不能设置上下居中，上下居中无法生效：

这是因为网页上下默认是无限高度的，但是左右是有宽度限制的。所以上下设置并不会生效，上下想有效果只能手动去调整了。

<4>

整体代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.outterdiv{
				border:1px solid red;
				width:400px;
				height: 400px;
				/* 1.设置外面盒子的内边距 */
				padding-top:20px;
				padding-left: 20px;
				
				/* 3.通过外边距设置居中 */
				margin: 0px auto;
			}
			.innerdiv{
				border:1px solid green;
				width:200px;
				height: 200px;
				/* 2.设置内部盒子的外边距 */
				margin-top:20px;
				margin-left:20px;

        /* 3.通过外边距设置居中 */
				margin: 0px auto;
				margin:auto auto;
			}
		</style>
	</head>
	<body>
		<div class="outterdiv">
			<div class="innerdiv">
				风雨廊亭梦已醒
			</div>
		</div>
	</body>
</html>

（3）块元素和行内元素的转换

1、行内元素

现在有一个红色框，还有一行字：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				width:200px;
				height: 200px;
				background-color: aquamarine;
				border:1px solid red;
			}
			.s1{
				background-color: gold;
				border:1px solid blueviolet;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<span class="s1">声声慢</span>
		</div>
	</body>
</html>

效果如图：

现在想让"声声慢"往下走一点，设置span的上外边距，发现并不生效：

若是现在设置一下span的宽和高，会发现也不生效：

注意，span是一个行内元素 ，行内元素没有盒子模型，没有办法设置内边距和外边距特征。

只有块标签才有盒子模型 ，才可以设置内边距和外边距。比如现在设置div标签居中：

2、转换

行内元素 设置宽和高未必有效（有的行内元素宽和高设置之后会有效）。

块元素 设置宽和高一定有效的。

span 是一个行内元素行内元素没有盒子模型。行内元素没有办法设置内边距和外边距特征。

只有块标签才有盒子模型才可以设置内边距和外边距。

如果一个行内标签非要使用盒子模型那么可以将行内元素转换为块元素。

可以设置display 属性为 block，表示将行内转换为块；inline 表示将块转换为行内。

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				width:200px;
				height: 200px;
				background-color: aquamarine;
				border:1px solid red;
				margin:0px auto;
			}
			.s1{
				width:100px;
				height: 100px;
				background-color: gold;
				border:1px solid blueviolet;
				/* display属性
				   block: 行内转换为块
				   inline:块转换为行内*/
				display:block;
				margin-top:20px;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<span class="s1">声声慢</span>
		</div>
	</body>
</html>

🍺输出

可以看到之前的宽和高属性设置以及上外边距都生效了：

（4）补充

说一下这里的width与height：

注意：width与height是内部容量 ，不会影响 div块的实际大小。

width: 不是整个div横向网页的宽度,它是内部的容量横向为多少像素
height:不是div块的确切高度，它是内部的容量纵向为多少像素
width与height是内部的容量，而不是块横向与纵向的总大小。

🍖Q:什么会影响块的实际大小呢？

1、外边线

线的粗细会影响块的实际大小。

假设现在给div块加上10px的线：

可以看到内部容量并没有变化，还是200*200 ，但是div块的大小变动了，包括了边线的10px大小。

所以width与height设置的内部容量并不是div的真实大小：

现在加了边线的容量之后，整体div大小为220*220，如下：

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#id1{
				/* width: 不是整个div横向网页的宽度,它是内部的容量横向为多少像素
				   height:不是div块的确切高度，它是内部的容量纵向为多少像素
				   width与height是内部的容量，而不是块横向与纵向的总大小*/
				width:200px;
				height:200px;
				background-color: bisque;
				border:10px solid red;
			}
		</style>
	</head>
	<body>
		<div id="id1">我将踏平了孤川西风走马</div>
	</body>
</html>

2、内边距

盒子模型不论是内边距还是外边距的调整，都不会影响块标签内部的容量。

也就是说，不论是调整div的内边距还是外边距，内部能装的区域始终是200个像素。

假设现在调整了一下内边距：

【分析】

①

②

③

④

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#id1{
				/* width: 不是整个div横向网页的宽度,它是内部的容量横向为多少像素
				   height:不是div块的确切高度，它是内部的容量纵向为多少像素
				   width与height是内部的容量，而不是块横向与纵向的总大小*/
				width:200px;
				height:200px;
				background-color: bisque;
				border:10px solid red;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="id1">我将踏平了孤川西风走马</div>
	</body>
</html>

3、外边距

现在用一个大块包裹着小块：

现在我想让绿色小盒子往下移动一段距离：

可以设置绿色盒子的上外边距：

可以看到，调整外边距不会让块的大小产生变化，只会让块标签的包含关系产生距离缝隙。

而调整内边距会让整个块的大小发生变化。

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#id1{
				/* width: 不是整个div横向网页的宽度,它是内部的容量横向为多少像素
				   height:不是div块的确切高度，它是内部的容量纵向为多少像素
				   width与height是内部的容量，而不是块横向与纵向的总大小*/
				width:200px;
				height:200px;
				background-color: bisque;
				border:1px solid red;
				/* padding: 20px; */
			}
			#id2{
				width:100px;
				height: 100px;
				background-color: greenyellow;
				margin-top:20px;
			}
		</style>
	</head>
	<body>
		<div id="id1">
			<div id="id2">
				我将踏平了孤川西风走马
			</div>
		</div>
	</body>
</html>

第二节：浮动和定位

（1）浮动

先写三个大小相同的块：

可以发现，块标签是独占一行的，三个块是竖着放置的。

现在我希望可以横着放置这三个块：

1、方式一

产生换行的原因是，它们都是块标签。

若是想让它们在同一行的话，第一种解决方案是将块标签转换为行内标签。如下：

可以发现，虽然在同一行了，但是宽和高的属性设置不生效了。这是因为现在变成了行内元素，行内元素的宽和高往往是不生效的。而块元素是一定生效的。

这种变换为行内元素，使得原本的块在同一行上的方式，可能会让这个标签原本的样式消失。

我们现在只想让它们位置变动一下 ，让它们在同一行，而不要改变它们的原本样式。

第一种方式不可行。

2、方式二

采用浮动处理。

让三个块往上飘，若一行占满则会换一行。

这样可以让多个块标签处于同一行，不用转换成行内元素，宽和高以及盒子模型的特征得以保留。

使用float属性。

浮动有几种形式。

第一种是往左边浮动：

比如：

第二种是往右边浮动：

比如：

当然，若是三个块浮动性质相同，我们写一个就行，注意是1号先飘，然后2号、3号，这种浮动可以保留原本块的特征（宽、高、盒子模型）。如下：

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .d1,.d2,.d3{
                width: 200px;
                height: 200px;
        /*1.方式一(不可行)  */
                /* display: inline; */

        /*2.方式二(可行)  */
                float: right;
            }
            .d1{
                background-color: aqua;
                /* float:left; */
            }
            .d2{
                background-color: aquamarine;
                /* float:right; */
            }
            .d3{
                background-color: bisque;
                /* float:left; */
            }
        </style>
    </head>
    <body>
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
    </body>
</html>

3、案例1

现在我想让刚才的三个块中间分开一点：

设置块和块中间的距离 ，可以设置它们的外边距 。

比如现在设置左外边距：

3号块左侧也有距离的，只不过看不出来：

也可以设置右外边距：

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .d1,.d2,.d3{
                width: 200px;
                height: 200px;
                /* display: inline; */
                float: right;
                margin-right: 40px;
            }
            .d1{
                background-color: aqua;
                /* float:left; */
            }
            .d2{
                background-color: aquamarine;
                /* float:right; */
            }
            .d3{
                background-color: bisque;
                /* float:left; */
            }
        </style>
    </head>
    <body>
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
    </body>
</html>

4、案例2

浮动是有范围的，范围是基于父级块标签（不是在整个网页中浮动）。

现在写一个大范围的div，将刚才的三个块包起来：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#outerdiv{
				width: 1000px;
				height: 500px;
				border: 1px solid black;
			}
			
			.d1,.d2,.d3{
				width: 200px;
				height: 200px;
				/* display: inline; */
				float: right;
				margin-right: 40px;
			}
			.d1{
				background-color: aqua;
				/* float:left; */
			}
			.d2{
				background-color: aquamarine;
				/* float:right; */
			}
			.d3{
				background-color: bisque;
				/* float:left; */
			}
		</style>
	</head>
	<body>
		<div id="outerdiv">
			<div class="d1">1</div>
			<div class="d2">2</div>
			<div class="d3">3</div>
		</div>
		
	</body>
</html>

输出：

将outerdiv的宽度变小为700px，三个小块如果是在父级标签中浮动，那么位置就会受到影响；如果是在网页中浮动，位置就不会受到影响。

可以发现三个小框浮动的范围是受到外面大黑框的影响的：

在父级块标签中浮动。

如果父级块移动了，那么三个小块也会跟着移动。比如：

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#outerdiv{
				width: 700px;
				height: 500px;
				border: 1px solid black;
				margin:0px auto;
			}
			
			.d1,.d2,.d3{
				width: 200px;
				height: 200px;
				/* display: inline; */
				float: right;
				margin-right: 40px;
			}
			.d1{
				background-color: aqua;
				/* float:left; */
			}
			.d2{
				background-color: aquamarine;
				/* float:right; */
			}
			.d3{
				background-color: bisque;
				/* float:left; */
			}
		</style>
	</head>
	<body>
		<div id="outerdiv">
			<div class="d1">1</div>
			<div class="d2">2</div>
			<div class="d3">3</div>
		</div>
		
	</body>
</html>

（2）浮动案例

【12306广告栏】

可以看到这个是用浮动和盒子模型做出来的。

如果不使用浮动，则四个小盒子会变成这样：

将四个图片导入文件中，然后计算一下每个图片的大小以及外边距：

当然，也可以设置正好的宽度和高度：（不显示边线，将边线隐藏）

🌱代码参考

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#outerdiv{
				width: 1486px;
				height: 410px;
				margin: 0px auto;
				/* border: 1px solid black; */
			}
			.ad_item{
				width: 738px;
				height: 200px;
				/* border: 1px solid red; */
				/* margin-top: 10px;
				margin-left: 10px; */
				float:left;
			}
			/* 注意要设置图片大小，否则图片不会在div小块中 */
			.ad_item img{
				width: 738px;
				height: 200px;
			}
			
			/* 调整图片1与2的下外边距为10px */
			#ad1,#ad2{
				margin-bottom: 10px;
			}
			
			/* 调整图片2与4的左外边距为10px */
			#ad2,#ad4{
				margin-left: 10px;
			}
			
		</style>
	</head>
	<body>
		<div id="outerdiv">
			<div id="ad1" class="ad_item">
				<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
					<img src="https://www.12306.cn/index/images/abanner01.jpg" />
				</a>
			</div>
			
			<div id="ad2" class="ad_item">
				<a href="https://exservice.12306.cn/excater/index.html" target="_blank">
					<img src="https://www.12306.cn/index/images/abanner02.jpg" />
				</a>
			</div>
			
			<div id="ad3" class="ad_item">
				<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank">
					<img src="https://www.12306.cn/index/images/abanner03.jpg" />
				</a>
			</div>
			
			<div id="ad4" class="ad_item">
				<a href="https://kyfw.12306.cn/otn/view/commutation_index.html" target="_blank" >
					<img src="https://www.12306.cn/index/images/abanner04.jpg" />
				</a>
			</div>
		</div>
	</body>
</html>

🍺输出

（3）定位

页面布局的一种手段。

不同于盒子模型和浮动，它没有包含关系。

1、绝对定位

有两个方块：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				height: 200px;
				width: 200px;
				background-color:greenyellow;
			}
			.div2{
				height: 200px;
				width:200px;
				background-color:bisque;
			}
		</style>
	</head>
	<body>
		<div class="div1">1</div>
		<div class="div2">2</div>
	</body>
</html>

输出：

现在想让1号方块放到指定的位置，并且它与同一行或者其他位置的任何东西都毫无关系（盒子模型、浮动）。

定位要设置position属性。有三个值可供选择。

第一种是absolute，绝对定位，给了多少值他就是多少值。

位置值一共有四个可以选择，上下左右。

注意不要设置冲突的值，比如距离页面上有10px，又距离页面下有10px，这会导致有一个设置不生效。

比如：

把块2注释不看：

可以发现，左上角的点被1号释放之后，2号块会上去占有：

当位置改变，该位置的坐标原点就会被释放，后续的其他标签就可以占用该位置。

绝对定位基于父级标签原点

移开以后会自动释放父级标签原点位置

若是两个块绝对定位在相同位置，则2号块会将1号覆盖，如下：

可以设置两个块错开：

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				height: 200px;
				width: 200px;
				background-color:greenyellow;
				/* 1.绝对定位 */
				position:absolute;
				/* 位置值 */
				top:200px;
				/* bottom:; */
				left:300px;
				/* right:; */
			}
			.div2{
				height: 200px;
				width:200px;
				background-color:bisque;
				position:absolute;
				top:400px;
				left:500px;
			}
		</style>
	</head>
	<body>
		<div class="div1">1</div>
		<div class="div2">2</div>
	</body>
</html>

2、相对定位

相对定位也是调整div的top和left值来设置div在网页中的距离的。

position属性。

第二种是relative，相对定位，相对于自己原来的位置。

两个块初始位置：

如果是刚才第一种绝对定位 ，输出的是这样的（1释放了原点，2号占有往上走）：

现在用相对定位 ，输出的就是这样（1没有释放原点，2无法占有上不去）：

相对定位是相对于自身原来的位置,移开之后,不会释放原点位置。

相对定位是针对于自己原来的位置，不是浏览器窗口的位置。如下：

当1位置发生改变，不会释放原来的位置，其他标签不能占用1原来的位置。（1在左上角原来的位置盖了房子，现在出门了，房子是不能被2占用的）

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				height: 200px;
				width: 200px;
				background-color: lightsteelblue;
				/* 2.相对定位 */
				position:relative; 
				top:200px;
				left:300px;
			}
			.div2{
				height: 200px;
				width: 200px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="div1">1</div>
		<div class="div2">2</div>
	</body>
</html>

3、相对浏览器窗口定位

相对浏览器窗口定位使用fixed。

看样子和第一种没啥区别，我们可以把浏览器窗口拉长看一下。

不论页面如何拖动，1号始终在窗口的固定位置。它不会根据页面上下翻动而改变位置。如下：

和页面中有什么东西没有关系，完全是根据窗口来定位的。

是根据窗口的点来定位，而不是页面的点。如下：

这种功能一般用于制作网页的边角广告，比如：

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				height: 200px;
				width: 200px;
				background-color: lightsteelblue;
				/* 3.相对于浏览器窗口定位 */
				position:fixed; 
				top:200px;
				left:300px;
			}
			.div2{
				height: 200px;
				width: 200px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="div1">1</div>
		<div class="div2">2</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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>

（4）定位案例

🌱代码参考

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.note_item1{
				width:63px ;
				height:108px ;
				/* border: 1px solid red; */
				margin-bottom: 5px;
			}
			.note_item2{
				width:63px ;
				height:86px ;
			}
			.note{
				width: 63px;
				height:425px ;
				/* border: 1px solid blue; */
				/* 包裹住所有小块的大框，设置其位置 */
				position:fixed;
				right: 0px;
				top: 225px;
			}
		</style>
	</head>
	<body>
		<div class="note">
			<!-- img行内元素，用div包住使其独占一行 -->
			<div class="note_item1">
				<img src="img/note1.png" />
			</div>
			<div class="note_item1">
				<img src="img/note2.png" />
			</div>
			<div class="note_item1">
				<img src="img/note3.png" />
			</div>
			<div class="note_item2">
				<img src="img/note4.png" />
			</div>
		</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>
		人生生在逃死在追
	</body>
</html>

🍺输出

第三节：列表标签及案例开发

<1>制作框架

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选中body中的所有标签 */
			*{
				border: 1px solid orangered;
			}
		</style>
	</head>
	<body>
		<div>

			<h3>最新发布</h3>

			<ul>
				<li>
					<a href="https://www.12306.cn/mormhweb/zxdt/202412/t20241211_43192.html">公告</a>
				</li>
				<li>
					<a href="https://www.12306.cn/mormhweb/zxdt/202401/t20240111_40579.html">关于优化铁路车票改签规则的公告</a>
				</li>
				<li>
					<a href="https://www.12306.cn/mormhweb/zxdt/202206/t20220617_37625.html">铁路旅客禁止、限制携带和托运物品目录</a>
				</li>
				<li>
					<a href="https://www.12306.cn/mormhweb/zxdt_news/202606/t20260615_45969.html">中国铁路成都局集团有限公司关于2026年6月16日至22日</a>
				</li>
			</ul>
		</div>
	</body>
</html>

可以看到各个边线：

这里有很多留白：

可以将页面中所有的留白都去掉（后面自己设置的时候，可以避免原有的内外边距干扰）：

<2> 调整样式

调整"最新发布"的样式：

设置内部文字的样式：

设置列表项的风格：

再调整一下其他细节，第一个小块就做好了：

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选中body中的所有标签 */
			*{
				/* border: 1px solid orangered; */
				/* 设置所有的外边距以及内边距为0 */
				margin: 0px;
				padding: 0px;
			}
			
			.introduce{
				width:390px ;
				height: 300px;
				border: 1px solid #3B99FC;
			}
			
			.introduce h3{
				/* height:设置h3高度
				   background-color:设置h3背景色
				   color:设置字体颜色
				   text-align: 设置文字居中对齐
				   line-height: 设置行高(与h3高度一致则会使得文本上下居中);*/
				height: 40px;
				background-color: #3B99FC;
				color: white;
				text-align: center;
				line-height: 40px;
			}
			
			.introduce ul{
				/* border: 1px solid red; */
				margin-left: 30px;
				margin-top: 30px;
			}
			
			.introduce a{
				/* text-decoration:文字装饰设置为none可以使得下划线消失 */
				text-decoration: none;
				font-size: 15px;
				color:darkslategray;
			}
			
			/* li是块标签，独占一行 */
			.introduce li{
				/* 设置li高度 */
				height: 40px;
				/* 将列表项风格去除，用蓝色方块替代 */
				list-style: none;
				list-style-image: url(img/dot.png);
			}
			/* 鼠标悬停设置 */
			.introduce a:hover{
				color:black;
			}
		</style>
	</head>
	<body>
		<div class="introduce">

			<h3>最新发布</h3>

			<ul>
				<li>
					<a href="https://www.12306.cn/mormhweb/zxdt/202412/t20241211_43192.html">公告</a>
				</li>
				<li>
					<a href="https://www.12306.cn/mormhweb/zxdt/202401/t20240111_40579.html">关于优化铁路车票改签规则的公告</a>
				</li>
				<li>
					<a href="https://www.12306.cn/mormhweb/zxdt/202206/t20220617_37625.html">铁路旅客禁止、限制携带和托运物品目录</a>
				</li>
				<li>
					<a href="https://www.12306.cn/mormhweb/zxdt_news/202606/t20260615_45969.html">中国铁路成都局集团有限公司关于2026年6月16日</a>
				</li>
			</ul>
		</div>
	</body>
</html>

看一下效果：

这里直接复制三个块，然后整体来一个浮动。

🌱代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选中body中的所有标签 */
			*{
				/* border: 1px solid orangered; */
				/* 设置所有的外边距以及内边距为0 */
				margin: 0px;
				padding: 0px;
			}
			
			.introduce{
				width:388px ;
				height: 298px;
				border: 1px solid #3B99FC;
				/* 向左浮动 */
				float: left;
			}
			
			.introduce h3{
				/* height:设置h3高度
				   background-color:设置h3背景色
				   color:设置字体颜色
				   text-align: 设置文字居中对齐
				   line-height: 设置行高(与h3高度一致则会使得文本上下居中);*/
				height: 40px;
				background-color: #3B99FC;
				color: white;
				text-align: center;
				line-height: 40px;
			}
			
			.introduce ul{
				/* border: 1px solid red; */
				margin-left: 30px;
				margin-top: 30px;
			}
			
			.introduce a{
				/* text-decoration:文字装饰设置为none可以使得下划线消失 */
				text-decoration: none;
				font-size: 15px;
				color:darkslategray;
			}
			
			/* li是块标签，独占一行 */
			.introduce li{
				/* 设置li高度 */
				height: 40px;
				/* 将列表项风格去除，用蓝色方块替代 */
				list-style: none;
				list-style-image: url(img/dot.png);
			}
			
			/* 鼠标悬停设置 */
			.introduce a:hover{
				color:black;
			}
			
			/* 最外面大块 */
			.outerintroduce{
				width: 1190px;
				height:300px ;
				/* border: 1px solid red; */
				/* 最大块网页横向居中 */
				margin: 0px auto;
			}
			
			/* 设置前面两个块的右外边距 */
			#in1,#in2{
				margin-right:10px;
			}
		</style>
	</head>
	<body>
		<div class="outerintroduce">
			<!-- 第一个方块 -->
			<div class="introduce" id="in1">
			
				<h3>最新发布</h3>
			
				<ul>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202412/t20241211_43192.html">公告</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202401/t20240111_40579.html">关于优化铁路车票改签规则的公告</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202206/t20220617_37625.html">铁路旅客禁止、限制携带和托运物品目录</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt_news/202606/t20260615_45969.html">中国铁路成都局集团有限公司关于2026年6月16日</a>
					</li>
				</ul>
			</div>
			
			<!-- 第二个方块 -->
			<div class="introduce" id="in2">
			
				<h3>最新发布</h3>
			
				<ul>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202412/t20241211_43192.html">公告</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202401/t20240111_40579.html">关于优化铁路车票改签规则的公告</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202206/t20220617_37625.html">铁路旅客禁止、限制携带和托运物品目录</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt_news/202606/t20260615_45969.html">中国铁路成都局集团有限公司关于2026年6月16日</a>
					</li>
				</ul>
			</div>
			
			<!-- 第三个方块 -->
			<div class="introduce">
			
				<h3>最新发布</h3>
			
				<ul>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202412/t20241211_43192.html">公告</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202401/t20240111_40579.html">关于优化铁路车票改签规则的公告</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt/202206/t20220617_37625.html">铁路旅客禁止、限制携带和托运物品目录</a>
					</li>
					<li>
						<a href="https://www.12306.cn/mormhweb/zxdt_news/202606/t20260615_45969.html">中国铁路成都局集团有限公司关于2026年6月16日</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

🍺输出

第四节：总结回顾

做网页的布局

【盒子模型】

<1> 处理的是具有包含关系的块标签的位置关系。

①内边距样式 padding

html 复制代码

  	padding: 10px;  设置上下左右四个内边距都是10px
	padding: 10px 20px; 上下内边距为10px 左右内边距为20px
	padding: 10px 20px 30px 40px ; 上 右 下 左 四个内边距分别为 10 20 30 40 个像素
	padding-left: 左内边距
	padding-right:右内边距
	padding-top:上内边距
	padding-bottom:下内边距

②外边距样式 margin

html 复制代码

  margin: 10px;  设置上下左右四个外边距都是10px
	margin: 10px 20px; 上下外边距为10px 左右内外距为20px
	margin: 10px 20px 30px 40px ; 上 右 下 左 四个外边距分别为 10 20 30 40 个像素
	margin-left: 左外边距
	margin-right:右外边距
	margin-top:上外边距
	margin-bottom:下外边距

	通过外边距可以设置一个块标签居父级块标签的中间位置(不可以用padding设置，因为它不会侵占内部容量，是向外扩张的)
<!-- 上下是0个外边距，左右是自动平均分配父级剩余空间 -->
	margin:0px auto;

<2> 块元素和行内元素的转换

通过 css 中 display : block(行内转块 )/inline(块转行内)

一般只有块标签才有盒子模型。

一般的行内元素设置宽和高的样式是不生效的。

块元素设置宽和高的样式都是有效的。

【浮动】

让多个块标签在处于同一行的同时又保留块标签的盒子模型特征。

css 中 float; left(向左浮动 )/right(向右浮动)

让多个块标签在父级的块标签中浮动不是在整个网页上浮动（小盒子跟着大盒子跑）。

【定位】

通过给定的坐标值让块标签出现在网页上的指定位置。

css 中 position:

absolute(绝对定位)：相对网页原点位置 会释放坐标原点 后续的标签可以占用该标签原来的位置。

relative(相对对象) ：相对于标签原有的位置定位 不会释放坐标原点 后续的标签不可以占用该标签原来的位置。

fixed(相对窗口定位)：相对浏览器窗口定位 和页面上的任何位置都没有关系 (广告)。