day10宽高自适应，BFC

一、自适应

子元素的大小随着父元素的变化而变化 父元素随着浏览器的大小自适应

  1.宽度自适应

1.宽度不设置（默认100% --浏览器的大小）

2.宽度的单位采用%

3.width:auto;

  2.高度自适应

1.不写高度由内容撑起来（内容不能脱离文档流）

2.height:auto;（内容不能脱离文档流）

3.子元素浮动，父元素添加overflow:hidden;

  3.高度塌陷

  产生原因：子元素脱离文档流（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 src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height="" frameborder="1/0" name="iframe名称" scrolling="yes/no/auto"> </iframe> frameborder="1/0" 1代表有框架边框 /0代表无框架边框 滚动条：scrolling="yes/no/auto" yes :有 no:无 auto：自动 <a href="" target="iframe的name属性值"></a>表示超链接的目标地址在框架中打开

四、双倍间距重叠问题

  1.双倍间距上边距重叠问题

原因：父元素的第一个子元素添加margin-top,默认给父元素添加

解决方案：

1.给父元素添加border

2.给父元素添加padding-top

3.给父元素添加overflow:hidden;

  2.下边距重叠

  原因：两个兄弟元素，第一个添加margin-bottom 第二个添加margin-top,显示按照最大值显示

  解决方案：将兄弟元素变成BFC（块级格式化上下文） 嵌套盒子，父级overflow:hidden;

五、BFC:

页面中的一块渲染区域，并且这块渲染区域有一套自己的渲染规则（与浏览器渲染规则不同）

  1.产生条件：

1.根元素（html）

2.float:left|right---------------------脱离文档流

3.position:absolute|fixed;-------------脱离文档流

4.overflow属性值不为 visible,

5.display:inline-block;

6.display:flex;

  2.解决问题

1.高度塌陷 overflow: hidden;

2.双倍间距重叠问题 overflow: hidden;

3.阻止浮动元素覆盖未浮动元素 两栏布局 三栏布局（圣杯布局，双飞翼布局） clac():计算函数 不同单位之间的计算 运算符前后必须用空格隔开，否则出错