学习网页结构

文档流（normal flow）

网页是一个多层的结构，css可以给每一层设置样式，最终我们看到的是最上面的一层。
文档流是网页最底下的那一层

元素分为两种状态：
在文档流中，脱离文档流

之前将元素分为三类，块元素，行内元素，行内块元素
分别具有一些特点，这些特点都是元素在文档流的特点
块元素:
不会独占一行，宽是父元素内容区宽度，高是被内容撑开
行内元素：
不会独占一行，宽高是被内容撑开，不可以自定义宽高
行内块元素：
兼具块元素，行内元素的特点
注意：
①一旦元素脱离文档流，以上的分类，以上分类的特点都不复存在
②我们创建的元素默认是在文档流当中

盒子模型

布局相关样式：
文档流默认的布局，浮动，定位，弹性盒子等等

网页中也有很多的元素，将元素摆放在合适的位置，盒模型将页面所有的元素的形状都统一了，你在布局时，只需要考虑元素的大小即可

盒模型：                               快递
内容区   content                   冰箱
内边距   padding                  泡沫
边框      border                    快递盒子
外边距   margin                   快递离你的距离

盒子的大小：内容区、内边距、边框有关系，跟外边距没有关系

一、内容区  content：
width    内容区的宽
height   内容区的高     

二、边框（border） 边框用来隔开盒子内部和盒子外部
设置边框，三个要素，缺一不可

1、边框的宽度  border-width
①可以设置多个值 ，以空格隔开即可
        4个值 分别对应  上    右    下    左
        3个值                上        右左    下
        2个值                上下             右左
        1个值                上下左右
②可以单独设置某一边的宽度
border-top-width                上
border-bottom-width          下
border-left-width                  左
border-right-width               右
③border-width  是有默认值，默认大小在1-3px之间

2、边框的颜色  border-color
①可以设置多个值
规则跟 border-width 一样
②单独设置某一边的颜色
border-xxx-color
xxx：top、bottom、left、right
③小箭头的写法
border-color：（4个值，把另外三个方向改成透明色transparent）
④border-color   有默认值，默认值是黑色

3、边框的样式  border-style     
①边框样式的种类
solid          实线
dotted      点状的虚线
dashed     条状的虚线
double      双线
②可以设置多个值
规则跟 border-width 一样
③单独设置某一边的样式
border-xxx-style     
xxx：top、bottom、left、right
④border-style      默认值是none，也就是没有

4、边框可以简写border
①语法：border： 大小 颜色 样式；
    三要素顺序无所谓
②单独设置某一边的边框
border-top： 大小 颜色 样式；
border-bottom： 大小 颜色 样式；
border-left： 大小 颜色 样式；
border-right： 大小 颜色 样式；
③border-xxx：none；不要某边的边框

三、内边距  padding    是边框和内容区之间的距离

1、可以单独设置某一边的内边距
padding-xxx：；
xxx：top、bottom、left、right
2、内边距padding简写
padding：；
可以设置多个值 ，以空格隔开即可
 4个值 分别对应  上    右    下    左
 3个值                上        右左    下
 2个值                上下             右左
 1个值                上下左右

四、外边距   margin

不影响盒子大小，可以改变盒子位置

1、margin-top       设置元素上外边距，如果正值元素向下移动，如果负值元素向下移动
margin-bottom     设置元素下外边距，如果正值元素自己不动，会挤下面的元素向下移动，如果负值下面的元素向上移动
margin-left              设置元素左外边距，如果正值元素向右移动，如果负值元素向左移动
margin-right           设置元素右外边距，元素是没有效果的

margin简写
可以设置多个值 ，以空格隔开即可
 4个值 分别对应  上    右    下    左
 3个值                上        右左    下
 2个值                上下             右左
 1个值                上下左右

五、水平布局

水平方向能影响到inner所占位置的因素有
margin-left      border-left      padding-left   
width   padding-right   border-right   margin-right

过度约束：
浏览器规定，元素水平方向7个值相加必须要等于其父元素内容区的宽度，如果不等于，浏览器就会进行等于，让你相等

浏览器如何调整：
1、如果水平方向7个值当中没有auto，浏览器会自动调整margin-right的值
2、7个值中，有三个值可以设置auto，margin-left   width   margin-right
①设置1个          谁是auto，浏览器就调整谁
margin-left   
width   
margin-right
②设置2个auto
margin-left   width                           调整width
width   margin-right                         调整width
margin-left    margin-right                同时调整margin-left    margin-right
③设置3个auto                                             
margin-left   width   margin-right      调整width

总结：
①如果7个值当中有auto，调整的顺序
width>margin-left    margin-right
②如果想让块元素水平方向居中，必须要width为固定值，左右外边距为auto