0基础学web前端第8天：CSS定位(position)

壹灵
壹灵
壹灵
35
文章
0
评论
更多
2021年4月22日15:39:20
评论1,008

0基础学web前端第8天：CSS定位(position)

1.定位（position）

1.1  CSS布局的三种机制

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

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

a.普通流（标准流）
块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table。
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em等。

b.浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

c.定位
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效。

1.2 为什么使用定位

我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果。

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

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

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

将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面，所以，我们脑海应该有三种布局机制的上下顺序：标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）

1.3定位详解

定位也是用来布局，它有两部分组成：定位=定位模式+边偏移

1.3.1边偏移

简单说， 我们定位的盒子，是通过边偏移来移动位置的。在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）

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

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

1.3.2定位模式（position）

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

选择器 { position: 属性值; }

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

0基础学web前端第8天：CSS定位(position)

1.2.1静态定位（static）

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

1.2.2相对定位（relative）

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

0基础学web前端第8天：CSS定位(position)

相对定位

相对于 自己原来在标准流中位置来移动的。原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

1.2.3绝对定位（absolute）

绝对定位是元素以带有定位的父级元素来移动位置。完全脱标 —— 完全不占位置；父元素没有定位，则以浏览器为准定位（Document 文档）。

0基础学web前端第8天：CSS定位(position)

绝对定位父级无定位

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

0基础学web前端第8天：CSS定位(position)

绝对定位_父级有定位

绝对是以带有定位的父级元素来移动位置 ，如果父级都没有定位，则以浏览器文档为准移动位置。不保留原来的位置，完全是脱标的。因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。刚才咱们说过，绝对定位，要和带有定位的父级搭配使用，那么父级要用什么定位呢？子级是绝对定位，父级要用相对定位。

0基础学web前端第8天：CSS定位(position)

子级绝对父级相对

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

1.3.2.4固定定位（fixed）

固定定位是绝对定位的一种特殊形式： （认死理型） 如果说绝对定位是一个矩形，那么 固定定位就类似于正方形。完全脱标 —— 完全不占位置；只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；跟父元素没有任何关系；单独使用的。不随滚动条滚动。

IE 6 等低版本浏览器不支持固定定位。在使用固定定位时，如果盒子中没有内容，需要指定宽度。设置底部内容图片的顶部 margin，可以让底部盒子初始显示在顶部图片的下方。

2.定位（position）的扩展

2.1绝对定位的盒子居中

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

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

0基础学web前端第8天：CSS定位(position)

绝对定位水平居中

 

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

 

0基础学web前端第8天：CSS定位(position)

绝对定位居中示意图

2.2 堆叠顺序（Z-index）

在使用定位布局时，可能会出现盒子重叠的情况。加了定位的盒子，默认后来者居上， 后面的盒子会压住前面的盒子。应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。如下图所示：

0基础学web前端第8天：CSS定位(position)

z-index示意图

z-index的特性如下：
1.属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
2.如果属性值相同，则按照书写顺序，后来居上；
3.数字后面不能加单位。
z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

2.3定位改变display属性

前面我们讲过， display 是 显示模式， 可以改变显示模式有以下方式：可以用inline-block 转换为行内块。可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）。绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。

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

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。 （我们以前是用padding border overflow解决的），也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

3.综合演练-轮播图

0基础学web前端第8天：CSS定位(position)

圆角矩形设置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: 左上角 右上角  右下角  左下角;

还是遵循的顺时针。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝轮播图</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.taobao {
			/*子绝父相*/
			position: relative;
			width: 520px;
			height: 280px;
			background-color: pink;
			margin: 100px auto;
		}
		/*并集选择器 集体声明 让代码更简洁*/
		.arrow-l,
		.arrow-r {
			/*只能用定位来做，才能压住盒子*/
			/*不要占有位置 随便移动位置 必须用绝对定位*/
			position: absolute;
			/*垂直居中公式*/
			/*1. 走父级高度的 50%*/
			top: 50%;
			/*2. 往上走 自己高度 的一半*/
			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;
		}
		.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 {
			float: left;
			width: 8px;
			height: 8px;
			background-color: #fff;
			margin: 3px;
			border-radius: 50%;
		}
		/*current 当前的意思  此处一定要注意 优先级的问题*/
		.circle .current {
			background-color: #ff5000;
		}
	</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>

4.定位总结

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

5.网页布局总结

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

1). 标准流

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

2). 浮动

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

3). 定位

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

壹灵
  • 本文由 发表于 2021年4月22日15:39:20
  • 转载请务必保留本文链接：https://www.1ling.net/work/63.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: