ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

CSS面试总结

2022-06-27 00:32:42  阅读：172  来源： 互联网

标签：总结 width color 元素 height 面试 background margin CSS


文章首次发表：_时雨_CSDN

1. BFC:块级格式化上下文（重点关注）

BFC基本概念:BFC是 CSS布局的一个概念，是一块独立的渲染区域(环境)，里面的元素不会影响到外部的元素。

BFC原理(渲染规则、布局规则):
(1)内部的 Box会在垂直方向，从顶部开始一个接着一个地放置;
(2)Box垂直方向的距离由 marain决定，属于同一个 BFC 的两个相邻 Box的margin 会发生重叠;
(3)每个元素的margin Box的左边，与包含块 border Box的左边相接触，(对于从左到右的格式化，否则相反)。即使存在浮动也是如此;
eg:左浮是子div的左边接触父div的borderbox的左边，右浮是子div接触父div的borderbox右边
(4)BFC在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。
BFC布局规则：
(5)BFC的区域不会与float Box重叠(即清浮动)
(6) 计算BFC的高度时，浮动元素也参与计算。

BFC触发条件(即脱离文档流)

  • 根元素，即HTML元素(最大的一个 BFC)
  • 浮动(float 的值不为none)
  • 定位(position的值为absolute或fixed)
  • 表格单元(display为table、table-cell、table-caption、inline-block等 HTML表格相关的属性 )
  • 弹性盒(display为flex或inline-flex)
  • overflow不为visible

BFC作用（应用场景）
1、自适应两(三)栏布局(避免多列布局由于宽度计算四舍五入而自动换行)
2、避免元素被浮动元素覆盖
3、让父元素的高度包含子浮动元素，清除内部浮动(原理:触发父 div的BFC属性，使下面的子 div都处在父 div的同一个BFC区域之内)
4、使用不同的BFC防止margin重叠


2. CSS盒子模型

CSS的盒子模型：标准盒子模型、IE盒子模型(怪异盒模型)
区别：
标准盒子模型宽高 = content + border + padding + margin
IE盒子模型宽高 =margin+content（content包含 border + padding ）
即标准盒子模型增大padding 、 border 就会撑大盒子，但IE盒模型则不会撑大，而是通常减小content
默认为标准盒子模型
CSS盒子模型的转换：
box-sizing: content-box; /*标准盒子模型*/
box-sizing: border-box; /*IE盒子模型*/

 <style>
      .box2 {
        margin-bottom: 10px;
        width: 100px;
        border: 20px solid black;
        height: 100px;
        background-color: red;
      }

      .box3 {
        box-sizing: border-box;
        margin-top: 10px;
        width: 100px;
          border: 20px solid black;
        height: 100px;
        background-color: blue;
      }
    </style>
    <div class="box2"></div>
    <div class="box3"></div>

3. 清除浮动

  • 给父元素单独定义高度
    优点简单，代码少 ； 缺点无法进行响应式布局
  • 给浮动元素的容器加overflow：hidden
    优点简单，兼容性较高 ； 缺点：超出部分被隐藏
  • 在浮动元素后面加一个带clear：both属性的空标签
    优点：简单代码少，兼容性较高 ； 缺点：增加无语义的空标签，不利于页面优化和后期维护
  • ：after伪元素方法（最推荐）一定要有的属性content display clear
    优点：写法固定，兼容性高 ； 缺点：代码多
<style>
    .box {
      border: 1px solid black;
      padding: 5px;
      width: 450px;
      /* overflow: hidden; 
    法二：父元素加overflow: hidden; 
     */
    }
    /* 法三：伪元素（推荐） */
    .box:after {
      content: '';
      display: block;
      height: 0;
      visibility: hidden;
      clear: both;
    }
    .left {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }
    .right {
      width: 100px;
      height: 100px;
      background-color: red;
      float: right;
    }

    /* .clean{
        clear: both;
       } */
  </style>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
      <!-- 法一：加一个标签 -->
      <!-- <div class="clean"></div> -->
    </div>
  </body>

4. 隐藏元素的方法及各自的特点

- rgba(0,0,0,0)  /*占据空间，可以响应点击事件 */
- opacity:0     /* 占据空间，可以响应点击事件 ，子元素会继承吗，在读屏软件中无法隐藏*/
- overflow：hidden   /*用来隐藏元素溢出部分，占据空间，无法响应点击事件*/
- visibility:hidden    /* 占据空间，无法点击 ：与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏*/
- transform: scale(0,0)    /* 占据空间，无法点击 */
- display：none  /*不占据空间，无法点击*/	 
- z-index:-1000 /* 不占据空间，无法点击 */
-   position：absolute;
left:-99999px;
top:-90999px;  /* 不占据空间，无法点击 */

5. line-height和heigh区别

line-height：每一行文字的高，如果文字换行则整个盒子高度会增大（高度=行数*行高）。
height：定值，即这个盒子的高度。

6. 用CSS画三角形

按要求画某一朝向的三角形，其他三个边框设为透明

<style>
    div{
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom:50px solid red;
    }
    .all{
        margin-top: 20px;
         width: 0;
        height: 0;
        border: 50px solid transparent;
        border-color: blue green purple black;
    }
</style>
<div></div>
<div class="all"></div>

在这里插入图片描述

7.圣杯布局（三栏布局方式两边固定中间自适应，与双飞翼布局解决的问题一致）

eg: 两边100px，中间自适应

  <body>
    <div class="left"></div>
     <div class="middle"></div>
    <div class="right"></div>   
  </body>
  • 使用flex布局：左右固定宽 中间 flex：1
 /* 法一：flex布局 */
body{
    display: flex;
}
.left{
width: 100px;
height: 500px;
background-color: aquamarine;
}
.middle{
flex:1;
/* 占据剩余空间 */
background-color: lightsalmon
}
.right{
width: 100px;
height: 500px;
background-color: red;
}
  • 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右 margin 值撑开距离
    <style>
    body {
      position: relative;
      margin: 0;
    }
    .left {
      position: absolute;
      width: 100px;
      height: 500px;
      background-color: aquamarine;
      left: 0;
      top: 0;
    }
    .right {
      width: 100px;
      height: 500px;
      position: absolute;
      background-color: red;
      right: 0;
      top: 0;
    }
    .middle {
      height: 500px;
      margin-left: 100px;
      margin-right: 100px;
      background-color: lightsalmon;
    }
  </style>
  • 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后
  .left {
     float: left;
      width: 100px;
      height: 500px;
      background-color: aquamarine;
    }
    .right {
      width: 100px;
      height: 500px;
     float: right;
      background-color: red;
    }
    .middle {
      height: 500px;
      background-color: lightsalmon;
    } 
  <body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">25484868</div>
  </body>
  • margin 负值法：左右两栏均左浮动，左右两栏采用负的 margin 值。中间栏被宽度为 100%的浮动元素包起来

8. 画一根0.5px的线

  • 采用meta viewport的方式（viewport只针对移动端，只在移动端上才能看到效果）
    <meta name="viewport" content="width=device-width, initial-scale=0.5"/>

-采用transform: scale()的方式

<style>
    div{
        margin: 50px;
        width: 150px;
        height: 1px;
        background-color: aqua;
        transform: scaleY(0.5);
    }
</style>
<body>
    <div></div>
</body>

9.水平 垂直居中问题

固定宽高

水平居中

  • 法一 ： margin: auto;
  div {
        width: 500px;
        height: 200px;
        background-color: blue;
        /* 法一 ： margin: auto;*/
         margin: auto;
      }
    </style>

    <div></div>
  • 父元素text-align: center;子元素display: inline-block;
 <style>
        body{
            text-align: center;
        }
        div{
             width: 500px;
            height: 200px;
            background-color: blue; 
            display: inline-block;
        }
    </style>

    <div></div>
  • Flex布局
    body{
          display: flex;
        justify-content: center;
    }
    div{
         width: 500px;
        height: 200px;
        background-color: blue; 
    }
</style>
<div></div>

垂直居中

  • 已知父元素高度，子元素相对定位并 transform:translateY(-50%);
  • 弹性盒布局，父元素 display：flex，子元素 align-self：center
  • 使用 line-height改变行高，设置子元素和父元素行高一样使内联元素居中，需要已知父元素的高度

水平垂直居中

  • 绝对定位+margin
  div{
            width: 500px;
            height: 200px;
            background-color: blue; 
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -250px;
        }
    </style>
        <div></div>
  • 绝对定位，设置四个方向值为0后margin设为auto
 div{
            width: 500px;
            height: 200px;
            background-color: blue; 
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
             margin: auto;
        } 
    </style>
        <div></div>

不固定宽高

水平垂直居中

  • 子元素相对父元素绝对定位后子元素top,left值为50%，再 transform: translate(-50%,-50%);
  • 父元素设置弹性盒子
display: flex;
justify-content: center;
align-items: center;
  • table-cell
  .parent {
    width: 200px;
    height: 150px;
    background-color: blue;
    display: table-cell;
    /* 不是行内元素无效 */
    text-align: center;
    vertical-align: middle;
  }
  .son {
    /* 转换为行内块元素防止css失效 */
    display: inline-block;
  }

10. 骰子布局

11. overflow 的原理

当元素设置了 overflow 样式且不为visible 时，该元素就构建了一个BFC。BFC 在计算高度时内部浮动元素的高度也会计算在内，故BFC 的高度不会发生坍塌，所以达到了清除浮动的目的。


12. display: none与visibility: hidden的区别

  1. 占用位置的区别
    display: none不占用位置
    visibility: hidden占用位置

  2. 重绘和回流的问题
    visibility: hidden;、 display: none; 均产生重绘
    display: none 还会产生一次回流

PS: 产生回流一定会造成重绘，但是重绘不一定会造成回流。


13. 重绘与回流

回流（重构/重排/reflow）：

定义

当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。（重排开销大）

触发条件

1.一个DOM 元素的几何属性发生变化，常见的几何属性有width、height、padding、margin、left top、 border 等

2.可见的DOM 节点添加、删除、更新

3.读写 offset 族、 scroll 族和 client 族属性时（需要通过即时计算得到）

4.字体大小改变

5.display：none

重绘

定义：
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，由于没有导致 DOM 几何属性的变化，因此元素的位置信息不需要更新，从而省去布局的过程，跳过了生成布局树和建图层树的阶段。
触发：
颜色的修改、阴影的修改等外观样式的改变

减少重绘与回流

  • 最小化重绘和重排，如样式集中改变，使用添加新样式类名.class 而不是用大量的style修改
  • 批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量再去使用，而不是频繁使用这个计算属性;或利用 document.createDocumentFragment()来添加要被添加的节点，处理完之后再插入到实际 DOM 中
  • 使用 absolute 或 fixed 使元素脱离文档流，再对其进行复杂动画效果的绘制
  • 尽量避免使用table布局
  • 开启 GPU 加速，利用 css 属性 transform、will-change 等，如改变元素位置时使用translate 比使用绝对定位改变高效，因为它不会触发重排或重绘

14. 单双冒号区别

单冒号:用于表示伪类，操作文档已有的元素，伪类一般匹配的是元素的一些特殊状态，如 hover、link等
双冒号:用于表示伪元素，会创建文档树之外的元素，伪元素一般匹配的是特殊位置，如after、before等，侧重于表达或定义不在语法定义范围内的抽象元素


15. 元素空隙原因及解决方法

原因代码中添加了空白符(空格、tab(制表符)、回车换行等)等字符引起的:
元素被当成行内元素排版的时候，元素之间的空白符(空格、tab(制表符)、回车换行等)都会被浏览器处理，根据white-space的处理方式(默认是normal，合并多余空白)，原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。

解决方案：

  • 在HTML中的标签之间不留空格，但代码可读性会变差
  • 父元素 font-size:0，子元素再单独设置字体样式
  • margin 负值
  • 设置父元素的letter-spacing属性
  • word-spacing 词间距
  • float: left

16. Css3新特性

  • Box-shadow
  • Box-radius
  • css3选择器 last-child、nth-child
  • 渐变
  • 弹性盒flex
  • 过渡、动画、2D/3D转换

17.Scoped原理

原理：
1.给HTML的DOM节点加一个不重复data属性(形如:data-v-2333a)来表示他的唯一性。
2.在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如[data-v-
2333a])来私有化样式。

优点: 实现组件的私有化，不对全局造成样式污染
缺点：父组件无法设置子组件样式
解决：使用两个style，一个用于私有样式，一个用于公共样式。


18.CSS 动画比JavaScript 动画高效的原因

通常渲染引擎生成一帧图像有三种方式：重排、重绘和合成。其中重排和重绘操作都是在渲染进程的主线程上执行的，比较耗时；而合成操作是在渲染进程的合成线程上执行的，执行速度快，且不占用主线程。
js的动画执行在主线程容易引发阻塞和等待；css的动画执行在合成线程，速度快且不阻塞主线程。


参考资料

关于CSS-BFC深入理解

标签：总结,width,color,元素,height,面试,background,margin,CSS
来源： https://www.cnblogs.com/fharry/p/16414829.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有