学习了：
1.内容区、内边距、外边距、边框等相关内容
2.只有块元素div可以设置长宽，行内元素span不可设置
代码：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>/</title>
<style type="text/css">
/* div{
display: inline-block;
padding: 20px;
margin: 40px;
border: 2px solid red;
background-color: lightblue;
}*/
div,span{
width: 100px;
height: 50px;
}
div{border: 2px dashed red;}
span{border: 1px solid blue;} /*行内元素不可设置长宽*/
#div1{
width: 100px;
height: 40px;
border: 1px solid rebeccapurple;
}
#div2{
width: 100px;
height: 80px;
border: 5px solid green;
}
#span1
{
width: 100px;
height: 40px;
border: 1px solid lightcoral;
}
#span2
{
width: 100px;
height: 80px;
border: 1px solid lightblue;
}
</style>
</head>
<body>
<div id="div1">天天开心</div>
<div id="div2">快快乐乐</div>
<span id="span1">满分</span> <!--宽度无法生效-->
<span id="span2">150</span>
<div></div>
</body>
</html>
3.margin的布局样式，有父亲、儿子、兄弟组成
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>/</title>
<style type="text/css">
/*div{
display:inline-block;
padding-top: 20px;
padding-right: 40px;
padding-left: 80px;
padding-bottom: 60px;
padding: 40px 80px;
margin-top: 20px;
margin-right: 40px;
margin-left: 80px;
margin-bottom: 60px;
border: 2px solid red;
background-color: lightblue;
}*/
#father
{
display: inline-block;
border: 1px solid lightcoral;
}
#son
{
display: inline-block;
padding: 40px 80px;
margin-top: 20px;
margin-right: 40px;
margin-left: 80px;
margin-bottom: 60px;
border: 2px solid red;
background-color: lightblue;
}
.brother
{
height: 50px;
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div id="father">
<div class="brother"></div>
<div id="son">天天开心</div>
<div class="brother"></div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
