前端|每天5道面试题（1）

_noob
2,147 阅读4分钟

每天背5道，务必背熟记住，希望能对找工作的小前端有点帮助

1、 HTML语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

常见的语义化标签：

title：页面主体内容。

hn：h1~h6，分级标题，h1 与 title协调有利于搜索引擎优化。

ul：无序列表。

ol：有序列表。

header：页眉通常包括网站标志、主导航、全站链接以及搜索框。

nav：标记导航，仅对文档中重要的链接群使用。

main：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

article：定义外部的内容，其中的内容独立于文档的其余部分。

section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

aside：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

footer：页脚，只有当父级是body时，才是整个页面的页脚。

small：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

strong：和 em 标签一样，用于强调文本，但它强调的程度更强一些。

em：将其中的文本表示为强调的内容，表现为斜体。

mark：使用黄色突出显示部分文本。

figure：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。

figcaption：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。

cite：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

blockquoto：定义块引用，块引用拥有它们自己的空间。

q：短的引述（跨浏览器问题，尽量避免使用）。

time：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。

abbr：简称或缩写。

dfn：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

del：移除的内容。

ins：添加的内容。

code：标记代码。

meter：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）

progress：定义运行中的进度（进程）。

2、盒模型

页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置，分为W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

区别：

标准盒模型：width/height 只是内容高度，不包含 padding 和 border 值 

IE盒子模型： width/height 包含了 padding 和 border 值 

//设置标准模型 
box-sizing: content-box; 
//设置IE模型 
box-sizing: border-box;

3、BFC

块级格式化上下文（Block Formatting Context），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

IE下为 Layout，可通过 zoom:1 触发

  • 触发条件:

    • 根元素
    • position: absolute/fixed
    • display: inline-block / table
    • float 元素
    • ovevflow !== visible

  • 规则:

    • 属于同一个 BFC 的两个相邻 Box 垂直排列
    • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
    • BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
    • BFC 的区域不会与 float 的元素区域重叠
    • 计算 BFC 的高度时，浮动子元素也参与计算
    • 文字层不会被浮动层覆盖，环绕于周围

  • 应用:

    • 阻止margin重叠
    • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
    • 自适应两栏布局
    • 可以阻止元素被浮动元素覆盖

4、 居中布局

  • 水平居中

    • 行内元素: text-align: center
    • 块级元素: margin: 0 auto
    • absolute + transform
    • flex + justify-content: center

  • 垂直居中

    • line-height: height
    • absolute + transform
    • flex + align-items: center
    • table

  • 水平垂直居中

    • absolute + transform
    • flex + justify-content + align-items
    • absolute+负margin
    • absolute + auto margin
    • absolute + calc
    • table
    • flex
    • grid

5. 选择器优先级

!important > 行内样式 > #id > .class > tag > * > 继承 > 默认

本着能为找工作中的前端帮一点小忙忙，借鉴了掘金里面很多大咖的文章，如有侵权请告知

avatar
文章
阅读
粉丝