8.（css）定位使用全攻略

最新推荐文章于 2024-06-25 06:44:50 发布
最新推荐文章于 2024-06-25 06:44:50 发布
阅读量370 收藏
点赞数
分类专栏： # CSS 0基础快速入门 CSS学习手册 文章标签： html css 定位 布局 相对定位 绝对定位 固定定位 定位模式 边偏移 布局机制 堆叠顺序 属性 display 网页布局 标准流 浮动 圆角
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/112395076
版权

文章目录

1. 定位(position)重点提炼

  • 理解
    • 为什么要用定位
    • 定位的4种分类
    • 四种定位的各自特点
    • 为什么常用子绝父相布局
  • 应用
    • 轮播图布局

2. CSS 布局的三种机制

网页布局的核心 —— 就是用 CSS 来摆放盒子位置。

CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中：

  1. 普通流（标准流）

  2. 浮动

    • 让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。

  3. 定位

    • 将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。

3. 为什么使用定位

思考一下用标准流或浮动能否实现类似的效果？

（之前学的内容，是压不住后面的图片和文字的）

1. 小黄色块在图片上移动，吸引用户的眼球。

在这里插入图片描述

定位示例3

2. 当我们滚动窗口的时候，盒子是固定屏幕某个位置的

在这里插入图片描述

结论：要实现以上效果，标准流或浮动都无法快速实现

定位简述：

将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面

所以，我们脑海应该有三种布局机制的上下顺序

标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）


4. 定位详解

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移


4.1 边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

边偏移属性示例描述
toptop: 80px顶端偏移量，定义元素相对于其父元素上边线的距离。
bottombottom: 80px底部偏移量，定义元素相对于其父元素下边线的距离。
leftleft: 80px左侧偏移量，定义元素相对于其父元素左边线的距离。
rightright: 80px右侧偏移量，定义元素相对于其父元素右边线的距离

注意：定位的盒子有了边偏移才有价值。 一般情况下，凡是有定位地方必定有边偏移。


4.2 定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

定位模式是有不同分类的，在不同情况下，我们用到不同的定位模式。

值语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

定位 => 设置定位模式 + 设置边偏移

在这里插入图片描述


4.2.1 静态定位(static) - 了解

  • 静态定位是元素的默认定位方式，无定位的意思。它相当于 border里面的none， 不要定位的时候用。
  • 静态定位 按照标准流特性摆放位置，它没有边偏移。
  • 静态定位在布局时我们几乎不用的

4.2.2 相对定位(relative) - 重要

  • 相对定位是元素相对于它 原来在标准流中的位置 来说的。（自恋型）

效果图：

相对定位案例

4.2.2.1 example01
4.2.2.1.1 example01-1
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

image-20200811083532632

定位 = 定位模式 + 边偏移

		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			/*定位 = 定位模式 +  边偏移*/
			position: relative;
			top: 100px;
			left: 100px;
		}

image-20200811083735312

相对定位是元素相对于它 原来在标准流中的位置 来说的。

	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 100px;
			/*定位 = 定位模式 +  边偏移*/
			position: relative;
			top: 100px;
			left: 100px;
		}
	</style>

image-20200811084109890

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.45
Branch： branch03
commit description：a1.45（example01-1——相对定位基本使用）

tag：a1.45

4.2.2.1.2 example01-2
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	
</body>
</html>

image-20200811085105613

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.two {
			background-color: purple;
			position: relative;
			top: 100px;
			left: 100px;
		}
	</style>
</head>
<body>
	<div>1</div>
	<div class="two">2</div>
	<div>3</div>
	
</body>
</html>

原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

image-20200811090142516

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.46
Branch： branch03
commit description：a1.46（example01-2——相对定位的特性）

tag：a1.46

4.2.2.2 相对定位的特点：（务必记住）
  • 相对于 自己原来在标准流中位置来移动的（不脱离标准流）
  • 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

4.2.3 绝对定位(absolute) - 重要

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）

  1. 完全脱标 —— 完全不占位置；

  2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

在这里插入图片描述

  1. 父元素要有定位

    • 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

在这里插入图片描述

4.2.3.1 example02
4.2.3.1.1 example02-1
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位以带有定位的父级元素来移动位置</title>
	<style>
		.father {
			width: 350px;
			height: 350px;
			background-color: pink;
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

image-20200811090614071

给父亲设置外边距

		.father {
			width: 350px;
			height: 350px;
			background-color: pink;
			margin: 100px;
		}

标准流总是以父亲为主，父亲跑了，也会带着儿子跑。

image-20200811090730829

标准流的子盒子总是以父级为准移动位置

		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			margin-left: 100px;
		}

image-20200811091134137

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.47
Branch： branch03
commit description：a1.47（example02-1——标准流的子盒子总是以父级为准移动位置）

tag：a1.47

4.2.3.1.2 example02-2

给儿子加绝对定位

		.father {
			width: 350px;
			height: 350px;
			background-color: pink;
			margin: 100px;
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			position: absolute;
			top: 50px;
			left: 50px;
		}

如果父级没有定位，绝对定位子盒子以我们文档为准浏览器移动位置对齐。

image-20200811091415545

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.48
Branch： branch03
commit description：a1.48（example02-2——如果父级没有定位，绝对定位子盒子以我们文档为准浏览器移动位置对齐。）

tag：a1.48

4.2.3.1.3 example02-3

父级加定位

		.father {
			width: 350px;
			height: 350px;
			background-color: pink;
			margin: 100px;
			position: relative;
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			position: absolute;
			top: 50px;
			left: 50px;
		}

如果父级有定位，绝对定位子盒子以父级为准移动位置对齐。

image-20200811092449446

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.49
Branch： branch03
commit description：a1.49（example02-3——如果父级有定位，绝对定位子盒子以父级为准移动位置对齐。）

tag：a1.49

4.2.3.1.4 example02-4

我们所说的父级不一定是爸爸，爷爷也同理。

实际过程这样，子级会寻找对齐目标，先从爸爸找，爸爸没定位，再找爷爷，爷爷没定位，再向上找，如果一直都没定位，就定位对齐浏览器移动位置；否则跟随离它最近的父级对齐。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位以带有定位的父级元素来移动位置</title>
	<style>
		.grandfather {
			width: 500px;
			height: 500px;
			background-color: skyblue;
			position: absolute;
		}
		.father {
			width: 350px;
			height: 350px;
			background-color: pink;
			margin: 100px;
			/*position: relative;*/
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
</head>
<body>
	<div class="grandfather">
		<div class="father">
			<div class="son"></div>
		</div>
	</div>
</body>
</html>

这里就是子级跟随爷爷对齐了。

image-20200811093209738

定位是绝对定位和相对定位、固定定位都可

		.grandfather {
			width: 500px;
			height: 500px;
			background-color: skyblue;
			position: relative;
		}

这里父级外边距塌陷了（参考1.5.7.2）

因为相对定位还是标准流，因此由于子元素有外边距，而父元素没有定义上边框、上内边框及overflow:hidden等，导致父元素跟随子元素塌陷，而绝对定位是完全脱标了，不会受到标准流的影响，则不会塌陷。

image-20200811093401975

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.50
Branch： branch03
commit description：a1.50（example02-4——绝对定位特点）

tag：a1.50

4.2.3.1.5 example02-5
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位的盒子不占有位置</title>
	<style>
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.damao {
			width: 200px;
			height: 200px;
			background-color: purple;
		}
		.ermao {
			width: 250px;
			height: 250px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="damao"></div>
		<div class="ermao"></div>
	</div>
</body>
</html>

image-20200811094907058

damao加绝对定位

		.damao {
			position: absolute;
			top: 0;
			left: 0;
			width: 200px;
			height: 200px;
			background-color: purple;
		}

其父级没定位，则以浏览器对齐

image-20200811095035225

父级加相对定位

		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			position: relative;
		}

damao对齐父级，但是ermao跑上来了。 => 绝对定位不保留原来的位置，完全是脱标的。（相当定位是保留位置的）

image-20200811095126354

这就是为什么这里的小黄块随意覆盖了，因为它是完全脱标的。

在这里插入图片描述

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.51
Branch： branch03
commit description：a1.51（example02-5——绝对定位不保留原来的位置，完全是脱标的。）

tag：a1.51

4.2.3.2 绝对定位的特点：（务必记住）
  • 绝对定位是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
  • 不保留原来的位置，完全是脱标的。（相对定位以自己原来的位置为基准，是不脱标的，保留原来的位置）

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

4.2.3.3 定位口诀 —— 子绝父相

刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？

子绝父相 —— 子级是绝对定位，父级要用相对定位。

子绝父相是使用绝对定位的口诀，要牢牢记住！

疑问：为什么在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？

观察下图，思考一下在布局时，左右两个方向的箭头图片以及父级盒子的定位方式。

子绝父相截图

在这里插入图片描述

分析：

  1. 方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
  2. 父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。
    • 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

4.2.3.3.1 example03

子绝父相原理

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.up {
			width: 1000px;
			height: 90px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="up"></div>
	<div class="down"></div>
</body>
</html>

image-20200811103419981

		.up {
			width: 1000px;
			height: 90px;
			background-color: pink;
		}
		.down {
			width: 1000px;
			height: 150px;
			background-color: #000;
		}

image-20200811103459118

<body>
	<div class="up">
		<img src="images/img.jpg" alt="">
	</div>
	<div class="down"></div>
</body>

image-20200811103633381

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.up {
			width: 1000px;
			height: 90px;
			background-color: pink;
		}
		.down {
			width: 1000px;
			height: 150px;
			background-color: #000;
		}
		.arr-l {
			width: 40px;
			height: 40px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="up">
		<img src="images/img.jpg" alt="">
		<div class="arr-l"></div>
	</div>
	<div class="down"></div>
</body>
</html>

由于img是行内块元素，arr-l是块级元素，独占一行，arr-l就下去了。

image-20200811104028008

我们添加浮动试试

		.arr-l {
			float: left;
			width: 40px;
			height: 40px;
			background-color: purple;
		}

但是它并没有压住图片，还是在图片的下方，浮动只能浮在标准流上，而行内块元素不属于标准流元素。

image-20200811104231831

因此只能用定位解决了，不能用相对定位，它是相对于标准流对齐的。

		.arr-l {
			position: absolute;
			top: 25px;
			left: 0;
			float: left;
			width: 40px;
			height: 40px;
			background-color: purple;
		}

现在是与文档对齐，应该给父级加定位，对齐父级。

image-20200811110015967

		.up {
			position: absolute;
			width: 1000px;
			height: 90px;
			background-color: pink;
		}

父级用绝对定位，就脱标了，下方黑色的div就上去了。因此需要采用相对定位。

image-20200811110134576

		.up {
			position: relative;
			width: 1000px;
			height: 90px;
			background-color: pink;
		}

image-20200811110242421

补齐右边的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.up {
			position: relative;
			width: 1000px;
			height: 90px;
			background-color: pink;
		}
		.down {
			width: 1000px;
			height: 150px;
			background-color: #000;
		}
		.arr-l {
			position: absolute;
			top: 25px;
			left: 0;
			float: left;
			width: 40px;
			height: 40px;
			background-color: purple;
		}
		.arr-r {
			position: absolute;
			top: 25px;
			right: 0;
			width: 40px;
			height: 40px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="up">
		<img src="images/img.jpg" alt="">
		<div class="arr-l"></div>
		<div class="arr-r"></div>
	</div>
	<div class="down"></div>
</body>
</html>

image-20200811110416535

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.52
Branch： branch03
commit description：a1.52（example03——子绝父相原理）

tag：a1.52

4.2.3.4 实例——哈根达斯

image-20200811110634091

4.2.3.4.1 分析
  1. 一个大的 div 中包含 3 张图片；
  2. 大的 div 水平居中；
  3. 2 张小图片重叠在广告图片上方 —— 脱标，不占位置，需要使用绝对定位；
  4. 2 张小图片分别显示在左上角和右下角 —— 需要使用边偏移确定准确位置。
4.2.3.4.2 实现

box尺寸就是图片尺寸即可。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>哈根达斯</title>
	<style>
		.box {
			width: 310px;
			height: 190px;
			border: 1px solid #ccc;
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

image-20200811111032438

插入图片

<body>
	<div class="box">
		<img src="images/adv.jpg" alt="">
	</div>
</body>

image-20200811111305961

原理上还有内边距

padding: 10px;

image-20200811111643514

<body>
	<div class="box">
		<img src="images/top_tu.gif" alt="" class="top">
		<img src="images/adv.jpg" alt="">
	</div>
</body>

加上左侧“今日新单”

image-20200811111819702

可能大家第一想法就是加浮动，但是图片是非标准流的，并且浮动是压不住padding和边框的

		.top {
			float: left;
		}

image-20200811111941871

因此用子绝父相

		.box {
			position: relative;
			width: 310px;
			height: 190px;
			border: 1px solid #ccc;
			margin: 100px auto;
			padding: 10px;
		}
		.top {
			/*float: left;*/
			position: absolute;
			top: 0;
			left: 0;
		}

image-20200811112201670

完善右侧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>哈根达斯</title>
	<style>
		.box {
			position: relative;
			width: 310px;
			height: 190px;
			border: 1px solid #ccc;
			margin: 100px auto;
			padding: 10px;
		}
		.top {
			/*float: left;*/
			position: absolute;
			top: 0;
			left: 0;
		}
		.bottom {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/top_tu.gif" alt="" class="top">
		<img src="images/adv.jpg" alt="">
		<img src="images/br.gif" alt="" class="bottom">
	</div>
</body>
</html>

image-20200811112300842

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.53
Branch： branch03
commit description：a1.53（绝对定位——哈根达斯案例）

tag：a1.53

4.2.3.4.3 小结
  1. 子绝父相 —— 子元素使用绝对定位，父元素使用相对定位；
  2. 与浮动的对比：
    • 绝对定位：脱标，利用边偏移指定准确位置；
    • 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示。

4.2.4 固定定位(fixed) - 重要

固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

  1. 完全脱标 —— 完全不占位置；
  2. 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
    • 跟父元素没有任何关系；单独使用的
    • 不随滚动条滚动。

固定定位案例

提示：IE 6 等低版本浏览器不支持固定定位。

4.2.4.1 example04
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style>
		body {
			height: 1500px;
		}
		.box {
			width: 300px;
			height: 300px;
			background-color: pink;
			margin: 100px;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/sun.jpg" alt="" width="150">
	</div>
</body>
</html>

image-20200811113311492

		.box {
			width: 300px;
			height: 300px;
			background-color: pink;
			margin: 100px;
		}
		.box img {
			position: fixed;
			top: 0;
			left: 0;
		}

固定定位跟父级没有任何关系

image-20200811113550568

		.box {
			position: relative;
			width: 300px;
			height: 300px;
			background-color: pink;
			margin: 100px;
		}

父级加定位也没影响，固定定位跟父级没有任何关系

image-20200811113550568

当拖动滚动条，固定定位也不会受到影响

		.box img {
			position: fixed;
			right: 0;
			bottom: 0;
		}

固定定位是相当于浏览器的可视区而言的，否则小猴子就到浏览器最底端了。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.54
Branch： branch03
commit description：a1.54（example04——固定定位的使用）

tag：a1.54

5. 定位(position)的案例

5.1 仿新浪头部和广告

在这里插入图片描述

5.1.1 新浪案例分析

  1. 顶部图片固定在浏览器可视窗口顶部，不会随窗口一起滚动；
  2. 左右两侧的广告图片固定在浏览器可视窗口的左右两侧，不会随窗口一起滚动；
  3. 注意：底部的内容图片初始显示在顶部图片的下方，如何解决？

5.1.2 步骤 1 —— 顶部图片和底部内容

.top {
    /* 注意：使用固定定位时，如果盒子中没有内容，需要指定宽度 */
    width: 100%;
    height: 44px;
    background: url(images/top.png) no-repeat top center;
    position: fixed;
    left: 0px;
    top: 0px;
}

.box {
    width: 1002px;
    /* 顶部的 44px 的 margin 可以让 box 显示在顶部图片下方 */
    margin: 44px auto;
}

注意：

  1. 在使用固定定位时，如果盒子中没有内容，需要指定宽度
  2. 设置底部内容图片的顶部 margin，可以让底部盒子初始显示在顶部图片的下方。

5.1.3 步骤 2 —— 左右两侧广告

.ad-left,
.ad-right {
    position: fixed;
    top: 100px;
}

.ad-left {
    left: 0px;
}

.ad-right {
    right: 0px;
}

注意：不要同时使用 left 和 right 和边偏移属性。

5.1.4 实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 1002px;
			margin: 0 auto;
		}
	</style>
</head>
<body>	
	<div class="box">
		<img src="images/box.png" alt="">
	</div>
</body>
</html>

image-20200811114937534

最重要实现两侧的广告

<body>	
	<img src="images/ad-l.png" alt="" class="ad-l">
	<div class="box">
		<img src="images/box.png" alt="">
	</div>
</body>

由于div块级元素独占一行，所以广告图片在最上方。

=> 改成固定定位

image-20200811115132757

再补充两侧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box {
			width: 1002px;
			margin: 0 auto;
		}
		.ad-l {
			position: fixed;
			top: 100px;
			left: 0;
		}
		.ad-r {
			position: fixed;
			top: 100px;
			right: 0;
		}
	</style>
</head>
<body>	
	<img src="images/ad-l.png" alt="" class="ad-l">
	<img src="images/ad-r.png" alt="" class="ad-r">
	<div class="box">
		<img src="images/box.png" alt="">
	</div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.55
Branch： branch03
commit description：a1.55（仿新浪固定广告案例）

tag：a1.55

5.1.5 案例小结

  1. 固定定位的应用场景：固定在浏览器可视窗口某个位置的布局；
  2. 在使用固定和绝对定位时，如果盒子中没有内容，需要指定宽度（稍后说明）。

6. 定位(position)的扩展

6.1 绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

6.1.1 example05

标准流margin 左右auto就可以让盒子水平居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位的盒子水平居中对齐</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: auto;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

image-20200811120928809

		div {
			position: relative;	
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: auto;
		}

relative没问题，因为它不会脱标。

image-20200811120928809

绝对定位 margin左右auto（无效）不能让盒子水平居中

position: absolute;

image-20200811121130972

1.left 50%走父亲宽度的一半

left: 50%;

image-20200811121532470

2.margin-left左走自己宽度的一半 一定注意是 负值

margin-left: -100px;

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位的盒子水平居中对齐</title>
	<style>
		div {
			position: absolute;
			left: 50%;
			margin-left: -100px;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

image-20200811120928809

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.56
Branch： branch03
commit description：a1.56（example05——绝对定位的盒子水平居中公式）

tag：a1.56


在使用绝对定位时要想实现水平居中，可以按照下图的方法：

绝对定位水平居中

  1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
  2. margin-left: -100px;：让盒子向左移动自身宽度的一半。

6.1.2 盒子居中定位示意图

在这里插入图片描述

6.2 堆叠顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况。

加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。

应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

zindex示意图

z-index 的特性如下：

  1. 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
  2. 如果属性值相同，则按照书写顺序，后来居上；
  3. 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

6.2.1 example06

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.damao,
		.ermao,
		.sanmao {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.ermao {
			background-color: green;
		}
		.sanmao {
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="damao"></div>
	<div class="ermao"></div>
	<div class="sanmao"></div>
</body>
</html>

image-20200811122816498

三个盒子都加绝对定位

		.damao,
		.ermao,
		.sanmao {
			/*绝对定位*/
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: red;
		}

绝对定位后来者居上，脱标，它们都以浏览器为标准进行对齐。

image-20200811122930739

移动一下位置，看的更明显

		.damao,
		.ermao,
		.sanmao {
			/*绝对定位*/
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.ermao {
			top: 50px;
			left: 50px;
			background-color: green;
		}
		.sanmao {
			top: 100px;
			left: 100px;
			background-color: blue;
		}

image-20200811123207069

可以通过z-index改变层叠顺序，数值越大越靠上，后面不跟单位，只能是整数

拉高ermao层级

		.ermao {
			top: 50px;
			left: 50px;
			z-index: 1;
			background-color: green;
		}
		.sanmao {
			top: 100px;
			left: 100px;
			background-color: blue;
		}

image-20200811123513180

拉高damao层级

		.damao {
			z-index: 2;
		}

image-20200811123550432

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.damao,
		.ermao,
		.sanmao {
			/*绝对定位*/
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.damao {
			z-index: 2;
		}
		.ermao {
			top: 50px;
			left: 50px;
			z-index: 1;
			background-color: green;
		}
		.sanmao {
			top: 100px;
			left: 100px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="damao"></div>
	<div class="ermao"></div>
	<div class="sanmao"></div>
</body>
</html>

image-20200811123550432

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.57
Branch： branch03
commit description：a1.57（example06——z-index使用）

tag：a1.57

6.3 定位改变display属性

前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式:

  • 可以用inline-block 转换为行内块
  • 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
  • 绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

6.3.1 example07

6.3.1.1 example07-1

块级元素 不给width默认通栏显示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

image-20200812220300104

display可以转换 => 利用 display inline-block

注意行内块不给width是显示不出来的， 默认的宽度就是内容的宽度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			display: inline-block;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>1111111111111111111111111111</div>
</body>
</html>

image-20200812220553567

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.58
Branch： branch03
commit description：a1.58（example07-1——display可以转换 => 利用 display inline-block）

tag：a1.58

6.3.1.2 example07-2

浮动 也能转换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>1111111111111111111111111111</div>
</body>
</html>

image-20200812221058179

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			float: left;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div>1111111111111111111111111111</div>
</body>
</html>

image-20200812220553567

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.59
Branch： branch03
commit description：a1.59（example07-2——浮动 也能转换display inline-block）

tag：a1.59

6.3.1.3 example07-3

绝对定位（固定定位） 也能转换

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      div {
         position: absolute;
         height: 100px;
         background-color: pink;
      }
   </style>
</head>
<body>
   <div>1111111111111111111111111111</div>
</body>
</html>

image-20200812220553567

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.60
Branch： branch03
commit description：a1.60（example07-3——绝对定位（固定定位） 也能转换display inline-block）

tag：a1.60

6.3.1.4 example07-4

一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			position: absolute;
			height: 100px;
			background-color: pink;
		}
		span {
			position: absolute;
			top: 200px;
			left: 200px;
			width: 300px;
			height: 300px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div>1111111111111111111111111111</div>
	<span></span>
</body>
</html>

image-20200812222918474

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.61
Branch： branch03
commit description：a1.61（example07-4——一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换）

tag：a1.61

6.3.2 小结

所以说， 一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

6.4 完善新浪案例

添加顶部固定栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 1002px;
			margin: 0 auto;
		}
		.ad-l {
			position: fixed;
			top: 100px;
			left: 0;
		}
		.ad-r {
			position: fixed;
			top: 100px;
			right: 0;
		}
		.top {
			background-color: pink;
		}
	</style>
</head>
<body>
	<!--  顶部  -->
	<div class="top">
		<img src="images/top.png" alt="">
	</div>
	<!-- 左右的固定定位 -->
	<img src="images/ad-l.png" alt="" class="ad-l">
	<img src="images/ad-r.png" alt="" class="ad-r">
	<div class="box">
	</div>
</body>
</html>

image-20200812223558249

		.top {
			position: fixed;
			top: 0;
            height: 44px;
			background-color: pink;
		}

因为没有写宽度 默认的宽度是内容的宽度

image-20200812223823284

添加图片背景

	<div class="box">
		<img src="images/box.png" alt="">
	</div>

在这里插入图片描述

缩小之后，版心是在中心的，但是图全部偏到左边了

image-20200812224238223

			position: fixed;
			top: 0;
			height: 44px;
			text-align: center;

因此需要居中对齐

image-20200812224238223

发现还是没有任何变化，因为top的宽度就那么大，top宽度就是内容的宽度。因为没有写宽度， 默认的宽度是内容的宽度 => 此时我们需要给这个top盒子设置通栏的盒子 => 宽度就给100%

			width: 100%;
			position: fixed;
			top: 0;
			height: 44px;
			text-align: center;

注意固定定位是脱标的，这样下边的div就跑上来 => 解决办法：margin-top

image-20200812230136135

		.box {
			width: 1002px;
			margin: 0 auto;
			margin-top: 44px;
		}

image-20200812224924810

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.62
Branch： branch03
commit description：a1.62（完善新浪案例）

tag：a1.62

注意所以以后，定位的盒子，如果需要通栏 那我们宽度就给 100%

6.5 注意事项

同时注意：

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并（塌陷）的问题。 （我们以前是用padding border overflow解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

6.5.1 example08

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

image-20200812231013866

给儿子加margin-top

		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			margin-top: 100px;
		}

都是标准流，就把父亲带下来了，即出现外边距合并（塌陷）问题

image-20200812231133877

浮动解决这个问题

		.son {
			float: left;
			width: 200px;
			height: 200px;
			background-color: purple;
			margin-top: 100px;
		}

image-20200812231325032

绝对定位也可以解决问题

		.son {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: purple;
			margin-top: 100px;
		}

image-20200812231325032

position: relative; 注意相对定位不可以，它是以父级作为对齐的，并且不脱标（并且不脱离标准流）。

image-20200812231133877

给父级添加也不会出现外边距合并的问题。

		.father {
			float: left;
			width: 500px;
			height: 500px;
			background-color: pink;
		}

image-20200812231325032

		.father {
			position: absolute;
			width: 500px;
			height: 500px;
			background-color: pink;
		}

image-20200812231325032

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.63
Branch： branch03
commit description：a1.63（example08——绝对定位和浮动不会触发外边距合并）

tag：a1.63


7. 综合演练 - 淘宝轮播图

在这里插入图片描述

首先是一个大盒子包着，然后就是插入图片，以及左右切换，和下方切换。

注意页面大部分的情况下，都用插入图片，除非不太重要的元素，如一些按钮大部分是用背景图片。

尺寸暂时设置为图片尺寸即可。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝轮播图</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.taobao {
			width: 520px;
			height: 280px;
			background-color: pink;
			/*居中对齐*/
			margin: 100px auto;
		}
	</style>
</head>
<body>
	<div class="taobao">

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

image-20200812233119933

插入图片

<div class="taobao">
   <!-- 图片 -->
   <img src="images/taobao.jpg" alt="">
</div>

image-20200812233340482

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.64
Branch： branch03
commit description：a1.64（淘宝轮播图框子）

tag：a1.64

放置左边的按钮

	<div class="taobao">
		<!-- 左按钮  小于号 -->
		<a href="#" class="arrow-l"> &lt; </a>
		<!-- 图片 -->
		<img src="images/taobao.jpg" alt="">
	</div>

image-20200812234823019

		.arrow-l{
			float: left;
		}

浮动不能解决任何问题。 => 浮动盖不住图片和文字 => 只能用定位解决

注意只能用定位来做，才能压住盒子。

不要占有位置 随便移动位置 必须用绝对定位

绝对定位的盒子 无须转换，直接给大小就好了

		.arrow-l{
			position: absolute;
			top: 0;
			left: 0;
			width: 20px;
			height: 30px;
			background-color: pink;
		}

image-20200812235853731

绝对定位现在以文档进行对齐，父级需要加定位 => 子绝父相

		.taobao {
			position: relative;
			width: 520px;
			height: 280px;
			background-color: pink;
			/*居中对齐*/
			margin: 100px auto;
		}
		.arrow-l{
			position: absolute;
			top: 0;
			left: 0;
			width: 20px;
			height: 30px;
			background-color: pink;
		}

image-20200813000122606

a标签应该垂直居中 => 公式：

  1. 走父级高度的50%

    top: 50%;

  2. 往上走 自己高度 的一半

    margin-top: -15px;

		.arrow-l{
			position: absolute;
			top: 50%;
			margin-top: -15px;
			left: 0;
			width: 20px;
			height: 30px;
			background-color: pink;
		}

image-20200813000546680

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.65
Branch： branch03
commit description：a1.65（淘宝轮播图案例-完成左侧按钮布局）

tag：a1.65

按钮半透明，a标签去除下划线，并是纯白色，文字水平并垂直居中

		.arrow-l{
			position: absolute;
			top: 50%;
			margin-top: -15px;
			left: 0;
			width: 20px;
			height: 30px;
			background: rgba(0, 0, 0, .2);
			text-decoration: none;
			color: #fff;
			text-align: center;
			line-height: 30px;
		}

image-20200813093726242

按钮直角实现圆角矩形

.arrow-l{
			position: absolute;
			top: 50%;
			margin-top: -15px;
			left: 0;
			width: 20px;
			height: 30px;
			background: rgba(0, 0, 0, .2);
			text-decoration: none;
			color: #fff;
			text-align: center;
			line-height: 30px;
			border-radius: 15px;
		}

image-20200813093911357

可是一般都半圆形

image-20200813094018776

实际只需要右上角和右下角，变成圆角即可。


7.1 圆角矩形设置4个角

圆角矩形可以为4个角分别设置圆度， 但是是有顺序的

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

  • 如果4个角，数值相同

    border-radius: 15px;

  • 里面数值不同，我们也可以按照简写的形式，具体格式如下:

border-radius: 左上角 右上角  右下角  左下角;

还是遵循的顺时针。


7.2 继续实现案例

		.arrow-l{
			position: absolute;
			top: 50%;
			margin-top: -15px;
			width: 20px;
			height: 30px;
			background: rgba(0, 0, 0, .2);
			text-decoration: none;
			color: #fff;
			text-align: center;
			line-height: 30px;
		}
		.arrow-l {
			left: 0;
			/*圆角矩形*/
			/*border-radius: 15px;*/
			/*右上角*/
			border-top-right-radius: 15px;
			/*右下角*/
			border-bottom-right-radius: 15px;
		}

image-20200813094519688

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.66
Branch： branch03
commit description：a1.66（淘宝轮播图-实现左侧按钮）

tag：a1.66

完善左右按钮。

border-radius可使用简写方式，写在一起。

左右两侧按钮，可以用并集选择器 => 集体声明 => 让代码更简洁

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝轮播图</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.taobao {
			position: relative;
			width: 520px;
			height: 280px;
			background-color: pink;
			/*居中对齐*/
			margin: 100px auto;
		}
		.arrow-l,
		.arrow-r{
			position: absolute;
			top: 50%;
			margin-top: -15px;
			width: 20px;
			height: 30px;
			background: rgba(0, 0, 0, .2);
			text-decoration: none;
			color: #fff;
			line-height: 30px;
		}
		.arrow-l {
			left: 0;
			text-align: left;
			/*圆角矩形*/
			/*border-radius: 15px;*/
			/*右上角*/
			border-top-right-radius: 15px;
			/*右下角*/
			border-bottom-right-radius: 15px;
		}
		.arrow-r {
			right: 0;
			text-align: right;
			/*圆角矩形*/
			/*border-radius: 15px;*/
			/*border-radius: 左上角 右上角  右下角  左下角;*/
			border-radius: 15px 0 0 15px;
		}
	</style>
</head>
<body>
	<div class="taobao">
		<!-- 左按钮  小于号 -->
		<a href="#" class="arrow-l"> &lt; </a>
		<!-- 右按钮 -->
		<a href="#" class="arrow-r"> &gt; </a>
		<!-- 图片 -->
		<img src="images/taobao.jpg" alt="">
	</div>
</body>
</html>

image-20200813095104886

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.67
Branch： branch03
commit description：a1.67（淘宝轮播图-实现左右两侧侧按钮）

tag：a1.67

实现鼠标经过左右按钮变色 => 用并集选择器

		.arrow-l:hover,
		.arrow-r:hover {
			background: rgba(0, 0, 0, .4);
		}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.68
Branch： branch03
commit description：a1.68（淘宝轮播图-实现鼠标经过左右按钮变色）

tag：a1.68


实现下边部分的小圆点的外框

尺寸量取暂时小迪就不重复说了

还需要压在图片上，因此还需要绝对定位

水平居中 => 公式

圆角 => 高度一般， 13 / 2=> 设置7px或6px都可

背景半透明

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝轮播图</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.taobao {
			position: relative;
			width: 520px;
			height: 280px;
			background-color: pink;
			/*居中对齐*/
			margin: 100px auto;
		}
		.arrow-l,
		.arrow-r{
			position: absolute;
			top: 50%;
			margin-top: -15px;
			width: 20px;
			height: 30px;
			background: rgba(0, 0, 0, .2);
			text-decoration: none;
			color: #fff;
			line-height: 30px;
		}
		.arrow-l {
			left: 0;
			text-align: left;
			/*圆角矩形*/
			/*border-radius: 15px;*/
			/*右上角*/
			border-top-right-radius: 15px;
			/*右下角*/
			border-bottom-right-radius: 15px;
		}
		.arrow-r {
			right: 0;
			text-align: right;
			/*圆角矩形*/
			/*border-radius: 15px;*/
			/*border-radius: 左上角 右上角  右下角  左下角;*/
			border-radius: 15px 0 0 15px;
		}
		.arrow-l:hover,
		.arrow-r:hover {
			background: rgba(0, 0, 0, .4);
		}
		.circle {
			position: absolute;
			left: 50%;
			margin-left: -35px;
			bottom: 15px;
			width: 70px;
			height: 13px;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 7px;
		}
	</style>
</head>
<body>
	<div class="taobao">
		<!-- 左按钮  小于号 -->
		<a href="#" class="arrow-l"> &lt; </a>
		<!-- 右按钮 -->
		<a href="#" class="arrow-r"> &gt; </a>
		<!-- 图片 -->
		<img src="images/taobao.jpg" alt="">
		<!-- 小圆点 -->
		<ul class="circle">

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

image-20200813100434664

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.69
Branch： branch03
commit description：a1.69（淘宝轮播图-实现下方小圆点的背景框）

tag：a1.69

实现小圆点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝轮播图</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.taobao {
			position: relative;
			width: 520px;
			height: 280px;
			background-color: pink;
			/*居中对齐*/
			margin: 100px auto;
		}
		.arrow-l,
		.arrow-r{
			position: absolute;
			top: 50%;
			margin-top: -15px;
			width: 20px;
			height: 30px;
			background: rgba(0, 0, 0, .2);
			text-decoration: none;
			color: #fff;
			line-height: 30px;
		}
		.arrow-l {
			left: 0;
			text-align: left;
			/*圆角矩形*/
			/*border-radius: 15px;*/
			/*右上角*/
			border-top-right-radius: 15px;
			/*右下角*/
			border-bottom-right-radius: 15px;
		}
		.arrow-r {
			right: 0;
			text-align: right;
			/*圆角矩形*/
			/*border-radius: 15px;*/
			/*border-radius: 左上角 右上角  右下角  左下角;*/
			border-radius: 15px 0 0 15px;
		}
		.arrow-l:hover,
		.arrow-r:hover {
			background: rgba(0, 0, 0, .4);
		}
		.circle {
			position: absolute;
			left: 50%;
			margin-left: -35px;
			bottom: 15px;
			width: 70px;
			height: 13px;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 7px;
		}
		.circle li {
			width: 8px;
			height: 8px;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<div class="taobao">
		<!-- 左按钮  小于号 -->
		<a href="#" class="arrow-l"> &lt; </a>
		<!-- 右按钮 -->
		<a href="#" class="arrow-r"> &gt; </a>
		<!-- 图片 -->
		<img src="images/taobao.jpg" alt="">
		<!-- 小圆点 -->
		<ul class="circle">
			<li></li>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

image-20200813100750827

有黑点，去除li默认样式

		li {
			list-style: none;
		}

image-20200813100828191

加浮动，使其排成一行 => float: left

变圆 => border-radius: 50%

知道边距撑开 => margin: 3px

设置当前current高亮

		.circle li {
			float: left;
			width: 8px;
			height: 8px;
			background-color: #fff;
			margin: 3px;
			border-radius: 50%;
		}
		.current {
			background-color: #ff5000;
		}

image-20200813101310319

但是第二个却没有高亮，我们去查错

current当前的意思 => 此处一定要注意 优先级的问题

css三大特性的优先级 => 算权重 （权重计算参考7.3.1）

.circle li => 11

.current => 10

image-20200813101402147

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.70
Branch： branch03
commit description：a1.70（淘宝轮播图-当前小圆点高亮失效）

tag：a1.70

提高权重 => 20

		.circle .current {
			background-color: #ff5000;
		}

image-20200813101854956

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.71
Branch： branch03
commit description：a1.71（淘宝轮播图-解决当前小圆点高亮失效的优先级问题）

tag：a1.71

8. 定位小结

定位模式是否脱标占有位置移动位置基准模式转换（行内块）使用情况
静态static不脱标，正常模式正常模式不能几乎不用
相对定位relative不脱标，占有位置相对自身位置移动不能基本单独使用
绝对定位absolute完全脱标，不占有位置相对于定位父级移动位置能要和定位父级元素搭配使用
固定定位fixed完全脱标，不占有位置相对于浏览器移动位置能单独使用，不需要父级

注意：

  1. 边偏移需要和定位模式联合使用，单独使用无效；
  2. top 和 bottom 不要同时使用；
  3. left 和 right 不要同时使用。

9. 上一篇学成网案例定位总结添加

首先实现右上角标 => 切图

image-20200813105952098

整体切 => 勾选文件夹即合并导出选中的图层

image-20200813110257349

				<li>
					<img src="images/hot.png" alt="" class="hot">
					<img src="images/pic.jpg" alt="">
					<h4>Think PHP 5.0 博客系统实战项目演练</h4>
					<p><span>高级</span>  •  1125人在学习</p>
				</li>

image-20200813110517392

.box-bd .hot {
	position: absolute;
	top: 0;
	right: 0px;
	width: 40px;
}

跑到最右上角了

image-20200813113018995

子绝父相

.box-bd li {
	position: relative;
	float: left;
	width: 228px;
	height: 270px;
	margin-right: 15px;
	margin-bottom: 15px;
	background-color: #ffffff;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

image-20200813113048758

稍微再往外偏移一些

.box-bd .hot {
	position: absolute;
	top: 0;
	right: -4px;
	width: 40px;
}

image-20200813113139471

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.72
Branch： branch03
commit description：a1.72（学成网案例-图片上浮标）

tag：a1.72

实现左侧固定的导航

image-20200813113451191

<body>
	<!-- 固定的侧边栏 -->
	<div class="fixedbar"></div>

.fixedbar {
	width: 180px;
	height: 420px;
	background-color: pink;

}

image-20200813113705619

加固定定位

.fixedbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 180px;
	height: 420px;
	background-color: pink;
}

在这里插入图片描述

并存在问题，缩小之后，离得太远 => 因为是以浏览器对齐的

image-20200813113949233

一个小技巧 :

在这里插入图片描述

让其与版心对齐 => 公式：left50%=> 左走版心的一半 + 自己的宽度

-600 版心的一半 + 自己的宽度 = -780

.fixedbar {
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -790px;
	width: 180px;
	height: 420px;
	background-color: pink;
}

紧靠版心

image-20200813114310234

另外仍然存在问题 => 定位层级不对

z-index: 999;

参考：https://github.com/6xiaoDi/blog-CSS/tree/a1.73
Branch： branch03
commit description：a1.73（学成网案例-实现左侧固定的导航）

tag：a1.73

10. 网页布局总结

一个完整的网页，有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。

10.1 1). 标准流

可以让盒子上下排列 或者 左右排列的

image-20200813115153338


10.2 2). 浮动

可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列

注意：定位也可做出以下效果，但它有很大的缺陷，每个盒子都需要测量数值。

image-20200813115245107


10.3 3). 定位

定位最大的特点是有层叠的概念，就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。

image-20200813115416218


考虑到在blog中不好体现代码更改的位置，小迪才用github托管代码，大家可以查看github，看到详细版本修改过程，搭配博客学习。



（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
＜CSS练习＞ 哈根达斯案例 CSS定位 绝对位置与相对位置的应用
weixin_47816527的博客
06-16 1716
前端CSS练习 哈根达斯案例 CSS定位 绝对位置与相对位置的应用 效果图 定位就是将盒子定在某一位置上，自由浮动在其他盒子上面，JS,CSS都离不开定位。 定位 = 定位模式 + 边偏移 定位模式： 选择器 { position：static/obsolute/relative/fixed; top: left: right: botton: } 默认为静态的，但开发中几乎不用 相对定位：是元素对于它原来在标准流中的位置。 特点：1.相对于自己原来在标准流中位置来移动； 2.原来在标准流中的区域继续占有
CSS Grid网格布局全攻略
大前端
08-05 2930
所有奇技淫巧都只在方寸之间。 几乎从我们踏入前端开发这个领域开始，就不停地接触不同的布局技术。从常见的浮动到表格布局，再到如今大行其道的flex布局，css布局技术一直在不断地推陈出新。其中网格布局(grid)作为css3的产物，它更加贴近网页设计师所使用的布局策略，学习并利用好它可以让我们免受很多布局困扰。 虽然网格布局好处有很多，但学习起来并不简单，原因是用来设置布局的属性实在太多，其中光...
9. （css）高级常用技巧全攻略
xiao廸要飞
01-09 357
文章目录1. CSS高级技巧重点提炼2. 元素的显示与隐藏2.1 display 显示（重点）2.1.1 example012.1.2 实际开发场景2.2 visibility 可见性 (了解)2.2.1 example022.3 overflow 溢出(重点)2.3.1 example032.3.1.1 example03-12.3.1.2 example03-22.3.1.3 example03-32.3.1.4 example03-42.3.2 实际开发场景2.4 显示与隐藏总结2.4.1 案例3.
CSS背景全攻略
笑一阁
04-16 538
CSS背景全攻略 糖伴西红柿 发表于 08. Sep, 2009, 分类: CSS, Tips , 16 条评论 » 标签：background & css 原文链接：Backgrounds In CSS: Everything You Need To Know 译文链接：css 背景全攻略 转载请保留版权以及链接 —————————————————————
1.(css3)掌握新增选择器全攻略
xiao廸要飞
01-11 205
文章目录1. 重点提炼2. `CSS3` 介绍2.1 什么是 `CSS3`2.2 `CSS3` 发展现状3. `CSS3 ` 属性选择器3.1 代码演示3.2 example013.2.1 example01-13.2.2 example01-23.2.2.1 小结3.2.3 example01-33.2.4 example01-43.2.5 example01-53.2.6 example01-64. 结构伪类选择器4.1 属性列表4.2 代码演示4.3 example025. `nth-child`5.
打造用心设计：CSS3 2D转换属性全攻略
weixin_43263566的博客
10-09 569
2D-转换 (位移、旋转、缩放)
css 多余省略号_css实现多行文本溢出显示省略号(…)全攻略
weixin_26741253的博客
01-14 240
省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。 代码如下 复制代码o...
CSS居中全攻略
让世界更美好！
09-10 293
水平居中 内联元素 css的水平居中相对于垂直居中比较好些. 当要居中的元素是一个内联元素时, 只需要在其父元素上加上下面的一条css规则即可: text-align: center; 块级元素 要居中的是一个块级元素, 那么设置元素的左右外边距为zuto即可. 即下面的规则: margin-left: auto; margin-right: auto; 多个块级元素 多个...
无边界探索：Selenium元素定位方法全攻略！
2401_85599069的博客
06-25 347
如果一个元素无法通过自身属性直接定位到，则可以先定位它的父(或父的父)元素，然后再找下一级即可。//a[text() = ‘新闻’][1] :表示使用找到的第一个，索引从1开始，不是0。xpath = //input[@id=‘kw’]/…:表示查找他的上一层。xpath = //input[@id=‘kw’]/…xpath = “//标签名[contains(@属性, ‘属性值’)]”xpath = //a[contains(text(),‘新’)]xpath = “//标签名[@属性=‘属性值’]”
极速加载：CSS性能优化全攻略
最新发布
07-24
### 极速加载：CSS性能优化全攻略 随着互联网技术的发展和用户需求的不断提高，页面加载速度成为衡量网站质量的重要指标之一。CSS作为控制网页样式的关键技术，其性能的优化对于提升页面加载速度至关重要。本篇文章...
css全攻略.rar
06-11
《CSS全攻略》压缩包包含了丰富的CSS（Cascading Style Sheets...以上仅是《CSS全攻略》中可能涉及的部分知识点，实际内容可能还包括更多实战技巧、最佳实践和案例分析，旨在帮助开发者全面掌握CSS并应用于实际项目中。
DIV+CSS基础教程全攻略.pdf
11-19
在网页设计中，`DIV+CSS`是一种常见的布局方式，它能够实现更加灵活和精确的网页元素定位。本文主要围绕`CSS`中的高度属性——`height`，以及相关的`max-height`、`min-height`和`overflow`进行深入探讨。 首先，`...
CSS 背景全攻略
12-08
这篇“CSS背景全攻略”深入探讨了CSS背景属性的各个方面，包括基本用法、技巧以及CSS3的新特性。 首先，CSS2中的背景属性由五个核心部分组成： 1. `background-color`：这个属性用于设置元素的背景颜色。你可以...
Normalize.css简介及详解、使用
热门推荐
xiao廸要飞
08-30 4万+
文章目录什么是Normalize综述Normalize vs Reset如何使用 normalize.css结语相关阅读代码 什么是Normalize Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS
4.（css3布局）使用flex布局携程网首页案例
xiao廸要飞
01-12 1845
文章目录1. 携程网首页案例制作1.1 技术选型1.2 搭建相关文件夹1.3 设置视口标签以及引入初始化样式1.4 初始化样式1.5 模块名字划分1.6 常见flex布局思路1.7 背景线性渐变2. 代码实现2.1 search-index2.2 focus2.3 local-nav2.4 nav2.5 subnav-entry2.6 sales 1. 携程网首页案例制作 1.1 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取flex布局为主 1.2 搭建相关文件夹 参考：https
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
xiao廸要飞
07-26 815
文章目录1. 盒子模型（CSS重点）1.1 看透网页布局的本质1.2 盒子模型（Box Model）1.3 盒子边框（border）1.3.1 边框综合设置1.3.2 example011.3.3 盒子边框写法总结表1.3.3.1 example021.3.4 表格的细线边框1.3.4.1 example031.4 内边距（padding）1.4.1 内边距：1.4.2 设置1.4.2.1 example041.4.2.2 example051.4.3 课堂案例： 新浪导航1.4.4 内盒尺寸计算（元素
2. （css3布局）使用流式布局移动端JD首页案例
xiao廸要飞
01-12 798
文章目录1. 案例：京东移动端首页2. 技术选型3. 搭建相关文件夹结构4. 设置视口标签以及引入初始化样式5. 常用初始化样式6. 导航布局6.1 首行7. 二倍精灵图做法8. 图片格式8.1 DPG图片压缩技术8.2 webp 图片格式9. 下半部布局10. 移动端布局之流式布局总结 1. 案例：京东移动端首页 访问地址： m.jd.com 2. 技术选型 方案：采取单独制作移动页面方案 技术：布局采取流式布局 3. 搭建相关文件夹结构 images 背景图 upload 产品图 4.
0基础快速入门CSS技术栈（3）—图解详细阐述CSS文字文本样式及综合案例、样式调试工具、快速开发html的emment语法（附详细案例源码解析过程）
xiao廸要飞
07-16 655
文章目录1. CSS字体样式属性调试工具2. font字体2.1 font-size:大小2.2 font-family:字体2.2.1 CSS Unicode字体2.3 font-weight:字体粗细2.4 font-style:字体风格2.4.1 example012.5 font:综合设置字体样式 (重点)2.5.1 example022.6 font总结3. CSS外观属性3.1 color:文本颜色3.2 text-align:文本水平对齐方式3.3 line-height:行间距3
CSS全攻略：理解与实战指南
“CSS全攻略，学习CSS的好资料，涵盖了CSS的四种实现方式、定义方法以及四种选择对象的详细解释。” 在Web开发中，CSS（层叠样式表）是一种至关重要的技术，用于控制网页的布局和样式。它使得内容与表现分离，提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值