常用标签
发布于：2014-06-06 18:43
盒子模型
——————————————————
内边距：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>
0
今日新帖
0
昨日新帖
9
帖子总数
HTML5 CSS3 JS 各种JS框架集干货合集～
Dreamweaver 2015-06-04 10:35
浓缩的精华！从零开始带你认识最新的图片格式WEBP
Dreamweaver 2015-11-18 08:56
经验之谈！前端工程师的简历到底要怎么写？
Dreamweaver 2015-11-20 17:39
进阶篇——什么时候应该避免写代码注释？
Dreamweaver 2015-11-30 15:25
不是我开玩笑，2018 年你还需要学习 JavaScript
Dreamweaver 2017-12-27 19:42
【干货】一名专业的前端开发工程师都能拿多少钱？
Dreamweaver 2018-09-07 14:59
暂无评论
回复:常用标签