何为 BFC，又有什么应用场景？

BFC 其实就是块级格式化上下文，其主要就是子元素永远无法影响到父元素外面的布局。

BF 的特性:
-BFC 元素的垂直方向上会发生边距重叠。
-BFC 元素和浮动元素不会发生重叠。
-BFC 在计算高度时会把浮动元素计算进去。
-BFC 在页面是个独立的容器，里外元素互不影响。

运用场景:
一边图片，一边文字的情况

如何让一个 div 水平垂直居中

1.使用 margin

1
2
3
div {
  margin: 0 auto;
}

2.使用定位与 transfrom

1
2
3
4
5
6
7
8
9
div.parent {
  position: relative;
}
div.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

父元素的 position 必须为 relative

3.使用 flex

1
2
3
4
5
div {
  display: flex;
  justify-content: center;
  align-items: center;
}

4.使用 grid

1
2
3
4
5
6
7
div.parent {
  display: grid;
}
div.child {
  justify-self: center;
  align-self: center;
}

比较一下 opacity: 0、visibility: hidden、display: none 优劣和适用场景

1.display:none （没有 dom 结构，不能够点击） （场景：显示出原来这里不存在的结构）
2.visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开） 3.opacity: 0（占据空间，可以点击）（场景：可以跟 transition 搭配，自定义图片上传按钮）

补充:opacity:0 和 display:none，若父节点元素应用了 opacity:0 和 display:none，无论其子孙元素如何挣扎都不会再出现在大众视野；
而若父节点元素应用 visibility:hidden，子孙元素应用 visibility:visible，那么其就会毫无意外的显现出来。

已知如下代码，如何修改才能让图片宽度变为 300px？题目代码不能变

1
<img src="1.jpg" style="width:480px !important;”>

设置一个最大宽度

1
max-height: 300px;

如何解决移动端 Retina 屏 1px 像素问题

1 伪元素 + transform scaleY(.5)
2 border-image
3 background-image
4 box-shadow
如何解决 1px 问题

介绍下 BFC、IFC、GFC 和 FFC

BFC（Block formatting contexts）：块级格式上下文

BFC(Block Formatting Contexts)直译为”块级格式化上下文”。Block Formatting Contexts 就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生 BFC？

  • float 的值不为 none。
  • overflow 的值不为 visible。
  • position 的值不为 relative 和 static。
  • display 的值为 table-cell,
  • table-caption, inline-block 中的任何一个。

那 BFC 一般有什么用呢？
比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

IFC（Inline formatting contexts）：内联格式上下文

IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)
IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。float 元素会位于 IFC 与与 line box 之间，使得 line box 宽度缩短。 同个 ifc 下的多个 line box 高度会不同。 IFC 中时不可能有块级元素的，当插入块级元素时（如 p 中插入 div）会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。

那么 IFC 一般有什么用呢？
水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

GFC（GrideLayout formatting contexts）：网格布局格式化上下文

当为一个元素设置 display 值为 grid 的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。那么 GFC 有什么用呢，和 table 又有什么区别呢？首先同样是一个二维的表格，但 GridLayout 会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC（Flex formatting contexts）:自适应格式上下文

display 值为 flex 或者 inline-flex 的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少 safari 和 chrome 还是 OK 的，毕竟这俩在移动端才是王道。Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性

使用 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

//多行
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;

//兼容
p {
  position: relative;
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
}
p::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

这个兼容的方法有个问题，如果出现了数字字母这种，是否会出现盖住半个字的操作。

Js 实现方法

HTML 代码

1
<p>这是一段测试文字，this is some test text，测试文字，测试文字测</p>

js 代码

1
2
3
4
5
6
const p = document.querySelector("p");
let words = p.innerHTML.split(/(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g);
while (p.scrollHeight > p.clientHeight) {
  words.pop();
  p.innerHTML = words.join("") + "...";
}