目录
一、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设置为行内元素,行内块元素,块级元素,显示的效果分别如下所示:
也可以设置为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>
这种方式也是可以实现父级元素高度自适应的。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/134681.html