CSS——display和浮动
文章目录
display
display 属性规定元素应该生成的框的类型。
display可能的值
none | 此元素不会被显示。 |
---|---|
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 既是行内也是块级元素,同时可以内联在一行(常用)。 |
display测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:200px;
height:200px;
border:2px solid red;
display:inline;/*把块级元素变为行内元素*/
}
span{
width:200px;
height:200px;
border:2px solid red;
display:inline-block;/*把行内元素变为块级元素 inline-block既是行内也是块级元素,同时可以内联在一行 display:none:删除*/
}
</style>
</head>
<body>
<div>div块级元素</div>
<span>span行内元素</span> <!--行内元素和高度宽度没有关系,只和"span行内元素"有关系-->
</body>
</html>
效果图
浮动(float)
float属性指定一个盒子(元素)是否应该浮动。
注意: 绝对定位的元素忽略float属性 ,浮动起来后元素就不在标准文档流里面了!
left | 元素向左浮动。 |
---|---|
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="text">
<div class="layer01"> <img src="images/1.jpg" alt=""> </div>
<div class="layer02"> <img src="images/4.jpg" alt=""> </div>
<div class="layer03"> <img src="images/11-20.jpg" alt=""> </div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动 直到它的外边缘碰到
</div>
</div>
</body>
</html>
div{
margin:10px;
padding:5px;
}
.text{
border:1px solid #000;
}
.layer01{
border:1px dashed #f00;
display:inline-block;
float:right;
}
.layer02{
border:1px dashed #f00;
display:inline-block;
float:right;
}
.layer03{
border:1px dashed #f00;
display:inline-block;
float:left;
/*浮动起来后就不在标准文档流里面了*/
}
.layer04{
border:1px dashed #666;
font-size:12px;
line-height:23px;
display:inline-block;
float-left
}
效果图
解决浮动中父级边框塌陷的问题
clear属性:clear 属性规定元素的哪一侧不允许其他浮动元素。
left | 在左侧不允许浮动元素。 |
---|---|
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。(常用) |
none | 默认值。允许浮动元素出现在两侧。 |
.layer03{
border:1px dashed #f00;
display:inline-block;
float:left;
clear:both; /*当两边都不允许存在浮动元素时,该元素会自动往下移*/
方法一:增加父级边框的高度**
.father{
border:1px solid #000;
height:800px;
方法二:增加一个空的div标签,清除浮动
<div class="text"></div>
.text{
clear:both;
margin:0;
padding:0;
}
方法三:在父级元素中使用overflow-hidden(简单)
overflow 属性规定当内容溢出元素框时发生的事情。
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
---|---|
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
.father{
border:1px solid #000;
overflow:hidden;/*父级边框最后的高度由所有的元素决定,因此不会出现内容被剪切的情况*/
补充:overflow:scroll;测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#text{
width:200px;
height:400px;
overflow:scroll;/*不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。*/
}
</style>
</head>
<body>
<div id="text">
<img src="images/1.jpg" alt="">
<p>
人生是一场醒悟,不要昨天,不要明天,只要今天。 许多事,要靠自己去做,才能深深体会个中滋味; 许多事,要靠自己去扛,才会渐渐明白其中的分量; 许多事,要靠自己去想,才越来越清晰,越来越明了。
</p>
</div>
</body>
</html>
效果图
方法四:父类添加一个伪类:after(推荐使用)
直接在css样式里面加上
.father:after{
content:'';
display:block;
clear:both;
}
小结
- 1.设置父元素的高度, 简单,元素假设有了固定的高度,就会被限制
- 2.浮动元素后面增加空div, 简单,代码中尽量避免空div
- 3.overflow ,简单,下拉的一些场景(或不能被切除的场景)避免使用
- 4.父类添加一个伪类:after(推荐,没有副作用)
display和float的对比
相同:display和float相同的作用:可以让元素排在一列
不同:display不可控制方向,但不会出现父级边框塌陷的问题
float可控制方向,但浮动起来会脱离标准文档流,所以要解决父级文档塌陷问题