CSS盒子模型

在html里 块儿级元素都是盒子模型 For example：<div> ，<ul>， <ol>，<p>，<h>，<table>

1.首先我们用一个月饼盒比拟一个盒子模型：

image.png

2.盒子里的五仁月饼就是盒子模型里的内容，它可以是文字，图片或者是标签元素

image.png
3.内边距（padding)： 盒子里的内容（五仁月饼）到内边框的距离
image.png

4.外边距（margin）：盒子与另一个盒子的距离就叫做外边距

image.png
5.边框(border)：边框也有宽度
image.png
6.内填充 外边距 边框都有四个方向
image.png
例：
padding-left: 左内边距 padding-top:上内边距
image.png

7.盒子的宽度= 左边界+右边界+边框宽度*2+左右内边距+内容的宽度（高度计算方法同宽度）

image.png

一，边框
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:red;
3.border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
二，填充
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}
或者分开写：
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}
如果填充都为10px：
div{
padding:10px
}

三，边界
元素与其它元素之间的距离可以使用边界（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;}