CSS盒子-味道不错

关于盒模型的解析，一直存在两种方式：

• IE盒模型
• 标准盒模型

在HTML文档头部引入文档头，就可以保证使用标准盒模型来进行解析

什么是盒子模型？

在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盒子模型是比较基础的内容，这份早点如果没吃够，点击加餐