远航前端基建

Appearance

Css篇 ​

1.说说你对盒子模型的理解? ​

1.1 是什么 ​

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

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

content，即实际内容，显示文本和图像boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

上述是一个从二维的角度观察盒子，下面再看看看三维图：

下面来段代码：

html
<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">盒子模型</div>

当我们在浏览器查看元素时，却发现元素的大小变成了240px这是因为，在CSS中，盒子模型可以分成：

  • W3C 标准盒子模型

  • IE 怪异盒子模型

默认情况下，盒子模型为W3C 标准盒子模型

1.2 标准盒子模型 ​

标准盒子模型，是浏览器默认的盒子模型

下面看看标准盒子模型的模型图：

从上图可以看到：

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

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

也就是，width/height 只是内容高度，不包含 padding 和 border值所以上面问题中，设置width为200px，但由于存在padding，但实际上盒子的宽度有240px

1.3 IE 怪异盒子模型 ​

同样看看IE 怪异盒子模型的模型图：

从上图可以看到：

  • 盒子总宽度 = width + margin;

  • 盒子总高度 = height + margin;

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

1.4 Box-sizing ​

CSS 中的 box-sizing 属性定义了引擎应该如何计算一个元素的总宽度和总高度

语法：

css
box-sizing: content-box|border-box|inherit;

  • content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致

  • border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致

  • inherit 指定 box-sizing 属性的值，应该从父元素继承

回到上面的例子里，设置盒子为 border-box 模型

html
<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
<div class="box">盒子模型</div>

这时候，就可以发现盒子的所占据的宽度为200px

2. css选择器有哪些？优先级？哪些属性可以继承？ ​

2.1 选择器 ​

CSS选择器是CSS规则的第一部分

它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

选择器所选择的元素，叫做“选择器的对象”

我们从一个Html结构开始

html
<div id="box">
  <div class="one">
    <p class="one_1"></p>
    <p class="one_1"></p>
  </div>
  <div class="two"></div>
  <div class="two"></div>
  <div class="two"></div>
</div>

关于css属性选择器常用的有：

  • id选择器（#box），选择id为box的元素

  • 类选择器（.one），选择类名为one的所有元素

  • 标签选择器（div），选择标签为div的所有元素

  • 后代选择器（#box div），选择id为box元素内部所有的div元素

  • 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素

  • 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素

  • 群组选择器（div,p），选择div、p的所有元素

还有一些使用频率相对没那么多的选择器：

  • 伪类选择器
txt
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
  • 伪元素选择器
txt
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
  • 属性选择器
txt
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

在CSS3中新增的选择器有如下：

  • 层次选择器（p~ul），选择前面有p元素的每个ul元素

  • 伪类选择器

txt
:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素
  • 属性选择器
txt
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

2.2 优先级 ​

相信大家对CSS选择器的优先级都不陌生：

内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

  • 如果存在内联样式，那么 A = 1, 否则 A = 0

  • B的值等于 ID选择器出现的次数

  • C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数

  • D 的值等于 标签选择器 和 伪元素 出现的总次数

这里举个例子：

css
#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出 A B C D 的值：

  • 因为没有内联样式 ，所以 A = 0

  • ID选择器总共出现了1次， B = 1

  • 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1

  • 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

知道了优先级是如何计算之后，就来看看比较规则：

  • 从左往右依次进行比较 ，较大者优先级更高

  • 如果相等，则继续往右移动一位进行比较

  • 如果4位全部相等，则后面的会覆盖前面的

经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important

2.3 继承属性 ​

在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

关于继承属性，可以分成：

  • 字体系列属性
txt
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:偏大或偏小的字体
  • 文本系列属性
txt
text-indent：文本缩进
text-align：文本水平对刘
line-height：行高
word-spacing：增加或减少单词间的空白
letter-spacing：增加或减少字符间的空白
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
  • 元素可见性
txt
visibility
  • 表格布局属性
txt
caption-side：定位表格标题位置
border-collapse：合并表格边框
border-spacing：设置相邻单元格的边框间的距离
empty-cells：单元格的边框的出现与消失
table-layout：表格的宽度由什么决定
  • 列表属性
txt
list-style-type：文字前面的小点点样式
list-style-position：小点点位置
list-style：以上的属性可通过这属性集合
  • 引用
txt
quotes：设置嵌套引用的引号类型
  • 光标属性
txt
cursor：箭头可以变成需要的形状

继承中比较特殊的几点：

  • a 标签的字体颜色不能被继承

  • h1-h6标签字体的大下也是不能被继承的

无继承的属性 ​

  • display

  • 文本属性：vertical-align、text-decoration

  • 盒子模型的属性：宽度、高度、内外边距、边框等

  • 背景属性：背景图片、颜色、位置等

  • 定位属性：浮动、清除浮动、定位position等

  • 生成内容属性：content、counter-reset、counter-increment

  • 轮廓样式属性：outline-style、outline-width、outline-color、outline

  • 页面样式属性：size、page-break-before、page-break-afte

3. css中，有哪些方式可以隐藏页面元素？区别? ​

3.1 前言 ​

在平常的样式排版中，我们经常遇到将某个模块隐藏的场景

通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的

但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法

3.2 实现方式 ​

通过css实现隐藏元素方法有如下：

  • display:none

  • visibility:hidden

  • opacity:0

  • 设置height、width模型属性为0

  • position:absolute

  • clip-path

display:none ​

设置元素的display为none是最常用的隐藏元素的方法

css
.hide {
  display: none;
}

将元素设置为display:none后，元素在页面上将彻底消失

元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘

消失后，自身绑定的事件不会触发，也不会有过渡效果

特点：元素不可见，不占据空间，无法响应点击事件

visibility:hidden ​

设置元素的visibility为hidden也是一种常用的隐藏元素的方法

从页面上仅仅是隐藏该元素，DOM结果均会存在，只是当时在一个不可见的状态，不会触发重排，但是会触发重绘

css
.hidden {
  visibility: hidden;
}

给人的效果是隐藏了，所以他自身的事件不会触发

特点：元素不可见，占据页面空间，无法响应点击事件

opacity:0 ​

opacity属性表示元素的透明度，将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的

不会引发重排，一般情况下也会引发重绘

如果利用 animation 动画，对 opacity 做变化（animation会默认触发GPU加速），则只会触发 GPU 层面的 composite，不会触发重绘

css
.transparent {
  opacity: 0;
}

由于其仍然是存在于页面上的，所以他自身的的事件仍然是可以触发的，但被他遮挡的元素是不能触发其事件的

需要注意的是：其子元素不能设置opacity来达到显示的效果

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件

设置height、width属性为0 ​

将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素

css
.hiddenBox {
  margin: 0;
  border: 0;
  padding: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

特点：元素不可见，不占据页面空间，无法响应点击事件

position:absolute ​

将元素移出可视区域

css
.hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

特点：元素不可见，不影响页面布局

clip-path ​

通过裁剪的形式

css
.hide {
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

特点：元素不可见，占据页面空间，无法响应点击事件

小结 ​

最常用的还是display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们

3.3 区别 ​

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

display: nonevisibility: hiddenopacity: 0
页面中不存在存在存在
重排会不会不会
重绘会会不一定
自身绑定事件不触发不触发可触发
transition不支持支持支持
子元素可复原不能能不能
被遮挡的元素可触发事件能能不能

4. 谈谈你对BFC的理解？ ​

4.1 是什么 ​

我们在页面布局的时候，经常出现以下情况：

  • 这个元素高度怎么没了？

  • 这两栏布局怎么没法自适应？

  • 这两个元素的间距怎么有点奇怪的样子？

  • ......

原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

  • 内部的盒子会在垂直方向上一个接一个的放置

  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。

  • 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此

  • BFC的区域不会与float的元素区域重叠

  • 计算BFC的高度时，浮动子元素也参与计算

  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

4.2 触发条件 ​

触发BFC的条件包含不限于：

  • 根元素，即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

4.3 应用场景 ​

利用BFC的特性，我们将BFC应用在以下场景：

防止margin重叠（塌陷）

html
<style>
  p {
    color: #f55;
    background: #fcc;
    width: 200px;
    line-height: 100px;
    text-align: center;
    margin: 100px;
  }
</style>
<body>
  <p>Haha</p>
  <p>Hehe</p>
</body>

页面显示如下：

两个p元素之间的距离为100px，发生了margin重叠（塌陷），以最大的为准，如果第一个P的margin为80的话，两个P之间的距离还是100，以最大的为准。前面讲到，同一个BFC的俩个相邻的盒子的margin会发生重叠可以在p外面包裹一层容器，并触发这个容器生成一个BFC，那么两个p就不属于同一个BFC，则不会出现margin重叠

html
<style>
  .wrap {
      overflow: hidden;// 新的BFC
  }
  p {
      color: #f55;
      background: #fcc;
      width: 200px;
      line-height: 100px;
      text-align:center;
      margin: 100px;
  }
</style>
<body>
  <p>Haha</p>
  <div class="wrap">
    <p>Hehe</p>
  </div>
</body>

这时候，边距则不会重叠：

清除内部浮动

html
<style>
  .par {
    border: 5px solid #fcc;
    width: 300px;
  }

  .child {
    border: 5px solid #f66;
    width: 100px;
    height: 100px;
    float: left;
  }
</style>
<body>
  <div class="par">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

页面显示如下：

而BFC在计算高度时，浮动元素也会参与，所以我们可以触发.par元素生活才能BFC，则内部浮动元素计算高度时候也会计算

css
.par {
  overflow: hidden;
}

实现效果如下：

自适应多栏布局

这里举个两栏的布局

html
<style>
  body {
    width: 300px;
    position: relative;
  }

  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
  }

  .main {
    height: 200px;
    background: #fcc;
  }
</style>
<body>
  <div class="aside"></div>
  <div class="main"></div>
</body>

效果图如下：

前面讲到，每个元素的左外边距与包含块的左边界相接触

因此，虽然.aslide为浮动元素，但是main的左边依然会与包含块的左边相接触而BFC的区域不会与浮动盒子重叠所以我们可以通过触发main生成BFC，以此适应两栏布局

css
.main {
  overflow: hidden;
}

这时候，新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度，和.aside的宽度，自动变窄

效果如下：

小结 ​

可以看到上面几个案例，都体现了BFC实际就是页面一个独立的容器，里面的子元素不影响外面的元素

5. 什么是响应式设计？响应式设计的基本原理是什么？如何做？ ​

5.1 是什么 ​

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

描述响应式界面最著名的一句话就是“Content is like water”

大白话便是“如果将屏幕看作容器，那么内容就像水一样”

响应式网站常见特点：

  • 同时适配PC + 平板 + 手机等

  • 标签导航在接近手持终端设备时改变为经典的抽屉式导航

  • 网站的布局会根据视口来调整模块的大小和位置

5.2 实现方式 ​

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

html
<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

媒体查询 ​

CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表使用@Media查询，可以针对不同的媒体类型定义不同的样式，如：

css
@media screen and (max-width: 1920px) { ... }

当视口在375px - 600px之间，设置特定字体大小18px

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

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片

比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现

百分比 ​

通过百分比单位 " % " 来实现响应式的效果

比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果

height、width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：

  • 子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度

  • 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。

  • 子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width

  • border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

可以看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式

vw/vh ​

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。 任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一与百分比布局很相似，在以前文章提过与%的区别，这里就不再展开述说

rem ​

在以前也讲到，rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值，如下：

css
@media screen and (max-width: 414px) {
  html {
    font-size: 18px;
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px;
  }
}

为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签，内容如下：

javascript
// 动态为根元素设置字体大小
function init() {
  // 获取屏幕宽度
  let width = document.documentElement.clientWidth
  // 设置根元素字体大小。此时为宽的10等分
  document.documentElement.style.fontSize = `${width / 10}px`
}

// 首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

无论设备可视窗口如何变化，始终设置rem为width的1/10，实现了百分比布局除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格布局实现响应式

小结 ​

响应式设计实现通常会从以下几方面思考：

  • 弹性盒子（包括图片、表格、视频）和媒体查询等技术

  • 使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围

  • 使用相对单位使得内容自适应调节

  • 选择断点，针对不同断点实现不同布局和内容展示

5.3 总结 ​

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

  • 面对不同分辨率设备灵活性强

  • 能够快捷解决多设备显示适应问题

缺点：

  • 仅适用布局、信息、框架并不复杂的部门类型网站

  • 兼容各种设备工作量大，效率低下

  • 代码累赘，会出现隐藏无用的元素，加载时间加长

  • 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

  • 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况