面试内容整理 - css 篇

小伙儿爱裸睡
86 阅读3分钟

前言

最近一直在找工作，并且面试不是很顺利，过程中也暴露了自己的不足，虽然自己平时工作过程中有记录的习惯，不过一直以来都很畏惧写博客，心里总是有些包袱，觉得自己还不够，输出的东西可能会误导人，就这么自己吓自己，一吓就吓了好几年，这次面试算是一个契机，本篇总结一些面试过程中 css 的常见问题，希望可以帮到有需要的人

CSS 选择器和优先级

优先级从高到低（1、2并不属于选择器，但属于CSS样式计算的一部分）：

  1. !important
  2. style 行业样式
  3. ID 选择器
  4. · 类选择器 .foo { color: #666 }
    · 属性选择器 [foo] { color: #666 }
    · 伪类 :hover { color: #333 }
  5. 标签选择器 p {}
  6. · 通配选择器 *
    · 选择符 + > ~ 空格 ||
    · 逻辑组合伪类 :not() :is() :where

inline、block、inline-block 区别

display

css中有两个 "块级" 和 "内联" 两个盒子，块级盒子用来设置元素参与布局的规则（元素可以在一行显示，还是换行显示）；内联盒子负责宽高、内容展示等功能。通过 display 来设置元素内部和外部的显示类型（即盒子规则）以及用于子元素的布局（如 flex、grid）

block 块级元素

特点

  1. 会独占一行，并且自动填满宽度（和父元素宽度一致）
  2. 可以设置 width、height、line-height、margin 和 padding

常见的块级元素：

<div></div> <address></address> <form></form> <canvas></canvas> <form></form> <hr>
<header></header> <h1>~<h6> <p></P> <table></table>

inline 内联元素

也叫行内元素，只会占据元素本身包含的空间 特点

  1. 可以和其他元素在同一行显示
  2. 不可设置 width、height、顶部和底部的边距（margin-top、margin-bottom）
  3. 元素高度是自身内容的高度

常见的内联元素：

<a></a> <em></em> <strong></strong> <span></span> <img> <script></script> <label></label>

inline-block 内联块级元素

特点

  1. 可以和其他元素在同一行显示
  2. 可以设置 width、height、顶部和底部的边距

常见的内联块级元素：

<button></button> <input /> <textarea></textarea>

BFC 块级格式化上下文

定义：成为BFC的元素会变成一个与外界隔绝的独立容器，其内部元素的布局不会影响到外部的元素

如何成为BFC ?

  1. html 根元素
  2. float 的值不为 none
  3. overflow 的值为 auto、scroll 或 hidden
  4. display 的值为 table-cell、table-caption 和 inline-block 中的其中一个
  5. position 的值不为 relative 和 static

特点及应用

  1. BFC元素不会和外界元素发生 margin 重叠（重叠了就影响到外部元素布局了，有违定义）
  2. 清除浮动

垂直水平居中

absolute + 负 margin（需要知道子元素宽高）

绝对定位的百分比是相对于父元素的宽高，定位是基于子元素的左上角，期望效果是子元素可以居中显示，所以需要让子元素向左上方移动半个身位，利用 margin 为负值时让元素向相反方向定位来实现

.parent {
    width: 400px;
    height: 400px;
    background-color: aqua;
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    background-color: antiquewhite;
}

垂直水平居中

absolute + margin auto（需要知道子元素宽高）

.parent {
    width: 400px;
    height: 400px;
    background-color: aqua;
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: antiquewhite;
}

absolute + transform（无需知道子元素宽高）

.parent {
    width: 400px;
    height: 400px;
    background-color: aqua;
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    background-color: antiquewhite;
}

flex（无需知道子元素宽高）

.parent {
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

无需设置子元素

grid（无需知道子元素宽高）

.parent {
    width: 400px;
    height: 400px;
    display: grid;
    justify-items: center;
    align-items: center;
}

无需设置子元素

flex

一维布局模型，每次只能处理一个维度（横向或纵向）上的元素布局

子元素上的 flex

子元素上的flex属性是 flex-grow、flex-shrink、flex-basis 的缩写，flex: 1 等同于 flex：1 1 0%
flex-grow：指定了容器剩余空间多余时候的分配规则
flex-shrink：指定了容器剩余空间不足时候的分配规则
flex-basis：指定的分配基础尺寸

画 0.5px 的边框

为目标元素设置伪元素选择器并设置 border，其宽高设置为目标元素的 2 倍，再将伪元素选择器缩放为原来的一半来实现 border 的一半。（需要通过 transform-origin 设置缩放的原点，默认按元素中心缩放，即 center）

.box {
    position: relative;
    border: none;
    height: 100px;
    width: 100px;
}

.box::after {
    content: "";
    position: absolute;
    border: 1px solid #000;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
}
avatar
文章
阅读
粉丝