-loading-

2021-06-09 , 2750 , 101 , 123

听音频 🔊 . 看视频 🎦

21 HTML 标签有哪些行内元素

常见的标签有以下几种，可参考 inline element

img

picture

span

input

textarea

select

label

22 CSS如何设置一行超出显示省略号

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

23 CSS如何设置多行超出显示省略号

使用 -webkit-line-clamp 来设置多行超出显示省略号

overflow: hidden;display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

24 flex 布局中 order 有何作用

order 属性定义Flex布局中子元素的排列顺序，数值越小，排列越靠前，默认为0。

25 flex 布局中 align-content 与 align-items 有何区别

示例代码见: align-content 与 align-items

align-content 作用于纵轴多行元素，一行元素不起作用

align-items 作用于纵轴单行元素

下图，上部分为 align-content，下部分为 align-items

26 子元素垂直居中，并且长度为父容器一半的正方形

垂直居中长度为父容器一半的子元素 - Codepen

以前采用百分比撑高 padding，那这种方案已经过时，会挤压 Content 内容，无法在其中填充内容(需要绝对定位)。

可使用最新的属性 aspect-ratio，即长宽比

.container { display: grid;
place-items: center;
}.item { width: 50%;
aspect-ratio: 1/1;
}

27 简述 css 中 position 的值

static: 默认值，无定位，top、right、bottom、left 不起任何作用

relative: 相对定位

absolute: 绝对定位，脱离文档流，上下左右以最近的定位父元素为参照系

fixed: 脱离文档流，上下左右以浏览器视口为参照系

sticky: relative 与 fixed 的结合体

28 什么是 BFC

更多描述: + 它是如何生成的
它有什么作用及应用

-loading-

块级格式化上下文，Block Formatting Context

UfqiLong

29 CSS 如何实现固定长宽比的元素

过去的解决方案是使用 padding。一个元素的 padding 如若设置为百分比，则代表的是以父元素宽度为基准，根据这个原理，可设置长宽比。但实际上意义有限，毕竟你把 padding 给占了，content 无任何区域。

现代化的解决方案是使用长宽比的 CSS 属性: aspect-ratio

30 rem、em、vw、wh 的值各是什么意思

他们同属于 CSS Data Type 中的 [length]，见文档 length - MDN

rem: 根据根元素(即 html)的 font-size

em: 根据自身元素的 font-size

vw: viewport width

vh: viewport height

31 normalize.css 与 reset.css 又何区别

What is the difference between Normalize.css and Reset CSS?

normalize.css: 会保留有用的样式，比如 h1 的字体大小

reset.css: 把所有样式都重置，比如 h1、h2、h3 的字体大小都进行了重置，保持了无样式

32 line-height 的值分别取 [2, 2em, 200%] 有什么区别?

代码见: lineHeight - codepen

line-height 是相对于元素自身的字体大小来取值，但同时会被继承。在实际工作中，取值 2em 或者 200% 有可能遇到未预测的内容。

比如:

父元素: fontSize: 18px; lineHeight: 1.5em(27px，150% 同理); ，它的 lineHeight 计算下来为 27px，会被子元素继承

子元素: fontSize: 30px，子元素的 lineHeight 被继承为 27px，出现问题

以下为演示代码，见: lineHeight - codepen

lineHeight: 1.5; 这是没有问题的框框

lineHeight: 1.5; 这是没有问题的框框
lineHeight: 1.5; 这是没有问题的框框</div><div class="box red">

lineHeight: 1.5em; 这是有问题的框框

lineHeight: 1.5em; 这是有问题的框框
lineHeight: 1.5em; 这是有问题的框框</div><div class="box orange">

lineHeight: 150%; 这是有问题的框框

lineHeight: 150%; 这是有问题的框框
lineHeight: 150%; 这是有问题的框框</div>
.green { line-height: 1.5; border: solid limegreen;
}.red { line-height: 1.5em; border: solid red;
}.orange { line-height: 150%; border: solid orange;
}h1 { font-size: 30px;
}.box { width: 18em; display: inline-block; vertical-align: top; font-size: 16px;
}

-loading-

UfqiLong

33 Grid 布局的优势在哪里

响应式！

34 如何实现三列均分布局

更多描述: 布局代码如下所示，可见三列均分布局 - codepen点击预览
注: 在第一个元素中设置文字，子元素不能因文字过长而挤压。<div class="container">
<div class="item">白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</div>
<div class="item"></div>
<div class="item"></div></div>
// 以下为样式代码，非核心功能代码
* { box-sizing: border-box;
}.container { background-color: #eee; height: 10rem; width: 40rem; margin: 1rem;
}.item { border: 1px solid #888;
}

在 Issue 或者我的网站中交流与讨论: 34 如何实现三列均分布局

见代码三均分布局 - Codepen点击预览

使用 Flex

注意使用 calc(100% / 3) 设置 flex-basis，同时它的缺陷是不能够很好的为子元素设置左右间隙

.flex-container { display: flex; flex-wrap: wrap;
// gap: 1rem; .item { flex: 0 0 calc(100% / 3);
}
}
注意: 如果同时给子元素使用 flex-grow: 1 控制均分，当子元素拥有文字等内容时，会受到挤压，将无法实现均分布局。

使用 Grid

使用 Grid 直接操作容器即可，对于子元素之间的间隙也可以很好地控制，可看出 Grid 更为简单，更为高效，更为精确

.grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}

35 z-index: 999 元素一定会置于 z-index: 0 元素之上吗

代码见 zindex - codepen点击预览

不可，更复杂的示例见层叠上下文 - MDN