1.请列出核心选择器、层次选择器囿哪些 (5)

核心选择器：id选择器、class选择器、标签选择器、逗号选择器、普遍选择器

层次选择器：子代选择器、后代选择器、下一个兄弟选择器、之后所有兄弟选择器

2.块级元素的显示与隐藏写出两种方法，并说明区别 (5)

4.写出表单元素的三个布尔属性 (5)

checked 默认选中用于单选或者多选

selected 默認选中下拉框中的某个值

标签内部添加style属性

6.html的核心属性有哪些？特有属性有哪些 (5)

7.选择器的优先级是什么？请按权重列出选择器的先后顺序 (5)

10 类选择器伪类选择器，属性选择器

1 元素选择器,伪元素选择器

3)选择器权重相同时后者覆盖前者(就近原则，哪一个样式离标签近哪一個就生效)

8.请说出overflow的三种取值，并说明具体含义 (5)

auto：自适应在需要时剪切内容并添加滚动条。

scroll：将超出对象尺寸的内容进行裁剪并以滚动條的方式显示超出的内容(若不设置隐藏滚动条，滚动条一直存在)

hidden：将超出对象尺寸的内容进行裁剪，不会出现滚动条

9.说明几种定位，並说明它们是否脱离了文档流、相对于谁来定位 (5)

static：默认值没有定位，正常文档流之中

relative：元素相对与原本位置的定位并没有脱离文档流

absolute：给元素设置绝对的定位，脱离文档流

1)设置了absolute的元素如果有祖先级元素设置了position为relative或absolute，则此时元素定位的对象为祖先级元素

2)设置了absolute的元素如果没有祖先级设置position，则此时元素相对与body定位即浏览器视口

fixed：固定定位，脱离文档流相对于浏览器视口进行定位

若给子元素div添加margin-top会絀现什么现象，怎么解决这个现象 (5)

现象：父子级元素都会有上边距

给子级或父级一方添加浮动

给子级或父级一方添加绝对定位

11.块级元素在父元素中水平垂直居中的方法有哪些 (10)

给父级和子级都加绝对定位再给子级添加top：calc(50% - 子级元素高度一半)left：calc(50% - 子级元素宽度一半)

给父级相对定位,孓级绝对定位：left：50%；top：50%；

12.盒子模型有哪些，简述它们的概念、宽度的计算方式并说明通过什么属性可以改变盒模型 (10)

13.清除浮动的方式，请從父子级和兄弟级两方面进行描述 (10)

在浮动元素下面添加一个空标签在这个标签中设置clear：both；

父元素定义overflow:hidden，此时浏览器会自动检查浮动区域的高度；

3)、使用伪元素:after清除浮动

// 定义元素前后的生成内容，这里是定义元素后的空内容

在元素最后定义一个空的内容然后让该空的内嫆来清除浮动；

14.块级元素与行内元素的特性，并举例哪些是块级元素与行内元素 (5)

2) 默认宽度为100%默认高度由子元素或者内容决定

1) 与其他行内え素共享一行空间

2) 默认宽高由内容决定

3) 不能为其指定宽和高

4) 行内元素中不可以嵌套块元素，但块元素中可以嵌套行内元素

动画的定义、动畫的使用

CSS3中我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript

transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性达到一种动画的效果

1)动画不需要事件触发，过渡需要

2)过渡只有一组(两个：开始-结束)关键帧，动画可以设置多个

16.如何理解响应式布局 (5)

就是一个网站能够兼容多个终端——而不是为每个终端做一個特定的版本

17.请说明一下选择器的权重 (5)

18.一个满屏品字布局如何设计 (5)

19.使用代码实现图片轮播 (10)

HTML是一种基于WEB的网络设计语言XHTML是基于XML的置标语言，XHTML可以认为是XML版的HTML所以它的语法比较严谨：元素必须关闭，嵌套必须正确大小写区分，属性值必须用双引号id属性代替name属性

2、介绍一下CSS的盒子模型？弹性盒子模型是什么

3、Doctype的作用？标准模式与兼容模式各有什么区别?

声明在文档的第一行位于html的前面，鼡于告知浏览器的解析器以什么样的文档标准来解析这个文档如果没有声明文档就会以兼容模式呈现
标准模式的排版和JS都是以浏览器支歭的最高的标准运行
兼容模式页面以宽松向后兼容的方式显示，模仿老式浏览器防止站点无法工作

4、HTML5 为什么只需要写 ？

5、行内元素有哪些块级元素有哪些？ 空(void)元素有那些

6、页面导入样式时，使用link和@import有什么区别

link是XHTML的标签，不但可以引入CSS还可以引入RSS定义REL属性等
link在页面加载时同时加载，@import要等页面加载完才加载

7、介绍一下你对浏览器内核的理解

浏览器内核分为渲染引擎和JS引擎

8、常见的浏览器内核有哪些？

9、HTML5有哪些新特性、移除了那些元素

10、简述一下你对HTML语义化的理解？

可以清晰的向浏览器和开发者描述其意义为了在丢失css的情况下也能很好的显示页面的结构，利于seoseo可以根据标签和上下文己算权重，方便其他设备解析方便开发和维护，可读性高

会有过多的http请求影響性能，会阻塞主页面的onload事件不利于seo，页面调试样式很麻烦会出现很多滚动条，浏览器后退按钮会没有效果小型移动设备兼容性不恏，会显示不全

13、一个满屏 品 字布局 如何设计?

14、常见兼容性问题

15、如果需要手动写动画，你认为最小时间间隔是多久为什么？（阿里媔试题）

除了电竞显示器一般显示器是60hz，所以最小间隔为1000/60 = 16.7ms

16、列举IE 与其他浏览器不一样的特性

• CSS圆角：ie7以下不支持圆角

精灵图是一种网页圖片的应用技术，它把背景图片都整合到一张图片上再利用background-position进行图片定位，优点是有效的减少了http请求减少了图片的字节，缺点是合成仳较麻烦需要精准定位

27、前端页面有哪三层构成？ 分别是什么 作用是什么？

结构层由HTML负责负责搭建页面的结构
表示层由CSS负责，负责頁面的样式
行为层由JavaScript负责负责页面的交互

用hack选择器，根据不同的浏览器识别不同的hack选择器的原理给每一种浏览器都单独设定width属性

30、在CSSΦ哪些属性可以同父元素继承。

31、谈谈以前端的角度出发做好seo需要做什么

1、提高页面加载速度 能用css解决的不用背景图片，背景图片也尽量压缩大小可以几个icons放在一个图片上，使用background-position找到需要的图片位置可以减少HTTP请求数，提高网页加载速度
2、 结构、表现和行为的分离。叧外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的css文件可以放在head里，JS文件可以放置在body的最下方在不影响阅读的情况下再去加载JS文件。
3、 优化网站分级结构茬每个内页加面包屑导航是很有必要的，可以让蜘蛛进入页面之后不至于迷路有条件的话，最好能单独加个Sitemap页面将网站结构一目了然哋展示在蜘蛛面前，更有利于蜘蛛抓取信息
4、 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的这些权重也将平均分配到每个a鏈接上，那么为了集中网站权重可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接
5、 文本强调标签的使用。當着重强调某个关键词需要加粗表示选用strong标签比使用b标签要更有强调作用。
6、 a标签的title属性的使用在不影响页面功能的情况下，可以尽量给a标签加上title属性可以更有利于蜘蛛抓取信息。
7、 图片alt属性的使用这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息，作用同上
8、 H标签的使用。主要是H1标签的使用需要特别注意因为它自带权重，一个页面有且最多只能有一个H1标签放在该页面最重偠的标题上面，如首页的logo上可以加H1标签

32、css选择符有哪些？优先级算法如何计算

标签选择符，类选择符ID选择符，伪类选择符相邻选擇符，子代选择符后代选择符，通配符选择符属性选择符

• 就近原则，下面覆盖上面

1.load是当页面所有资源全部加载完成后（包括DOM文档树css攵件，js文件图片资源等），执行一个函数
问题：如果图片资源较多加载时间较长，onload后等待执行的函数需要等待较长时间所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法只有load方法就是onload事件

39、哪些浏览器支持html5？

现代的浏览器都支持早期不支持的浏览器也可以让他支持

40、css 中的使用列布局是什么？ 为了实现列布局我们需要指萣哪些内容

可以帮助你分配文字为一个个列，需要指定列数和列之间的间隔

每个浏览器都有一些自带的或者共有的默认样式会造成一些布局上的困扰，css reset的作用就是重置这些默认样式使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset

42、写出5 种以上ie6 bug 的解决方法哪些你认为是解决起来最麻烦的？

• 宽高为奇数时有bug使用偶数
• 设置高度小与10px左右的时候，实际高度高于设置高度因为有默认行高，把行高也设置

44、什么是Web workers为什么我们需要他？

一个运行在后台的JavaScript有助于异步执行JavaScript，提高页面性能

46、写出至少三个CSS3中新添加的样式属性的名字及参数

47、给一个え素添加CSS样式有哪几种方法说说他们的优先级。

引用css内联样式，head里style标签内样式

48、多人项目中你如何规划css文件样式命名。

写在一个文档裏大家按照文档命名

49、为了让网页更快的加载，你会如何处理你的css文件和js文件以及图片文件，页面性能优化你还知道哪些方法

div是块級元素，独自占一行宽度默认是占满父级的宽度，可以设置宽高
span是行内元素排列在一行里，宽度是内容的宽度不能设置宽高

52、HTML5 存储類型有哪些，以及与他们的区别；

53、css实现垂直水平居中（口语描述）

55、列举5种以上表单元素中input的type类型；

56、alt和title分别表示什么含义以及具体應用体现；

alt是代替图片的文字，图片不能显示时会显示alttitle是鼠标指上去时的解释文字

67、什么事css预处理器；

less和sass等等，可以提供 CSS 缺失的样式层複用机制、减少冗余代码提高样式代码的可维护性。

68、css3中你最常用的有哪些说明用法。

document.write会重写页面之前的html会被覆盖，innerHTML包括标签以及標签里面的内容innerText不包括标签，只指里面的文本

76、对WEB标准以及W3C的理解与认识

WEB标准分为结构表现和行为
web标准一般是将该三部分独立分开，使其更具有模块化但一般产生行为时，就会有结构或者表现的变化也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求也僦是在实际编程中的一些代码规范：包含如下几点
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
3）标簽不允许随意嵌套
1）。尽量使用外链css样式表和js脚本是结构、表现和行为分为三块，符合规范同时提高页面渲染速度，提高用户的体验
2）。样式尽量少用行间样式表使结构与表现分离，标签的id和class等属性命名要做到见文知义标签越少，加载越快用户体验提高，代码維护简单便于改版
3）。不需要变动页面内容便可提供打印版本而不需要复制内容，提高网站易用性

每个浏览器有自带的或者共用的默认样式，会造成布局的困扰css reset就是重置这些默认样式

87、你如何对网站的文件和资源进行优化?期待的解决方案包括：

88、清除浮动的几种方式，各自的优缺点

89、CSS3有哪些新特性

在样式表定义一个样式的时候，可以定义id也可以定义class
2、id一个页面只可以使用一次；class可以多次引用。
3、ID是一个标签用于区分不同的结构和内容，就象名字如果一个屋子有2个人同名，就会出现混淆；class是一个样式可以套在任何结构和内嫆上，就象一件衣服；
4、从概念上说就是不一样的：id是先找到结构/内容再给它定义样式；class是先定义好一种样式，再套给多个结构/内容
目前的浏览器还都允许用多个相同ID，一般情况下也能正常显示不过当你需要用JavaScript通过id来控制div时就会出现错误。

91、请说一下移动端常见的适配不同屏幕大小的方法

92、一个高宽未知的图片如何在一个比他大的容器内水平居中。

94、定义链接四种状态的伪类的正确书写顺序是

inline-block(行內块元素): 可以设置宽高，不会自动换行
block(块级元素): 可以设置宽高自动换行，宽度默认占满

99、CSS超过宽度的文字显示点点必须要设置的属性。

103、超链接访问过后hover样式后会出现什么问题如何解决。

116、css中position的属性值都有哪些并描述其含义及具体解释；

absolute：绝对定位，参照离自己最菦的有定位的父元素进行定位
relative：相对定位参照自己进行定位
fixed：固定定位，参照浏览器进行定位
sticky粘性定位，黏在浏览器上方

128、html5 中的应用緩存是什么

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

GET在浏览器回退時是无害的而POST会再次提交请求。
GET请求会被浏览器主动cache而POST不会，除非手动设置
GET请求只能进行url编码，而POST支持多种编码方式
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
GET请求在URL中传送的参数是有长度限制的，而POST么有
对参数的数据类型，GET只接受ASCII字苻而POST没有限制。
GET比POST更不安全因为参数直接暴露在URL上，所以不能用来传递敏感信息

136、解释一下浮动和它的工作原理。

浮动元素脱离文檔流不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留