一、盒子模型
面试题：什么是盒子模型，为什么要用盒子模型，影响盒子模型的大小因素有哪些？
答：把元素布局到页面里，就像买个桌子放到家里，要知道桌子的大小，形状，然后才能放到家里
因此把所有的元素都想成盒子，矩形，只需要考虑大小即可
盒模型、盒子模型、框模型（box model）
内容区 冰箱
内边距 泡沫
边框 纸盒子
外边距 快递的位置
影响盒子大小的因素：内容区，内边距，边框会影响盒子的大小，外边距不会影响
内容区(content) ：
元素中所有的子元素和文本内容都在内容区中排列
默认情况：设置width，height都是内容区宽高
二、边框（border）元素设置边框
1、边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式 边框大小、边框的样式、边框的颜色
边框大小：border-width
边框样式：border-style
边框颜色：border-color
掌握： 跟多个值的情况、单独设置某一边、默认值、样式的可选值、箭头的写法
2、 边框的大小 如果省略，有默认值，大概1-3px ，不同的浏览器默认大小不一样
border-width 后可跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
3、单独设置某一边的边框宽度
border-bottom-width
border-top-width
border-left-width
border-right-width
4、边框的样式
border-style 可选值
默认值：none
实线 solid
虚线 dashed
双线 double
点状虚线 dotted
5、设置边框的颜色 默认值是黑色
border-color 也可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
对应的方式跟border-width是一样
单独设置某一边的边框颜色：border-XXX-color: ;
6、简写border
（1）同时设置边框的大小，颜色，样式，没有顺序要求
（2）可以单独设置一个边框
border-top:; 设置上边框
border-right 设置右边框
border-bottom 设置下边框
border-left 设置左边框
（3）去除某个边框
border:none;
三、内边距 padding
是内容区和边框之间的距离，会影响到整个盒子的大小
1、 padding-top: ; 上内边距
padding-left:; 左内边距
padding-right:; 右内边距
padding-bottom:; 下内边距
2、padding简写 可以跟多个值
四个值 上 右 下 左
三个值 上 左右 下
二个值 上下 左右
一个值 上下左右
四、外边距 不会影响到盒子的大小
可以控制盒子的位置
margin-top:; 正值 元素向下移动 负值 元素向上移动
margin-left:; 正值 元素向右移动 负值 元素向左移动
margin-bottom:; 正值 元素自己不动，其靠下的元素向下移动，负值 元素自己不懂，其靠 下的元素向上移动
margin-right: ; 正值负值都不动
简写 margin 可以跟多个值
规则跟padding一样
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
