margin用于设置对象标签之间距离间隔，比如2个上下排列的DIV盒子，我们就可以使用margin样式实现上下2个盒子间距。Margin呈现是位于对象边框外侧，紧贴于边框，marign与padding位置却相反css padding却是紧贴边框位于边框内侧。
目录
margin语法与应用结构
css margin缩写简写
常用的margin样式
css margin用法案例
css margin总结
一、margin基础语法与结构 - TOP
DIV CSS外边距指CSS属性单词margin，margin是设置对象四边的外延边距，没有背景颜色也无颜色。
1、margin语法
Margin:10px
Margin的值是数字+html单位，同时也可以为auto（自动、自适应）
2、应用结构
Div{margin:10px}
设置div对象四边间距为10px
3、Margin说明
margin是设置对象外边距外延边距离。
margin的值有三种情况，可以为正整数和负整数并加单位如PX像素（margin-left:20px）；可以为auto自动属性(margin-left:auto 自动)；可以为百分比（%）值（margin-left:3%）。
Margin延伸（单独设置四边间距属性单词）
margin-left 对象左边外延边距 （margin-left:5px左边外延距离5px）
margin-right 对象右边外延边距 （margin-right:5px右边外延距离5px）
margin-top 对象上边外延边距 （margin-top:5px上边外延距离5px）
margin-bottom 对象下边外延边距 （margin-bottom:5px下边外延距离5px）
常见margin使用场景
4、margin实际应用地方
两个布局之间距离设置。
如上图中“CSS手册”和“DIV CSS研教室”黄颜色的背景之间空隙（背景土红）。
二、css margin缩写简写 - TOP
margin属性CSS样式，如遇到上下、左右、上下左右等情况我们可以缩写简写优化。
你可能需要了解：CSS优化-CSS压缩：http://www.divcss5.com/jiqiao/j97.shtml
你可能需要了解：HTML优化-HTML代码优化压缩：http://www.divcss5.com/jiqiao/j326.shtml
1、只有上下情况缩写
原始：margin-top:5pxmargin-bottom:6px
缩写简写为：margin:5px 0 6px 0或margin:5px auto 6px auto
2、只有左右情况缩写
原始：margin-left:5pxmargin-right:6px
缩写简写为：margin:0 6px 0 5px或margin:auto 6px auto 5px
3、只有三边情况缩写
原始：margin-top:5pxmargin-bottom:6pxmargin-left:4px
缩写：margin:5px 0 6px 4px或margin:5px auto 6px 4px
4、四边相同值缩写
原始：margin-top:5pxmargin-bottom:5pxmargin-left:5pxmargin-right:5px
缩写：margin:5px
5、四边不同值缩写
原始：margin-top:5pxmargin-bottom:6pxmargin-left:7pxmargin-right:8px
缩写：margin:5px 8px 6px 7px
6、四边其中上下值和左右值各相同缩写
上下相同、左右相同原始：margin-top:5pxmargin-bottom:5pxmargin-left:7pxmargin-right:7px
缩写：margin:5px 7px
Margin简写分析图：
css div margin样式简写语法应用分析图
三、常用的margin样式 - TOP
1、用margin设置对象盒子间距
我们常用margin设置2个盒子之间距离，无论上下左右的距离我们均可以利用margin实现间隔。
实际可用margin地方示图
2、利用margin实现布局居中，基础单词：
marign:0 auto
即可实现对象居中，但需要一个条件，那就是该对象上级一定要设置text-align:center内容居中属性样式。有的浏览器body标签不设置text-align:center内容居中样式，其下级包含对象设置了margin:0 auto也会让其布局居中，但为了兼容各大浏览器建议对body设置一个text-align:center属性样式，这里divcss5提供一个css初始化模板为DIV CSS布局时候无需重复设置css text-align:center等初始化样式属性。
四、css margin普通案例 - TOP
DIVCSS5设置2个盒子，为了体现margin作用，我们对其2盒子设置css border边框、一定css宽度和css高度。
1、margin用法css代码
.divcss5-top,.divcss5-bottom{width:300pxheight:100pxborder:1px solid #F00}
.divcss5-bottom{ margin-top:10px}
2、html代码片段
<div class="divcss5-top">上对象</div>
<div class="divcss5-bottom">下对象，我们设置了margin-top为10px间距</div>
3、mairgin应用案例截图
margin实例实践案例效果图《http://www.51rgb.com/nbbs/forum-82-1.html》
从上案例我们分析出margin是设置对象（比如div盒子、span盒子等）之间间距，并体现出margin是存在与对象盒子边框外侧。
五、css margin总结 - TOP
Margin样式是设置对象与对象之间间距，单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性，margin是设置盒子对象之间间距，一般设置时候注意margin简写优化。多实践并观察案例理解了margin作用即可很快上手使用margin。
margin缺点：
在使用CSS margin的时候容易造成CSS HACK。IE6解释此属性的时候容易造成双倍距离。
您可能需要了解CSS兼容浏览器知识。
HTML <div>标签
1、定义和用法
<div>可定义文档中的分区或节（division/section）。
<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
2、用法
<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div>固有的唯一格式表现。可以通过 <div>的 class 或 id 应用额外的样式。
不必为每一个 <div>都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div>元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
3、实例
文档中的一个部分会显示为绿色：
<div style="color:#00FF00"><h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
4、浏览器支持
所有主流浏览器都支持 <div>标签。
5、HTML 与 XHTML 之间的差异
在 HTML 4.01 中，div 元素的 "align" 属性不被赞成使用。
在 XHTML 1.0 Strict DTD 中，div 元素的 "align" 属性不被支持。
6、提示和注释：
注释：<div>是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
提示：请使用 <div>元素来组合块级元素，这样就可以使用样式对它们进行格式化。
7、案例分析
<body><h1>NEWS WEBSITE</h1>
<p>some text. some text. some text...</p>
...
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
...
</div>
<div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
...
</div>
...
</body>
案例释义：正如您看到的，上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div
为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用 class="news" 对这些 div 进行标识，这么做不仅为
div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。
8、可选的属性
9、标准属性
10、事件属性
什么时候清除浮动,什么时候使用浮动,那首先就要明白浮动的作用:
CSS基础必学列表
CSS width宽度
CSS height高度
CSS border边框
CSS background背景
CSS sprites背景拼合
CSS float浮动
CSS margin外边距
CSS padding内边距
CSS color字体颜色
CSS font-size字体大小
CSS font-family字体
CSS font-weight字体加粗
CSS display显示与隐藏
CSS overflow隐藏与滚动条
CSS position定位
CSS text-align内容水平位置
CSS text-indent缩进
CSS text-decoration下划线
CSS clear清除浮动
CSS cursor鼠标手势光标
CSS font文本
CSS font-style文本斜体
CSS font-variant缩小大写字母
CSS id CSS class
left right top bottom
css letter-spacing字间距
CSS line-height行高
css min-width最小宽度
css max-width最大宽度
CSS min-height最小高度
css max-height最大高度
CSS text-transform英文大小写
css text-overflow省略号
CSS white-space不换行
css z-index重叠顺序
CSS 前花括号星号*
CSS 缩写
div与span区别及用法
CSS是什么
DIV+CSS是什么
CSS 注释
CSS 指针
CSS 文本排版
div css float浮动用法(left right)
div+css中float认识及css float用法，DIV CSS float浮动知识用法与float浮动教程篇
Css样式的float浮动属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动居左靠左（float:left）和浮动居右靠右(float:right)。
float是什么意思？
float是浮动，翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。
float的作用
通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。
float浮动教程目录
float语法
float应用与用法
float浮动案例
css浮动其他应用
css浮动总结
一、float语法 - TOP
Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
float语法：
float : none | left |right
参数值：
none : 对象不浮动
left : 对象浮在左边
right : 对象浮在右边
Float浮动结构分析图
接下来我们来通过一个div+css实例讲解float使用技巧。
二、float应用与用法 - TOP
Float浮动用于设置对象靠左与靠右浮动样式，可以实现我们所需要的让DIV、SPAN等标签居左居右浮动。
简单使用语法
div{float:left} /* css注释：设置div对象浮动靠左（left） */ div{float:right} /* css注释：设置div对象浮动靠右(right) */三、css float浮动案例 - TOP
我们设置一个盒子里，一个靠右、一个靠左浮动2个盒子，为了直观看到css浮动布局效果，我们对两个盒子设置一定宽度、高度和边框。
1、主要的html代码片段：
<div class="divcss5"> <div class="divcss5_left">布局靠左浮动</div> <div class="divcss5_right">布局靠右浮动</div> <div class="clear"></div><!-- html注释：清除float产生浮动 --> </div>2、css代码片段：
.divcss5{ width:400pxpadding:10pxborder:1px solid #F00} .divcss5_left{ float:leftwidth:150pxborder:1px solid #00Fheight:50px} .divcss5_right{ float:rightwidth:150pxborder:1px solid #00Fheight:50px} .clear{ clear:both}3、效果截图
.这只是一个案例,使用与否,视情况而定
