html 盒模型整理

width 宽度： 指的是真实内容的宽度，不是盒模型的宽度。

height 高度： 盒子里面内容的高度，不是指盒子的高度。

padding 内边距（盒子里面的留白）。

border 指的是盒子边框的大小。

margin 盒子外边距。（一个盒子和另一个盒子的关系）

width和height 描述的是真实内容的宽和真实内容的高。

盒子的宽度和真实的占有度不是一回事。

以上图为例：

盒子的内容width：200px height:200px 但真实的宽高倒是302*302 ，这是由于还要加上内边距（padding），还有边框（border）大小。

若是要求一个盒子的真实占有像素 公式为 左border+右border+width+左padding+右padding.

若是想保持一个盒子的真实占有不变，那么加width就要减padding（width +2 padding-1），加了padding就要减width。  （padding+1 width-2）

1、关于padding。

padding区域都是有背景颜色的，也就是说backgroud-color将填充全部boder之内的区域！！

padding 是有四个方向的，分别能够描述四个方向的padding。

在css中有两种定义padding的方式，分别是直接用小属性，或者用空格隔开，例如：

padding-left: 100px;

pandding-right: 20px;

padding-top: 30px;

padding-bottom: 40px;

或者用如下方式定义，经过空格分开，上右下左：

padding：30px 20px 40px 100px；

其实有一些html元素标签默认就带有padding，好比ul标签。因此在编写html代码的时，默认都会加一个默认的选择器，把margin和padding都清除。

*{

margin: 0;

padding: 0;

}

2、border边框。

border有三个要素，分别是粗细，线形，颜色。

例：

boder: 10px ridge red;  

另一种写法就是：

border-width: 10px;

border-style: solid;

border-color: red;

按照方向拆分：

border-top：10px solid red;

border-right:10px solid bule;

border-left: 10px solid yellow;

border-bottom: 10px solid green;

甚至能够拆的更详细：

将每一个方向的每一个元素都拆开。

若是想让边框消失，能够使用border:none 或者boder:0，他们两个做用同样。

若是想让某一个方向的边框消失border-left:none；或者border-left:0；。