💒首页:水香木鱼
🛫专栏：邂逅HTML
✍简介: 博主:花名 “水香木鱼”，星座"水瓶座一枚"
🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
🔋 充电：相信付出终将会得到回报!
前端基础面试题，考察前端开发人员的基本功。-面试官必备考察宝典
（1）同排序跟显示，遇到父级边界换行
（2）不支持宽高，内容撑开宽高
（3）不支持上下外边距
（4）不正常显示上下内外边距
（5）换行被解析
块标签：div、h1~h6、p、ul、ol、li【加分点：H5新增块标签 article、section、aside、nav、header、footer】
独占一行，默认宽度占满父级，高度为0，子级内容撑开高度
行内块标签：img、input、textarea
（1）同排序跟显示，遇到父级边界换行
（2）没有宽高的时候内容撑开宽高
（3）换行被解析
加分点：能够列举各自的应用场景
得分点：语义化标签有哪些？
<header>头部header>
<section>内容section>
<footer>页脚footer>
<nav>导航nav>
<article>独立内容区域article>
<aside>侧边栏aside>
<dialog>对话框dialog>
加分点：HTML语义化标签的作用？
易于用户阅读，页面结构清晰。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。
有利于开发和维护，代码更具可读性，代码更好维护。
得分点：常见的尺寸？
px、rem、em
px:绝对长度单位，它的大小取决于屏幕的分辨率，是开发网页中常常使用的单位
rem:相对长度单位，相对于根元素的字体大小，根元素字体大小未设置，使用浏览器默认字体大小
em:相对长度单位，在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width。如当前元素的字体尺寸未设置，由于字体大小可继承的原因，可逐级向上查找，最终找不到则相对于浏览器默认字体大小。
加分点1⃣️：视窗单位
vw、vh
vw：相对长度单位，相对于视窗宽度的1%。
vh：相对长度单位，相对于视窗高度的1%。
加分点2⃣️：理解rem的应用
在移动端网页开发中，页面要做成响应式的，可使用rem配合媒体查询或者flexible.js实现。
原理是通过媒体查询或者flexible.js，能够在屏幕尺寸发生改变时，重置html根元素的字体大小，页面中的元素都是使用rem为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改。
vw应用：由于vw被更多浏览器兼容之后，在做移动端响应式页面时，通常使用vw配合rem。
原理是使用vw设置根元素html字体的大小，当窗口大小发生改变，vw代表的尺寸随着修改，无需加入媒体查询和flexible.js，页面中的其他元素仍使用rem为单位，就可实现响应式。
未知宽高元素水平垂直居中方法？得分点：列出元素
position 定位
transform 动画
flex 弹性盒子
justify-content 水平
align-items 垂直
vertical-align 定义图片和文字
text-align 定义文本
加分点：标准回答
position:absolute;left:50%;right:50%，让自身平移自身高度50% transform: translate(-50%,-50%);，这种方式兼容性好，被广泛使用的一种方式。display:flex，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简洁，很多网站现在也在使用这种方式实现。display: grid，设置父级和盒子内部子元素水平垂直都居中justify-content:center; align-items:center ，这种方式代码简洁。display: table-cell，其内部元素水平垂直都居中text-align: center;vertical-align: middle; ，设置子元素为行内块display: inline-block; ，这种方式兼容性较好得分点：优先级【从高至低】
!important>行内样式>嵌入样式>外链样式>id选择器>类选择器>标签选择器>复合选择器>通配符>继承样式
加分点1⃣️：优先级分析
第一类!important，无论引入方式是什么，选择器是什么，它的优先级都是最高的。
第二类引入方式，行内样式的优先级要高于嵌入和外链，嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序，在后面插入的会覆盖前面的。
第三类选择器，选择器优先级：id选择器>（类选择器 | 伪类选择器 | 属性选择器 ）> （后代选择器 | 伪元素选择器 ）> （子选择器 | 相邻选择器） > 通配符选择器 。
第四类继承样式，是所有样式中优先级比较低的。
第五类浏览器默认样式优先级最低。
加分点2⃣️：使用!important注意事项
一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important优先级的比较指的是相同的样式属性，不同样式属性优先级比较失效
得分点：标准盒模型【box-sizing:content-box】、怪异盒模型【box-sizing:border-box】
加分点：解释一下标准盒模型、怪异盒模型?
标准模型，给盒设置 width 和height，实际设置的是 content box。padding和border再加上设置的宽高一起决定整个盒子的大小。
怪异盒模型，给盒设置 width 和 height，包含了padding和border，设置的 width 和 height就是盒子实际的大小 默认情况下，盒模型都是标准盒模型
得分点：块级格式化上下文、独立的渲染区域、不会影响边界以外的元素、形成BFC条件、float、position、overflow、display
加分点：如何清除浮动 ？
overflow:hidden
清除浮动分析
使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。
如果设置父级为display:flex，内部的浮动就会失效。
标准回答：
BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
BFC布局规则:
内部盒子会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
BFC形成的条件:
float 设置成 left 或 right
position 是absolute或者fixed
overflow 不是visible，为 auto、scroll、hidden
display是flex或者inline-block等
内联格式上下文。
IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱
网格布局格式化上下文。
当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。
自适应格式上下文
display值为flex或者inline-flex的元素将会生成自适应容器。
得分点：
opacity 作用于元素，以及元素内的所有内容的透明度
rgba()只作用于元素的颜色或其背景色
加分点：设置rgba透明的元素的子元素不会继承透明效果
得分点：所谓的 TDK 其实就是 title、description、keywords 这三个标签
title 标题标签
description 描述标签
keywords 关键词标签
加分点：说一说SEO怎么优化？
SEO>网站优化
(1)网站结构布局优化
控制首页链接的数量、扁平化的目录层次、结构布局清晰易读、控制页面文件的大小
(2)网页代码优化
语义化书写HTML代码，符合W3C标准、合理使用h1~h6标签
(3)网站性能优化
单行：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;
感谢小伙伴们，耐心的阅读完本篇文章，关注👉 水香木鱼🔔 获取更多精彩文章！
⭐⭐⭐ 别忘记一键三连呦!