#浮动-------------------------------------------------
简述块元素和行内元素的概念及特性
了解浮动在网页中的应用,left和right的区别?
使用clear属性清除浮动时,属性值left、right和both有什么区别?
解决父级边框塌陷的4种方法分别是什么,各自的使用场景是什么?
上课记录
课件
1布局
2标准文档流
3display
转变
4浮动float
5清除浮动
6解决塌陷
7溢出处理overflow
8inline-block和float的区别
总结
代码
1display属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性的用法</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
/*display: block;*/
/*display: inline;*/
display: inline-block;
/*display: none;*/
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
/*display: block;*/
/*display: inline;*/
display: inline-block;
}
</style>
</head>
<body>
<div>我是div块元素</div>
<span>我是span行内元素</span>
</body>
</html>
/*display: block;*/
/*display: inline;*/
display: inline-block;
/*display: none;*/
2浮动示例原始代码
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;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。
</div>
</div>
</body>
</html>
3三个图片左浮动float:L
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
.layer01 {
border:1px #F00 dashed;
float:left;
}
.layer02 {
border:1px #00F dashed;
float:left;
}
.layer03 {
border:1px #060 dashed;
float:left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。</div>
</div>
</body>
</html>
4设置图片右浮动F:R
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
.layer01 {
border:1px #F00 dashed;
float:right;
}
.layer02 {
border:1px #00F dashed;
float:right;
}
.layer03 {
border:1px #060 dashed;
float:left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
float: right;
width: 200px;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。</div>
</div>
</body>
</html>
5清除左右浮动clear:both
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
.layer01 {
border:1px #F00 dashed;
/*float:right;*/
float:left;
}
.layer02 {
border:1px #00F dashed;
float:right;
}
.layer03 {
border:1px #060 dashed;
float:left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
width: 200px;
float: right;
/*clear:left;*/
/*clear: right;*/
clear: both;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。
</div>
</div>
</body>
</html>
6空div防止父级边框塌陷
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
.layer01 {
border:1px #F00 dashed;
float:left;
}
.layer02 {
border:1px #00F dashed;
float:right;
}
.layer03 {
border:1px #060 dashed;
float:left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
width: 200px;
float: right;
}
.clear{
clear: both;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。
</div>
<!--方法一:空div防止父级边框塌陷-->
<div class="clear"></div>
</div>
</body>
</html>
7父级设置高度防止边框塌陷
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
/*方法二:在父级里设置高度来防止边框塌陷*/
height: 400px;
}
.layer01 {
border:1px #F00 dashed;
float:left;
}
.layer02 {
border:1px #00F dashed;
float:right;
}
.layer03 {
border:1px #060 dashed;
float:left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
width: 200px;
float:left;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。</div>
</div>
</body>
</html>
8overflow属性防止父级边框塌陷
overflow:hidden
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
overflow: hidden;
}
.layer01 {
border:1px #F00 dashed;
float:left;
}
.layer02 {
border:1px #00F dashed;
float:right;
}
.layer03 {
border:1px #060 dashed;
float:left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
width: 200px;
float:left;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。
</div>
</div>
</body>
</html>
9overflow属性
body {
font-size:12px;
line-height:22px;
}
#content {
width:200px;
height:150px;
border:1px #000 solid;
/*overflow:visible;*/
/*overflow:hidden;*/
/*overflow:scroll;*/
overflow:auto;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>overflow属性</title>
<link href="css/overflow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content"><img src="image/wine.jpg" alt="酒" />
<p>在CSS中使用overflow属性处理盒子中的内容溢出,它规定当内容溢出盒子时发生的事情,例如内容不会被修剪而呈现在盒子之外,或者内容会被修剪,修剪内容隐藏等。</p>
</div>
</body>
</html>
/*overflow:visible;*/
/*overflow:hidden;*/
/*overflow:scroll;*/
overflow:auto;
10父级加after伪类防止边框塌陷
::after
div {
margin:10px;
padding:5px;
}
#father {
border:1px #000 solid;
}
.layer01 {
border:1px #F00 dashed;
float:left;
}
.layer02 {
border:1px #00F dashed;
float:right;
}
.layer03 {
border:1px #060 dashed;
float:left;
}
.layer04 {
border:1px #666 dashed;
font-size:12px;
line-height:23px;
width: 200px;
float:left;
}
/*方法四:after伪类清除浮动*/
.clear:after{
content: ''; /*在clear后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>浮动</title>
<link href="css/float.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father" class="clear">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片,分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用,根据需要图片所在的div分别向左浮动、向右浮动,或者不浮动。</div>
</div>
</body>
</html>