CSS样式 - 盒子
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
概述：
1.内边距、边框和外边距都是可选的，默认值是零；
2.margin 和 padding 设置为零来覆盖所有浏览器样式，解决浏览器兼容性 ;
* { margin: 0; padding: 0; }
3. 在 CSS 中，width 和 height 指的是内容区域的宽度和高度 ;
4. 增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸 ;
.box {
width: 70px;
margin: 10px;
padding: 5px 5px;
}
5. padding : 内边距，也有称为填充
6. border : 边框 ;
7. margin : 外边距，也有称为空白或空白边
CSS margin 属性
1.CSS margin
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”;
2.margin 属性接受任何长度单位、百分数值甚至负值。
<div></div> 最常用标签，div涉及样式，不添加样式没有效果
其实margin有四个值 (auto是自适应) padding格式也一样
margin: 上 右 下 左
margin: 垂直 水平
margin: 全部
margin可以为负值，而padding不可以
再次强调，在样式里的注释是/**/
<style>
.tch{width:300px;height:100px;（内容尺寸）backgroud:#fc0;
margin:100px auto;
padding:30px;
border:1px solid(实线) red;
}
</style>
<body>
<!--div ： 层，盒子，容器-->
<div class="tch"></div>
</body>
CSS padding 属性
1.CSS padding 属性定义元素的内边距（边框和内容区之间）;
2.padding 属性接受长度值或百分比值，但不允许使用负值。
单边内边距属性（分别设置上、右、下、左内边距）<例：h,p,div标签>
3.css边框概括
三方面： 宽度、样式，以及颜色
border
border-style
border-width
border-color
border-bottom
border-left
border-right
border-top
border: 1px solid red;
边框会有很多属性
border-width:2px;
border-color:red;
border-style:solid;
企业上也直接写全简写形式
border:1px solid red;
点状边框
.dotted{width:300px;height:100px; dotted red;}
<h2>点状边框</h2>
<div class="dotted"></div>
定义虚线
.dashed{width:300px;height:100px;bored:10px; dashed gray;}
<h2>定义虚线 dashed</h2>
<div class="dashed"></div>
定义实线
.solid{width:300px;height:100px;}
<h2>定义实线</h2>
4.外边距的合并
当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
很重要的内容，面试题喜欢出
两个盒子的垂直外边距相遇时，边距取较大者
margin为负值可以做展开隐藏部分