我的口试之旅

2024年4月27日 195次阅读 来源: specialCoder

个人的口试踩坑之旅，充溢诚意的干货~

一：本日头条

1.用css完成一个自适应的正方形
细致参考：https://idiotwu.me/css-respon…

<div class="placeholder"></div>

要领1：CSS3 vw 单元

.placeholder {
  width: 100%;
  height: 100vw;
}

长处：简约轻易
瑕玷：浏览器兼容不好

计划2：设置垂直方向的 padding 撑开容器
依据划定，margin, padding 的百分比数值是相对 父元素宽度 的宽度盘算的。

.placeholder {
  width: 100%;
  padding-bottom: 100%;
}

为了防备内容撑开容器，设置容器的高度为0

.placeholder {
  height: 0;
}

要领3：应用伪元素的 margin(padding)-top 撑开容器

.placeholder {
  width: 100%;
  overflow:hidden;
}

.placeholder:after {
  content: '';
  display: block;
  margin-top: 100%; /* margin 百分比相对父元素宽度盘算 */
}

2.什么是替代元素和非替代元素？img属于哪种？
细致参考：https://segmentfault.com/a/11…
（1）可替代元素：
可替代元素就是浏览器依据元素的标签和属性，来决议元素的详细显现内容。
比方浏览器会依据<img>标签的src属性的值来读取图片信息并显现出来，而假如检察(x)html代码，则看不到图片的现实内容；又比方依据<input>标签的type属性来决议是显现输入框，照样单选按钮等。
(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替代元素。这些元素每每没有现实的内容，等于一个空元素。
（2）不可替代元素
(x)html 的大多数元素是不可替代元素，即其内容直接表现给用户端（比方浏览器）。
比方：<p>段落的内容</p>
段落<p>是一个不可替代元素，笔墨“段落的内容”全被显现。
（3）设置元素的高度
关于块级元素：
块级元素具有height和width属性，能够经由过程他们直接设置宽和高
关于可替代的元素（行内元素）：
替代元素平常有内涵尺寸和宽高比(auto时起作用)，所以具有width和height，能够设定。
比方你不指定img的width和height时，就按其内涵尺寸显现，也就是图片被保留的时刻的宽度和高度。
关于表单元素，浏览器也有默许的款式，包括宽度和高度。
关于不可替代元素（行内元素：）
经由过程line-height属性来设置行高。
设置宽度width 无效。设置高度height无效。
设置margin只要摆布margin有用，高低无效。（这就是span的margin-top无效的缘由）
设置padding只要摆布padding有用，高低则无效。

4）**img是替代内联元素 replaced inline element，属于inline element类目。
和别的的内联元素有什么差别呢？它在盘算height/margin/width等值或在相对定位的时刻，有一些分外的划定规矩。（CSS2.1 第10章）比方设定了width但未设置height, img的height会依据比列缩放。**

3.BFC与IFC
细致参考：http://www.myronliu.com/2016/…
Formatting Contexts是W3C CSS2.1范例中的一个观点。它是页面中的一块衬着地区，而且有一套衬着划定规矩，它决议了其子元素将怎样定位，以及和其他元素的关联和相互作用。
（1）BFC
BFC(Block Formatting Contexts)直译为”块级格式化高低文”。Block Formatting Contexts就是页面上的一个断绝的衬着地区，容器内里的子元素不会在规划上影响到外面的元素,反之也是云云。

BFC构成
float 的值不为 none
position 的值不为 static 或 relative
display属性为inline-boxs、table-cells、table-captions的不是块盒的块容器(除非这个值已被传播到视口),
overflow不为visible的块盒才会为它的内容建立新的BFC。
body元素

BFC衬着划定规矩（6条）
内部的Box会在垂直方向，一个接一个地安排。
Box垂直方向的间隔由margin决议。属于同一个BFC的两个相邻Box的margin会发作堆叠
每一个元素的margin box的左侧， 与包括块border box的左侧相打仗(关于从左往右的格式化，不然相反)。纵然存在浮动也是云云。
BFC的地区不会与float box堆叠，常用来消灭浮动和规划。
BFC就是页面上的一个断绝的自力容器，容器内里的子元素不会影响到外面的元素。反之也云云。
盘算BFC的高度时，浮动元素也介入盘算

（2）IFC
IFC(Inline Formatting Contexts)直译为”内联格式化高低文”，IFC的line box（线框）高度由其包括行内元素中最高的现实高度盘算而来（不遭到竖直方向的padding/margin影响)

IFC衬着划定规矩
框会从包括块的顶部最先，一个接一个地程度摆放。
摆放这些框的时刻，它们在程度方向上的外边距、边框、内边距所占用的空间都会被斟酌在内。在垂直方向上，这些框能够会以差别情势来对齐：它们能够会把底部或顶部对齐，也能够把其内部的文本基线对齐。能把在一行上的框都完整包括进去的一个矩形地区，被称为该行的行框。程度的margin、padding、border有用，垂直无效。不能指定宽高。
行框的宽度是由包括块和存在的浮动来决议。

IFC ‘line-height’ 与 ‘vertical-align’ 属性
盘算行框里的各行内级框的高度。关于置换元素、行内块元素、行内表格元素来讲，这是边境框的高度，关于行内框来讲，这是其 ‘line-height’。
行内级元素依据其 ‘vertical-align’ 属性垂直对齐。在这些框运用 ‘top’ 或 ‘bottom’ 对齐的情况下，user-agent必需以最小化行框的高为目的对齐这些框。若这些框够高，则存在多个解而 CSS 2.1 不定义行框基线的位置。
行框的高是最顶端框的顶边到最底端框的底边的间隔。

4.正则表达式将阿拉伯数字每隔三位为一逗号星散
比方：11500000 -> 11,500,000

"11500000".split("").reverse().join("").replace(/(\d{3})(?=[^$])/g, "$1,").split("").reverse().join("");

(1). (?=[^$]) 会婚配除字符除末端一切的位置
(2). /(\d{3})(?=[^$])/ 会婚配一连的三个数字，而且这三个数字不能在字符串的末端
(3)replace(/(\d{3})/g, "$1,")，假如字符串长度刚好是三的倍数，那末了三个字符后也会加上逗号。比方 123456789.replace(/(\d{3})/g, "$1,"); // 123,456,789,
    原文作者：specialCoder
    原文地址: https://segmentfault.com/a/1190000009282869
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞