每一个块级元素都可以当作一个盒子，里面的content内容是块级元素的内容，这里的内容可以是文字，也可以是图片，也可以是另一个标签元素。比如，<p>这是一段话</p> 在网页中显示的内容就为：这是一段话；padding就是content与border之间的距离。
如图所示，当鼠标放在百度一下的时候，我们看到了一个盒子，padding就是百度一下和图片到边框的距离。margin就是百度一下这个盒子和天猫商城这个盒子之间的距离等等。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提示：背景应用于由内容和内边距、边框组成的区域。背景=内容+内边距+边框
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
在实际的开发中，我们会设置属性box-size:border-box.这样，在css中的宽和高为盒子的宽高。
（一）设置边框border每个边框有 3 个方面：宽度、样式，以及颜色
边框（一）
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
上面是 border 代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
边框（二）
现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;
Border(边框)
边框样式border-style
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
dotted 点线框在不同的浏览器下，形状不一样。在Chrome等中是小方框，但是在IE中是小点。
border-width 边框宽度（不能使用百分比）
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。
边框颜色border-color
border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
在一般情况下，写为：border：border-width border-style border-color 例如：
我们直接写：border：1px solid red 等等
边框-单独设置各边（四个边）
上边界 border-top
下边界 border-bottom
左边界 border-left
右边界 border-right
我们可以单独给这四个边进行样式
在CSS中，可以指定不同的侧面不同的边框：
border-style属性可以有1-4个值：
- border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
- border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
- border-style:dotted solid;
- 上、底边框是 dotted
- 左、右边框是 solid
- border-style:dotted;
- 四面边框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
简写：
边框-简写属性
上面的例子用了很多属性来设置边框。
T你也可以在一个属性中设置边框。
你可以在"border"属性中设置：
- border-width
- border-style (required)
- border-color
实例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#triangle-down {
margin: 50px auto;
width:200px;
height: 150px;
background-color: #83c44e;
}
</style>
</head>
<body>
<div id="triangle-down"></div>
</body>
即
现在来设置border的值。
1.我们先给border-top:40px solid blue;
<style>
#triangle-down {
margin: 50px auto;
width:200px;
height: 150px;
background-color: #83c44e;
border-top: 40px solid;
border-color: blue;
}
</style>
</head>
<body>
<div id="triangle-down"></div>
即：
2.现在我们在设置border-right：40px solid red;将border-top注释掉
<style>
#triangle-down {
margin: 50px auto;
width:200px;
height: 150px;
background-color: #83c44e;
/*border-top: 40px solid;*/
border-right: 40px solid;
border-color: blue red; } </style> </head> <body> <div id="triangle-down"></div>
即：
那么，如果，我想同时给div设置上边框和有边框呢？想象一下。。。。难道是这样吗？
肯定不是，那么这里就涉及到一个问题，二者之间的空白处，该怎么办？二者分。怎么分？均分吗？还是怎么分？
1.当二者的border-width值一样的时候，肯定是均分，
总结，也就是说从content的顶点到border顶点之间画一条直线，将二者分开。
2，div的width和height都没有设置值？
<style>
#triangle-down {
margin: 0 auto;
width: 0px;
height: 0px;
background-color: #83c44e;
border-top: 40px solid;
border-right: 60px solid; border-color: blue red; } </style> </head> <body> <div id="triangle-down"></div>
（如果只设置border-top或者只设置border-right，没有任何内容。）
结果如下：
我们再设置左边和下边的边界：
<style>
#triangle-down {
margin: 0 auto;
width: 0px;
height: 0px;
background-color: #83c44e;
border-top: 40px solid;
border-bottom: 40px solid; border-right: 60px solid; border-left: 60px solid; border-color: blue red; } </style> </head> <body> <div id="triangle-down"></div>
这就充分证明，border-top:40 决定了上边框的高度height，而具体，上边框的宽度width是多少？宽度是取决于border-left和border-right。以上例为例，这里border-top的高度是40，宽度为border-left+border-right。
border-bottom也一样
那么border-left/border-right：60 决定了左右边框的宽度width为60 而具体其高度是多少取决于border-top和border-bottom。以上例为例，这里border-left/border-right的宽度为60，高度为border-top+border-bottom。
这样，我们就可以得到三角形图形了
将右边距、下边距、上边距的颜色均设置为：transparent
<style>
#triangle-down {
margin: 0 auto;
width: 0px;
height: 0px;
border-top: 40px solid;
border-right: 60px solid;
border-bottom: 40px solid; border-left: 60px solid; border-color: red transparent transparent transparent; } </style> </head> <body> <div id="triangle-down"></div>
当我们给添加背景颜色，就能制出信封
制作一个元素上边框有个凸起来的三角形，如图所示：
思路：利用border的四个边框，制作三角形，但是这里需要制作两个三角形，将这两个三角形几乎重合。
<style> .Need-triangle{ width: 100px; height: 60px; border: 1px solid black; position: relative; margin: 20px; } .first-floor,.two-floor{ width: 0px; height: 0px; border-width: 12px; border-style: solid; border-color: blue red orange green; position: absolute; left: -23px; top: 20px; } .first-floor{ border-color: transparent black transparent transparent; left: -24px; } .two-floor{ border-color: transparent #ffffff transparent transparent; } </style> </head> <body> <div class="Need-triangle"> <!--下面两个边框用来设置三角形--> <div class="first-floor"></div> <div class="two-floor"></div> </div>
制作：如图所示，
当鼠标移动到灰色的盒子上的时候，该红色箭头位置不变，但是箭头方向向下。即：
<style type="text/css"> .box{ width:40px; height:40px; background-color: #aaaaaa; margin: 100px auto; } .box span{ display: inline-block; /*注意这里讲span标签设置为能够设置width height。*/ width: 0px; height: 0px; border: 5px solid; border-color:transparent transparent red transparent; } .box:hover span{ transform: rotate(180deg);/*小箭头旋转180度*/ position: relative; top:5px; /*小箭头旋转180度后仍和原来的位置一样*/ } </style> </head> <body> <div class="box"> <span></span> </div>
没有边框
在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。
那么如果把 border-style 设置为 none 会出现什么情况：
p {border-style: none; border-width: 50px;}
尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？
这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。
记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。根据以下规则，所有 h1 元素都不会有任何边框，更不用说 20 像素宽了：
h1 {border-width: 20px;}
由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。
（二）盒模型--宽度和高度（块元素的宽高）
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个块元素实际宽度（盒子的宽度）=左边框+左填充+内容宽度+右填充+右边框。
元素的高度也是同理。
比如：
css代码：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
html代码：
<body> <div>文本内容</div> </body>
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：
（三）盒模型--填充
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}
内边距的百分比数值
可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
下面这条规则把段落的内边距设置为父元素 width 的 10%：
p {padding: 10%;}
例如：如果一个段落的父元素是 div 元素，那么它的内边距要根据 div 的 width 计算。
<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>
注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
padding对于行内元素来说，其只有左右起作用，上下不起作用。
（四）盒模型--边界
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：
h1 {margin : 0.25in;}
下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
margin: top right bottom left
另外，还可以为 margin 设置一个百分比数值：
p {margin : 10%;}
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
margin{10px auto} 左右都设置为anto表示居中
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
CSS 外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
两个垂直相邻元素同时设置margin时，两个元素的间距不是两个margin值相加，而是选取最大的那个margin值。当两个相邻元素的margin值设置相同时,两元素的间距为他们的值，而不是之和。比如，p元素和h1元素相邻，p元素的margin-bottom为1px,h1元素的margin-top为1px,那么p元素底部和h1头部的距离为1px。当然，若
<style> div{ width: 200px; height: 200px; background-color:red; box-sizing: border-box; } p{ background-color: #00c0a5; /*margin-left: -30px;*/ } </style> </head> <body> <div> <p>nihao ,zhongguo</p> </div>
即：
现在设置p元素的margin-left：20px;
<style> div{ width: 200px; height: 200px; background-color:red; box-sizing: border-box; } p{ background-color: #00c0a5; margin-left: 20px; } </style> </head> <body> <div> <p>nihao ,zhongguo</p> </div>
这是为什么呢？
一个元素的父类元素无论是body还是其他的，总会有宽度。那么该块状元素的宽度和父类元素的宽度一样。以上代码为例，父类div元素的宽度为200px,p元素包含在div中，一个元素的宽度为：margin-left+margin-right+border-left+border-right+padding-left+padding-right+content=父类元素的宽度。p元素中的蓝色背景为可视区域的值，因为margin-left+margin-right+
可视区域的值为200px,因此，margin-left的值为多少，p的可视区域就减少多少。
父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化？
这是为什么呢？因为首先父类没有设定固定高度，默认高度为子元素的高度。而子元素的整体高度为：margin+border+padding+content。因此，当子元素的margin改变时，父元素跟着会将高度移动相应的像素。
要想让父元素不移动，子元素的margin-top与父元素之间有值，那么可以给父元素设置固定的高度。
html代码：
<div class="box1">
<div class="box2"></div>
</div>
css样式：
.box1{height:200px;width:200px;background:gray;}
.box2{height:100px;width:100px;background:gold;margin-top:50px;}
BUG原因：
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
这就是原因了。“嵌套”的盒元素也算“毗邻”，也会 Collapsing Margins。这个合并Margin其实很常见，就是文章段落元素<p/>，并列很多个的时候，每一个都有上下1em的margin，但相邻的<p/>之间只会显示1em的间隔而不是相加的2em。这个很好理解，我就是奇怪为什么W3C要让嵌套的元素也共享Margin，想不出来在什么情况下需要这样的表现。 这个问题的避免方法很多，只要破坏它出现的条件就行。给 Outer Div 加上 padding/border，或者给 Outer Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)。
解决方法：
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
2、为父元素添加overflow：hidden；样式即可（完美）
3、为父元素或者子元素声明浮动（float：left；可用）
4、为父元素添加border（border:1px solid transparent可用）
5、为父元素或者子元素声明绝对定位
父元素与子元素之间的margin-bottom问题
绿的背景的为父类元素，灰色部分的为子元素。怎么样能够让子元素居于父类元素的底部呢？
解决方案：1.利用绝对定位。
2.margin-top让元素下移。
3.突发奇想，可不可以用margin-bottom呢？margin-bottom：0px就是该元素的底部离父类元素的底部为0px.
答案是不行，因为：margin-bottom是下方的外边距，并不能让元素向下方移动，他是让元素向上方移动；margin-top作为上边距，把元素“推”了下去。
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
