CSS盒模型入门篇-PHP培训九期线上班

盒模型的属性有以下几种：

宽度（width）用来设置盒子内容区的宽度

高度（height）用来设置盒子内容区的高度

背景（background）用来设置盒子的背景色或背景图片

外边距（margin）用于设置当前盒子与其它盒子之间的距离

内边距（padding）用于设置盒子边框与内容区之间的距离

边框（border）用于设置盒子边框的宽度、样式、前景色

---

box-sizing解决了改变盒子边框宽度和内边距大小的情况下仍然可以保持盒子指定宽度和高度的问题。

如果不用box-sizing的话就需要手工计算边框宽度和内边距宽度，然后根据盒子的宽高相应的从内容区的宽和高减去这些数值。

---

盒子外边距的合并是指两个同级盒子之间的上外边距和下外边距会合并为一个外边距并以其中的最大值为准。

实例

/*上面盒子下外边距20px*/
.box1 {
    margin-bottom: 20px;
}

/*下面盒子上外边距30px*/
.box2 {
    margin-top: 30px;
}

---

嵌套盒子之间外边距由内向外传递，内边距则是可以正常显示，所以如果想设置子盒子与父盒子之间的距离只要直接设置父盒子的内边距就可以了。

---

背景颜色的线性渐变,由上到下由红到白渐变：

实例

.box{
background: linear-gradient(red, white);
}

---

背景图片的大小与位置的设定，图片完全填充并居中

实例

.box {
    background: url("../images/zly.jpg") contain center center;
}

---

通过本节课程的学习，掌握了盒子模型的应用与背景颜色线性渐变、径向渐变，还有对于背景图片的应用。嵌套盒子外边距传递的问题还没有搞太懂，子盒子的左右外边距也会发生传递吗？如果没有传递的话原因是什么？明天继续练习，看能否从实际应用中发现问题。