夜光序言：
你这样吹过
清凉，柔和
再吹过来的
我知道不是你了
正文：
核心：基础部分已经讲述过，嘿嘿
Step1:div+css布局
【div+span+盒子模型】
1:div+span
两者区别：div:块级元素 span:内联元素
2:盒子模型
3：布局相关的属性
4：兼容问题
5：实例教程 【项目开发】
<body>
<div></div>
<span></span>
</body>
看看下麦这句话：
<head>
<meta charset="UTF-8">
<title>div+span+盒子模型</title>
<style>
div.a{
color: bisque;
width: 100px;
}
div.a span{
color: aqua;
}
div.a div{
float: left;
}
</style>
</head>
<body>
<div class="a">夜光的创客学院
<p>我是一个<span>被span包含的段落</span></p>
<div>
<p>我是在div里面的div</p>
</div>
</div>
<span>创客学院</span>
</body>
在ws 和dw 中制作还不一样：
【下面是dw中代码加运行效果】
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
background:#08BCEC;
color: chartreuse;
}
span{
background:#E9C021;
color: chartreuse;
}
</style>
</head>
<body>
<div>创客学院</div>
<span>创客学院</span>
</body>
</html>
通过上面这张图可以看出来div,span的区别
盒子模型【重要性不言而喻】
1：盒子外边距：margin
2：盒子内边距：padding
3：盒子边框宽度：border
4：盒子宽度：width
5：盒子高度：height
<style type="text/css">
div{
background:#08BCEC;
color: chartreuse;
}
span{
background:#E9C021;
color: chartreuse;
}
body{
margin-top: 30px;
margin-left: 60px;
}
</style>
body{
margin-top: 30px;
margin-left: 60px; //这里就用到盒子模型
span{
background:#E9C021;
color: chartreuse;
}
body{
margin-top: 30px;
margin-left: 60px;
border-style: solid;
border-width: 20px;
border-color: black;
}
</style>
padding: 60px; //好好理解这个是什么意思，帅气
body{
margin-top: 30px;
margin-left: 60px;
border-style: solid;
border-width: 10px;
border-color: black;
padding: 60px; //限制内部元素与外边框距离
}