前端基础——盒子模型

1. 盒子模型
   CSS中将每一个元素都设置为了一个矩形的盒子；
   将所有的元素都设置为盒子，是为了方便页面的布局；
   当这些元素都是盒子以后，我们的布局就变成了在页面中摆放盒子

2. 盒子构成
盒子的可见框大小由内容区、内边距和边框共同决定

内容区

	1.内容区相当于盒子存放东西的空间；
	2.内容区在盒子的最里边；
	3.元素的所有的子元素都是放在父元素的内容区；
	4.内容区宽度：width；
	5.内容区高度：height

内边距（padding）

	1.内边距指的是内容区和边框之间的距离，内边距会影响盒子的大小；
	2.盒子中一共有四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left；
	3.padding：可以同时设置四个方向的内边距，规则和border-width一致；
	4.padding:上 右 下 左（写四个值）；
	5.padding:上 左右 下 （写三个值）；
	6.padding:上下  左右 （写两个值）；
	7.padding:上下左右 （写一个值）

边框（border）

	1.边框盒子可见框最外侧，边框是盒子的边缘；
	2.设置边框需要同时设置三个样式，缺一不可；
	3.设置边框：border-width（边框的宽度）、border-color（边框颜色）、border-style（边框样式）；
	4.border-width:可以同时指定四个边框的宽度，也可以分别指定；
	5.border-width:上 右 下 左（写四个值）；
	6.border-width:上 左右 下 （写三个值）；
	7.border-width:上下  左右 （写两个值）；
	8.border-width:上下左右 （写一个值）；
	9.除了上面三个属性，CSS中还提供了：border-xxx-width、border-xxx-color、border-xxx-style，xxx可以是top、left、right、bottom，通过这些可以单独设置指定边框的宽度、颜色和样式；
	10.边框的简写属性：border、border-left、border-top、border-right、border-bottom，使用他们可同时设置宽度 颜色  样式，用空格分隔开

外边距（margin）

	1.外边距盒子和其他盒子之间的距离，外边距不会影响可见框的大小，但是会影响盒子的位置；
	2.也是具有四个方向：margin-top、margin-left、margin-right、margin-bottom；
	3.简写属性与padding一致；
	4.margin值：可以设置为auto、可以设置为负值；
	5.设置为auto：如果单独将左右外边距设置为auto，则会将左或右外边距设置为最大值、如果同时将左右外边距设置为auto，则会将左右外边距设置为一个相等的值，通过这种方式使一个子元素在它的父元素中水平居中（例：margin:0 auto）；
	6.如果将margin设置为负值，则元素会向相反的方向移动；
	7.外边距的重叠：水平外边距不会重叠，而是取和、相邻的垂直外边距会发生重叠现象（相邻元素的外边距会取最大值、子元素的外边距会传递给父元素）

3.内联元素的盒子模型
不支持width和height；
支持水平方向的padding，垂直方向的padding也支持，但是不会影响布局；
支持四个方向边框，但是垂直的边框不会影响布局；
支持水平方向外边距，不支持垂直方向的

4.盒子模型相关样式
display（设置元素的显示类型）

	1.none：元素不会在页面中显示，并且不会占据页面的位置；
	2.block：元素会作为块元素显示；
	3.inline：元素会作为内联元素显示；
	4.inline-block：元素会作为行内块元素显示、既具有内联元素的特点也具有块元素的特点；

overflow（设置元素如何处理溢出内容）

	1.visible：默认值，元素在页面中正常显示；
	2.hidden：元素不在页面中显示，但是依然在页面中占据位置；

visibility（设置元素是否在页面中显示）

	1.visible：默认值，不会处理溢出的内容，在父元素以外的地方显示；
	2.hidden：溢出的内容会被隐藏不会显示；
	3.scroll：在父元素中同时添加水平和垂直方向的滚动条、不内容是否溢出都会添加滚动条；
	4.auto：根据需要自动生成滚动条

5.文档流
文档流指的是网页中的一个位置
文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列
元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）
块元素

	1.块元素在文档流中自上向下排列；
	2.块元素在文档流中宽度默认是父元素的100%；
	3.块元素在文档流中高度默认被内容撑开

内联元素

	1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列；
	2.内联元素在文档流中宽度和高度默认都被内容撑开