文章目录
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：浮动起来会脱离标准文档流，故需要解决父级边框塌陷的问题
1177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
