面试 -- css

1. padding和margin的区别?

   • margin是对外的,指的是组件和组件之间的距离，padding是对内的，作用于自身的，指的是组件和组件内容的距离

2. vw和%的区别

   • %有继承关系，vw只和设备的宽度有关

3. 如何让浏览器支持小字体

   • transform:scale(0.5)

4. 三栏布局

   • 流体布局（左右浮动，中间margin撑开，注意顺序left、right、main）

          .left {
             float: left;
             height: 200px;
             width: 100px;
             background-color: red;
             }
             .right {
             width: 200px;
             height: 200px;
             background-color: blue;
             float: right;
             }
             .main {
             margin-left: 120px;
             margin-right: 220px;
             height: 200px;
             background-color: green;
             }   
             //.main {   bfc布局
             //overflow: hidden;
             //height: 200px;
             // background-color: green;
             //}
             <div class="container">
                 <div class="left"></div>
                 <div class="right"></div>
                 <div class="main"></div>
             </div>

   • 双飞翼布局(margin负值运用，先加载主体内容，left内容margin-left：-100%；right内容，margin-left：至少自身的内容)

           <style>
             .container {
             float: left;
             width: 100%;
             }
             .main {
             margin-left: 110px;
             margin-right: 220px;
             height: 200px;
             background-color: green;
             }
             .left {
             margin-left: -100vw;
             float: left;
             height: 200px;
             width: 100px;
             background-color: red;
             }
             .right {
             margin-left: -220px;
             float: right;
             width: 200px;
             height: 200px;
             background-color: blue;
             }
         </style>
         <body>
             <div class="container">
                 <div class="main"></div>
             </div>
             <div class="left"></div>
             <div class="right"></div>
         </body>

   • 圣杯布局

           <style>
             .container {
             margin-left: 120px;
             margin-right: 220px;
             }
             .main {
             float: left;
             width: 100%;
             height: 200px;
             background-color: green;
             }
             .left {
                 position: relative;//区别就是利用定位先移动左右浮动元素
                 left: -120px;
                 margin-left: -100%;
                 float: left;
                 height: 200px;
                 width: 100px;
                 background-color: red;
             }
             .right {
                 position: relative;
                 right: -220px;
                 margin-left: -220px;
                 float: right;
                 width: 200px;
                 height: 200px;
                 background-color: blue;
             }
         </style>
         <body>
         <div class="container">
             <div class="main"></div>
             <div class="left"></div>
             <div class="right"></div>
         </div>
         </body>

5. 自适应方案

   1. 百分比自适应方案,
   2. Rem + Resize

          const scaleListener = () => {
              window.addEventListener('resize', () => {
                  // 与原来 1080 的比值 
                  let scale = window.innerHeight / 1080  //动态改变对应的字体大小
                  document.documentElement.style.fontSize = `${16 * scale}px` 
                  console.log('resize')
              })
          }

   3. rem + 媒体查询, 缺陷：媒体查询有阶梯性变化，无法完全自适应
   4. vw方案