【第二部分 | CSS】6：网页布局之浮动

素颜马尾好姑娘i 2023-09-26 10:09 53阅读 0赞

**目录**

| 定位基础

定位 · 概述

定位 · 基本语法

定位模式 · static （了解）

定位模式 · 相对定位 relative（重要）

定位模式 · 绝对定位 absolute（重要）

子绝父相

子绝父相练习

定位模式 · 固定定位 fixed（重要）

固定定位的使用注意

定位模式 · 粘性定位sticky（了解）

定位 · 总结

| 定位深入

叠放次序 z-index

居中绝对定位的盒子

absolute、fixed 定位的3个特殊特性

absolute、fixed定位的盒子会完全盖住盒子

| 网页布局定位总结

| \*元素显示与隐藏

display 显示隐藏（很重要）

visibility 可见性

overflow 溢出

--------------------

### **| 定位基础** ###

#### **定位 · 概述** ####

以我们目前的知识，下列两种情况，我们无法实现：

*  某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
 *  当我们滚动窗口的时候，盒子是固定屏幕某个位置的

因此，以上效果，标准流或浮动都无法快速实现，此时需要定位来实现

*  浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子
 *  定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

--------------------

#### **定位 · 基本语法** ####

*  **定位 = 定位模式 + 边偏移**
 *  定位模式用于指定一个元素在文档中的**定位方式**。边偏移则决定了该元素的**最终位置**
 *  定位可以和浮动一起使用，两者并不是相互冲突的，而是相辅相成的，不冲突。

**定位模式**

![c7bd296bac344814915d867ccb22572b.png][]

**边偏移**

需要注意的是：边偏移的top bottom left right 和 浮动、外边距完全没关系！不要混淆

![794a577e75194eba9e4fbbd3a43d4098.png][]

--------------------

#### 定位模式 · static （了解） ####

![212091434a7c4730b95c783b870a702b.png][]

--------------------

#### **定位模式 · 相对定位 relative（重要）** ####

**介绍**

*  相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。
 *  参照位置：元素原先的位置
 *  不会脱标

**语法**

选择器 {
    	position: relative;
    	top: XXX;
    	bottom: XXX;
    	left: XXX;
    	right: XXX;
    }

**特点**

*  它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
 *  原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
 *  因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的
 *  一句话：相对自己移动、且肉身走了，灵魂还在原地，其他盒子按着它的灵魂作为标准流而排列

--------------------

#### **定位模式 · 绝对定位 absolute（重要）** ####

**介绍**

*  绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。
 *  参照位置：最近一级有定位的父元素的位置
 *  会脱标

**语法**

选择器 {
    	position: absolute;
    	top: XXX;
    	bottom: XXX;
    	left: XXX;
    	right: XXX;
    }

**特点**

![6c133c40434e4a828dd2059b13118f35.png][]

#### 子绝父相 ####

*  相对定位不脱标，绝对定位会脱标（复习：脱标的元素不会出现margin塌陷问题）
 *  相对定位的参照物：原先的位置 ； 绝对定位的参照物：最近一级有定位的父级元素
 *  使用场景：如轮播图的左右按钮、下标小圆点等
 *  一般使用：一般常给父盒子加一个相对定位，设置 top=0 left=0（就是为了给父亲一个定位，从而让子盒子能绝对定位）；给子盒子一个绝对定位
 *  一般而言：子级是绝对定位的话，父级需要使用相对定位

![66b00f9203424107a42f0be5bf27887a.png][]

#### 子绝父相练习 ####

**示例：图片轮播图的制作（简易版）**

![df5b012ba15d468a894e872508abb10e.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                /* 布局定位属性 */
                position: relative;
                left: 0;
                top: 0;
                
                /* 自身属性 */
                width: 400px;
                height: 200px;
                margin: 100px auto;
    
                /* 其他属性 */
                background-color: pink;
            }
    
            .left {
                /* 布局定位属性 */
                position: absolute;
                left: 0;
                top: 90px;
    
                /* 自身属性 */
                width: 20px;
                height: 20px;
                margin-left: 10px;
            }
    
            .right {
                /* 布局定位属性 */
                position: absolute;
                right: 0;
                top: 80px;
    
                /* 自身属性 */
                width: 20px;
                height: 20px;
                margin-right: 30px;
            }
            
            .dots {
                /* 布局定位属性 */
                position: absolute;
                bottom: 0;
                left: 120px;
    
                /* 自身属性 */
                width: 100px;
                height: 20px;
                margin-bottom: 30px;
            }
    
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <img src="imgs/left.jpg">
            </div>
            <div class="right">
                <img src="imgs/right.jpg">
            </div>
            <div class="dots">
                <img src="imgs/dots.jpg">
            </div>
        </div>
    </body>
    </html>

--------------------

#### **定位模式 · 固定定位 fixed（重要）** ####

**介绍**

*  固定定位是元素固定于浏览器可视区的位置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。
 *  参照位置：浏览器的可视窗口 
 *  **注意：距离可视窗口的距离是随窗口滚动而变化的。 而margin声明的是距离body顶部的初始化距离。 这两个概念不要弄混**
 *  会脱标

**语法**

选择器 { 
    	position: fixed; 
    	top: XXX;
    	bottom: XXX;
    	left: XXX;
    	right: XXX;
        /* 固定定位的定位位置，需要测量后计算。 原则：按照边来进行移动，而不是重心！ */
    }

![36f110cf6a6f46da8ea93246f0c8b198.png][]

--------------------

#### **固定定位的使用注意** ####

*  固定定位常用于 导航栏、侧边广告栏 中
 *  下面，以侧边广告栏为例，介绍一下固定定位使用的易错点：必须在标准流盒子div之前声明固定盒子的div语句
 *  固定定位会脱标，因此，需要固定定位的盒子语句，必须在标准流的盒子之前声明

若固定定位的盒子声明于标准流的下面，效果如下：

Html

<body>
        <div class="box"></div>
        <div class="ad">广告位</div>  这个div需要固定定位
    </body>

![85dc5d205a814f55b7e76c8873988d49.png][]

若固定定位的盒子声明于标准流的上面，效果如下：

<body>
    	<div class="ad">广告位</div>  这个div需要固定定位
        <div class="box"></div>
    </body>

![4d6c1f64a859454ab933146c15353d1f.png][]

上述例子的 CSS样式

--------------------

#### **定位模式 · 粘性定位sticky（了解）** ####

**介绍**

*  粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的
 *  作用场景：当元素不符合固定定位条件的时候，可以随页面滚动而滚动 ； 一旦滚动到满足固定定位的条件的位置时，就会变为固定定位
 *  参照位置：浏览器的可视窗口
 *  **注意：距离可视窗口的距离是随窗口滚动而变化的。 而margin声明的是距离body顶部的初始化距离。 这两个概念不要弄混**
 *  **不会** 脱标

**语法**

选择器 { 
    	position: fixed; 
    	top: XXX;
    	bottom: XXX;
    	left: XXX;
    	right: XXX;
    }

![c4a7d89dc22d41cb9196c255572cd6a2.png][]

![d7e67908329e4b43b4653ae7c793c609.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box { 
                width: 300px;
                height: 2000px;
                margin: 10px auto;
                background-color: lightskyblue;
            }
    
            .ad {
                /* 改为粘性定位*/
                position: sticky;
                top: 0;  /* 固定定位为：元素的顶边距离可视区域的顶部距离为0 */
    
                /* 粘性定位不脱标，因此要添加浮动 */
                float: left;
    
                /* 浮动到最左边后，再调整为紧贴版心的右侧（测量出像素） */
                margin-left: 735px;
                
    
                /* margin-top设置的是距离body顶部的距离。 这个和可视区域的距离没关系。（可视区域是实时变化的） */
                margin-top: 100px;
    
                /* 设置盒子属性 */
                width: 100px;
                height: 100px;
                background-color: pink;
                
            }
            
        </style>
    </head>
    <body>
        <div class="ad">广告位</div>
        <div class="box">版心</div>
        
    </body>
    </html>

--------------------

#### 定位 · 总结 ####

![7607049bcaa84c41abb53f0df3de5f1b.png][]

*  一定记住 相对定位、固定定位、绝对定位 两个大的特点： 1. 是否占有位置（脱标否） 2. 以谁为基准点移 动位置。
 *  学习定位的重点：子绝父相。

###    **| 定位深入** ###

#### **叠放次序 z-index** ####

**介绍**

*  在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)。类似图层
 *  只有定位的盒子才有 z-index 属性
 *  数字后面不能加单位

**语法**

选择器 { z-index: 1; }

![50bd0534f0fa41d78012f12660783c85.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .c {
                position: absolute;
    
                width: 100px;
                height: 100px;
            }
    
            .c1 {
                left: 20px;
                background-color: pink;
            }
    
            .c2 {
                left: 30px;
                top: 10px;
                background-color: blue;
                z-index: 1;
            }
    
            .c3 {
                left: 10px;
                top: 20px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="c1 c"></div>
        <div class="c2 c"></div>
        <div class="c3 c"></div>
    </body>
    </html>

--------------------

#### 居中绝对定位的盒子 ####

有时候，绝对定位后的盒子必须要在定位了的父元素里居中显示

![24adf4c556c645e5a962b9ce7c42da9d.png][]

如何做到居中绝对定位的盒子 ？

通过 **盒子左侧移动到父级的水平中心 → 盒子向左移动自身宽度的一半** 来实现绝对定位盒子 的居中

![839a243d60514d7dab14e2b64e1424dd.png][]

![7a37dd5587f14661876ac3142b0def51.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                position: relative;
                left: 0;
                top: 0;
    
                width: 400px;
                height: 400px;
                background-color: yellow;
                margin: 100px auto;
            }
    
            .c {
                position: absolute;
                left: 50%;
                margin-left: -50px;
                
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="c"></div>
        </div>
    </body>
    </html>

不过需要注意的是，相同的代码，若把子元素改为sticky，则即使加了左浮动（因为sticky定位的元素不会脱标，所以加个浮动让它脱标），margin-left: -50px 也仍然会失效（了解一下就好，反正sticky也不常用）

![ef126b5d312a437693575a41a258788f.png][]

.c {
                /* position: absolute; */
                position: sticky; /* 改为sticky定位 */
                float: left;    /* 添加left浮动，让sticky从不脱标变为脱标 */
                left: 50%;
                margin-left: -50px;
                
                width: 100px;
                height: 100px;
                background-color: pink;
            }

--------------------

#### **absolute、fixed 定位的3个特殊特性** ####

绝对定位和固定定位也和浮动类似，但是注意：static定位、相对定位不具有下列属性

*  **行内元素添加绝对或者固定定位，可以直接设置高度和宽度。**

![aa96116527744f848058ef4198c08700.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .c {
                position: absolute ;
    
                height: 100px;
                width: 400px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <span class="c">给span加一个absolute，则相当于便成了行内块级元素<br/>不需要像以前一样声明display: inline-block<br/>
            就可以直接给span设置width、height啦</span>
    </body>
    </html>

*    
    **块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。（否则默认一行）**
 *  但仍然占有位置，并不会脱标

![77bd20245c5248fab17c0505b63d23c2.png][]

.c2 {
                position: absolute;
                z-index: -1;
    
                background-color: lightgreen;
            }
    
            .c3 {
                z-index: 1;
    
                height: 100px;
                width: 100px;
                background-color: rgba(22, 23, 222, 0.6);
            }
            
            <div class="c2">
            使用absolute或者fixed的块级元素，会默认盒子的大小是内容大小，而不再是默认一行。但仍然占有位置，并不会脱标
        </div>
        <div class="c3">

脱标的盒子**不会触发外边距塌陷、无法用margin：0 auto 水平居中。** 浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题

####    **absolute、fixed定位的盒子会完全盖住盒子** ####

*  绝对定位、固定定位、浮动，都会脱标，导致后面的标准流顶替当前位置。
 *  区别在于： 绝对定位、固定定位会盖住标准流所有的内容！！ 而浮动，不会盖住标准流的文字，文字会环绕浮动盒子
 *  浮动，最开始就是用来制作文字环绕效果的
 *  请看下面的两个例子：

![b05ddba091474442ae6353e4c081b2cb.png][]

**浮动 不会盖住标准流盒子的文字**

需要注意：浮动的脱标讲究语句的声明次序（要在标准流前面声明）。 而定位的脱标不讲究语句的次序

![6c0f5088b2ff4f6dafbf31cc88599ea8.png][]

###    **| 网页布局定位总结** ###

总结一下目前学过的知识

*  至此，盒子模型、浮动、定位 全部学完，网页的布局相关知识已经全部学完。
 *  通过盒子模型，清楚知道大部分html标签是一个盒子。
 *  通过CSS浮动、定位 可以让每个盒子排列成为网页

下面总结一下网页布局定位

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

![4596779159624bef9ea98da88c510050.png][]

### **| \*元素显示与隐藏** ###

#### **display 显示隐藏（很重要）** ####

display的作用：改变元素显示模式、显示元素、隐藏元素等功能

**语法**

display: none ；隐藏对象
    display：block ；除了转换为块级元素之外，同时还有显示元素的意思

--------------------

#### **visibility 可见性** ####

visibility 属性用于指定一个元素应可见还是隐藏

**语法**

visibility：visible ; 元素可视
    visibility：hidden; 元素隐藏

*  visibility把元素隐藏后，元素不会脱标
 *  若以后想 “”把元素隐藏后，仍然占有当前位置”，则使用visibility。 若隐藏元素不想要原来位置， 就用 display：none (用处更多 重点）

--------------------

#### **overflow 溢出** ####

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么。

**语法**

![9e71361f16f84d55b11023ef17d7acc2.png][]

*  一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
 *  但是如果有定位的盒子， 请慎用overflow:hidden 因为它会隐藏多余的部分
 *  综上所述，我们**不建议对有定位的元素使用 overflow: hidden 进行消除浮动！**

[c7bd296bac344814915d867ccb22572b.png]: https://img-blog.csdnimg.cn/c7bd296bac344814915d867ccb22572b.png
[794a577e75194eba9e4fbbd3a43d4098.png]: https://img-blog.csdnimg.cn/794a577e75194eba9e4fbbd3a43d4098.png
[212091434a7c4730b95c783b870a702b.png]: https://img-blog.csdnimg.cn/212091434a7c4730b95c783b870a702b.png
[6c133c40434e4a828dd2059b13118f35.png]: https://img-blog.csdnimg.cn/6c133c40434e4a828dd2059b13118f35.png
[66b00f9203424107a42f0be5bf27887a.png]: https://img-blog.csdnimg.cn/66b00f9203424107a42f0be5bf27887a.png
[df5b012ba15d468a894e872508abb10e.png]: https://img-blog.csdnimg.cn/df5b012ba15d468a894e872508abb10e.png
[36f110cf6a6f46da8ea93246f0c8b198.png]: https://img-blog.csdnimg.cn/36f110cf6a6f46da8ea93246f0c8b198.png
[85dc5d205a814f55b7e76c8873988d49.png]: https://img-blog.csdnimg.cn/85dc5d205a814f55b7e76c8873988d49.png
[4d6c1f64a859454ab933146c15353d1f.png]: https://img-blog.csdnimg.cn/4d6c1f64a859454ab933146c15353d1f.png
[c4a7d89dc22d41cb9196c255572cd6a2.png]: https://img-blog.csdnimg.cn/c4a7d89dc22d41cb9196c255572cd6a2.png
[d7e67908329e4b43b4653ae7c793c609.png]: https://img-blog.csdnimg.cn/d7e67908329e4b43b4653ae7c793c609.png
[7607049bcaa84c41abb53f0df3de5f1b.png]: https://img-blog.csdnimg.cn/7607049bcaa84c41abb53f0df3de5f1b.png
[50bd0534f0fa41d78012f12660783c85.png]: https://img-blog.csdnimg.cn/50bd0534f0fa41d78012f12660783c85.png
[24adf4c556c645e5a962b9ce7c42da9d.png]: https://img-blog.csdnimg.cn/24adf4c556c645e5a962b9ce7c42da9d.png
[839a243d60514d7dab14e2b64e1424dd.png]: https://img-blog.csdnimg.cn/839a243d60514d7dab14e2b64e1424dd.png
[7a37dd5587f14661876ac3142b0def51.png]: https://img-blog.csdnimg.cn/7a37dd5587f14661876ac3142b0def51.png
[ef126b5d312a437693575a41a258788f.png]: https://img-blog.csdnimg.cn/ef126b5d312a437693575a41a258788f.png
[aa96116527744f848058ef4198c08700.png]: https://img-blog.csdnimg.cn/aa96116527744f848058ef4198c08700.png
[77bd20245c5248fab17c0505b63d23c2.png]: https://img-blog.csdnimg.cn/77bd20245c5248fab17c0505b63d23c2.png
[b05ddba091474442ae6353e4c081b2cb.png]: https://img-blog.csdnimg.cn/b05ddba091474442ae6353e4c081b2cb.png
[6c0f5088b2ff4f6dafbf31cc88599ea8.png]: https://img-blog.csdnimg.cn/6c0f5088b2ff4f6dafbf31cc88599ea8.png
[4596779159624bef9ea98da88c510050.png]: https://img-blog.csdnimg.cn/4596779159624bef9ea98da88c510050.png
[9e71361f16f84d55b11023ef17d7acc2.png]: https://img-blog.csdnimg.cn/9e71361f16f84d55b11023ef17d7acc2.png