<!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>display属性</title>
    <style>
        body > div {
            padding: 100px;
        }
        div > div {
            width: 100px;
            height: 100px;
        }
        .a {
            display: inline;
            background-color:antiquewhite
        }
        .b {
            display: inline;
            background-color: cadetblue;
        }
        .c {
            display: inline;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div>
        <div class="a">盒子1</div>
        <div class="b">盒子2</div>
        <div class="c">盒子3</div>
    </div>
</body>
</html>

给三个div设置为行内元素，行内块元素，块级元素，显示的效果分别如下所示：

也可以设置为none隐藏元素，display设置隐藏元素之后，元素不会占据原先的空间，后面的元素会填充隐藏元素的空间位置。

（2）visibility属性

visibility属性也可以实现元素的显示和隐藏，它具有两个属性值：

visibility属性具有两个属性值：

hidden：不显示元素，但是占据元素的位置。

visible：显示元素。

案例代码：

<!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>visibility属性</title>
    <style>
        body > div {
            padding: 100px;
        }
        div > div {
            width: 100px;
            height: 100px;
            display: inline-block;
        }
        .a {
            background-color:antiquewhite
        }
        .b {
            /* 隐藏 */
            visibility: hidden;
            background-color: cadetblue;
        }
        .c {
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div>
        <div class="a">盒子1</div>
        <div class="b">盒子2</div>
        <div class="c">盒子3</div>
    </div>
</body>
</html>

运行效果：

1.2、行内元素和块内元素

行内元素：显示在一行，【行内元素不能设置宽度和高度】，但是可以设置边框、填充、边距属性。

行内元素里面不能够嵌套其他的块级元素。

块内元素：独占一行，块内元素可以设置宽度和高度，可以设置边框、填充、边距属性。

块级元素里面可以嵌套某些块级元素，也可以嵌套行内元素。

（1）元素的嵌套规则

HTML元素的嵌套规则：

规则一：块元素可以包含行内元素、某些块元素，但是行内元素不能包含块元素，行内元素只能包含行内元素。
规则二：块元素不能放在p元素里面。
规则三：部分块级元素只能包含行内元素，例如：【h1、h2、h3、h4、h5、h6、p、dt】元素。
规则四：块级元素一般与块级元素并列、行内元素一般与行内元素并列。

举例说明：

<!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>行内和块级元素</title>
</head>
<body>
    <!-- 
        行内元素嵌套块级元素 
        下面这个代码设置的样式，将失效
    -->
    <p style="color: red; font-size: 20px;">
        <div>第一个div</div>
        <div>第二个div</div>
        <div>第三个div</div>
    </p>
</body>
</html>

上面代码运行效果如下：

1.3、元素溢出问题

（1）overflow属性

CSS通过【overflow】属性可以设置元素溢出时候的样式，那什么情况下，元素会发生溢出现象呢？？？

当元素中的内容超出元素的大小，这个时候当前元素无法显示多余的内容了就会产生溢出现象。

【overflow】属性取值如下：

overflow属性取值：

visible：溢出时候，正常显示，默认取值。

hidden：溢出时候，多余的内容被隐藏。

scroll：溢出时候，多余的内容被隐藏，并且显示滚动条可以查看隐藏的内容。

注意，使用scroll属性值的时候，默认是x，y两个方向都会有滚动条。

如果想要一个方向显示滚动条，可以使用：【overflow-x、overflow-y】属性。

auto：自动设置，发生溢出，则多余内容显示滚动条查看（和scroll类似）。

案例代码：

<!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>overflow属性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            /* 默认属性值 */
            /* overflow: visible; */
            /* 隐藏溢出的内容 */
            /* overflow: hidden; */
            /* 溢出内容显示滚动条 */
            /* overflow: scroll; */
            /* y轴显示滚动条 */
            /* overflow-y: scroll; */
            /* 自动显示滚动条 */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
        这是overflow属性的测试内容，
    </div>
</body>
</html>

运行效果：

（2）文本显示省略号

【overflow属性】和【text-overflow属性】结合使用，可以实现多余文字超出内容区域的时候显示省略号的效果。

设置省略号效果，有三个步骤：

第一步：隐藏溢出文本内容（overflow: hidden；）。

第二步：设置文本内容一行显示（white-space：nowrap；）。

第三步：设置文本内容显示省略号（text-overflow：ellipsis；）。

<!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>overflow属性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            /* 隐藏溢出内容 */
            overflow: hidden;
            /* 设置文本一行显示 */
            white-space: nowrap;
            /* 设置文本显示省略号 */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        这是overflow属性的测试内容溢出显示省略号。
    </div>
</body>
</html>

运行效果如下所示：

1.4、元素浮动

（1）float浮动属性

要实现元素的浮动，需要采用【float】属性，float具有三个取值：

float属性取值：

left：元素向左浮动。

right：元素向右浮动。

none：元素不浮动。

元素设置浮动属性之后，这个元素就会【脱离】文档流，也就是这个元素不占据原先的空间，后面的元素会填充浮动元素原先的空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动</title>
    <style>
        .box {
            padding: 100px;
            width: 400px;
        }
        .a {
            width: 120px;
            height: 100px;
            float: left;
            background: antiquewhite;
        }
        .b {
            width: 140px;
            height: 100px;
            float: right;
            background: cadetblue;
        }
        .c {
            width: 110px;
            height: 100px;
            float: left;
            background: violet;
        }
        .d {
            width: 200px;
            height: 160px;
            background-color:chocolate
        }
        .e {
            width: 100%;
            height: 30px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="a">盒子1</div>
    <div class="b">盒子2</div>
    <div class="c">盒子3</div>
    <div class="d">
        <div>这是没有浮动的div元素</div>
        <div class="e">没有浮动的div元素</div>
    </div>
</div>
</body>
</html>

这里还有个问题，那就是元素虽然浮动了，不占据空间，在它后面没有浮动元素会占据浮动元素的空间，但是这只是父级元素占据空间，里面的自己元素会被挤压，效果如下所示：

（2）clear清除浮动

很多情况下，我们需要浮动元素后面的其他元素不占据浮动元素的空间，这个时候可以使用【clear】属性清除浮动效果。

使用clear属性的元素，哪个元素不想受到浮动元素的影响，就给这个元素添加浮动清除属性【clear】。

可以简单理解为，添加了【clear】属性的元素，这个元素就会认为在它之前的所有元素都是没有浮动的，这样子这个元素也就不会向前占据元素空间了。

clear：left；属性值，这个表示会忽略前面所有左浮动的元素。

clear：right；属性值，表示会忽略前面所有右浮动的元素。

clear：both；属性值，表示忽略前面所有的浮动元素。

注意：如果添加clear属性的元素，在它前面没有left或者right浮动的元素，那么clear属性就不会生效。

<!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>clear属性</title>
    <style>
        body {
            padding: 100px;
        }
        div>div {
            width: 100px;
            height: 100px;
        }
        .a {
            background-color: antiquewhite;
            float: left;
        }
        .b {
            background-color: cadetblue;
            float: right;
        }
        .c {
            clear: right;
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <div>
        <div class="a">盒子1，left左浮动</div>
        <div class="b">盒子2，right右浮动</div>
        <div class="c">盒子3，没有浮动</div>
    </div>
</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>float浮动元素高度问题</title>
    <style>
        body {
            padding: 100px;
        }
        .parent {
            width: 400px;
            background-color: bisque;
        }
        .a {
            width: 100px;
            height: 100px;
            background-color:chocolate;
            /* 使用浮动 */
            float: left;
        }
        .b {
            width: 100px;
            height: 100px;
            background-color:cadetblue;
            /* 使用浮动 */
            float: right;
        }
    </style>
</head>
<body>
    <div class="parent">
        父级元素内容
        <div class="a">盒子1</div>
        <div class="b">盒子2</div>
    </div>
</body>
</html>

效果如下所示：

要如何解决父级元素的高度问题呢？？？可以有下面两种解决办法：

解决父级元素高度问题：

第一种办法：给父级元素设置【overflow】属性，属性值设置为【auto、hidden】都可以，这个属性设置之后，父元素高度就会自动调整。

第二种办法：在父级元素结束标签之前，添加有个元素，并且给这个元素添加【clear】属性。

第一种办法：添加【overflow：auto；】属性。

.parent {
    width: 400px;
    background-color: bisque;
    /* 添加overflow属性，设置高度自适应 */
    overflow: auto;
}

运行效果如下所示：

第二种办法：在父级元素结束标签之前，添加一个带有【clear】属性的标签。

<div class="parent">
    父级元素内容
    <div class="a">盒子1</div>
    <div class="b">盒子2</div>
    <!--
        这里再父级元素结束之前，添加一个div元素，不占据实际空间
        只是为清除浮动，使得父级元素高度自动适应
    -->
    <div style="clear: both;"></div>
</div>

这种方式也是可以实现父级元素高度自适应的。