css 面试题

1.盒模型宽度计算

<div class="div">123<div>
<style>
  .div{
    width: 100px;
    padding: 10px;
    border: 1px solid red;
    margin: 10px;
  }
 </style>

• offsetWidth = (内容宽度+内边距+边框)，无外边距
• 如何把offsetWidth变成100px,在后面加box-sizing: border-box;

2.margin 负值问题

• margin-top 和margin-left 负值， 元素向上，向左移动
• margin-right 负值， 右侧元素左移，自身不受影响
• margin-bottom 负值， 下方元素上移，自身不受影响

3.BFC的理解和应用

• Block format context , 块级格式上下文
• 一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

4.如何形成BFC

• float 不是none
• position 是 absolute 和 fixed
• overflow 不是 visible
• display 是flex inline-block 等

5.BFC常见的应用

• 清除浮动

6.float 布局 （圣杯布局和双飞翼布局）

• 使用float布局
• 两次使用margin负值，以便和中间内容横向重叠
• 防止中间内部被两侧覆盖，一个使用padding，一个使用margin

// 圣杯布局
     <style>
      #header,#footer  {
        text-align: center;
        background-color: #f1f1f1;
      }
      
      #container {
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
            float: left;
        }
        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left:-100%;
            right: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
            margin-right:-150px;
        }
        .clearfix:after{
          content: '';
          display: table;
          clear: both;
        }
    </style> 
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>

    <div id="footer" class="clearfix" >this is footer</div>
 // 双飞翼布局
     <div id="main" class="col">
      <div id="main-wrap">
        this is main
      </div>
    </div>
    <div id="left" class="col">this is left </div>
    <div id="right" class="col">this is right</div>
        <style> 
      #main{
        width: 100%;
        height: 200px;
        background-color: red;
      }
      #left{
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin-left: -100%;
      }
      #right{
        width: 200px;
        height: 200px;
        background-color: blue;
        margin-left:-200px;
      }

      #main-wrap{
        margin: 0 200px 0 200px;
      }

      .col{
        float: left;
      }


    </style>

7.手写clearfix

.clearfix:after{
	content:'';
	display:table;
	clear:both;
}

8.flex布局

• flex-direction //调整主轴方向
• justify-content // 设置主轴对齐方式
• align-items // 设置垂直主轴的对齐方式
• flex-wrap // 是否换行
• align-self // 子元素的对齐方式

9.line-height 继承问题

• 写具体数值，如30px， 则直接继承该值
• 写比例，如2/15，则继承该比例
• 写百分比，如200%， 则继承计算出来的值

10.响应式

• rem是一个相对的长度，相对的是根元素，通过设置font-size来定义
• @media-query
• vw/vh (vh 网页视口高度的1/100 ， vw网页视口宽度的1/100)
• window.screen.height // 屏幕宽度
• window.innerHeight //网页高度
• window.body.clientHieght //body 高度