常用标签
盒子模型
——————————————————
内边距：padding - top 上内边距
- right 右内边距
- left 左内边距
——————————————————
外边距：margin - top 上内边距
- right 右内边距
- left 左内边距
——————————————————margin、padding 的缩写： 4种缩写方式
margin : 上下左右；
margin : 上下 左右；
margin : 上 左右 下；
margin : 上 右 下 左； (顺时针顺序)注意事项：如果要给一个div添加外边距（margin），推荐先找到你需要修改的
div的父级标签，然后给需要修改的div的父级标签加上一个内边距（padding) 这
样不容易出错。★浮动 （float）
float清除 （clear）
课堂演示代码：
①.
<style type="text/css">
*{
marjin:0; /*清空浏览器默认的样式*/
padding:0;
}
#wai{
background-color:#0F6;
height:500px;
width:600px;
/*/* margin-top:40px; 上外边距
margin-left:40px; 左外边距
padding-top:40px; 上内边距
padding-left:40px; 左内边距*/
/*padding:30px;*/
/*margin:30px;*/
/*margin : 上下 左右；*/
margin: 20px 40px;
/*margin : 上 左右 下；*/
margin:10px 40px 60px;
/* margin : 上 右 下 左；*/
margin:10px 20px 30px 40px;
}
#nei{
background-color:#F06;
height:500px;
width:600px;
}
</style>
</head>
<body>
<div id="wai"> <!--外侧DIV-->
<div id="nei"> </div> <!--内侧DIV-->
</div>
②.
<style type="text/css">
*{
marjin:0; /*清空浏览器默认的样式*/
padding:0;
}
body{
background-color:#069;
width:1000px;
height:1000px;
}
.E{
width:100px;
height:100px;
margin:10px;
}
#xiaoa{
background-color:#903;
}
#xiaob{
background-color:#3CF;
}
#xiaoc{
background-color:#F09;
}
#xiaod{
background-color:#9F0;
}
</style>
</head>
<body>
<div class="E" id="xiaoa"></div>
<div class="E" id="xiaob"></div>
<div class="E" id="xiaoc"></div>
<div class="E" id="xiaod"></div>
</body>
