CSS——页面布局_css页面设计-CSDN博客

本文链接：https://blog.csdn.net/jiuyue_77/article/details/126126259

第四章——CSS的浮动和定位

文章目录

第四章——CSS的浮动和定位
前言
一、浮动
- 1.浮动的写法
- 2.浮动的特性
二、定位
三、元素的堆叠顺序、溢出和裁剪
总结

前言

页面的整体布局一般都采用标准流方式（标准文档流），即默认布局方式。

一、浮动

float 属性用于定义元素浮动的方向。
float 属性的值及其意义：

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，会显示在文档中出现的位置
inherit	规定应该从父元素继承float属性的值。

clear 属性与float 属性相反，它定义了在元素的哪边不允许出现浮动的元素。
clear 属性的值及其意义：

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
none	默认值。允许浮动元素出现在两侧
inherit	规定应该从父元素继承 clear 属性的值。

1.浮动的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section{
            /* 浮动会使元素脱离文档流 */
            /* 右浮动会按照顺序从右侧开始排列，所以注意元素的顺序 */
            float: right;
            /* letter-spacing: 30px; */
            margin-left: 20px;
        }

        section:hover{
            color: blue;
            cursor: pointer;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: red;
            clear: both;
        }
    </style>
</head>
<body>
    <nav>
        <section>新闻</section>
        <section>hao123</section>
        <section>地图</section>
        <section>贴吧</section>
        <section>视频</section>
        <section>图片</section>
        <section>网盘</section>
        <section>更多</section>
    </nav>
    <div>

    </div>
</body>
</html>

2.浮动的特性

浮动会使元素脱离标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 
        1.浮动会使元素脱离文档流
        2.浮动元素不会影响上面的元素，但下方的元素会环绕在其周围
        3.设置浮动的元素会横向排列，如果宽度不够会换行显示，且换行元素的上方不会超过非换行元素的底部
        4.浮动元素设置完后，对其下方的元素要清除浮动影响，通常会给需要清除浮动的元素一个clear类，同时清除两侧浮动
        */

        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }

        .div2{
            width: 300px;
            height: 300px;
            background-color: blue;
            float: left;
        }

        .div3{
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .clear{
            /* 清除两侧浮动 */
            clear: both;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <p class="clear">今天</p>
</body>
</html>

二、定位

与定位相关的属性：

属性	描述
position	把元素放置在一个相对的或绝对位置中，具体位置由top、right、bottom 或 left 属性定义。
top	设置定位元素的上外边界与其包含块上边界之间的距离
right	设置定位元素的右外边界与其包含块右边界之间的距离
bottom	设置定位元素的下外边界与其包含块下边界之间的距离
left	设置定位元素的左外边界与其包含块左边界之间的距离
overflow	设置当前元素内容溢出元素框时如何处理
clip	设置绝对定位元素的形状，元素内容被剪切入这个形状之中，可裁剪掉形状之外的区域
vertical-align	设置元素的垂直对齐方式
z-index	设置绝对定位元素的堆叠顺序

position 属性的属性值：

属性值	描述
relative	生成相对定位元素，该元素相对于其正常位置进行定位 left：10px;会向元素的left位置添加10像素
absolute	生成绝对定位元素，该元素相对于最近的已定位的祖先元素进行定位元素的位置通过left、right、top和bottom 属性进行规定
fixed	生成绝对定位元素，该元素相对于浏览器窗口进行定位元素的位置通过left、right、top和bottom 属性进行规定
static	默认值。没有定位，元素出现在标准流中，忽略left、right、top、bottom或z-index声明

1.static定位（默认定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 定位：static定位，相对定位，绝对定位，固定定位 -->
    <!-- static定位：由行标签，块标签等默认样式排布出的网页叫标准文档流，也就是static定位 -->
    <!-- 相对定位：相对于元素原本所在位置进行定位，当前元素不会脱离文档流，其他元素会给它留出位置 -->
    <!-- 使用场景：不动或微调（一般指在5px之内）  ,不动：给内部绝对定位的元素设置参照物 -->


    <!-- 绝对定位：
    1.开启绝对定位会使当前元素脱离文档流，其他元素会占据其原有的位置
    2.由于绝对会使元素脱离文档流，所以默认情况下，设置了绝对定位的元素会相对于浏览器进行定位，如果当前元素的父级设置了定位，那么
    就会相对于父级所在位置进行定位，如果父级没有设置定位，那么就会一级一级的往上找，直到找到一个设置了定位的祖先元素，会相对于这个
    设置了定位的祖先元素进行定位，若果所有的祖先元素都没有设置定位，那就会相对于浏览器进行定位
    -->
    <!-- 使用场景：设置了相对定位的元素之内 -->

    <!-- 固定定位：相对于浏览器进行定位 -->
    <!-- 使用场景：标题栏，侧边栏，返回顶部的图标等 -->

</body>
</html>

2.相对定位

相对定位： 对一个元素进行相对定位，可以通过设置该元素垂直和水平位置，让其相对于它在文档中初始位置（在标准流中的位置）进行移动。
相对定位不脱离标准文档流

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 开启相对定位 */
            position: relative;
            /* 向右移动 */
            /* left: 100px; */
            /* 向下移动 */
            /* top: 100px; */

        }

        section{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div></div>
    <section></section>
</body>

</html>

3.绝对定位

绝对定位： 设置绝对定位的元素框将标准流完全删除，元素原来在标准流中所站的空间会关闭，就好像该元素原来不存在一样。元素在绝对定位后生成一个块级框，成为块级元素，而不论原来在标准流中是块级元素还是行内元素。
绝对定位脱离标准文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{
            position: relative;
        }

        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 1.相对于浏览器定位 */
            /* 2.相对于body的位置进行定位，给body设置了相对定位 */
            /* 3.开启绝对定位会使当前元素脱离文档流，其他元素会占据其原有的位置 */
            /* position: absolute;
            left: 8px; */

        }

        /* section{
            width: 400px;
            height: 400px;
            background-color: blue;
        } */

        span{
            position: absolute;
            /* 4.相对于div定位的  ,div开启了定位*/
            /* 5.相对于body定位 ，body开启了定位*/
            /* 6.相对于浏览器进行定位，上级元素都没有开启定位 */
            left: 0;
        }
    </style>
</head>
<body>
    <div>
        <span>嵌入式 PC 提供商研华科技（Advantech）最新发布的 AIMB-522 工业主板曝光了 AMD 的锐龙 5000 系列嵌入式处理器，可选 6、8、10 和 12 核型号。</span>
    </div>
    <!-- <section></section> -->
</body>
</html>

4.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            height: 2000px;
        }
        header{
            width: 100%;
            height: 100px;
            background-color: red;
            /* 开启固定定位 */
            /* 相对于浏览器进行定位 */
            position: fixed;
            top: 0;
        }
    </style>
</head>
<body>
    <header></header>
</body>
</html>

三、元素的堆叠顺序、溢出和裁剪

1.元素的堆叠顺序

可以通过设置z-index 属性来控制这些框的堆叠次序。z-index 属性只能在 position 属性值为relative或absolute或fixed的元素上有效。

基本原理： z-index 值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。
z-index 属性的值可以是正整数也可以是负整数，默认值为0，数值越高堆叠顺序越高。

2.元素的溢出

overflow 属性的属性值：

属性值	描述
visible	内容不会被修剪，会呈现在元素之外
hidden	元素框之外的内容会被修剪，修剪掉的内容不显示
scroll	元素框之外的内容会被修剪，但是浏览器会显示滚动条以便查看修剪掉的内容
auto	让浏览器自动处理被修剪掉的内容，通常会显示滚动条以便查看

3.元素的裁剪

clip 属性用来裁剪绝对定位的元素，它可以为元素块定义一个矩形裁剪框，裁剪框之内的区域显示，之外的区域不显示（也可以根据overflow 的属性值来处理）。
clip 属性的基本语法： clip：rect(top,right,botttom,left);

总结

1.页面的整体布局一般采用标准流方式，即默认布局方式。
2.当页面中有栏目在同一行显示时，可以采用浮动法或绝对定位法，使其脱离标准流。
3.元素堆叠顺序可以排列Z轴方向的元素框。（项目案例:可以达到层叠的双层或多层结构的页面）
4.当页面中元素按照标准流方式布局，需要对自己的位置进行调整而保留原来的位置时，可以采用相对定位。在使用相对定位时，参考点是元素本身在标准流中的位置，使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。（相对定位通常结合绝对定位法使用，即将相对定位元素作为绝对定位的祖先元素使用）
5.使用绝对定位时，首先找到绝对定位的祖先元素即参考对象，祖先元素必须拥有定位 position 属性。其次设置绝对定位的坐标值，只能设置两个值即水平方向：left 或right；垂直方向：top 或 bottom。