前端----CSS

一、CSS盒子模型

1、盒子模型解释

元素在页面中显示成一个方块，类似一个盒子，模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

2、设置宽高 width height

width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */

3、设置边框 border

设置一边边框，例如顶部如下：

border-top:10px solid red；

10px表示线框的粗细，soid表示线性
设置四个边一样：

border:10px solid red;

4、设置内间距 padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

/* 四个值按照顺时针方向，分别设置的是 上 右 下 左  四个方向的内边距值。 */
padding：20px 40px 50px 30px; 

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

5、设置外间距 margin

同上，将padding改为margin即可
外间距居中技巧
如果子元素是块元素，且它的宽度小于父元素，可以将子元素左右设置auto来水平居中子元素

/* 子元素上下外边距设为0，左右设置为auto */
margin:0px auto

6、盒子的真实尺寸

盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

• 盒子宽度 = width + padding左右 + border左右
• 盒子高度 = height + padding上下 + padding上下