文章目录
CSS学习记录05display和浮动
5.1标准文档流
标准文档流,指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。前面内容发生了变化,后面的内容位置也会随着发生变化
简单地说,我们常见的页面经过布局后显示的样式多数为
其中一般常含有导航栏、侧边栏、轮播图、各种各样的信息栏等,但如果一个页面不经任何布局,则是自上而下的标准文档流
5.1.1标准文档流的特点
5.1.1.1微观现象
- 空白折叠现象
- 文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果
如:
<span> 一段文字 </span>
<a href=""> 超级链接 </a>
<input type="text" name="" id="">
<img src="1.jpg" alt="">
- 自动换行,元素内一行内容写满元素的 width 时会自动进行换行
/*设置一个 div 框 把内容放在一个固定的宽度中以便观察*/
div {
width: 200px;
border: 1px solid red;
}
5.1.1.2元素等级
- 在标准流中,大部分元素是区分等级的,习惯将元素划分为几种常见的加载级别:块级元素、行内元素、行内块元素等。
- 块级元素:大部分容器级标签包括 p 标签都是块级元素,比如
<div>
、<h1>
等 - 行内元素:大部分的文本级标签,比如
<span>
、<a>
、<b>
等 - 行内块元素:比如
<img>
、<input>
等 - 各种等级的元素有自己的加载特点
- 行内元素可以被包含在块级元素中,反之不可以
5.1.1.2.1块级元素(独占一行)
- 块级元素可以设置宽高,在浏览器中正常加载
- 块级元素必须独占一行,不能与其他任何标签并排一行
- 块级元素如果不设置宽度,会自动撑满父级的 width 区域;高度不设置,会被内容自动撑开高度
5.1.1.2.2行内元素(不独占一行)
- 行内元素不能正常加载宽度和高度属性,其他的盒模型属性虽然能设置,但是容易出现加载问题
- 行内元素可以与其他的行内或行内块元素并排一行显示
- 行内元素不论是否设置宽高,宽度和高度都只能被内容自动撑开
div {
width: 200px;
border: 1px solid red;
}
span {
width: 200px;
height: 50PX;
background-color: salmon;
border: 2PX solid red;
padding: 10px;
margin: 10px;
}
5.1.1.2.3行内块元素
- 行内块元素可以设置宽度和高度
- 行内块元素可以与其他的行内或行内块并排一行显示
- 行内块元素如果不设置宽高,要么以原始尺寸加载要么被内容自动撑开
- 行内块依旧具有标准流的微观性质,例如空白折叠现象
.imgl {
width: 50px;
height: 50px;
}
<input type="button" value="">
<input type="button" value="普通按钮">
<img src="1.jpg" alt="" class="imgl">
5.2display
解释案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
span {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
在span的style中添加一行display:block;
:
span变成了块级元素
说明:
-
display: inline;
设置为行内元素
-display: block;
设置为块级元素
-display: inline-block;
保持块级元素特性,但是能写在一行
-display: none;
消失
display是一种实现行内元素排列的方式,但更多使用float
5.3浮动
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
引例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="img/1.jpg" height="200" width="200" alt=""/></div>
<div class="layer02"><img src="img/2.jpg" height="210" width="210" alt=""/></div>
<div class="layer03"><img src="img/3.jpg" height="710" width="400" alt=""/></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止
</div>
</div>
</body>
</html>
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01 {
border: 1px #f00 dashed;
}
.layer02 {
border: 1px #00f dashed;
}
.layer03 {
border: 1px #060 dashed;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
}
div为块级元素,独占一行
添加代码:display: inline-block;
给layer01添加代码float: left;
令其左浮动:
都设置左浮动:
浮动的页面显示不稳定
5.4父级边框塌陷问题
当元素浮动起来后,会出现元素超过父级元素的情况
解决方法:
- 增加父级元素的高度(最简单,最low,不建议)
- 增加一个空的div标签,清除浮动:
clear:both;
- 在父级元素中添加
overflow: hidden;
- 父类添加一个伪类 :after (推荐使用)
增加父级元素的高度:
#father{
border:1px #000 solid;
height:800px;
}
增加一个空的div标签,清除浮动:clear:both;
<div class="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}
在父级元素中添加overflow: hidden;
:
#father{
border:1px black solid;
overflow:hidden;
}
父类添加一个伪类 :after :
#father: after {
content: "";
display: block;
clear: both;
}
5.5对比
- display:方向不可以控制
- float:浮动起来会脱离标准文档流,故需要解决父级边框塌陷的问题