day10

目录

一、自适应

二、宽度自适应

三、高度自适应

四、高度塌陷

产生原因：

解决方案：

五、伪元素

六、iframe使用

1.作用

2.语法

3.frameborder

4.滚动条

5.a链接

七、双倍间距重叠问题

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

原因：

解决方案：

2.下边距重叠

原因：

解决方案：

八、BFC

概念：

BFC特性：

产生条件：

解决问题:

九、跨单位计算函数

---

---

盒模型的css属性不带height属性时，此时他属性中的overflow：hidden；作用是解决高度塌陷；带height属性时，overflow：hidden；作用是溢出隐藏或清除浮动影响

当使用宽高自适应，宽高使用百分比计算时，css语言中必须加入html，body{height：100%；}，否则下面盒模型全部无法显示，高度塌陷将无法解决

一、自适应

子元素的大小随着父元素的变化而变化

父元素随着浏览器的大小自适应

二、宽度自适应

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

2.宽度的单位采用%

3.width:auto;→还是默认是宽度100%

三、高度自适应

高度自适应，必写html，body{

height：100%；}，否则会出问题

1. 不写高度由内容撑起来（内容不能脱离文档流）
2. height:auto;（内容不能脱离文档流）
3. 子元素浮动，父元素添加overflow:hidden;

四、高度塌陷

产生原因：

子元素脱离文档流（float:left|right），父元素高度不能由子元素撑起来

解决方案：

1. 父元素添加高度（缺点：高度不确定）
2. 隔墙法：给父元素添加最后一个子元素（一般不和其他子元素标签一样），再给子元素清除浮动clear:both;
3. 伪元素清除：父元素::after{content:"";display:block;clear:both;}
4. 父元素添加overflow:hidden;（用bfc解决高度塌陷就是这个办法）

补充：display：flex；也可以

五、伪元素

1.div::after{content:"";--------------创建标签

           display:block;-----------创建的标签为行内标签，进行转换自行定义}

2.div::before{content:"";--------------创建标签

             display:block;-----------创建的标签为行内标签，进行转换自行定义}

3.div::first-letter{----------div里内容的第一个字}

4.div::first-line{----------div里内容的第一个行}

5.div::selection{=========选择用户选择的元素部分,定义文字被选中时的状态}

6.input::placeholder{========只用于表单的提示文本}

六、iframe使用

1.作用

iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载。

2.语法

<iframe  src="规定在iframe中显示的文档的URL(默认的显示页面面) "   width=""   height="" frameborder="1/0"    name="iframe名称"    scrolling="yes/auto"></iframe>

3.frameborder

frameborder="1/0"  1代表有框架边框/0代表无框架边框，默认无边框，即此处值默认为0

4.滚动条

scrolling="yes/auto"yes:有no:无auto：自动

5.a链接

<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

概念：

          BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局

          块级格式化上下文，页面中的一块渲染区域，并且这块渲染区域有一套自己的渲染规则（与浏览器渲染规则不同)

BFC特性：

1. 内部的盒子（Box）会在垂直方向上一个接一个的放置；
2. 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻的块级元素会发生margin合并，不属于同一个BFC的两个相邻的块级元素不会发生margin合并；
3. 每个盒子的左边，与包含块的左边相接触（从右往左的格式，右边缘接触）。即使存在浮动也是如此，除非产生了新的BFC；
4. BFC的区域不会与float box重叠；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素；
6. 计算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( 100% - 100px):计算函数 不同单位之间的计算，运算符前后必须用空格隔开，否则出错