1.什么是盒子模型
所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻。
一个盒子是由四个部分组成
① “内容–content”（盒子内的物件）、
② “内间距–padding”（物件和盒子的距离）、
③ “边框–border”（盒子壁）、
④ “外间距–margin”（盒子和其它物体的距离）
2.IE盒子模型与w3c的盒子模型
(1)由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异。
标准的盒子模型
最终盒子的“width”和“height”== content、padding和border；
IE浏览器盒子模型
最终盒子的width”和“height == content
(2)盒子模型的选择与转换
一方面为为了兼容IE浏览器，另一方面是IE的盒子模型在实际的布局中的确更容易控制。所以我们在实际的开发工作中，都是将标准的盒子模型转换为IE的盒子模型。转换方式如下：
CSS的样式属性
box-sizing：border-box --》IE盒子模型
box-sizing：content-box --》W3C盒子模型
3.盒子宽度，盒子高度，内间距，边框，外边距
基本含义
width: 盒子宽度
height： 盒子高度
padding：内边距：盒子内容与盒子边框的距离
border： 盒子边框
margin: 外边距：盒子边框与其他标签的边框的距离
padding/margin设置
四个方向单独进行控制
div {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
组合值控制
div {
margin: 1rem;
padding: 1rem;
}
当为组合值时的含义：
一个值: 上右下左同时设置
两个值：上下，左右
三个值：上，左右，下
四个值：上右下左分别设置
Border设置
边框的三大属性
① border-width 设定边框的宽度。
② border-style 设置边框的类型，主要有以下可以设定的值
③ border-color 设置边框的颜色，
单独设置各属性（所有方向）
div {
border-color: #4b8fca;
border-style: solid;
border-width: 2rem;
}
只设置某个方向上的border，单独控制
div {
border-right-color: #4b8fca;
border-right-style: solid;
border-right-width: 2rem;
}
边框可选类型如下：
① none，无边框
② solid，实现边框
③ dotted，点线边框
④ dashed，虚线边框
⑤ double，双线边框
⑥ groove，3D凹槽边框
⑦ ridge，3D凸槽边框
⑧ inset，内浮雕边框
⑨ outset，外浮雕边框
用组合值设置各属性（所有方向）
div {
border: 0.05rem red solid;
}
各个属性的位置可以调整改变
只设置某个方向上的border，组合值控制
div {
border-right:1rem solid red;
}
1.圆角的盒子“border-radius”
给每个角进行设置圆角
div {
border-top-left-radius: 5px;
border-bottom-right-radius: 10px;
}
给所有角进行设置圆角
div {
border-radius: 5px;
}
2.元素的轮廓“outline”
概述
① 该属性用于设置一个元素的轮廓线.(input点下会有蓝色边线，那就是轮廓)
② 和“border”不一样，“outline”无论在什么“盒子模型”下，都不会占据页面的空间
③ 并且它不能分别去设置各个方向的值，即不能对“top”、“right”、“bottom”和“left”方向的“outline”进行分别设置，只能进行统一给所有方向设置。（可以对某个分支属性进行设置）
④ 在使用“webkit内核或“blink内核的浏览器中，该属性会在表单元素在获得焦点后自动出现，本意是让用户获得更好的交互体验。
但该设定很多时候反而会影响我们对“Web”页面的风格设置，这个时候我们都是将它的值设置为“none”。
Webkit :
老版本Chrome浏览器、Safari浏览器以及iOS和Android系统自带浏览器
Blink :
以新版的Chrome浏览器和Opera浏览器为代表
⑤ 另外，“outline”属性并不受圆角属性“border-radius”的影响。和“border”属性大体一致
outline的分支属性
outline-width 设置轮廓线的宽度
outline-style 设置轮廓线的样式
outline-color 设置轮廓线的颜色
outline-offset设置轮廓线相对元素边框的距离
div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;
outline: 1px solid blue; /* 组合值写法 /
outline-offset: 20px; / 这个值只能单独写 */
}
3.可调整元素大小的“resize”
(1)默认情况textarea能够进行元素标签大小的调整
如下：
(2)resize的使用
resize这个属性就是用来专门定义这种大小调整的行为的，使用方式如下：
1)resize应该配合overflow这个css属性进行使用,
然后overflow值一般为下者之一即可：
hidden/auto/scroll
2)resize应该使用到块级元素与行内块元素上。【通过display属性修改的也算】
3)resize主要有三个值
① 允许垂直改变大小：vertical
② 允许水平改变大小：horizontal
③ 允许垂直水平同时改变大小：both
4)resize属性在大部分ie系列里面的浏览器中都是无效的。
5)默认能够改变大小，就是默认设置了值为both,
如果我们想让他只能水平改变大小或者垂直改变大小，或者不能改变大小，我们直接使用设置相应的resize值就可以了，并且无需显示的去设置“overflow”属性。
4.元素的阴影“box-shadow”
描述
该属性能够让元素获得一个“阴影”效果，根据颜色的不同，有时候也可以叫做“发光”效果。“box-shadow”属性没有分支属性，它的值是以“组合值”的形式设置的，它最多允许6个值的组合，按值的顺序分别代表：
基本值
h-skewing（必要）
阴影在水平方向的偏移，负数是向左偏移，正数是向右偏移，单位为“px”。
v-skewing（必要）
阴影在垂直方向的偏移，负数是向上偏移，正数是向下偏移，单位为“px”。
blur（可选）
阴影的“模糊距离”或“模糊程度”，单位为“px”。
color（可选）
阴影的颜色，支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
和文本阴影的不同（多了两个值）
inset（可选）
将默认向外的阴影方向改为向内，然后inset一般是放在阴影颜色的后面。
spread（可选）
阴影的扩展范围,值为数值，其单位可以使用常用单位。rem,em,px.
它应该放在阴影颜色的前面
4.扩展
① 给某个元素设置margin-top时，如果他上方元素含有“margin-bottom”，则这两个值会重叠，并且取较大值作为间距值。
【如果是左右的话，则是正常的相加】
注意
在某些浏览器里面可能
1.在块级元素的首个子标签元素中设置margin-top时，会作用到这个父元素上。
2.在块级元素的最后一个子标签元素中设置margin-bottom时，会作用到这个父元素上。若父元素已经设置了“padding-bottom”，则与父元素的该值相加取和作为与页面底部的间距。