【CSS3】css开篇基础（4）

E绵绵

发布于 2024-10-23 08:24:59

6700

代码可运行

文章被收录于专栏：编程学习之路编程学习之路

运行总次数：0

代码可运行

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。 当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！ 加油，一起CHIN UP！💪💪

这次我们要了解网页布局，要学习浮动和定位两个知识点。

2.标准流

标准流（Normal Flow）是网页布局的默认排版模式，指的是元素在没有使用浮动、定位等特殊布局属性时，按照默认的排列顺序进行排列的机制。所有元素默认情况下都会遵循标准流进行布局。

所谓的标准流：就是标签按照规定好的默认方式排列。 块级元素会独占一行，从上向下顺序排列。 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。注意：实际开发中，一个页面基本都包含了这三种布局方式

3.浮动

loat 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动特性

加了浮动之后的元素，会具有很多特性，需要我们掌握。

浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

浮动元素会脱离标准流（脱标）

脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
浮动的盒子不再保留原先的位置

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动特性1</title>
    <style>
        /* 设置了浮动（float）的元素会：
        1.脱离标准普通流的控制（浮）移动到指定位置（动）。
        2.浮动的盒子不再保留原先的位置 */
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

</html>

浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动的元素会具有行内块元素的特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性，无需用display转换。 块级盒子：没有设置宽度时默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定 行内盒子：原本的宽度默认和内容一样宽，直接设置高宽无效，但是添加浮动后，它的宽度和高度可以直接设置，无需用display转换 浮动的盒子中间是没有缝隙的，是紧挨着一起的

浮动带来的问题

后续标准流元素的正常布局

一个元素浮动了，理论上其余的兄弟元素也要浮动。一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

这是因为浮动会脱标，导致不和标准流在一起排序了，这样就可能导致浮动和标准流发生重叠。

注意浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流. 也就是说标准流如果在浮动盒子前面，那么浮动盒子不会影响标准流，会在其下部。而在后面会发生重叠，可能影响到结果。 这时候如果要消除影响，我们就要消除浮动。

父容器恢复高度

当产生浮动后，我们的浮动元素盒子默认高度是0，所以如果一个盒子里装的全是浮动盒子，该盒子高度就为0，就会坍塌掉，同时还会影响到后面标准流的布局。（当然前面的标准流不会被影响）这时如果想要不被影响，就要清除浮动，从而它们就能使浮动的盒子恢复到标准流中：高度能恢复成应有的高度，也不会被之前的标准流给重叠影响到，同时它们浮动盒子之间的布局也不会被影响。

清除浮动

通常使用以下几种方法来清除浮动：

使用clearfix ：在父元素上应用一个clearfix类，这个类定义了伪元素清除浮动。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

然后在父元素的类中添加 clearfix 类名，就能清除子元素的浮动。

使用overflow属性：将父元素的overflow属性设置为auto或者hidden，可以触发BFC（块级格式化上下文），从而清除浮动。

.parent {
    overflow: hidden; /* 或者 overflow: auto; */
}

这有个缺点，就是溢出的部分还会隐藏起来。

这些方法可以根据具体情况选择，以确保浮动元素不会破坏页面布局。

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置，我们网页布局一般采取的策略是： 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准侧

4.定位

在网页设计中，定位（Positioning）是一种CSS属性，用于控制元素在页面中的位置。常用的定位属性包括：

相对定位

相对于元素自身正常位置进行定位，通过top、right、bottom、left属性来调整位置，不会脱离文档流。

.element {
    position: relative;
    top: 10px;
    left: 20px;
}

相对定位相对的是它原本在文档流中的位置而进行的偏移，并且relative定位遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的。而且它还依然占有文档空间，占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动。也就是说相对定位并不会脱标，依然还是标准流，占据空间依然没变。只不过视觉上发生了变化。

绝对定位

绝对定位不会保留原来的位置（脱离文档流），那后面盒子就会往上占了它的位置；如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位；如果祖先元素有定位（可以是相对、绝对或者固定定位），则以最近的已经定位的祖先元素为基准移动位置。子绝父相 —— 虽然父元素的定位可以是相对、绝对或者固定定位，但是绝对定位和固定定位都会脱离标准流，所以我们实际开发中，一般都使用相对定位，这就是常说的子绝父相。

.element {
    position: absolute;
    top: 50%;
    left: 50%;
}

固定定位

固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>

    <style>
        .fixed {
            width: 200px;
            height: 200px;
            background-color: aqua;

            /* 使用固定定位 */
            position: fixed;
            top: 50px;
            left: 300px;

        }
    </style>
</head>

<body>
    <div class="fixed">
    </div>

    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>
    <h1>我是h的内容</h1>

</body>

</html>

粘性定位

基本语法：

.element {
    position: -webkit-sticky; /* 兼容性前缀 */
    position: sticky;
    top: 10px; /* 或者 bottom, left, right 中至少一个值 */
}

工作原理：

元素在页面滚动时表现为相对定位，直到其达到指定的阈值位置（例如距离顶部10px），然后变为固定定位，保持在指定位置不动，直到离开阈值范围。
如果元素离开视口顶部时没有足够的空间放置它，它将像相对定位一样继续滚动，直到可以固定在指定位置。
粘性定位不脱标，原有空间一直不变。

兼容性：

在现代浏览器中有很好的支持，但老版本浏览器可能需要使用 -webkit-sticky 进行兼容性处理。

在设计中，粘性定位常用于创建导航栏在用户滚动时保持在屏幕顶部或侧边的效果，或者创建吸顶效果等。

定位的叠放顺序

z-index 主要适用于已经设置了定位（position: relative, position: absolute, position: fixed, position: sticky）的元素。
只有设置了定位的元素才能通过 z-index 控制其堆叠顺序，因为只有这些元素才能脱离正常文档流并具有层叠上下文。

数值可以是正整数、负整数或0,默认是 auto，数值越大，盒子越靠上 如果属性值相同，则按照书写顺序，后来居上

定位特性

定位也和浮动类似。 1.行内元素添加定位，可以直接设置高度和宽度 2.块级元素添加定位，如果不给宽度或者高度，默认大小是内容的大小。

让一个盒子绝对定位到盒子右中间

.container {
    position: relative;
    width: 300px; /* 容器宽度 */
    height: 200px; /* 容器高度 */
    background-color: #f0f0f0;
}

.element {
    position: absolute;
    top: 50%; /* 元素顶部定位在容器中间 */
    right: 0; /* 元素右侧与容器右侧对齐 */
    margin-top: -50px; /* 元素向上移动自身高度的一半 */
    width: 100px; /* 元素宽度 */
    height: 100px; /* 元素高度 */
    background-color: #3498db;
}

这种方法可以确保 .element 始终位于 .container 的中间，无论父容器的尺寸如何变化。