04-c3新属性
- c3盒模型box-sizing
- flex布局
- transition过渡
- transform2D转换
- background-size背景缩放
- border-radius圆角
- 等等，不用都说说一些常用的就ok
05-bfc
5.1-概念
Block Formatting Context,翻译过来就是块级格式化上下文
bfc实际是一种属性，拥有这种属性后，就会让该渲染区域独立，并且该渲染区域中的内容布局不会影响到外界
5.2-如何触发
根元素(html) float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible
5.3-解决什么问题
5.3.1-外边距重叠
外边距重叠,要注意这不是bug，规范就是这样的，当两个盒子上下同时拥有上下间距，会取最大值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: hotpink; margin: 100px 0; } </style> </head> <body> <div></div> <div></div> </body> </html>
会发现两个盒子和中间只有100px
解决方案：触发bfc
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .content { width: 100px; height: 100px; background-color: hotpink; margin: 100px 0; } .box { overflow: scroll; } </style> </head> <body> <div class="box"> <div class="content"></div> </div> <div class="box"> <div class="content"></div> </div> </body> </html>
5.3.2-清除浮动
当子盒子开启float后会影响后面的布局以及盒子高度
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 500px; border: 2px dashed #000; } .content { width: 100px; height: 100px; background-color: hotpink; float: left; } </style> </head> <body> <div class="box"> <div class="content"></div> </div> <h1>213</h1> </body> </html>
5.3.3-浮动覆盖
由于浮动导致盒子被覆盖
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 500px; height: 500px; background-color: hotpink; float: left; } .box2 { width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
由于浮动导致盒子被覆盖
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 500px; height: 500px; background-color: hotpink; float: left; } .box2 { width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
解决方案：触发bfc，独立的渲染区域
