1.语义标签理解，用过那些标签
哪些标签不推荐？
语义：使用具体名字来定义标签，看起来更直观，方便搜索引擎搜索
用过那些标签：新结构性标签，header article footer
直观，提高搜索引擎的搜索效率
哪些标签不推荐：比如font frameset
2. 块级元素 和 行内元素有哪些？
块级标签：div ul li p
行内标签：span a img
怎么转换？ 定义display属性值，例如定义span display:block
3. CSS引入的位置？为什么要先初始化`css``？
一般是在head标签里面引入
css 在body里面引入
浏览器加载html文档从上往下依次加载，如果所有标签加载完了再去加载css，浏览器要再次重新渲染css，可能会造成 页面 闪一下的情况
4. link和@import的区别
两者都是外部引用
CSS的方式，但是存在一定的区别：
- 区别1：
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。- 区别2：
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。- 区别3：
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。- 区别4：
link支持使用Javascript控制DOM去改变样式；而@import不支持。
5. CSS选择器有哪些?哪些属性可以继承?优先级算法如何计算?内联和!important哪个优先级高?
标签选择符 类选择符
id选择符
文本相关的属性和列表相关的属性可以继承
继承不如指定Id>class>标签选择
后者优先级高
6. 前端页面有哪三层构成，分别是什么?作用是什么?
结构层Html表示层CSS 行为层 js
7. 几种不同的清除浮动？
clear:both;。在浮动的盒子后面新增加一个div，并给这个盒子设置clear:both;- 父级
div定义overflow:hidden;- 使用
伪类after
8. 列举 3种css伪类？
a:link定义默认的链接样式
a:hover用的最多，鼠标移上去的样式
a:visited访问过的样式
lahv
9. css中 position 属性的值 有哪些 及其含义？
absolute
生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
生成相对定位的元素，相对于其正常位置进行定位。
10. 常用的hack写法都有哪些？
举几个例子：
+background-color:pink; + 用于ie7；
background-color:orange;专门留给神奇的ie6；
面试之前提前背一下不同浏览器的渲染引擎的css的写法
-webkit-color:red;
-moz-
-ms-
11. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(trident内核) 火狐(Gecko) 谷歌(webkit) opera(Presto)
12. Background 有哪些 关联属性 及属性值？
background-color
Background-image
background-position
css 精灵
background-repeat: 值有no-repeat 还有 repeat-x repeate-y
background-size :背景尺寸（css3）
Background 复合
13. img标签上title与alt属性的区别是什么?
Alt 当图片不显示时 用文字代表。
Title 为该属性提供信息
搜索引擎优化，一定会设置一个alt
14. 解释css 精灵(sprites)，如何使用。
css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
15. 浏览器标准模式和怪异模式之间的区别是什么?
Css3 有个属性box-sizing:content-box/border-box
border和padding是否在宽度内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #cccccc;
padding: 10px;
border: 1px solid red;
box-sizing: content-box;
}
</style>
</head>
<body>
<div></div>
</body>
标准模式盒子image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: #cccccc;
padding: 10px;
border: 1px solid red;
/*box-sizing: content-box;*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
怪异模式浏览器盒子image.png
1.position的值relative和absolute定位原点是？
答案：
absolute：定位的原点是浏览器的左上角
relative：相对于父元素的左上角
思考：如果父元素相对定位，子元素绝对定位，那么子元素的原点是哪里呢？
2.行内元素有哪些？块级元素有哪些？行内元素和块级元素的区别？
答案：
行内元素：a span img input select；块级元素：div p ul h1 h2...ol dl dt；（空元素：br hr img input meta)
区别:
1.块级元素会独占一行，默认的宽度占满父级元素，行内元素不会换行；
2.行内元素的width,height无效。
3.块级元素可以设置margin和padding属性，
行内元素padding-left、padding-right、margin-left、margin-right（水平方向）有边距效果，
padding-top、padding-bottom、margin-top、margin-bottom（竖直方向）没有边距效果。
本质:浏览器将块级元素的display属性默认为block，行内元素属性默认为inline。因此行内元素与块级元素的切换可以通过修改display属性实现。
3.style标签写在body后与body前有什么区别？
答案：
页面加载自上而下 当然是先加载样式。
4.说说你对语义化的理解？
答案：
1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
GET和POST的区别？
答案：
1.GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符 2.POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，
也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
你对line-height是如何理解的？
答案：
line-height只影响行内元素，并不能直接应用于块级元素。
line-height 具有可继承性，块级元素的子元素会继承该特性，并且在行内元素上生效。
“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”。
请解释一下为什么会出现浮动和什么时候需要清除浮动？常用的清除浮动的方法有哪几种？
答案：
设置了浮动后，元素会脱离文档流，因此父容器的背景，边框，margin值都不能正常显示。因此需要清除浮动，将父容器这些属性显示正常。
常用清除方式：clear：both； overflow: auto；伪类after和before
display:inline-block 什么时候会显示间隙？(携程面试题)
答案：
（1）有空格时候会有间隙 解决：移除空格
（2）margin正值的时候 解决：margin使用负值
（3）使用font-size时候 解决：font-size:0、letter-spacing、word-spacing
margin和padding分别适合什么场景使用？
答案：
需要在border外侧添加空白时，使用margin。需要在boder内侧添加空白时，使用padding。
CSS优化、提高性能的方法有哪些？
答案：
1.对CSS文件压缩
2.尽量减少CSS文件的数量
3.样式尽可能地重用，减少CSS代码
网友评论