css面试题1

一、css

  1. 说一下css的盒模型

    在HTML中所有元素都可以看成是一个盒子

       盒子的组成： 内容content、内边距padding、边框border、外边距margin

    盒模型的类型：

      标准盒模型

        margin + border + padding + content

      IE盒模型

        margin + content(border + padding)

    控制盒模型的方式：box-sizing: border-box (IE盒模型) ; content-box (标准盒模型)

  2. css选择器的优先级？

    css的特性： 继承、优先、层叠

    优先级：写css样式时，给一个元素多种样式，谁的优先级高就显示谁

    标签、类/伪类/属性、全局、id、行内、!important

    这些选择器优先级：!important > 行内 > id > 类 > 标签 > 全局

  3. 隐藏元素的方法

    display: none;

      元素在页面上消失，不占据空间

    visibility: hidde;

      让元素隐藏，占据空间位置，处于不可见的状态

    opacity: 0;

      元素变透明，占据空间位置

    position: absolute;

      让元素处于页面外，不占据空间位置

    clip-path

      剪切元素

  4. px和rem的区别

    px是像素，在每个显示器上的px大小都是相同的

    rem是一个相对的单位，它参照的是html节点上的font-size的值,

    可以在html节点上设置font-size: 62.5%, 这样的1rem = 10px

  5. 重排与重绘的区别？

    重排（回流）：浏览器会根据所有的样式计算出盒模型在页面上的布局和大小，如果改变

                              DOM会影响到预算的几何属性，这时浏览器需要重新构造渲染树，这个                           过程称为重排

    重绘：浏览器就昂收到影响的部分重新绘制在屏幕上的过程称为重绘

    引起重排重绘的原因：

•         * 添加或删除DOM元素
•         * 元素尺寸位置改变
•         * 浏览器页面初始化
•         * 浏览器窗口大小改变

    注意：重排一定导致重绘，重绘不一定导致重排，比如改变某些元素的背景颜色，颜色等减少重排重绘的方法：

• 不在布局信息改变时做DOM查询
• 对于多次重排的元素，比如动画，使用绝对定位使其脱离文档流，不影响其他元素

  6. 元素水平居中的方式有哪些

    1. 定位 + margin

            通过设置子元素在父元素中上下左右都是0，用margin: auto来自动居中

    2. 定位 + transform

•  设置子元素在父元素中top和left都是50%，用transform的translate(-50%, -50%)实现居中
• 设置子元素在父元素中top和left都是calc(50% - 自身宽高的一半)

    3. flex布局

justify-content: center align-item: center

    4. grid布局

            justify-item： center align-item: center

    5. table布局

            display: table 子元素的行设置display: table-row, 列设置display: table-cell