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

整理了一些常见的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: 网页视图高度的百分之一