HTML+CSS基础知识点（part06）

最新推荐文章于 2024-07-18 20:18:47 发布

玉玊临芬

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量829

点赞数 31

文章标签： html css 前端

本文链接：https://blog.csdn.net/2201_75597173/article/details/139814774

版权

一、CSS浮动和定位

1、浮动

1.1、CSS布局的三种机制

网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：

1.普通流（标准流）

块级元素会独占一行，从上向下顺序排列；
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

2.浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。

3.定位

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

1.2、什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，

浮动的目的就是为了让多个块级元素同一行上显示。
元素添加浮动后，浮动的元素脱标,虽然一行内显示,但是display属性为block

二、清除浮动

2.1、为什么要清除浮动？

浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

2.3、清除浮动的方法

清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

在CSS中，clear属性用于清除浮动。

清除左侧浮动+清除右侧浮动的效果=同时清除左右两侧浮动的影响。所以一般直接设置clear的属性值为both。

2.3.1、使用after伪元素清除浮动

通过一段代码来了解一下伪元素：

<style>
        .con::before {
            /* content:内容属性是伪元素必备的属性 */
            content: '世界上最最美味的';
        }
        
        .con::after {
            content: '螺蛳粉';
        }
    </style>
</head>

<body>
    <!-- 元素标签 HTML 伪元素:假的标签 -->
    <div class="con">
        <!-- <span>钱塘江</span>  -->
        美食就是
    </div>
</body>

当我定义了三个盒子父元素、父元素的兄弟、子元素，当我将子元素设置浮动时会出现：

为了解决此问题可以使用伪元素的方法来解决清除浮动

        .clearfix::after {
            content: '.';
            display: block;
            height: 0;
            clear: both;
            /* 隐藏 */
            /* 虽然隐藏但是仍然占位 */
            visibility: hidden;
        }

这是清除浮动后的效果。

完整代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 200px;
            border: 1px solid red;
            /* 1.当子元素浮动时,设置父元素的高 */
            /* height: 300px; */
        }
        
        .son {
            width: 100px;
            height: 100px;
            /* 浮动的影响:造成了父元素高度为0的问题 */
            float: left;
            background-color: blue;
        }
        
        .father_bro {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        /* 开发中解决清除浮动的影响 */
        /* code hate cv */
        
        .clearfix::after {
            content: '.';
            display: block;
            height: 0;
            clear: both;
            /* 隐藏 */
            /* 虽然隐藏但是仍然占位 */
            visibility: hidden;
        }
        /* 如果子元素都浮动了,父元素没有设置高度,产生了浮动的影响,可以使用伪元素的方法来解决清除浮动 */
    </style>
</head>

<body>
    <div class="father clearfix">
        <div class="son"></div>
        <!-- 做为father的最后的一个孩子 -->
    </div>
    <div class="father_bro"></div>
</body>

</html>

2.3.2、父级添加overflow属性方法

给父元素设置overflow:hidden，清除浮动

<style>
        .father {
            width: 200px;
            border: 1px solid red;
            /* 给父元素设置overflow:hidden */
            overflow: hidden;
        }

        .son {
            width: 100px;
            height: 100px;
            /* 浮动的影响:造成了父元素高度为0的问题 */
            float: left;
            background-color: blue;
        }

        .father_bro {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="father_bro"></div>
</body>

2.3.3、额外标签法

在浮动元素的末尾添加一个div标签设置clear:both的属性。

<body>
    <div class="father">
        <div class="son"></div>
        <!--在浮动元素的末尾添加一个div标签设置clear:both的属性 -->
        <div style="clear:both"></div>
    </div>
    <div class="father_bro"></div>
</body>

三、定位

3.1、什么是定位

在 CSS 中，定位是一种用于精确控制元素在文档中位置的机制。

3.2、元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

在CSS中，position属性用于定义元素的定位模。

position属性的常用值：

边移量：

3.3、静态定位（static）

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

3.4、相对定位（relative）

相对定位是将元素相对于它自己在标准流中的位置进行定位。

当我定义了一个父类的盒子和三个子类，它们默认显示是这样的：

当我对son1进行相对定位并给它一定的值，你会发现它变成了：

相对定位是相对于自己原来的位置进行定位，并不会脱离标准流。

源代码如下;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
        }
        
        .father div {
            width: 100px;
            height: 100px;
        }
        
        .father .son1 {
            background-color: blue;
        }
        
        .father .son2 {
            background-color: green;
            /* 相对定位:相对于自己原来的位置进行定位 
                没有脱离标准流
            */
            position: relative;
            left: 100px;
            top: 80px;
        }
        
        .father .son3 {
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
        <div class="son3">son3</div>
    </div>
</body>

</html>

3.5、绝对定位（absolute）

它可以通过边偏移移动位置，但是它完全脱标，不占位置。

3.5.1、父级没有定位

3.5.2、父级有定位

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 200px;
            height: 300px;
            border: 2px solid green;
            /* margin: 50px auto; */
            /* 父元素相对定位 */
            position: relative; 
        }
        
        .father .son1 {
            width: 70px;
            height: 70px;
            background-color: chartreuse;
            position: absolute;
            right: 20px;
            bottom: 30px;
        }
        
        .father .son1 {
            text-align: center;
            line-height: 35px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">son1</div>
    </div>
</body>

</html>

3.5.3、“子绝父相”

子绝父相就是指子元素设置绝对定位，而父元素设置相对定位。
换句话说：如果要对一个子元素使用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 200px;
            height: 300px;
            border: 1px solid red;
            margin: 50px auto;
            /* 父元素设置相对定位 */
            position: relative;
        }
        
        .father .son1 {
            width: 80px;
            height: 80px;
            background-color: blue;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 80px;
            border-radius: 50%;
            /* 子元素设置绝对定位  子绝父相 */
            position: absolute;
            right: 20px;
            bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">son1</div>
    </div>
</body>

</html>

3.6、固定定位（fixed）

固定定位是绝对定位的一种特殊形式,它以浏览器窗口作为参照物来定义网页元素。

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。

玉玊临芬

关注

31
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS基础知识点（part06）

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，浮动的目的就是为了让多个块级元素同一行上显示。元素添加浮动后，浮动的元素脱标,虽然一行内显示,但是display属性为block在 CSS 中，定位是一种用于精确控制元素在文档中位置的机制。
复制链接

扫一扫