1.9 块状元素和内联元素的区别
a、块状元素单独成行吧,不用其他元素一起在一行,内联元素可以多个并排在一行
b、块状元素内可以有子元素,内联元素不能包括子元素
c、块状元素可以设置宽高,内联元素不能设置宽高
d、块状元素和内联元素可以通过display属性进行互相转换:
display:inline块状元素转换为内联元素
display:block内联元素转换为块状元素,然后就可以对其设置高度和宽度
ps:
如果要让块元素换行,需要在换行的2个div之间,加个clear属性为both的div*/-->
https://pc-shop.xiaoe-tech.com/appgp6EDV1w6936/video_details?id=v_5b4584dae8eaf_InGfun1H
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body,div{
margin: 0px;
padding: 0px;
}
#div1{
float: left;
width:300px;
height: 300px;
margin-left: 30px;
margin-top: 30px;
background-color: #FF9000;
}
#div2{
float: left;
margin-left:30px;
margin-top: 30px;
width: 400px;
height: 300px;
background-color: fuchsia;
}
#div3{
margin-left:30px;
margin-top: 30px;
width: 400px;
height: 300px;
background-color: blue;
}
#clear{
clear: both;
}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
<!--IE6的bug:margin-left变成double
1、块状元素
2、float方式在同一行
3、margin-left不为零
-->
<div id="clear"></div><!--/*要块元素换行,需要在2个div之间加个clear属性为both的div*/-->
<div id="div3"></div>
</body>
</html>