页面中, 由块级框和行内框围起来封闭区域,在用户看来就像是一个个盒子，所以页面中的元素我们也可以用一个个不同类型的盒子来表示。对应不同的框类型, 盒子也可以行为块级盒子和行内盒子，研究盒模型主要是用来布局, 而行内盒子无法设置大小,所以只研究块级盒子。
盒模型的基本属性：width: 宽度 height: 高度 background: 背景 padding: 内边距 border: 边框 margin: 外边距 ，这些属性中部分作用在盒子的不同位置又有不同的效果，下面用一张图来直观的描述：
由上图可知，padding，border，margin具有方向性，方向遵循: 上、右、下、 左的顺序，即顺时针旋转，每个方向上有对应的盒模型属性，以padding举例: padding-top: 上内边距 padding-right: 右内边距 padding-bottom: 下内边距 padding-left: 左内边距
注意：padding和margin,即内外边距默认是透明的，所以只需要设置宽度即可，而border即边框不透明，除可以设置宽度外还可以设置样式与前景色，即每个方向上都可以设置width,style,color三个特征
下面介绍盒子重要的几个点：
1、盒子 ' box-sizing ' 解决了什么问题, 不用它应该如何处理 ?
box-sizing: border-box；设置盒子宽高定位到边框级别，即大小包括了边框与内边距，可以清除内边距（padding）和 边框（border）对盒子大小的影响。不用它 可以设置 盒子的宽高 = 原盒子宽高 - padding宽高 - border宽高，来保持盒子宽高和原来一样大小。更形象直观感知如下图：
2、 盒子外边距之的合并以及 嵌套盒子之间内边距与外边距的表现
a 同级盒子之间：添加外边距后出现了外边距的合并, 也叫外边距的塌陷 ，二个盒子之间的间距, 最终由以较大值确定
b 嵌套盒子之间：子盒子外边距会传递到父盒子，通过给父盒子添加内边距或边框来解决，外边距在水平方向取值auto时, 可以实现子盒子的水平居中显示效果
具体案例如下：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距对盒子位置的影响</title> <link rel="stylesheet" href="static/css/style2.css"> </head> <body> <!--页面中多个个盒子之间的关系有同级和嵌套二种--> <!--同级关系: 外边距合并--> <div class="box1"></div> <div class="box2"></div> <hr> <!--嵌套关系: --> <!--1. 外边距由内向外传递--> <div class="box3"> <div class="box4"></div> </div> <hr> <!--2. 子盒子在父盒子中的居中显示--> <div class="box5"> <div class="box6"></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/*外边距对盒子位置的影响*/
/*清除内边距与边框对盒大小的影响*/
div {
box-sizing: border-box;
}
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightgreen;
}
/*上面盒子下外边距20px*/
.box1 {
margin-bottom: 20px;
}
/*下面盒子上外边距30px*/
.box2 {
margin-top: 30px;
}
.box3 {
width: 200px;
height: 200px;
background-color: lightblue;
}
.box4 {
width: 150px;
height: 150px;
background-color: lightgreen;
}
/*子盒子设置外边距*/
.box4 {
margin-top: 30px;
}
/*其实,给子盒子添加外边距,对于父盒子来说就是添加内边距*/
/*解决方案1: 父盒子添加内边距*/
.box3 {
/*padding-top: 30px;*/
}
/*边框具有封闭盒子空间, 拦截内边距padding扩展的作用*/
/*解决方案2: 父盒子添加边框*/
.box3 {
border: 1px solid rgba(0,0,0,0);
}
.box5 {
border: 2px solid gray;
}
.box6 {
width: 300px;
height: 150px;
background-color: lightgreen;
}
/*左右挤压的结果, 就会使子盒子水平居中显示在父盒子中, 可以简写为:*/
.box6 {
margin: auto;
}
/*第一个参数是设置上下margin*/
.box6 {
margin: 10px auto;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果如下：
手写代码：
3、盒子的背景颜色的线性渐变和背景图片大小与位置关系
a .背景色的控制,主要有裁切和渐变二类
background-color: 设置背景色,支持单词,16进制,rgb()/rgba()
background-clip: 设置背景色应用范围(裁切),支持内容,内边距和边框三级
background: linear-gradient(): 线性渐变
background: radial-gradient(): 径向渐变
b .背景图片设置涉及图片的位置,大小, 是否重复等
background-image: url(): 设置背景图片
background-position: 设置背景图片显示位置
background-size: 设置背景图片显示大小
background-repeat: 设置背景图片是否重复
background-attachment: 设置背景图片是否随滚动条滚动
具体案例如下：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景控制</title> <link rel="stylesheet" href="static/css/style3.css"> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.box1,.box2 {
width: 450px;
height: 500px;
box-sizing: border-box;
border: 2px solid blueviolet;
box-shadow: 5px 5px 2px #888;
float: left;
}
.box2{
margin-left: 30px;
}
/*1. 背景色*/
.box1 {
background-color: lightblue;
}
/*通过边框间隙,可以看到背景色会自动延伸到内边距, 边框*/
/*背景裁切: 设置背景的覆盖范围, 也适用于背景图片*/
.box1 {
/*内容区*/
background-clip: content-box;
}
/*背景色渐变*/
/*线性渐变*/
.box1 {
/*可连续设置多种颜色的渐变效果*/
background: linear-gradient(red, green, blue, white);
}
/*径向渐变*/
.box1 {
/*向左上径向渐变, ,模拟日照效果, 注意方向词是"at", 不是"to"*/
background: radial-gradient(at left top, white, coral, yellow);
}
/*2. 背景图片 */
.box2 {
/*设置背景图片*/
background-image: url("../images/gril.jpg");
/*设置背景重复: repeat, no-repeat, repeat-x, repeat-y*/
background-repeat: no-repeat;
/*设置背景图片的位置: 水平, 垂直*/
/*支持关键字设置*/
/*background-position: center center;*/
/*支持数值或百分比*/
background-position: 50% 50%;
/*设置背景图片的大小*/
/*图片拉伸等比例填充,完全覆盖盒子,比例不同可能会有部分图片内容被隐藏*/
background-size: cover;
/*图片完全填充, 比例不同,盒子可能会出现空白区域*/
/*background-size: contain;*/
}
/*以上设置可以使用组合设置来简化:*/
/*.box2 {*/
/* background: lightblue url("../images/gril.jpg") no-repeat 50% 50%;*/
/* background-size: cover;*/
/*}*/运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果展示：
手写代码：
