什么是盒子模型？

在CSS中，一个标签就代表一个盒子模型。我们可以通过6大属性来描述一个盒子模型： margin,border,padding,width,height,background

因为标签又分块级标签、行级标签，6大属性对块级标签都有用，但行级标签中的width和height是没有效果的，而且行级标签中的margin,padding属性只在水平方向上起作用。

下面先介绍这6大属性：

margin

margin 盒子的外边距，即盒子边框之外的距离,也可认为是盒子与盒子之间的距离，分上右下左，设置如下
margin: 1px 2px 1px 2px;
也可分别设置：
margin-top:1px; margin-right:2px; margin-bottom:1px; margin-left:2px;
应用：*{margin:0} 水平居中网站顶部背景100%宽版心最新版居中

border

border 盒子的边框，可以设置盒子边框的粗细、样式、颜色，如border: 1px solid red

border是一个简写的属性，是border-width、border-style、border-color的简写。

三个属性之间没有固定的顺序，怎么写都行
属性之间使用空格隔开
针对border-width、border-style、border-color，又分别有四个方向的子属性，如border-top-width，border-top-style，一般很少使用子属性来设置边框。

可以单独设置：border-width ， border-style ， border-color
也分上右下左：border-top ， border-right ， border-bottom , border-left
border可以实现小三角

div{
    width: 0;
    /* border-top:10px solid red;
    border-right:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:10px solid transparent; */

    /*简化： 两行代码实现一个小三角 */
    border: 10px solid transparent;
    border-top: 10px solid red;

}

注意： border在页面是占空间的

padding

padding 盒子内边距，即边框与内容的距离
也分上右下左，padding-top ， padding-right ， padding-bottom , padding-left
padding 在页面中也是占空间的
有些标签有默认的padding，解决方法：*{padding：0；}

content(内容)

width，heigh 内容的宽度和高度
男标签可以设置宽度和高度，女标签不能设置宽度和高度

女标签它的宽度由内容决定，高度由font-size决定

width和height可以设置百分比，是父元素的百分比。

background

background:背景属性

background-color:背景颜色
background-image: 背景图片
1. 默认水平和垂直方向都会平铺
2. 如果空间不足，图片也会显示，只是显示不完整
3. url后面的路径引号可加可不加
4. 背景图片默认会填充border,padding,content

background-repeat:指定如何重复背景图像 background-position:指定背景图像的位置 background-attactment:设置背景图像是否固定或者随着页面的其余部分滚动。还有其他有意思的属性，点击这里查看

结语：

CSS盒子模型是比较基础的内容，这份早点如果没吃够，点击加餐

早点系列之css盒子模型