目录
垂直布局
默认情况下，块元素宽高是被内容撑开的，如果自定义，那就是你设置的宽高，如果父元素宽高设置，小于内容区，则内容就会溢出
visible 默认值 内容正常显示
hidden 裁剪多余的内容
scroll 生成双侧的滚动条
auto 按实际情况生成滚动条以上是overflow属性设置
一共有 visible, hidden scroll auto
overflow-x ：单独设置水平方向的溢出内容
overflow-y: 单独设置垂直方向的溢出内容
小任务：如何去除滚动条样式？
外边距的折叠
垂直外边距的重叠
1.兄弟元素
如果外边距都是正直的话，外边距设置谁大听谁的
如果一正一负，外边距的设置，两者相加的和
如果两个都是负值，外边距的设置，绝对值大的听谁的
注意： 兄弟元素的外边距重叠问题，一般不需要额外做处理， 它有助于我们开发
2.父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素，从而导致页面布局混乱所以必须要处理
解决方案
1.隔开父子相邻的外边距 用边框 但是边框会影响盒子的大小，也会改变页面的布局
2.开启元素BFC属性：overflow：非visible的值
内联元素的盒子
从这几点分析：内容区、内边距 、边框 、外边距
行内元素的盒模型：
1、内容区：
2、内边距
3、边框：
4、外边距
1、内容区：
默认情况下，不可以自定义内容区的大小
2、内边距
默认情况下，可以正常设置内边距，但垂直方向内边距，但它不影响整个页面的布局
3、边框：
默认情况下，可以正常设置边框，但垂直方向边框大小，不影响整个页面的布局
4、外边距
默认情况下，垂直方向的外边距，不可设置，水平方向可以设置，且水平方向的外边距不会重叠
display 设置元素的类型
none：
block
inline
inline-block
table
flex 可选值
none：隐藏元素（真正的消失，元素的位置不会保留）
block 将元素转成块元素
inline 将元素转成行内元素
inline-block 将元素转成行内块元素
table 将元素转成表格
flex 将元素转成弹性元素
visibility: ; 设置元素隐藏
可选值：
visible 默认值，元素正常显示（元素的位置还是会被保留）
hidden 设置元素隐藏
盒子的大小
默认情况下：盒子可见宽的大小由内容区，内边距，边框共同决定
box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁
可选值：
content-box 内容区 默认值
border-box 宽度和高度用来设置整个盒子可见框的大小，包括边框，padding，内容区
浮动简介
块元素在文档流 会独占一行，自上而下排列
如果设置元素浮动，元素脱离文档流后，就不会具有在文档流中的特点
float: ; 设置元素的浮动
可选值：
none 默认值，元素正常显示，不浮动
left 元素向左浮动
right 元素向右浮动
float可以使块元素水平布局
设置float浮动特点
1、设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置，就不会存在
下面的元素就会上移，挤上去
2、设置元素浮动之后，元素会尽量的向左或者向右，向上进行移动，
而且默认情况下，不会脱离父元素的范围