页面布局要学习三大核心：盒子模型，浮动 和 定位 ，学习好盒子模型能非常好的帮助我们布局页面
网页布局过程：
1，先准备好相关的网页元素，网页元素基本都是盒子Box
2，利用CSS设置好盒子样式，然后摆放到相应位置
3，往盒子里面装内容
border 边框? ? ? content 内容? ? ? padding 内边距（文字和盒子的距离）? ? ? margin 外边距（盒子和盒子的距离）
border可以设置元素的边框，边框有三部分组成：边框宽度（粗细） 边框样式? 边框颜色
语法：
border：
? ? ? ? border-width? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?定义边框粗细，单位是px
? ? ? ? border-style? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 边框的样式
? ? ? ? border-color? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 边框颜色
border-style： solid 实线边框? ?dashed 虚线边框? dotted 点线边框
边框简写：
border：1px? ?solid? ?red；没有顺序
?边框分开写法：
border-top：1px? ?solid? ?red； 只设定上边框，其余同理
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
border-collapse：collapse； 表示相邻边框合并在一起
collapse单词是合并的意思
边框会额外增加盒子的实际大小，因此我们有两种方案解决：
1，测量盒子大小的时候，不量边框
2，如果测量的时候包含了边框，则需要width / height减去边框宽度
padding属性用于设置内边距，即边框与内容之间的距离
属性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 作用
padding-left? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 左内边距
padding-right? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 右内边距
padding-top? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 上内边距
padding-bottom? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 下内边距
padding简写属性可以有一到四个值
值的个数? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??表达意思
padding：5px；? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1个值，代表上下左右都有5像素内边距
padding：5px? 10px；? ? ? ? ? ? ? ? ? ?2个值，代表上下内边距是5像素，左右内边距是10像素
padding：5px? 10px? 20px；? ? ? ? ?3个值，上:5像素，左右：10像素，下：20像素
padding：5px?10px? 20px 30px；?4个值,上: 5像素 右: 10像素? 下: 20像素 左: 30像素 顺时针
给盒子指定padding值之后：
1，内容和边框有了距离，添加了内边距
2，padding影响了盒子实际大小
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子
解决方案：
如果保证盒子跟效果图大小一致，则让width / height减去多出来的内边距大小即可
如果盒子本身没有指定width / height属性，则此时padding不会撑开盒子大小
margin属性用于设置外边距，即控制盒子和盒子之间的距离
? ? 属性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?作用
margin-left? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 左外边距
margin-right? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 右外边距
margin-top? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 上外边距
margin-bottom? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 下外边距
margin简写方式代表的意义跟padding完全一致
外边距典型应用：
外边距可以让块级盒子水平居中，但是必须满足两个条件
① 盒子必须指定了宽度（width）
② 盒子左右的外边距都设置为auto
div{? ?width：400px；margin：0 auto；}
?常见的写法，以下三种都可以：
margin-left：auto；? ?margin-right：auto；
margin：auto；
margin：0? auto；
注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align：center? 即可
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
主要有两种情况：
1，相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟）相遇时，如果上面的元素有下外边框margin-bottom，下面的元素有上外边框margin-top，他们之间的垂直间距则会取两个值中较大者
解决方案：
尽量给一个盒子添加margin值
2，嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案：
① 可以为父元素定义上边框
border（-top）：1px? solid? transparent；
② 可以为父元素定义上内边距
padding（-top）：1px；
③ 可以为父元素添加? overflow：hidden；
overflow：hidden；
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距
*? {
? ? ? ? padding：0；? ? ? ? ? ? ? ? 清除内边距
? ? ? ? margin：0；? ? ? ? ? ? ? ? ? 清除外边距
}
?这句话也是CSS的第一行
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了