阶段总结：CSS定位

程序员文章站 2022-05-31 09:42:52

...

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单：它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

HTML元素复习：

块级元素有：

div p h1-h6 ul ol table form dl hr address center ······

行内元素有：

span b strong i a img input br sup sub del textarea select u ······

块级元素的特点：

独占一行，在默认情况下，宽度自动填满父元素宽度
宽度和高度可以控制
margin和padding横向纵向设置都有效
可以通过display: inline; 转换为行内元素
除个别特殊元素外，可包含块状元素和行内元素

行内元素的特点：

不能独占一行
宽高由内容撑开
margin和padding横向设置有效，纵向设置不产生边距效果
可以通过display: block; 转换为块状元素
除ins和del外，不能包含块状元素

一、CSS定位属性

CSS共有9大定位属性，这些属性允许你对元素进行定位
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

1.1 CSS的position属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式
position属性的含义：
- static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
- relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
- absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
- fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

1.2 CSS的top属性\right属性\left属性\bottom属性

定义了一个定位元素的上外\右外\左外\下外边距边界与其包含块上边界之间的偏移
可能的值：
- auto：默认值。通过浏览器计算上\右\左\下边缘的位置。
- %：设置以包含元素的百分比计的上\右\左\下边位置。可使用负值。
- length：使用 px、cm 等单位设置元素的上\右\左\下边位置。可使用负值。
- inherit：规定应该从父元素继承 top\right\left\bottom 属性的值。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

注释：如果 “position” 属性的值为 “static”，那么设置 “top”\”right”\”left”\”bottom” 属性不会产生任何效果。

1.3 CSS的overflow属性

设置当元素的内容溢出其区域时发生的事情
可能的值：
- visible：默认值。内容不会被修剪，会呈现在元素框之外。
- hidden：内容会被修剪，并且其余内容是不可见的。
- scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit：规定应该从父元素继承 overflow 属性的值。

说明：这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

1.4 CSS的clip属性

设置元素的形状。元素被剪入这个形状之中，然后显示出来
可能的值：
- shape：设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
- auto：默认值。不应用任何剪裁。
- inherit：规定应该从父元素继承 clip 属性的值。

说明：这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>裁剪图片</title>
    <style>
        div {
            width: 350px;
            height: 350px;
            border: 1px solid red;
            overflow: scroll;
        }
        img {
            clip: rect(0px, 400px, 400px, 0px);
        }
    </style>
</head>
<body>
    <div>
        <img src="CSS的盒子（box）模型.png" />
    </div>
</body>
</html>

效果图：

阶段总结：CSS定位

1.5 CSS的vertical-align属性

设置元素的垂直对齐方式

说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>裁剪图片</title>
    <style>
        div {
            width: 1000px;
            height: 500px;
            border: 1px solid red;
        }
        img {
            border: 1px solid black;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        这是一幅图片：
        <img src="CSS的盒子（box）模型.png" />
    </div>
</body>
</html>

效果图：
阶段总结：CSS定位

说明：允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

1.6 CSS的z-index属性

设置元素的堆叠顺序
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
可能的值：
- auto：默认。堆叠顺序与父元素相等。
- number：设置元素的堆叠顺序。
- inherit：规定应该从父元素继承 z-index 属性的值。

二、浮动定位

2.1 什么是浮动定位？

作用：可以让块元素左右排列
特点：浮动的目标会离队（脱离流）
步骤：1）浮动的目标离队 2）弟弟前进 3）目标到达指定位置
分类：左浮动 / 右浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

2.2 右浮动

作用：可以让块按照倒序左右排列
浏览器加载（渲染）网页的规则：
- 元素的高度会自适应，以内部流的高度为准
- 浏览器认为文字很重要，若浮动元素遮挡了文字，浏览器会想办法让文字显示完整

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>浮动</title>
    <style>
        #d0, p {
            width: 500px;
            border: 1px solid red;
        }
        #d1, #d2, #d3 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 2px;
        }
        #d1 { 
            background-color: red; 
        }
        #d2 { 
            background-color: green; 
        }
        #d3 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="d0">
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
    <p>浮动时观察我的位置</p>
</body>
</html>

效果图：
阶段总结：CSS定位

第一次右浮动：

#d1 { float: right; }

效果图：

阶段总结：CSS定位

第二次右浮动：

#d2 { float: right; }

效果图：

阶段总结：CSS定位

第三次右浮动：

#d3 { float: right; }

效果图：

阶段总结：CSS定位

2.3 左浮动

作用：可以让块按照正序左右排列

第一次左浮动：

#d1 { float: left; }

效果图：

阶段总结：CSS定位

第二次左浮动：

#d2 { float: left; }

效果图：

阶段总结：CSS定位

第三次左浮动：

#d3 { float: left; }

效果图：

阶段总结：CSS定位

2.4 如何消除浮动影响？

答：clear：left\right\both;

在哪个元素上增加clear，就消除浮动对该元素的影响，则该元素就会出现在浮动元素的下方。

可以分为两种情况：
- 若无需保留父元素边框，则只对p消除影响即可
```
p { clear: left;}
```
  效果图：
- 若需要保留父元素边框，方法如下：
  - 在父元素内加一个空块
  - 在空块上下clear
```
<div id="d0">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>
<p>浮动时观察我的位置</p>
```
    效果图：
    
    空块会出现在浮动元素下方，空块在流内，拉伸了父元素的高度

三、其他定位：相对、绝对和固定定位

3.1 相对定位

以自身为目标产生偏移，通常偏移量很小
目标不离队（不脱离流）
position：relative；
特点：偏移量小，元素不离队

代码示例：

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

效果图：

阶段总结：CSS定位

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

3.2 绝对定位

以带有position属性的父辈元素为目标产生偏移，通常偏移量较大
- 若父辈都有position属性，则以就近的父辈为目标
- 若父辈都没有position属性，则以body（即以最远的父辈）为目标
目标会离队（即脱离流）
position：absolute；

注意：实际工作中，我们想要以谁为目标，就在谁上面加position属性（postion的属性值不能是static）

代码示例：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

**效果图：** ![](https://i.imgur.com/FGvSZ3M.png)

3.3 固定定位

以浏览器窗口为目标产生偏移
目标离队（位置要释放，也就是脱离流）
position：fixed；
注意：如果想要把元素挂在窗口上不动时，用固定定位

3.4 相对、绝对和固定定位之间的区别和联系？

相同点：设置偏移的方式相同
不同点：参考的目标不同
- 相对定位：以自身为目标（不会脱离流）
- 绝对定位：以带有postion属性的父元素为目标（脱离流）
- 固定定位：以浏览器窗口为目标（脱离流）

四、归纳：选择定位的建议

固定定位：看是否需要将元素挂在窗口上不动
浮动定位：看是否要将块元素左右排列
相对定位：看是否偏移量很小，是否元素不释放位置
绝对定位：以上三种都不是，剩下的就是用绝对定位

相关标签： CSS布局浮动定位相对定位绝对定位固定定位

上一篇： RN入门基础8：滚动视图 ScrollView

下一篇： css复习4-布局-定位

阶段总结：CSS定位

一、CSS定位属性

1.1 CSS的position属性

1.2 CSS的top属性\right属性\left属性\bottom属性

1.3 CSS的overflow属性

1.4 CSS的clip属性

1.5 CSS的vertical-align属性

1.6 CSS的z-index属性

二、浮动定位

2.1 什么是浮动定位？

2.2 右浮动

2.3 左浮动

2.4 如何消除浮动影响？

三、其他定位：相对、绝对和固定定位

3.1 相对定位

3.2 绝对定位

3.3 固定定位

3.4 相对、绝对和固定定位之间的区别和联系？

四、归纳：选择定位的建议

css中相对定位和绝对定位的介绍与使用

css counter计数器与content总结

前端小白学web常见的问题，CSS定位的教程

CSS3重点总结_html/css_WEB-ITnose

总结30个CSS3选择器

对position属性的总结_html/css_WEB-ITnose

css 定位_html/css_WEB-ITnose

CSS知识点总结

css3 设置背景定位_html/css_WEB-ITnose

CSS知识总结（七）