定位（CSS笔记）

最新推荐文章于 2023-07-18 17:17:26 发布

原创最新推荐文章于 2023-07-18 17:17:26 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

笔记专栏收录该内容

3 篇文章

订阅专栏

本文深入解析CSS布局的三大机制：普通流、浮动与定位，着重讲解定位模式下的相对、绝对、固定定位及其应用场景，包括边偏移、堆叠顺序及定位对display属性的影响。

定位（position）

1.CSS布局三种机制

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

网页布局核心–就是用css来摆放盒子位置的

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

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

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

2.定位详解

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

定位 = 定位模式 + 边偏移

2.1边偏移

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

2.2定位模式

CSS中，通过position属性定义元素的定位模式：

选择器 {position: 属性值; }

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

2.2.1静态定位(static)-了解

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

2.2.2相对定位(relative)-重要

相对定位是元素相对于它原本在标准流中的位置来说的
效果图：

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

2.2.3绝对定位(absolute)-重点

绝对定位是元素以带有定位的父级元素来移动位置
1.完全脱标–完全不占位置
2.父元素没有定位，则以浏览器为准定位

3.父元素要有定位
将元素依据最近的已经定位(绝对、固定或相对定位)的父元素进行定位
在这里插入图片描述
绝对定位特点：
绝对是带有定位的父级元素来移动位置如果父级都没有定位，则以浏览器文档为准移动位置
不保留原来的位置，完全是脱标的
绝父定位一般和父级搭配使用

定位口诀–子相父绝
子级是绝对定位，父级要用相对定位

在布局时，子级元素使用绝对定位时，父级元素就要用相对定位呢？
在这里插入图片描述
1.小盒子（箭头）
相对定位相对定位占据位置，会影响后面盒子的显示
绝对定位绝对定位不占据位置，脱离标准流

2.父盒子
相对定位相对定位占据位置，按照正常标准流显示，后面的盒子按照正常显示
绝对定位绝对定位不占据位置，后面的盒子顶替到之前的位置

总结：
由于子元素，不占据位置，所以我们使用绝对定位
由于父元素占据位置，不能影响后面元素的正常显示，我们使用相对定位

2.2.4固定定位(fixed)-重要

固定定位是绝对定位的一种特殊形式：如果说绝对定位是一个矩形那么固定定位就类似于正方形
1.完全脱标–完全不占位置
2.只认浏览器的可视窗口–浏览器可视窗口 + 边偏移属性来设置元素的位置
跟父元素没有任何关系，单独使用
不随滚动条滚动
在这里插入图片描述

3.定位(position)的扩展

3.1绝对定位的盒子居中

注意：绝对定位/固定定位的盒子不能通过设置margin:auto设置水平居中
使用绝对定位时要想实现水平居中，可以按照下图的方法：

在这里插入图片描述
1.left: 50%; :让盒子左侧移动到父级元素的水平位置；
2.margin-left: -100px; : 让盒子左移自身宽度的一半。

3.2堆叠顺序(z-index)

在使用定位布局时，可能会出现盒子重叠的情况。
加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子
应用z-index 层级等级属性可以调整盒子的堆叠顺序。如下图：
在这里插入图片描述
z-index的特性如下：
1.属性值：正整数、负整数或0，默认值是0，数值越大，盒子越靠前
2.如果属性值相同，则按照书写顺序，后来者居上
3.数字后面不能加单位

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

3.2定位改变display属性

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

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

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

4.定位小结

在这里插入图片描述
注意：
1.边偏移需要和定位模式联合使用，单独使用无效；
2.top和bottom不要同时使用
3.left和right不要同时使用

5.网页布局总结

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

1).标准流

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

2).浮动

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

3).定位

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

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

遵守顺时针