常见css面试题

119 阅读3分钟

整理了一些常见的css面试题,如有问题请大家指正.鄙人不才,献丑了!

盒模型

  • 盒模型分为标准盒模型和IE盒模型,默认为标准盒模型,通过box-sizing进行调整,修改为IE盒模型为box-sizing: border-box; 修改回标准盒模型为box-sizing: content-box
  • 两者区别: 举例说明,设置一个盒子宽度为100px, padding为10px,如果是标准盒模型,整个盒子宽度为120px,IE盒模型宽度为100px.

position 定位

  • relative: 相对定位, 相对于自己原位置定位的
  • absolute: 绝对定位, 相对距离其最近的position元素进行定位
  • fixed: 相对于浏览器窗口定位
  • static: 粘性定位, 是relative和fixed的结合. 在目标区域内是相对定位,超出目标区域是固定定位

水平垂直剧中

水平居中

  • 行内元素: text-align: center
  • 块级元素
    • margin: 0 auto
    • flex: display: flex; ###  justify-content: cneter
    • 设置left和right各为0, margin: auto
       <style>
        .big{
            width: 500px;
            height: 500px;
            border: 1px solid rebeccapurple;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: red;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
    <body>
        <div class="big">
            <div class="son"></div>
        </div>
    </body>
    
    • 在子元素已知宽度时: 子元素绝对定位,left设置为50%,利用margin负值,负值为子元素宽度的一半
          .big{
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid rebeccapurple;
        }
        .son{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
            left: 50%;
            margin-left: -100px;
        }
        // HTML
         <div class="big">
            <div class="son"></div>
        </div>
    
    • 不知道子元素宽度时:
        .big{
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid rebeccapurple;
        }
        .son{
            position: absolute;
            background-color: red;
            left: 50%;
            transform: translate(-50%);
        }
          // HTML
         <div class="big">
            <div class="son">33333</div>
        </div>
    

垂直居中

  • 行内元素
    • 设置line-height等于元素高度
    • 设置padding值
  • 块级元素
    • flex: display: flex; align-items: center;
    • 设置top和bottom各为0, margin: auto.
    • 在子元素已知高度时: 子元素绝对定位,top设置为50%,利用margin负值,负值为子元素高度的一半
       .big{
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid rebeccapurple;
        }
        .son{
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: red;
            top: 50%;
            margin-top: -100px;
        }
    
    • 不知道子元素宽度时:
        .big{
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid rebeccapurple;
        }
        .son{
            position: absolute;
            background-color: red;
            top: 50%;
            transform: translate(0, -50%);
        }
          // HTML
         <div class="big">
            <div class="son">33333</div>
        </div>
    

水平垂直居中

  • 水平垂直居中是上面两个的结合.

BFC

  • 块级格式化上下文, 规定了内部的块级元素无论如何布局也不会影响外部的元素,也不会被外部元素影响
  • BFC可以解决,由于浮动导致的父元素塌陷问题以及,margin重叠问题
  • 形成BFC的原因
    • float不是none
    • position不是relative和static
    • overflow不是visible
    • display是flex或inline-block

css选择器的权重

  • !import > 内联 > id选择器 > 类选择器 > 标签选择器

回流&&重绘

  • 页面渲染过程
    • 构建DOM树
    • 样式计算
    • 布局定位
    • 图层分层
    • 图层绘制
    • 合成显示
  • 回流: 由于元素位置或大小变化,影响了其他元素,导致其他元素变化,需要从新布局定位
  • 重绘: 修改了不会影响其他节点变化的属性,比如颜色,阴影等,需要重新合成显示
  • 回流一定会导致重绘,重绘则不会导致回流
  • 减少回流,使元素脱离文档流,减少对其他元素的影响

响应式

通过rem + 媒体查询

  • rem: 相对长度单位, 相对于根元素定位的font-size
  • 通过媒体查询,设置根元素的font-size
  • 根据根元素的相对单位进行设置元素宽高
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media only screen and (max-width: 374px) {
            html {
                font-size: 86px;
            }
        }
        @media only screen and (min-width: 375px) and (max-width: 413px) {
            html {
                font-size: 100px;
            }
        }
        @media only screen and (min-width: 414px)  {
            html {
                font-size: 110px;
            }
        }
        body{
            font-size: 0.16rem;
        }
        #app {
            width: 1rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
        div1
    </div>
</body>
</html>

通过vw和vh

  • vw: 网页视图宽度的百分之一
  • vh: 网页视图高度的百分之一