html模型,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)

一、关于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;

}

二、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；。