目录
1.display和浮动
1.1 标准文档流
块级元素:独占一行 h1~h6 、p、div、 列表…
行内元素:不独占一行 span、a、img、strong
注: 行内元素可以包含在块级元素中,反之则不可以
1.2 display
display的值:
block 块元素 独占一行,只有设置为块元素,高宽才有效,否则行内元素是由内容撑开的。
inline 行内元素 一行可以写很多
inline-block 保持块元素的特性可以放在一行
none 消失,空间都没有了,但在源码里面存在
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
block:块元素
none:消失
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid paleturquoise;
/*inline:行内元素*/
display: inline;
}
span{
width: 100px;
height: 100px;
border: 1px solid paleturquoise;
/* inline-block既是行内元素也是块元素(保持块元素的特性,但是可以写在一行)*/
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
1.3 浮动
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px black solid;
}
.layout01{
border: 1px paleturquoise solid;
display: inline-block;
}
.layout02{
border: 1px lightcoral dashed;
display: inline-block;
}
.layout03{
border: 1px orchid dashed;
display: inline-block;
}
.layout04{
border: 1px greenyellow dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
}
</style>
</head>
<body>
<div id="father">
<div class="layout01"><img src="../images/1.PNG" alt=""></div>
<div class="layout02"><img src="../images/2.PNG" alt=""></div>
<div class="layout03"><img src="../images/3.PNG" alt=""></div>
<div class="layout04">
浮动的盒子可以向左也可以向右,直到它的外边缘碰到边框
</div>
</div>
</body>
</html>
我们可以从结果看到,这三个图片都是再div块里面的。因为设置三个图片的display为inline-block,所以他们排成一排。还可以看出父级div是由最大的图片(元素块)撑起来的。
此时,我们让图片一进行浮动。
.layout01{
border: 1px paleturquoise solid;
display: inline-block;
float: left;
}
我们可以看到图片一浮起来了,div块的边框也变了。此时,可以这样想,浮动层和底层有两层。浮动层的元素是整个漂浮在上面。,浮动层的元素也会在底层占位置,所以还是按照行内块排列。
所以,display是一种实现元素排列的方式(走的是标准文档流,从上至下,从左至右),但我们很多时候都是使用浮动。
1.4 清除浮动
继续上面例子,让图片文字都浮动起来。
.layout01{
border: 1px paleturquoise solid;
display: inline-block;
float: left;
}
.layout02{
border: 1px lightcoral dashed;
display: inline-block;
float: left;
}
.layout03{
border: 1px orchid dashed;
display: inline-block;
float: left;
}
.layout04{
border: 1px greenyellow dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
}
父级div里没有元素了,所以它被压得很小,但其实是有元素的,只不过它们浮在div上面。
我们来清除浮动。方法:claer :both(该元素两边都不允许浮动)
.layout04{
border: 1px greenyellow dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
可以看到文字,因为不能两侧有浮动,所以它在div现面重新按照标准文档流排列。
2.父级边框塌陷问题
回顾:
clear:right 右侧不允许有浮动clear:left 左侧不允许有浮动
clear:both 两侧不允许有浮动
clear:none
解决塌陷问题方案:
方案一:增加父级元素的高度; 简单,但是有了固定的高度会成为限制,假设新增元素超过块并且浮动,还会造成塌陷。【不推荐使用】
#father{
border: 1px black solid;
height: 800px;
}
方案二:增加一个空的div标签,清除浮动,新增div放在会塌陷的父级边框内部的最下面。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px black solid;
}
.layout01{
border: 1px paleturquoise solid;
display: inline-block;
float: left;
}
.layout02{
border: 1px lightcoral dashed;
display: inline-block;
float: left;
}
.layout03{
border: 1px orchid dashed;
display: inline-block;
float: left;
}
.layout04{
border: 1px greenyellow dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
}
.clear{
clear: both;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="father">
<div class="layout01"><img src="../images/1.PNG" alt=""></div>
<div class="layout02"><img src="../images/2.PNG" alt=""></div>
<div class="layout03"><img src="../images/3.PNG" alt=""></div>
<div class="layout04">
浮动的盒子可以向左也可以向右,直到它的外边缘碰到边框
</div>
<div class="clear"></div>
</div>
</body>
</html>
3.overflow
方案三:在父级元素中增加一个overflow属性
overflow 文字/控件属性超过容器属性。就会用overflow设置。
#father{
border: 1px black solid;
overflow: hidden;
}
方案四:父类添加一个伪类:after
/*在father后面执行一部分操作,相当于过滤*/
#father:after{
/*添加空内容*/
content: '';
/*将空文本变成一个正常的元素块*/
display: block;
clear: both;
}
这个操作和第二种方式增加个空的div清除浮动操作是等同的。这种方案避免了在原本html基础上增加空的div。不改变原有代码基础上,增加一些东西(开闭原则)。
小结:
1)浮动元素后面增加空div -> 简单;代码中尽量避免空div
2)设置父元素高度 -> 简单;元素假设有了固定的高度,就会被限制
3)overflow -> 简单;下拉的一些场景避免使用
4)在父类中添加伪类(推荐使用) -> 写法稍微复杂,但是没有副作用
4.对比display和float
两者都可以进行相关元素的排版。
display:走标准文档流,方向不可控制。但是没有父级框塌陷的问题。
浮动:浮动起来脱离了标准文档流,可以左右任意浮动,但出现父级塌陷问题。