html和css的一些问题总结以及面试题 ，点赞加关注持续更新~

1. 主流浏览器的内核分别是什么？

1. IE：trident内核 [‘traidnt ]
2. Firefox：gecko 内核?[?ɡek??]
3. Safari：webkit 内核
4. Chrome,Opera：Blink内核(基于webkit)

2. 每个HTML文件开头都有，它的作用是什么？

1. 声明位于文档中的最前面的位置，此标签告知浏览器文档使用哪种HTML或XHTMl规范（重点：告诉浏览器按照何种规范解析页面）
2. 严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行
3. 混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容
4. 不存在或格式不正确会导致文档以混杂模式呈现

3. div+css的布局较table布局有什么优点？

3.1. div+css布局的好处：

1. 符合W3C标准，结构、样式和行为分离，代码结构清晰明了，带来足够好的可维护性。
2. 布局精准，网站版面布局修改简单。
3. 加快了页面的加载速度（最重要的）。
4. 用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

3.2. table布局的好处

1. 容易上手。
2. 可以形成复杂的变化，简单快速。
3. 表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

4. img的alt属性与title属性有何异同

4.1 区别一：

title ： 鼠标移入到图片显示的值
alt ： 图片无法加载时显示的值

4.2 区别二：

​ 在seo的层面上，蜘蛛抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。

5. strong标签与em标签的异同

​ strong:粗体强调标签，强调，表示内容的重要性
​ em:斜体强调标签，更强烈强调，表示内容的强调点

6. 渐进增强和优雅降级之间的不同

6.1渐进增强（progressive enhancement）

​ 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、 交互等改进和追加功能达到更好的用户体验。

​ 渐进增强的观点关注内容本身

6.2优雅降级( graceful degradation)

​ 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

​ 优雅降级的观点更关注主流浏览器，一些特定的浏览器，除修复较大的错误外，其他的差异将会被直接忽略

7. CSS3 新增伪类举例：

1. p:first-of-type 选择属于其父元素的首个

   元素的每个

   元素。

2. p:last-of-type 选择属于其父元素的最后

   元素的每个

   元素。

3. p:only-of-type 选择属于其父元素唯一的

   元素的每个

   元素。

4. p:only-child 选择属于其父元素的唯一子元素的每个

   元素。

5. p:nth-child(2) 选择属于其父元素的第二个子元素的每个

   元素。

6. :enabled、:disabled 控制表单控件的禁用状态。
7. :checked，单选框或复选框被选中。

8. 网页标准和标准制定机构的意义

1. 网页标准的制定，使得web发展的更健康，提高网站的易用性。
2. 开发者遵循统一的标准，降低了开发难度和开发成本
3. SEO优化网页也会更加方便，不会因为滥用代码出现各种bug和安全问题。

9. 简述一下 src与 href 的区别

1. src 用于替换当前元素
2. href 用于在当前文档和引用资源之间确立联系。
3. Src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。例如：js脚本，img图片，frame等。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，这也是为什么将js 脚本放在底部而不是头部。
4. href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

10. 网页制作会用的图片格式有哪些

Png，jpeg，gif，svg，webp，webp，base64

1. png:无损压缩，尺寸体积要比jpg/jpeg的大，适合做小图标。
2. jpg:采用压缩算法，有一点失真，比png体积要小，适合做中大图片。
3. gif:一般是做动图的。
4. webp：同时支持有损或者无损压缩，相同质量的图片，webp具有更小的体积。兼容性不是特别好。

11. 微格式，前端中怎么考虑微格式

​ 微格式（Microformats）是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
作用：
​ 在捉取Web内容时，能够更为准确地识别内容块的语义；
对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和Web服务使用。
应用例子：
​ 当用手机浏览某公司的网站时，手机浏览器识别出了网页中的 hCard 信息。这个 hCard 标记了该公司的多种联络方式，手机浏览器很聪明地提示我“是否保存到通讯录”，于是我很经松地保存了我所需要的信息

12. 一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

1. 图片懒加载，滚动到相应位置才加载图片。
2. 图片预加载，如果为幻灯片、相册等，将当前展示图片的前一张和后一张优先下载。
3. 使用CSSsprite，SVGsprite，Iconfont、Base64等技术，如果图片为css图片的话。
4. 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

13. 你如何理解 HTML 结构的语义化？

1. 在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:裸奔时也好看；
2. 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
3. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
4. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），更好的方式来渲染网页；
5. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

14. 以前端角度出发，有哪些注意事项有利于SEO?

1. 维护网站，提高内容质量，保持更新

2. 网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

3. 控制首页链接数量,要适中

4. 导航优化：

   a:尽量采用文字方式

   b:搭配图片导航，但是图片代码一定要进行优化，img标签必须添加“alt”和“title”属性

   c:应该加上面包屑导航

5. 控制页面的大小:减少http请求，提高网站的加载速度

6. 适量的关键词和网页描述

   itle标题，强调重点即可，

   meta keywords标签：关键词，列重要关键字即可

   meta description标签：网页描述，要高度概括

7. (body中的标签：尽量让代码语义化

   a标签：页内链接，要加 “title” 属性加以说明

   mg应使用 “alt” 属性加以说明

   strong、em标签 : 需要强调时使用

8. 巧妙利用CSS布局

9. 谨慎使用 display：none

10. 保留文字效果

15. 对DOM设置CSS样式的方式有哪些？

1. 外部样式表，引入一个外部 css 文件
2. 内部样式表，将 css 代码放在 标签内部，

16. 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 比 内联优先级高

1. 第一等：代表内联样式，如: style=””，权值为1000。
2. 第二等：代表ID选择器，如：#content，权值为0100。
3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4. 第四等：代表标签和伪元素选择器，如div p，权值为0001。
5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6. 继承的样式没有权值。
7. 相同权重，优先级就近原则，样式定义最近者为准,载入样式以最后载入的定位为准;

17. css中，对DOM元素设置不显示的方式

1. display:none；隐藏，并且不占位 ，宽高各种属性值，都‘丢失’
2. visibility：hidden;隐藏，占位，仅是视觉上‘看不见’
3. width:0;height:0; 通过设置元素的大小使元素不显示
4. overflow:hidden;通过设置元素的大小使元素不显示

18. 超链接访问过后，link样式就不出现的问题是什么，如何解决

问题是：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 链接被点击的时刻

19. 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

1. 块级元素(block)特性：

   总是独占一行；默认宽度是父元素100%，高度被内容撑开；

   宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

2. 内联元素(inline)特性：

   宽度(width)、高度(height)、内外边距的上下都不可设置，内外边距的左右可设置，其大小就是里面文字或图片的大小。

3. 行内块(inline-block) 元素

   拥有内在尺寸，可设置高宽,但不会自动换行

4. 常用行内块元素： 、 、 、 、

20. 什么是外边距重叠？重叠的结果是什么？

1. 外边距重叠就是 margin-collapse。

2. 折叠外边距 :在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。

3. 解决外边距重叠的问题：

   开启元素的BFC属性，在元素的前面加一个空的table

21. rgba()和opacity的区别

Opacity

1. 样式名，可以进行单独设置，后面跟的样式值是0-1之间
2. 作用于整个元素，以及元素内的所有内容的透明度(元素会继承其属性)
   rgba()
3. 样式值，写在固定样式后面的，例如背景色，字体颜色等
4. 作用于元素的颜色或其背景色(设置rgba透明的元素的子元素不会继承透明效果)

22. css 中可以让文字在垂直和水平方向移动位置？

? 垂直方向：line-height 设置跟高度一致
? 水平方向：text-align center

23. 如何水平垂直居中一个元素

方法一：

.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;
}

子元素需设置

{
　　display: inline-block;
        vertical-align: middle;//消除行内块元素三像素问题
}

24. 如何垂直居中一个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;
}

25. px 和 em 的区别。

1. px 和 em 都是长度单位，

2. px 的值是固定的，指定是多少就是多少，计算比较容易。

3. em 得值不是固定的，并且 em 相对于当前字体大小改变，若自身没有字体大小，则继承祖先元素的字体大小。

4. 浏览器的默认字体高都是 16px。所以未经调整的浏览器都符合: 1em=16px。

26. Sass、LESS 是什么？大家为什么要使用他们？

? CSS 预处理器。是 CSS 上的一种抽象层。是一种特殊的语法/语言编译成 CSS。
优势：

1. 结构清晰，便于扩展。
2. 减少了重复代码的编写，增加了变量等的功能
3. 可以方便的屏蔽浏览器私有语法差异。
4. 可以轻松实现多重继承。
5. 完全兼容CSS代码，可以方便地应用到老项目中。less只是在CSS语法上做了扩展，所以老的CSS代码也可以与less代码一同编译。

27. CSS 中 link 和@import 的区别是：

• Link 属于 html 标签，而@import 是 CSS 中提供的
• 在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS ,@import 只有在 ie5 以上才可以被识别，
• link 是 html 标签，不存在浏览器兼容性问题
• Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

28. 简介盒子模型：

? 标准的 W3C 盒子模型模型 ，css为了更好的布局，将页面中所有的元素形状都统一为矩形。
盒模型包括四个方面：内容、内边距、边框、外边距（不计入盒子实际大小）

29. 为什么要初始化样式？

? 由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同
浏览器之间的显示差异，一般引入重制样式表，常用的有resize.css,normal.css等

30. 面试题：对BFC规范(块级格式化上下文：block formatting context)的理解？

? BFC（块级格式化上下文），页面上的一个隔离的独立容器，一个创建了新的 BFC 的盒子是独立布局的，盒内元素的布局不会影响盒子外面的元素。可以解决两个相邻的盒子垂直外边距重叠的问题
? 如何开启BFC？

1. float的值不是none。
2. position的值不是static或者relative。
3. display的值是inline-block、table-cell、flex
4. overflow的值不是visible

31. html 常见兼容性问题？

? 浏览器默认的margin和padding不同
? **解决方案：**加一个全局的 *{margin:0;padding:0;} 来统一

32. 对 WEB 标准以及 W3C 的理解与认识

1. 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率。

2. 使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问。

3. 更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

33. 常见行内元素有哪些?块级元素有哪些?

? CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认
的 display 值
块级元素(默认值是‘block’) ： div p h1-h6 ul ol header main footer
行内元素(默认值是‘inline’) : a em span strong del strong

34. 前端页面的基本构成，分别是?作用是?

? 结构层 Html
? 表现层 CSS
? 行为层 js

35. 列出 display 的值，并说明他们的作用

? display：
? none：取消样式
? block：块级元素
? inline：行内元素
? inline-block：行内块元素
? normal：默认样式
? flex：弹性布局

36. 列出position的值，注意他们的定位参照原点

1. absolute
   生成绝对定位的元素，相对于离最近的包含块元素进行定位。

2. fixed
   生成固定定位的元素，相对于浏览器窗口进行定位。

3. relative
   生成相对定位的元素，相对于其正常位置进行定位。

4. static

   元素出现在正常的流中
   Sticky 开启粘滞定位

37. i标签与em标签和b标签与strong标签的区别

1. b标签和strong标签都可以对文本进行加粗
2. i标签和em标签同样也可以对文本进行倾斜
3. 但是strong和em有强调的作用，有利于SEO（搜索引擎优化），所以日常工作中建议用strong和em标签。

38. 浏览器标准模式和怪异模式?

38.1. 定义：

1. 标准模式页面按照HTML,CSS的定义渲染，
2. 怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式。

38.2. 区别：

两者盒子模型 渲染模式等的不同

39. 从浏览器地址栏输入url到显示页面的步骤

1. 浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；
2. 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；
3. 浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
4. 载入解析到的资源文件，渲染页面，完成。

40. 写出常用的css传统布局

1. 表格布局
2. 浮动布局，浮动布局主要采用float和clear两个属性来构建。
3. 定位布局，position属性来实现元素的绝对定位和相对定位。
4. 流体布局（百分比布局）
5. 弹性布局

42. title与h1的区别、b与strong的区别、i与em的区别？

42.1. title与h1的区别：

定义：
title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
title他是显示在网页标题上、h1是显示在网页内容上
title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景：
网站的logo都是用h1标签包裹的

42.2. b与strong的区别：

定义：
b：实体标签，用来给文字加粗的。
strong：逻辑标签，用来加强字符语气的。
区别：
b标签只有加粗的样式，没有实际含义。
strong表示标签内字符比较重要，用以强调的。
题外话：为了符合css3的规范，b尽量少用该用strong就行了。

41. 简单描述一下什么是flex布局及常用属性说明

1. lex-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）

42.3. i与em的区别：

定义：
i:实体标签，用来做文字倾斜的。
em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实际含义。
em表示标签内字符重要，用以强调的。
场景：
i更多的用在字体图标，em术语上（医药，生物）。

43. 面试题：CSS哪些属性可以继承？

? 可继承： font-size font-family color;
? 不可继承 ：border padding margin width height ;

44. 面试题：用CSS画一个三角形

Width：0；
Height：0；
Border：50px solid yellowgreen；
border-color：transparent transparent transparent yellowgreen

45. 面试题：清除浮动有哪些方式？

45.1. 清除浮动的技巧

​ 当我们明确的知道浮动元素位置时，我们可以简单的使用clear:both。但明确的知道浮动元素位置这种情况太过理想，我们还需要在我们的工具箱中有更多的清除浮动工具。

​ 常用有：

1. Overflow
2. 伪元素:after
3. 空div标签

45.2. Overflow方法

​ 溢出overflow方法依赖父元素上设置溢出css属性。如果此属性在父元素上设置为 auto 或 hidden，父级将扩展以包含浮动，有效的为后续的元素清除浮动。这种方法也许表现的有更好的语义，因为它可能不需要额外的元素。但是，如果您发现自己添加了一个新的 div 来应用它，它与空 div 方法一样没有语义，而且适应性较差。还要记住的是，overflow属性是不是专为清除浮动，要小心，不要隐藏内容或触发不必要的滚动条。

45.3. 空div标签

​ 顾名思义，就是一个空的div标签，div标签当中不放任何东西

。有时候你可能会见到一个
标签货一些其它块级元素。不过div标签是最常见的，因为它本身不具有浏览器默认样式，没有任何特殊的语义和功能，不像p标签。不过使用这种方法会受到一些推崇HTML标签语义化开发人员的藐视，因为它的存在对页面没有任何的意义，纯粹是多余的，当然，从严格意义上讲，他们的看法是对的，不过它可以正确的完成目的并且不会影响到其它标签。

完整的描述应该是——在浮动父元素结束标签之前插入清除浮动的块级元素。假设空块级元素为

。我们还需要为其设置清楚浮动的CSS属性

.emptyClear{
    clear:both;
}

在父级元素末尾添加的元素必须是一个块级元素，否则无法撑起父级元素高度。

45.4. :after伪元素方法

​ 最简单方便的方法是使用巧妙的 CSS 伪选择器 (:after) 来清除浮动。不用在父标签设置overflow属性，而是对父元素添加一个classclearfix类，然后在CSS当中声明它就好了。

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

​ 这将会在内容中添加一个小的.从视图中隐藏，从而清除浮父元素之后。 这还不是全部，因为需要使用额外的代码来适应旧浏览器。

46. 面试题：在网页中的应该使用奇数还是偶数的字体？为什么呢？

更多使用偶数字体，一则设计师给的大部分是偶数字体，二则偶数字体容易进行文本对齐，三则浏览器渲染，比较容易渲染

47. 面试题：css sprite是什么,有什么优缺点

通常被意译为“CSS图像拼合”或“CSS贴图定位”，或者称之为”雪碧图“

47.1. CSS Sprites的优点

​ 利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这也是CSS Sprites最大的优点；CSS Sprites能减少图片的字节，曾经多次比较过，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

47.2. CSS Sprites的缺点

​ 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
CSSSprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用RIA开发了一个CSS Sprites样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！　　
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

48. 面试题：line-height和height有什么区别？

Line-height是设置行高，每一行的行高
height是设置元素高度，整个的高度