盒子模型和css属性

1.对于css来说，最常见到的关键词就是盒子模型了。那么到底什么是盒子模型呢？ 其实盒子模型只是一种很形象的叫法。我们可以把盒子模型和生活中的某些真正的盒子关联起来。例如：蛋糕盒。

2.对于盒子模型来说，通常是由：内容模块、内边距、边框、外边距四部分组成，对应现实生活中的蛋糕盒，我们可以发现：蛋糕盒里面的蛋糕就相当于内容模块，蛋糕和包装盒之间的距离我们可以认为是内边距，包装盒那层薄薄的纸可以认为是边框，蛋糕盒和其他蛋糕盒的距离可以认为是外边距。

css盒子模型

3.所以对于盒子模型来说，它的组成就有：内容

    border

    padding

    margin

4.首先介绍盒子模型中的border：

盒子模型的border（边框）是由：

border-style:(边框的样式) solid(实线)、dotted(点线)、dashed(虚线)

border-width:(边框的粗细) 1px...

border-color:(边框的颜色) red/#rgb/rgba()

注意border的属性是复合属性，我们在使用的时候可以这样：

border: 1px solid red;

border:none;

5.盒子模型中的内边距padding:

盒子模型的padding是由：

padding-top:
padding-bottom:
padding-left:
padding-right:

注意：padding也是复合属性，使用的时候可以这样：

padding:0 0 0 0(后面四个数值分别代表：上 右 下 左)。并且在使用padding

的时候会影响盒子本身的宽和高。

6.盒子模型中的外边距margin:

盒子模型的margin是由：

margin-top:

margin-bottom:

margin-left:

margin-right:

注意：margin也是复合属性，使用的方法和padding的方式是一样的。

margin:0 0 0 0(顺序仍然是：上 、右 、下 、左)。但是在使用margin的时候我们需要注意一些问题：

如果我们对父元素的第一个子元素设置margin-top，那么父元素也会受到影响即也会使外上边距移动相同的距离。

如果想要消除这种影响，最常见的方法是：

1.对父元素设置padding

2.对父元素设置overflow:hidden

6. 行内元素没有上下外边距属性

    块级元素的上下外边距取最大值

    行内块级元素上下边距是累加的

7.一个盒子的实际大小：

width+padding+border

   一个盒子的占用空间：

width+padding+border+margin 

8.在css中我们常常遇到设置水平居中的情况：

1.对于定宽块级元素，设置他们的居中可以这样：margin:0 auto来实现。

注意这样的情况要有两个前提条件：

1.定宽  2.块级元素

2.如果要对元素内部的文本或者图片设置居中，可以通过text-align:center来实现。

9.同样的我们也会遇到设置竖直方向居中的情况：

1.对于父元素的高度确定的情况，可以设置：line-height:height;来实现