博客列表 >CSS盒模型入门篇-PHP培训九期线上班

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

AA射手座
AA射手座原创
2019年10月31日 23:36:15600浏览

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

宽度(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;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议