学编程的第十天

垂直外边距的重叠
-兄弟元素
-父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素
子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用overflow属性设置父元素如何处理溢出的子元素
可选值：
visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示
hidden 溢出的内容将会被裁剪不会显示
scroll 生成两个滚动条，通过滚动条来查看完整的内容
auto 根据需要生成滚动条

买一个冰箱 收到一个大的快递
冰箱 内容区（content）
纸箱子 边框（border）
泡沫 内边距（padding）
冰箱离你的距离 外边距（margin）

影响盒子大小的元素：内容区，边框，内边距 ，外边距不影响盒子的大小
1、自适应介绍：在以往的开发过程中，大家发现某个区域如果宽度或者高度固定好的话，当再次添加内容的时候，需要去改变宽或者高，不便利于开发和需求更改，所以在布局中需要用到宽高自适应

2、实现宽高自适应：

宽度自适应，把容器的高度设置为width:auto;或者不设置width
如果外层的宽度不设置的情况下，版心设置固定宽度，随着分辨率的改变两边的内容会自适应
容器设置了width:100%; 当脱离文档流时，由于百分比单位会根据容器的宽度作为参照，所以它的宽度会依旧起作用
高度自适应，把容器的高度设置为height:auto;或者不设置height
注意点：高度自适应，如果子元素有设置了float属性的，会发生高度塌陷问题，这个时候需要清除浮动

3、宽高自适应属性：

min-height 最小高度 一开始有一个固定的高度，随着内容的超出高度会自适应
max-height 最大高度 一开始元素的内容是自适应的，超出设置的高度内容会溢出
min-width 最小宽度 一开始有一个最小的宽度，大于最小的宽度元素是自适应的，如果小于设置的值元素大小不变
max-width 最大宽度 一开始有一个固定的宽度，当元素的宽度小于最大宽度的时候可以实现自适应
宽高自适应提供的几个属性，主要给我们多了一个判断，之前是无法做判断

4、百分比（流式）布局

内容会根据容器的大小自适应
由于百分比单位参照的是容器的属性，所以当咱们把容器的相关属性改变了子元素会跟着改变