1.代码实现左边div宽度为100px，右边自适应的布局。
（1）flex布局
<!DOCTYPE html> <html> <head> <title>代码实现左边div宽度为100px，右边自适应的布局。</title> </head> <style type="text/css"> .container{ display: flex; height: 500px; } .left{ width: 100px; background:gray; } .right{ flex: 1; background: #000; } </style> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
（2）浮动布局（必须设置宽高）
<!DOCTYPE html> <html> <head> <title>代码实现左边div宽度为100px，右边自适应的布局。</title> </head> <style type="text/css"> .container{ overflow: hidden; height: 500px; } .left{ width: 100px; float: left; height: 100%; background:gray; } .right{ width: auto; height: 100%; background: #000; } </style> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
（3）左侧使用定位，右侧不定位（或者左侧使用定位不写left：100px，右侧使用margin-left：100px）（必须设置宽高）
<!DOCTYPE html> <html> <head> <title>代码实现左边div宽度为100px，右边自适应的布局。</title> </head> <style type="text/css"> .container{ position: relative; height: 500px; } .left{ width: 100px; position: absolute; left: 0; height: 100%; background:gray; } .right{ height: 100%; background: #000; } </style> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
2.let var const 声明变量的区别
const声明一些常量，后面不允许修改。
let声明变量，块作用域，后面不能覆盖之前声明的值。
var声明变量，函数作用域,全局作用域，后面能覆盖之前声明的值。