【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

有目标就不怕路远。年轻人.无论你现在身在何方.重要的是你将要向何处去。只有明确的目标才能助你成功。没有目标的航船.任何方向的风对他来说都是逆风。因此,再遥远的旅程,只要有目标.就不怕路远。没有目标,哪来的劲头?一车尔尼雷夫斯基

导读:本篇文章讲解 【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

目录

一、CSS布局

1.1、显示元素

(1)display属性

(2)visibility属性

1.2、行内元素和块内元素

(1)元素的嵌套规则

1.3、元素溢出问题

(1)overflow属性

(2)文本显示省略号

1.4、元素浮动

(1)float浮动属性

(2)clear清除浮动

(3)浮动后父级元素高度自适应问题


一、CSS布局

1.1、显示元素

(1)display属性

CSS可以通过【display】属性来设置HTML元素是否显示,以及显示的方式,是以行内元素显示,还是以块内元素显示,还是以行内块元素显示。

display属性具有如下几个属性值:

  • none:不显示元素。
  • block:元素显示,并且按照【块级】元素显示。
  • inline:元素显示,并且按照【行内】元素显示。
  • inline-block:元素显示,并且按照【行内块】元素显示。

通过案例代码来看下display属性的使用。

<!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设置为行内元素,行内块元素,块级元素,显示的效果分别如下所示:

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

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

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

(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>

运行效果:

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

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>

上面代码运行效果如下:

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

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>

运行效果:

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

(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>

运行效果如下所示:

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

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>

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

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

(2)clear清除浮动

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

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

  • 使用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>

运行效果:

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

(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>

效果如下所示:

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

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

解决父级元素高度问题:

  • 第一种办法:给父级元素设置【overflow】属性,属性值设置为【auto、hidden】都可以,这个属性设置之后,父元素高度就会自动调整。
  • 第二种办法:在父级元素结束标签之前,添加有个元素,并且给这个元素添加【clear】属性。
  • 第一种办法:添加【overflow:auto;】属性。
.parent {
    width: 400px;
    background-color: bisque;
    /* 添加overflow属性,设置高度自适应 */
    overflow: auto;
}

运行效果如下所示:

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

  • 第二种办法:在父级元素结束标签之前,添加一个带有【clear】属性的标签。
<div class="parent">
    父级元素内容
    <div class="a">盒子1</div>
    <div class="b">盒子2</div>
    <!--
        这里再父级元素结束之前,添加一个div元素,不占据实际空间
        只是为清除浮动,使得父级元素高度自动适应
    -->
    <div style="clear: both;"></div>
</div>

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

【CSS笔记】CSS布局相关属性(显示元素、文本溢出、元素浮动)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/134681.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!