详解CSS（四）

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、的博客

🛺系列专栏：CSS专栏

🚲给大家推荐一个网站😉很实用😚我一直在上面刷题：点击跳转进入网站注册登录即可刷题

标准文档流

什么是标准文档流：

我们制作的HTML网页和PS画图软件画图时有本质上的区别，HTML网页在制作的时候，都遵循一个“流”的规则：从左到右、从上到下，使用PS软件画图时，我们想在哪里画个东西就可以在哪里画。

标准文档流要注意的事项：

空白折叠现象：图片和文字都存在空白间隙

<!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>
    你
    好
    <img src="img.jpg">
    <img src="img.jpg">
</body>
</html>

如何解决空白现象：需要将元素放在同一行，让它们紧紧相连。

<!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>
    你好
    <img src="img.jpg"><img src="img.jpg">
</body>
</html>

高矮不齐、底部对齐：

<!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>
        span{
            font-size: 30px;
        }
    </style>
</head>
<body>
    人人人人人人人人<span>姚明</span>人人人人人人人人
</body>
</html>

浮动

行内元素的特性：让多个元素排在同一行。块级元素的特性：给元素设置宽高。

在标准文档流中的元素只有两种：块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。为了满足人们的需求：实现多个元素排列在一行，并且给这些元素设置宽度和高度。出现了浮动，浮动：可以让元素脱离标准文档流，实现让多个元素排列在一行，并且可以设置宽高！

浮动是通过一个浮动属性来实现：

float：这个属性有两个值 left(向左浮动)向左移动、right(向右浮动)向右移动

浮动元素的特性：

浮动元素脱离文档流，它不在占用空间：

<!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>
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: #0f0;
        }
        .div3{
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
</html>

当我们给第一个 div1 设置右浮动时，盒子的宽度明显变小，说明浮动是不占用空间的。

浮动元素的层级要比标准文档流里面元素的层级要高，会将标准文档流里面的元素覆盖住：

我们给第二个盒子设置左浮动，为了方便区分我们给第三个盒子的宽度设置120px，很明显发现浮动元素会将标准文档流里面的元素覆盖住。

浮动元素遇到父元素的边框就会停止浮动：

很明显，当我们给 div1元素设置右浮动时，其只是浮动到父元素的边框就停止，并没有越过边框。

浮动元素遇到上一个浮动元素就会停止浮动：

很明显，当div1红色左浮动时，div2左浮动遇到另一个浮动元素就会停止，div3被div1覆盖住。

浮动元素浮动后，其父元素不会在包裹着浮动元素：

本来box父元素应该把三个子元素包裹起来，但三个子元素浮动之后飘起来了，所以不会被包裹了

将行内元素进行浮动后，那么这个行内元素就会变成块级元素：

<!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>
        .box{
            width: 600px;
            border: 1px solid #000;
            margin-left: auto;
            margin-right: auto;
        }
        .s1{
            /* 给行内元素设置宽高 */
            width: 100px;
            height: 100px;
            background-color: #f00;
            float: left;
        }
        .s2{
            width: 100px;
            height: 100px;
            background-color: #0f0;
            float: left;
        }
        .s3{
            width: 100px;
            height: 100px;
            background-color: #00f;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="s1">文本1</span>
        <span class="s2">文本2</span>
        <span class="s3">文本3</span>
    </div>
</body>
</html>