块级元素block:独占一行、可设宽高;div、p、h
内联元素inline:按行排列、宽高由内容所决定;span、a
内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立
display属性:
block:块级元素
inline:内联元素
inline-block:行内块元素
none:不显示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性的用法</title>
<style>
div{
width: 100px;
height: 100px;
border: 3px solid red;
/*display: block;*/
/*display: inline;*/
display: inline-block;
/*display: none;*/
}
span{
width: 100px;
height: 100px;
border: 3px solid red;
/*display: block;*/
/*display: inline;*/
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span内联元素</span>
</body>
</html>
float属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.son{
width: 100px;
height: 50px;
border: 3px solid red;
margin: 5px;
padding: 5px;
background-color: yellow;
}
#dad{
width: 500px;
border: 3px solid black;
}
#d1{
float: left;
}
#d2{
float: right;
}
#d3{
height: 100px;
width:200px;
background-color: green;
}
</style>
</head>
<body>
<div id="dad">
<div class="son" id="d1"></div>
<div class="son" id="d2"></div>
<div class="son" id="d3"></div>
</div>
</body>
</html>
clear
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.son{
width: 100px;
height: 50px;
border: 3px solid red;
margin: 5px;
padding: 5px;
background-color: yellow;
}
#dad{
width: 500px;
border: 3px solid black;
}
#d1{
float: left;
}
#d2{
float: right;
clear: both;
}
#d3{
height: 100px;
width:200px;
background-color: green;
float:left;
clear:left;
}
</style>
</head>
<body>
<div id="dad">
<div class="son" id="d1"></div>
<div class="son" id="d2"></div>
<div class="son" id="d3"></div>
</div>
</body>
</html>
边框塌陷
设置高度
Overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
.son{
width: 100px;
height: 50px;
border: 3px solid red;
margin: 5px;
padding: 5px;
background-color: yellow;
}
#dad{
width: 500px;
border: 3px solid black;
/*内容会被修剪,并且其余内容是不可见的*/
/*overflow: hidden;*/
overflow:auto;
}
#d1{
float: left;
}
#d2{
float: right;
}
#d3{
height: 100px;
width:200px;
background-color: green;
float:left;
}
</style>
</head>
<body>
<div id="dad">
<div class="son" id="d1"></div>
<div class="son" id="d2"></div>
<div class="son" id="d3"></div>
</div>
</body>
</html>