您的位置：首页 > Web前端 > CSS

css布局之div + span 以及盒模型

2016-08-28 22:19 295 查看
本篇主要介绍div + span 以及盒模型的使用。

span：内联元素----包裹其内容。     div是块级元素----占用整行。 

盒模型：相当于容器。

<!doctype html>
<html>
<head>
<title>Div+Css布局(div+span以及盒模型)</title>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0px;
padding:0px;
}
/*
div{
background-color:green;
color:#fff;
}
span{
background-color:green;
color:#fff;
}

div{
width:500px;
height:500px;
padding:0px;
margin:0px;
border:solid 10px;
}*/
.div{
width:600px;
height:600px;
margin:0 auto;
background-color:green;
}
.diva{
float:left;
width:240px;
height:240px;
background-color:red;
}
.divb{
float:left;
width:240px;
height:240px;
background-color:yellow;
}
.div div{
margin:10px;
padding:10px;
border:solid 10px;
}
</style>
</head>
<body>
<!--div>今天天气真好DIV</div>
<div>今天天气真好DIV</div>
<span>今天天气真好SPAN</span>
<span>今天天气真好SPAN</span-->
<div class="div">
<div class="diva"></div>
<div class="divb"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css div span 盒模型
相关文章推荐
新的分享
章节导航