css--自适应，高度塌陷解决，伪元素，iframe，双倍间距重叠问题，clac():计算函数，bfc

自适应	子元素的大小随着父元素的变化而变化
	父元素随着浏览器的大小自适应
宽度自适应	1.宽度不设置（默认100% --浏览器的大小）
	2.宽度的单位采用%
	3.width:auto;
高度自适应	1.不写高度由内容撑起来（内容不能脱离文档流）
	2.height:auto;（内容不能脱离文档流）
	3.子元素浮动，父元素添加overflow:hidden;
高度塌陷 产生原因：	子元素脱离文档流（float:left|right），父元素高度不能由子元素撑起来
解决方案：	1.父元素添加高度（缺点：高度不确定）
	2.隔墙法
	给父元素添加最后一个子元素（一般不和其他子元素标签一样）
	再给子元素清除浮动 clear:both;
	3.伪元素清除
	父元素::after{ content:"";display:block;clear:both; }
	4.父元素添加overflow:hidden;
伪元素	div::after{ content:"";--------------创建标签
	display:block;-----------创建的标签为行内标签，进行转换
	自行定义 }
	div::before{content:"";--------------创建标签
	display:block;-----------创建的标签为行内标签，进行转换
	自行定义}
	div::first-letter{----------div里内容的第一个字}
	div::first-line{----------div里内容的第一个行 }
iframe使用 作用：	iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。
语法：	规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height="" frameborder="1/0" name="iframe名称" scrolling="yes/no/auto">
	frameborder="1/0" 1代表有框架边框 /0代表无框架边框
	滚动条：scrolling="yes/no/auto" yes :有 no:无 auto：自动
	表示超链接的目标地址在框架中打开
双倍间距重叠问题 (上边) 原因：	父元素的第一个子元素添加margin-top,默认给父元素添加
解决方案：	1.给父元素添加border
	2.给父元素添加padding-top
	3.给父元素添加overflow:hidden;
下边距重叠 原因：	两个兄弟元素，第一个添加margin-bottom 第二个添加margin-top,显示按照最大值显示
解决方案：	将兄弟元素变成BFC（块级格式化上下文）
	嵌套盒子，父级overflow:hidden;
BFC:	页面中的一块渲染区域，并且这块渲染区域有一套自己的渲染规则（与浏览器渲染规则不同)
产生条件：	1.根元素（html）
	2.float:left|right---------------------脱离文档流
	3.position:absolute|fixed;-------------脱离文档流
	4.overflow属性值不为 visible,
	5.display:inline-block;
	6.display:flex;
解决问题	1.高度塌陷 overflow: hidden;
	2.双倍间距重叠问题 overflow: hidden;
	3.组织浮动元素覆盖未浮动元素
	两栏布局 三栏布局（圣杯布局，双飞翼布局）
clac():计算函数 不同单位之间的计算	运算符前后必须用空格隔开，否则出错
clear:使当前元素不受上边浮动元素的影响。清除浮动的属性是clear	语法：clear : none | left | right | both     none：默认值。允许两边都可以有浮动对象     left:当前元素不受上一个左浮动元素的影响     right:当前元素不受上一个右浮动元素的影响     both:当前元素不受上一个左右浮动元素的影响