1:主流浏览器的内核分别是什么？
IE：trident内核 [‘traidnt ]
Firefox：gecko 内核 [ˈɡekəʊ]
Safari：webkit 内核
Chrome,Opera：Blink内核(基于webkit)
2:每个HTML文件开头都有<!DOCTYPE html>，它的作用是什么
<!DOCTYPE html>
声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面）
<!DOCTYPE html>不存在或格式不正确会导致文档以混杂模式呈现
3: div+css的布局较table布局有什么优点？
（1.）.div+css布局的好处：
- 符合W3C标准，结构、样式和行为分离，代码结构清晰明了，带来足够好的可维护性。
- 布局精准，网站版面布局修改简单。
- 加快了页面的加载速度（最重要的）。
- 用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效
（2）1.table布局的好处
a.容易上手。
b.可以形成复杂的变化，简单快速。
c.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
（2）2.table布局的缺点
a、不易浏览器的搜索，seo效果不好
b、结构不清楚，修改较为麻烦
4:img的alt属性与title属性有何异同
区别一：
title ： 鼠标移入到图片显示的值
alt ： 图片无法加载时显示的值
区别二：
在seo的层面上，爬虫抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。
5:strong标签与em标签的异同
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示语音语调的强调点
6:渐进增强和优雅降级之间的不同
1. 渐进增强（progressive enhancement） [prəu'ɡresiv][ɪnˈhɑːnsmənt]
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
2. 优雅降级( graceful degradation)[ˈɡreɪsfl ,deɡrəˈdeɪʃn]
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
3. 渐进增强的观点关注内容本身
4. 优雅降级的观点更关注主流浏览器，一些特定的浏览器，除修复较大的错误外，其他的差异将会被直接忽略
7:CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:nth-of-type()
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:first-child
p:last-child
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
9:简述一下 src与 href 的区别
src 用于替换当前元素
href 用于在当前文档和引用资源之间确立联系。
Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。例如：js脚本，img图片，frame等。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也是为什么将js 脚本放在底部而不是头部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
10:网页制作会用的图片格式有哪些
Png,jpeg,gif,svg,webp,base64
png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
gif:一般是做动图的。
webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。
11:一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验
a. 图片懒加载，滚动到相应位置才加载图片。
b. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
d. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
12:以前端角度出发，有哪些注意事项有利于SEO?
(1)、维护网站，提高内容质量，保持更新
(2)、网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
(3)、控制首页链接数量,要适中
(4)、导航优化：
a:尽量采用文字方式
b:搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性
c:应该加上面包屑导航
(5)、控制页面的大小:减少http请求，提高网站的加载速度
(6)、适量的关键词和网页描述
title标题，强调重点即可，
meta keywords标签：关键词，列重要关键字即可
meta description标签：网页描述，要高度概括
(7)、body中的标签：尽量让代码语义化
a标签：页内链接，要加 “title” 属性加以说明
img应使用 “alt” 属性加以说明
strong、em标签 : 需要强调时使用
(8)、巧妙利用CSS布局
(9)、谨慎使用 display：none；
(10)、保留文字效果
13:对网页设置CSS样式的方式有哪些？
A:外部样式表，引入一个外部 css 文件
B:内部样式表，将 css 代码放在 <head> 标签内部，<style>里
C:内联样式，将 css 样式直接定义在 HTML 元素内部
14:css选择器有哪些，选择器的权重的优先级
选择器类型
(1)、ID #id
(2)、class .class
(3)、标签 p
(4)、通用 *
(5)、属性 [type="text"]
(6)、伪类 a: hover
(7)、伪元素 li: nth - child
(8)、子选择器（ul < li） 、相邻选择器（h1 + p）、后代选择器（li a）
权重计算规则
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
!important 比 内联优先级高
优先级就近原则，样式定义最近者为准,载入样式以最后载入的定位为准;
优先级比较：!important > 内联样式 > id > class > 标签 > 通配
15:css中，对DOM元素设置不显示的方式
display:none；隐藏，并且不占位 ，宽高各种属性值，都‘丢失’
visibility：hidden;隐藏，占位，仅是视觉上‘看不见’
width:0;height:0; 通过设置元素的大小使元素不显示
overflow:hidden;通过设置元素的大小使元素不显示
16:超链接访问过后，hover样式就不出现的问题是什么，如何解决
问题是：a标签的四种状态，排序出问题了？
正确排序：L-V-H-A
love hate原则，即l（link）ov（visited）e h（hover）a（active）te。
a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
17. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
(1):块级元素(block)特性：
总是独占一行；默认宽度是父元素100%，高度被内容撑开；
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
(2):内联元素(inline)特性：
宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。
(3):inline-block 元素
拥有内在尺寸，可设置高宽,但不会自动换行
常用行内块元素：<input> 、<img> 、<button> 、<texterea> 、<label>
18:什么是外边距重叠？重叠的结果是什么？
外边距重叠（ margin-collapse），在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
解决外边距重叠的问题：
1、开启元素的BFC属性，
2、在元素的前面加一个空的table
.mc::befor{
content:'',
display:table;
}
3、增加透明的边框
19:rgba()和opacity的区别
Opacity
样式名，可以进行单独设置，后面跟的样式值是0-1之间
作用于整个元素，以及元素内的所有内容的透明度(元素会继承其属性)
rgba()
样式值，写在固定样式后面的，例如背景色，字体颜色等
作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)
20. css 中可以让单行文字在垂直水平居中显示？
垂直方向：line-height 设置跟高度一致
水平方向：text-align center
21:如何水平垂直居中一个元素
方法一：.child{
height: 100px;
position: absolute;//父元素相对定位
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
方法二：.child{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:50%;
margin-top: -50px;
margin-left: -50px;
}
方法三：child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto
}
方法四：father{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
方式五
father{
width: 500px;
height: 500px;
border: 1px solid red;
/* 将元素转成表格单元格显示 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
son{
display:inline-block;
/*解决三像素问题*/
vertical-align: middle;
}
22:如何垂直居中一个img ？
方法一：<img>的容器
.img-container{
width: 500px;
height: 500px;
border: 1px solid red;
/* 将元素转成表格单元格显示 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
方法二：方法二
.img-container{
display: flex;
justify-content: center;
align-items: center;
}
23. px 和 em，rem 的区别。
px 和 em 都是长度单位，
px 的值是固定的，指定是多少就是多少，计算比较容易。
em 得值不是固定的，并且 em 相对于当前字体大小改变，若自身没有字体大小，则继承祖先元素的字体大小。
浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。
rem也是相对单位，只相对于根标签的字体大小变化而变化
24:Sass、LESS 是什么？大家为什么要使用他们？
CSS 预处理器。是 CSS 上的一种抽象层。是一种特殊的语法/语言编译成 CSS。
优势：
- CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。
25:CSS 中 link 和@import 的区别是：
- 属于 html 标签，而@import 是 CSS 中提供的
- link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，
- 是 html 标签，不存在浏览器兼容性问题
- 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）
26:简介盒子模型：
标准的 W3C 盒子模型模型 ，css为了更好的布局，将页面中所有的元素形状都统一为矩形。
盒模型包括四个方面：内容、内边距、边框、外边距（不计入盒子实际大小）
27:为什么要初始化样式？
由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同
浏览器之间的显示差异，一般引入重制样式表，常用的有resize.css,normal.css等
28. 对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。
可以解决两个相邻的盒子垂直外边距重叠的问题
开启BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex
4、overflow的值不是visible
29.html 常见兼容性问题？
浏览器默认的margin和padding
不同解决方案：
加一个全局的 *{margin:0;padding:0;} 来统一
30:常见行内元素有哪些?块级元素有哪些?
CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认 的 display 值
块级元素(默认值是‘block’) ： div p h1-h6 ul ol header main footer
行内元素(默认值是‘inline’) : a em span strong del strong
31:前端页面的基本构成，分别是?作用是?
结构层 Html
表示层 CSS
行为层 js
32:列出 display 的值，并说明他们的作用
display：
none：取消样式
block：块级元素
inline：行内元素
inline-block：行内块元素
normal：默认样式
flex：弹性布局
33:列出position的值，注意他们的定位参照原点
*absolute
生成绝对定位的元素，相对于离最近的包含块元素进行定位。
*fixed
生成固定定位的元素，相对于浏览器窗口进行定位。
* relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
* Sticky 开启粘滞定位
34:i标签与em标签和b标签与strong标签的区别
(1):b标签和strong标签都可以对文本进行加粗
(2):i标签和em标签同样也可以对文本进行倾斜
但是strong和em有强调的作用，有利于SEO（搜索引擎优化
所以日常工作中建议用strong和em标签。
35:从浏览器地址栏输入url到显示页面的步骤
浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；
浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。
36:写出常用的css传统布局
表格布局
浮动布局，
浮动布局主要采用float和clear两个属性来构建。
定位布局
position属性来实现元素的绝对定位和相对定位。
流体布局
弹性布局
37:简单描述一下什么是flex布局及常用属性说明
1、flex-direction：排列方向
flex-direction: row | row-reverse | column | column-reverse
2、flex-wrap如果一条轴线排不下，如何换行
flex-wrap: nowrap | wrap | wrap-reverse
3、flex-flow属性（上述两个组合）
flex-flow: flex-direction, flex-wrap
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4、justify-content属性（在主轴上的对齐方式）横向
justify-content: flex-start | flex-end | center | space-between | space-around
5、align-items属性（在交叉轴上如何对齐）纵向
align-items: flex-start | flex-end | center | baseline | stretch
6、flex-grow属性（放大比例，默认为0，即如果存在剩余空间，也不放大）
flex-grow: 默认为0
7、flex-shrink属性（缩小比例，默认为1，即如果空间不足，则缩小）
flex-shrink: 默认为1
8、flex-basis属性（在分配多余空间之前，项目占据的主轴空间）
flex-basis: | auto
9、flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
flex: auto; （1 1 auto）
flex: none; （0 0 auto）
38、title与h1的区别
title与h1的区别：
定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
title他是显示在网页标题上、h1是显示在网页内容上
title比h1，添加的重要 (title > h1 ) ==》对于seo的了解
场景：
网站的logo都是用h1标签包裹的
39、b与strong的区别：
定义：
b：实体标签，用来给文字加粗的。
strong：逻辑标签，用来加强字符语气内容的。
区别：
b标签只有加粗的样式，没有实际含义。
strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用该用strong就行了。
40、i与em的区别：
定义：
i:实体标签，用来做文字倾斜的。
em：是逻辑标签，用来强调文字语气的
区别：
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。
场景：
i更多的用在字体图标，em术语上（医药，生物）。
41、CSS哪些属性可以继承？
继承性
可继承： font-size font-family color line-height text-algin·····;
不可继承 ：border padding margin width height ;
42、用CSS画一个三角形
Width：0；
Height：0；
Border：50px solid yellowgreen；
border-color：transparent transparent transparent yellowgreen
43、 清除浮动有哪些方式？
1. 触发BFC
2. 多创建一个盒子，添加样式：clear: both;
3. after方式
ul:after{
content: '';
display: block;
clear: both;
}
44、css sprite是什么,有什么优缺点
通常被意译为“CSS图像拼合”或“CSS贴图定位”
1）CSS Sprites的优点
利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这也是CSS Sprites最大的优点；
CSS Sprites能减少图片的字节，曾经多次比较过，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
2）CSS Sprites的缺点
在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
CSSSprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用RIA开发了一个CSS Sprites样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。
45、 面试题：line-height和height有什么区别？
Line-height是设置行高，每一行的行高
height是设置元素高度，整个的高度
46、CSS的三大特性
CSS的三大特性：层叠性，继承性，优先级。
标签：flex,面试题,浏览器,标签,元素,html,css,CSS,属性 From： https://blog.csdn.net/weixin_59152833/article/details/143341468