网页盒子-30天学会HTML＋CSS，制作精美网站

Box Model定义

每个html的元素都是一个Box Model，由外而内为外边距(Margin)、边框(Border)、内边距(Padding)、内容盒子(Content Box)所组成。

Margin 外边距

与外层元素的间距。

写法

margin四个边写在一起的写法：

• margin:上 右 下 左(顺时针设定);
• margin:上下 左右;
• margin:上 左右 下;
• margin: 四个边同样値;

各别写

• margin-top
• margin-right
• margin-bottom
• margin-left

单位

可使用auto、%(百分比)、长度单位(px、em、rem...)

外边距合并

外边距合并指的是指当两个元素垂直外边距相遇时就会合并成一个外边距，数字相同合并外，如果两个数字不同会取最大的，让我们来看以下常见的范例

上下两元素外边距合并

橘色区块margin-bottom:30px; 绿色区块margin-top:20px;

<div class="box">
    <div class="item orange">
      Lorem ipsum dolor sit amet, harum malorum ex mei
    </div>
    <div class="item green">
      Quo ea doming scripserit ullamcorper, audire percipit ex sit
    </div>

</div>

.orange{
  background-color:#ff9800;
  margin-bottom: 30px;
}
.green{
  background-color: #8bc34a;
  margin-top: 20px;
}

可能你会以为这样的设定是margin-bottom:20px + margin-top:10px = 30px的距离

但实际上是取得margin最大值或是相等的值

外层元素里面包另一个元素

元素合并是因为外层框没有设置框线或是内距才会发生合并

.box{
  background-color:#efefef;
  margin:50px;
}
.item{
  background-color:#ff9800;
  margin:10px 0;
}

当你外层.box有设定边框时，margin:10px 0;就会有效

.box{
  background-color:#efefef;
  margin:50px;
  border: 1px solid #666;
}

行内框(inline)、浮动框、绝对位置不会合并

内边距(Padding)

边界内元素与内容距离，写法与margin相同，可各别设定四个边「padding-top」、「padding-right」、「padding-bottom」、「padding-left」，也可以一次套用四个边，顺序为上、右、下、左(顺时针)设定。

范例：设定box宽度为300px，内距20px

<div class="box">
  Lorem ipsum dolor sit amet, harum malorum ex mei. Quo ea doming scripserit ullamcorper, audire percipit ex sit
 </div>

.box{
  width: 300px;
  background-color: #efefef;
  padding: 20px;
}

但实际宽度会是340px(300px + 左内边距 20px + 右内边距 20px)

这样就超过我一开始想要的宽度300px了，所以我就要把宽度扣掉padding的左右内距才会符合300px

.box{
  width: 260px; // 300 - 20(左内距) - 20(右内距)
  background-color: #efefef;
  padding: 20px;
}

但是每次只要有设定内距，就要把原本的宽度扣掉，这样子太麻烦了。所以可以使用box-sizing属性，设定border-box，就不会受padding影响，还是能保留他原本的宽度。但你会发现使用内边距的话，内容空间会减少。

.box{
  width: 300px;
  background-color: #efefef;
  padding: 20px;
  box-sizing:border-box;
}

box-sizing

• content-box：预设值，实际宽高＝所设定的数值＋border＋padding
• border-box：实际宽高＝所设定的数值(已包含border和padding)

边框(Border)

border-width 边框粗细

写法

border-width四个边写在一起的写法：

• border-width:上 右 下 左(顺时针设定);
• border-width:上下 左右;
• border-width: 四个边同样値;

各别写

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

单位

可使用auto、%(百分比)、长度单位(px、em、rem...)、关键字(thin(细框线), medium(预设), thick(粗框线))

范例

设定四个边的宽度都一样

.box{
	border: 2px solid blue;
}

设定四个边宽度

.box{
  border: 2px solid blue;
  border-width:3px 6px 10px 5px;
  width: 300px;
}

border-style 边框样式

写法

border-style四个边写在一起的写法：

• border-style:上 右 下 左(顺时针设定);
• border-style:上下 左右;
• border-style: 四个边同样値;

各别写

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

样式

• none：不显示线条(预设)
• solid：单实线
• double：双实线
• dashed：虚线
• dotted：点线
• groove：立体凹线
• ridge：立体凸线
• inset：嵌入线(以内阴影模拟凹陷效果)
• outset：浮出线(以外阴影模拟浮凸效果)
  

border-color 边框颜色

写法

border-color四个边写在一起的写法：

• border-color:上 右 下 左(顺时针设定);
• border-color:上下 左右;
• border-color: 四个边同样値;

各别写

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

范例

设定四个边的颜色

.box{
	border: 2px solid blue;
  border-color: red green blue orange;
}

border-color单独使用是不起作用的，必须使用border-style来设置边框样式

border 统一设定边框属性

顺序为border-width border-style border-color

.border-solid{
  border: 4px solid #999;
}

border除了做图片、区块...的边宽外，还能制作三角形，以下范例是制作正三角形

.triangle{
  height:0px; 
  width:0px;
  border-bottom: 50px solid blue;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

如果觉得自己写三角形计算宽度很麻烦，还有三角形产生器 ，只要设定好方向、大小、颜色，就能够让轻松的产出三角形

box-shadow 盒子阴影

属性

• h-shadow：水平阴影，正数向右延伸，负数向左
• v-shadow：垂直阴影，正数向下延伸，负数向上
• blur：模糊长度，数字越大越模糊
• color：阴影颜色
• inset：内阴影

box-shadow:h-shadow v-shadow blur color inset

范例

为区块加上阴影

.box{
  padding: 15px;
  border: 1px solid #ccc;
  width: 300px;
  box-shadow: 0 0 8px #ccc;
}

为图片加上阴影

.box img{
  padding: 5px;
  border: 1px solid #ccc;
  width: 300px;
  box-shadow: 3px 3px 1px #ccc;
}

设定内阴影

.box{
  padding: 15px;
  width: 300px;
  box-shadow: inset 0 0 15px #ccc;
}

外边框outline

outline是紧邻border外的边线

紧邻border外的边线，属性与border相同

• outline-color同border-color
• outline-width同border-width
• outline-style同border-style
• outline-offset：定义与border边框的距离

范例

.box{
  padding: 15px;
  width: 300px;
  border: 3px solid #666;
  outline: 3px solid #ccc
}

结论

我自己在设定CSS时，会在全域设定为box-sizing:border-box，这样子就不用担心宽度或高度会因为我设定了padding、框线...而受影响，或是还要再扣掉宽度才会符合我设定的尺寸。

相信你对Box Model有一定的了解了，对於区块、图片...，都可以得心应手的美化了。