面试准备css篇（个人学习记录）

能不能在毕业之前拿个offer
221 阅读8分钟

1.盒子模型

是什么？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

content，即实际内容，显示文本和图像

boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响

margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

标准盒模型

image.png

从上图可以看到：

  • 盒子总宽度 = width + padding + border + margin;
  • 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border值

所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

怪异盒模型

image.png

从上图可以看到：

  • 盒子总宽度 = width + margin;
  • 盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值

2.元素水平垂直居中的方式有哪些？如果不限定宽高呢？

1.绝对定位+transform

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%); //将元素位移自己高度和宽度的-50%
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

2.flex布局

<style>
    .father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

3.利用定位+margin：auto

父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高

这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

4.定位+margin

绝大多数情况下，设置父元素为相对定位， 子元素移动自身50%实现水平垂直居中

<style>
    .father {
        position: relative;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left:-50px;
        margin-top:-50px;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<div class="father">
    <div class="son"></div>
</div>

3. 面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

两栏布局

两栏布局一般是一个以一个固定宽度的栏和一个自适应的栏并排展示存在

实现思路

  • 使用float 左浮动定宽栏
  • 右边模块使用margin-left撑出内容块做内容展示
  • 为父级元素添加BFC，防止下方元素与上方元素重叠
<style>
    .box{
        overflow: hidden; 添加BFC
    }
    .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

flex布局

实现思路：将父容器中的元素设置为flex布局，一边设置宽，另一边设置为自适应

<style>
    .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

三栏布局

实现三栏布局中间自适应的布局方式有：

  • 两边使用 float，中间使用 margin
  • 两边使用 absolute，中间使用 margin
  • 两边使用 float 和负 margin
  • display: table 实现
  • flex实现
  • grid网格布局

两边使用absolute，中间使用margin

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

<style>
  .container {
    position: relative;
  }
  
  .left,
  .right,
  .main {
    height: 200px;
    line-height: 200px;
    text-align: center;
  }

  .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background: green;
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    background: green;
  }

  .main {
    margin: 0 110px;
    background: black;
    color: white;
  }
</style>

<div class="container">
  <div class="left">左边固定宽度</div>
  <div class="right">右边固定宽度</div>
  <div class="main">中间自适应</div>
</div>

2.使用flex弹性布局

实现过程：

  • 仅需将容器设置为display:flex;，
  • 盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
  • 盒内元素的高度撑开容器的高度

优点：

  • 结构简单直观
  • 可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间
<style type="text/css">
    .wrap {
        display: flex;
        justify-content: space-between;
    }

    .left,
    .right,
    .middle {
        height: 100px;
    }

    .left {
        width: 200px;
        background: coral;
    }

    .right {
        width: 120px;
        background: lightblue;
    }

    .middle {
        background: #555;
        width: 100%;
        margin: 0 20px;
    }
</style>
<div class="wrap">
    <div class="left">左侧</div>
    <div class="middle">中间</div>
    <div class="right">右侧</div>
</div>

4.谈谈你对BFC的理解

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC解决的问题

  • 解决了margin重叠
  • 解决了父盒子塌陷的问题(子盒子设置了margin-top与父盒子间距20px，但是没有达到效果，父盒子还会往下移动20px)
  • 解决了元素被浮动元素覆盖的问题

触发条件

  • 根元素，即HTML元素
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

5.什么是重绘和回流？什么情况下会触发？

在HTML中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流与重绘：

  • 回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
  • 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

如何触发回流

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候（这避免不了）
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

如何触发重绘

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

  • 颜色的修改
  • 文本方向的修改
  • 阴影的修改

如何减少

我们了解了如何触发回流和重绘的场景，下面给出避免回流的经验：

  • 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
  • 避免设置多项内联样式
  • 应用元素的动画，使用 position 属性的 fixed 值或 absolute 值(如前文示例所提)
  • 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
  • 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
  • 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
  • 避免使用 CSS 的 JavaScript 表达式

6.什么是响应式设计，基本原理？如何做？

是什么？

响应式设计是一种网络页面设计布局，在不同设备直接，页面的布局和大小可以进行相应的调整

响应式网站常见特点：

  • 同时适配PC + 平板 + 手机等
  • 标签导航在接近手持终端设备时改变为经典的抽屉式导航
  • 网站的布局会根据视口来调整模块的大小和位置

实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, 
initial-scale=1, maximum-scale=1, user-scalable=no”>

属性对应如下：

  • width=device-width: 是自适应手机屏幕的尺寸宽度
  • maximum-scale:是缩放比例的最大值
  • inital-scale:是缩放的初始化
  • user-scalable:是用户的可以缩放的操作

实现响应式布局的方式有如下：

  • 媒体查询
  • 百分比
  • vw/vh
  • rem

媒体查询

使用@media插叙，根据屏幕的尺寸来定义不同的样式 当视口在375px - 600px之间，设置特定字体大小18px

@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

rem布局

rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px

设置跟字体的大小为窗口宽度的1/10，当大于50px时，恒等于50px


  export default{}
   document.addEventListener('DOMContentLoaded',()=>{
    const html =document.querySelector('html')
    let fontSize = window.innerWidth/10
    fontSize = fontSize>50 ? 50 : fontSize
    html.style.fontSize = fontSize+'px'
  })

总结

响应式布局优点可以看到：

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题

缺点：

  • 仅适用布局、信息、框架并不复杂的部门类型网站
  • 兼容各种设备工作量大，效率低下
  • 代码累赘，会出现隐藏无用的元素，加载时间加长
  • 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
  • 一定程度上改变了网站原有的布局结构，会出现用户混淆的情
avatar
文章
阅读
粉丝