CSS教程

CSS面试总结

本文主要是介绍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为flexinline-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 中
  • 使用 absolutefixed 使元素脱离文档流,再对其进行复杂动画效果的绘制
  • 尽量避免使用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深入理解

这篇关于CSS面试总结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!