前端档案

# CSS

# 目录

  • [x] 1. 使用css，让一个div消失在视野中
  • [x] 2. display属性值都有哪些
  • [x] 3. 盒子水平垂直居中
  • [x] 4. CSS3盒模型
  • [x] 5. 几大经典布局
  • [x] 6. 移动端响应式布局解决方案
  • [x] 7. z-index 的工作原理
  • [x] 8. 文字垂直居中且可自适应
  • [x] 9. CSS渲染性能

# 4. position: sticky

sticky元素效果完全受制于父级元素们。

特性表现：

  1. 父级元素不能有任何overflow:visible以外的overflow设置，否则没有粘滞效果。
  2. 父级元素 同 粘性定位元素等高，则没有粘滞效果。
  3. 同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，且这些父元素正好紧密相连，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。
  4. sticky定位，可以设置 top / right / bottom / left四个值。

# 11. 如果设计中使用了非标准的字体，你该如何去实现？

所谓的标准字体是多数机器上都会有的，或者即使没有也可以由默认字体替代的字体。

方法：

  1. 用图片代替 web fonts在线字库，如Google Webfonts，Typekit等等；网页链接...；
  2. @font-face，Webfonts(字体服务例如：Google Webfonts，Typekit等等。)

# 12. 常见的浏览器兼容问题？

  1. 不同浏览器的标签默认的内.外补丁不同。*{margin:0;padding:0;}
  2. 图片默认有间距。使用float属性为img布局
  3. 居中问题（而FF默认为左对齐）。margin: 0 auto;
  4. CSS 兼容前缀
-ms- IE
-moz- Firefox
-o- Opera
-webkit- Chrome
  1. 使用CSS Hack。如： +:IE6,7的前缀，-:IE6的前缀

# 13. z-index

# 13.1 层叠上下文（stacking context）

层叠上下文是HTML中一个三维的概念。每个盒模型的位置是三维的，分别是平面画布上的 X轴，Y轴 以及表示层叠的 Z轴。离屏幕观察者更近。

# 13.2 层叠等级（stacking level）

概念：

  • 在同一个层叠上下文中，它描述定义的是该层叠上下文中的元素在 Z 轴上的上下顺序。
  • 在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。

# 13.3 层叠顺序（stacking order）

层叠顺序表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示

由此可见，前面所说的“层叠上下文”和“层叠等级”是一种概念，而这里的“层叠顺序”是一种规则。

# 14. CSS 预处理器

  • 2019年，你是否可以抛弃 CSS 预处理器？ (opens new window) CSS 预处理器 是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序。

  • Sass：2007 年诞生，最早也是最成熟的 CSS 预处理器，拥有 Ruby 社区的支持和 Compass 这一最强大的 CSS 框架，目前受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS。

  • Less：2009年出现，受 SASS 的影响较大，但又使用 CSS 的语法，比起 SASS 来，可编程功能不够，不过优点是简单和兼容 CSS，反过来也影响了 SASS 演变到了 SCSS 的时代。Bootstrap 就是采用 LESS 做底层语言的。

  • Stylus：2010 年产生，来自 Node.js 社区，主要用来给 Node 项目进行 CSS 预处理支持

  1. 优点：变量（variables），代码混合（ mixins），嵌套（nested rules）以及 代码模块化(Modules)。
  2. 缺点：
    • 额外的编译配置
    • 编译成本。每次修改代码都需要重新编译,占用时间和 CPU。
    • 学习成本。不同的 CSS 预处理器语法不同，增加学习成本

# 1. 使用css，让一个div消失在视野中？

  1. display：none;
  2. visibility：hidden;
  3. ocpacity：0;
  4. height: 0;
  5. filter: opacity(0);（不兼容IE）— filter滤镜 (opens new window)：对比度、饱和度、阴影、色相、透明度

# 2. display属性值都有哪些？

display: none、block、inline、inline-block、list-item、table、table-cell、inherit、flex......;

  • display: none
    • 使用css，让一个div消失在视野中？
    • display: none 和 visibility: hidden 的区别？
    • opacity 的兼容处理？
    • filter还能做哪些事情？
  • display: flex; — CSS3 弹性盒子(Flex Box)
    • 项目中什么时候用到了flex？
    • 还有哪些居中方式？
    • 响应式布局还可以怎么做？
    • 盒子模型都有哪些？

# 3. 盒子水平垂直居中

回答技巧：最开始xxx，喜欢用flex，后来发现xxx，在xx博客上突然发现xx更好，xx解决了兼容性（拒绝背书式）

  • 定位：三种
  • display: flex
  • JavaScript
  • display: table-cell

（1）知道具体宽高

.box {
    width: 100px;
    height: 50px;
    positon: absolute;
 top: 50%;
 left: 50%;
 margin-top: -25px;
 margin-left: -50px;
}

（2）有宽高限制

.box {
    width: 100px;
    height: 50px;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
}

（3）没有宽高限制（兼容IE9+）

.box {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

（4）Flex弹性盒模型（兼容IE10+）

.father {
 display: flex;
 justify-content: center; /* x轴 */
 align-items: center; /* y轴 */
}

（5）js实现，就是模拟css写样式

const HTML = document.documentElement,
   winW = HTML.clientWidth,
   winH = HTML.clientHeight,
   boxW = box.offsetWidth,
   boxH = box.offsetHeight;
   box.style.positon = "absolute";
   box.style.left = (winW - boxW) / 2 + "px";
   box.style.top = (winH - boxH) / 2 + "px";

（6）固定宽高

.father {
 width: 500px;
 height: 500px;
 display: table-cell;
 vertical-align: middle;
 text-align: center
    .box {
        display: inline-block;
    }
}

# 4. CSS3盒模型

标准盒模型（content-box）、IE怪异盒模型（border-box）、flex 弹性伸缩盒模型、column 多列盒模型

怪异盒模型的好处，固定到 border 控制宽高，不用重新计算 padding 和 border

Flex详见: 阮一峰的flex布局 (opens new window)

* {
    box-sizing: content-box | border-box; /* 影响因素有：content、padding、border、margin */
}

JS如何设置获取盒模型对应的宽和高

  • window.getComputedStyle(dom).width/height：兼容性更好、最优

  • dom.style.width/height：只能获取到内敛样式的宽高

  • dom.currentStyle.width/height：渲染以后的宽高，但只有IE兼容

  • dom.getBoundingClientRect().width/height：主要用于计算一个元素相对于视窗左上角的绝对位置，有4个属性：top、left、width、height

BFC- 解决边距重叠问题

BFC概念：BFC就是块级格式化上下文。

BFC原理：

  1. BFC元素的垂直方向的边距会发生重叠
  2. BFC的区域不会与浮动元素的box重叠
  3. BFC元素是一个独立的容器，与外面的元素互不影响
  4. 浮动元素也会参与计算BFC高度

解决方案，创建BFC:

  • overflow: hidden/auto;
  • position: relative; // 不为static
  • float: left | right; // 不为none
  • display: inline-block、table、table-cell等

清除浮动：父子元素同时设置float: left; 子级元素也会参与高度计算

BFC的使用场景：

  • 列表上下间距，margin: 20px auto 10px;li之间应该间距30px，但实际只有20px，按最大数值重叠了

# 5. 几大经典布局

圣杯布局、双飞翼布局 => 左右固定，中间自适应

  • 浮动 float
  • 定位：position
  • 表格：table
  • 弹性盒子模型：flex
  • 网格：grid

（1）圣杯布局：float和负margin

<div class="container clearfix">
 <div class="center"></div>
 <div class="left"></div>
 <div class="right"></div>
</div>

html,
body {
 height: 100%;
 overflow: hidden;
}
.container {
    heigth: 100%;
    padding: 0 200px;
    .left,
    .right {
        width: 200px;
        min-height: 200px;
        float: left;
    }
    .center {
        width: 100%;
        min-height: 400px;
        float: left;
    }
    .left {
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    .right {
        margin-right: -200px;
    }
}

（2）双飞翼：

<div class="clearfix">
 <div class="container">
  <div class="center"></div>
 </div>
 <div class="left"></div>
 <div class="right"></div>
</div>

html,
body {
 height: 100%;
 overflow: hidden;
}
.container,
.left,
.right {
    float: left;
}
.container {
    width: 100%;
    .center {
        min-height: 400px;
        margin: 0 200px;
    }
}
.left,
.right {
    width: 200px;
    min-height: 200px;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

（3）使用calc

/* 以下方案全部用这种布局 */
<div class="container clearfix">
 <div class="left"></div>
 <div class="center"></div>
 <div class="right"></div>
</div>

.container {
 .left,
 .center,
 .right {
  float: left;
 }
 .center {
        width: calc(100% - 400px); /* 兼容IE+，需要计算，不推荐 */
    }
}

（4）使用flex

html,
body {
 height: 100%;
 overflow: hidden;
}
.container {
 display: flex;
 justify-content: space-between;
 height: 100%;
 .left,
 .right {
  flex: 0 0 200px;
 }
 .center {
        flex: 1;
        min-height: 400px;
    }
}

（5）定位

html,
body {
 height: 100%;
 overflow: hidden;
}
.container {
 height: 100%;
 position: relative;
 .left,
 .right {
  width: 200px;
  min-height: 200px;
  position: absolute;
  top: 0;
 }
 .left {
  left: 0;
 }
 .right {
  right: 0;
 }
 .center {
        min-height: 400px;
        margin: 0 200px;
    }
}

# 6. 移动端响应式布局解决方案

  • media: 媒体查询。一套方案 —— 常用
  • rem: 应用于两套中的移动端 —— 常用
  • flex: CSS3弹性盒子，不兼容IE
  • vw/vh: 将视口分为100份

# 7. z-index 的工作原理

考察：文档流、定位

z-index 属性指定一个元素的堆叠顺序。

用法：z-index : auto | number

  1. z-index这个属性控制着元素在z轴上的表现形式。
  2. 适用范围：仅适用于定位元素，即拥有relative,absolute,fixed属性的position元素。
  3. 堆叠顺序是当前元素位于z轴上的值，数值越大说明元素的堆叠顺序越高，越靠近用户。
  4. 未定义时，后来居上，未定义z-index的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，后来的元素的z-index的值越大。
  5. 使用场景：
  • 网页两侧的浮动窗口（播放器，指定按钮，广告等）
  • 导航栏浮动置顶
  • 隐藏div实现弹窗功能（通过设置div定位和z-index控制div的位置和出现隐藏）

# 8. 文字垂直居中且可自适应

如何使一个div里面的文字垂直居中，且该文字的大小根据屏幕大小自适应？

文字大小自适应：rem方案。

  1. 设置行高：line-height：行高；text-align: center;
  2. 行内块：display: inline-block; vertical-align: center; margin: 0 auto;
  3. table：父级：display: table; 子级：display: table-cell; vertical-align: center; margin: 0 auto;
  4. 定位：position + margin + inline-block/block.
  5. flex：优选。display: flex; justify-content: center; align-items: center;

# 9. CSS渲染性能

不考虑其它因素，下面哪种的渲染性能更高？

.box a {...} /* 从右向左找，先找a，再找.box，进行了二次查找，会更慢 */
a {...} /* 更高：一次性找到 */
更新时间: 12/1/2021, 4:31:04 PM

← 问题汇总 →