、， (X)HTML中的表格不再是用来布局。
position
position有哪些属性？各自有什么特点
1.absolute 生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。
2.fixed 生成绝对定位的元素，相对于浏览器窗口进行定位(老IE不支持)。
3.relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
4.static 默认值。没有定位，元素出现在正常的流中(忽略 top, bottom, left, right z-index 声明)。
5.inherit 规定从父元素继承 position 属性的值。
绝对定位与相对定位的区别
相对定位：跟它的名一样，相对嘛，要有一个参照物，但这个参照不是别的，是它自己呢，也就是说没设相对定位的位置，那你会问了，设没设都在那个位置为什么要设呢，因为只有设置了才能使 TOP这些生效，也就是设了才能相对自己原来的位置偏移，原来的位置保留着，偏移后会把其它的层遮罩住。
绝对定位：在布局里不可能有绝对定位的，再怎么样都有一个参照位置的，绝对定位的参照位置就不像相对那样是自己了，至于是哪个，就看它的上级或上上级有没有定位了，也就是有没有position:relative;或position:fixed了，好像position:inherit;也行，前面两个可以，后面那个不设什么的不用也行，最好用position:relative;吧,转入正题，当要绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置
display有哪些值？说明他们的作用
说一个你觉得很好用的css3技能但可能比较少人知道的点。
display有哪些值？说明他们的作用
1.inline 缺省值。象行内元素类型一样显示。
2.block 象块类型元素一样显示。
3.inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
4.list-item 象块类型元素一样显示，并添加样式列表标记。
BFC
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html
http://www.html-js.com/article/1866
兼容性
常见兼容性
1. png24位的图片在iE6浏览器上出现背景
解决方案：做成PNG8，也可以引用一段脚本处理.
2. 浏览器默认的margin和padding不同
解决方案：加一个全局的 *{margin:0;padding:0;} 来统一。
3. IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。
#box{ float:left; width:10px; margin:0 0 0 10px;}
这种情况之下IE会产生20px的距离
解决方案：在float的标签样式控制中加入 display:inline; 将其转化为行内属性。( 这个符号只有ie6会识别)
4. 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用 "+" 将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;
.background-color:#00deff\9;
+background-color:#a200ff;
_background-color:#1e0bd1;
}
5.IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下,只能使用getAttribute()获取自定义属性
解决方法：统一通过getAttribute()获取自定义属性
6. IE下，event对象有 x、y 属性，但是没有 pageX、pageY属性; Firefox下，event对象有 pageX、pageY 属性，但是没有 x、y 属性
解决方法：(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
7. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
解决方法：可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
8. 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不在具有 hover 和 active 了
解决方法：改变CSS属性的排列顺序 L-V-H-A
a:link {}
a:visited {}
a:hover {}
a:active {}
9. 怪异模式问题：漏写 DTD 声明，Firefox 仍然会按照标准模式来解析网页，但在 IE 中会触发怪异模式。
为避免怪异模式给我们带来不必要的麻烦，最好养成书写 DTD 声明的好习惯。现在可以使用html5 推荐的写法：
10. 上下margin重合问题：ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法：养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。
11. ie6对png图片格式支持不好
解决方案：引用一段脚本处理
低版本浏览器不支持HTML5标签怎么解决
HTML5----IE低版本支持HTML5标签方法，css 浏览器网页兼容性
IE低版本需要支持HTML5标签：
方法1.传统引入js包
方法2.在hmtl 加入(推荐):
选择器
CSS选择器，nth-chlid(n)和nth-type(n)区别
:nth-child可以选择父元素下的字元素，:nth-of-type也可以。但是它们到底有什么区别呢？
其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，
而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
这里附上一个小例子：
zero
one
two
上面这个例子，
.demo li:nth-child(2)选择的是one节点，
而.demo li:nth-of-type(2)则选择的是two节点。
优化
SEO
网站结构布局优化
控制首页连接数量：100个以内；页面导航、底部导航等；扁平化结构：不要超过3层；
导航SEO优化：主导航、副导航；尽量用文字做导航；面包屑导航：每个网页上提供当前位置；让用户了解网站形式；
细节问题：内容页面布局
@@@LOGO及导航
@@@面包屑导航
@@@正文
@@@热门文章/相关文章
@@@版权信息及友情连接
@@@首页1 2 3 4 5 6 7 8 9 10 V下拉选择页面大小不要超过100K
网页代码优化(语义化代码)
A、title标题：强调重点
B、meta keywords关键词：列举几个关键词
C、meta description网页描述：高度概括网页的内容
以上信息不要堆积、重复
语义话代码(HTML 标签有自己的意义，在适当的位置用适当的标签)
1、h1~h6 多用于标题
2、ul 多用于无序列表
3、ol 多用于有序列表
4、dl 用于定义数据列表
5、em、strong 表示强调
div、span 是 html 标签中最没有语义的
有利搜索引擎
1、a：访问外部链接时要加上 rel="nofollow"，告诉搜索引擎外部链接无需追踪，加上 title 说明
2、h1：搜索引擎外认为 h1 最重要，使用 css 调整，网页正文标题用 h1，副标题用 h2，其他不要乱用 h 标签
3、br 用于文本间的换行，用在 p 内，也可以用
表示空行
4、caption：表格标题
5、img：使用 title、alt 说明
6、
表示强调，
的权重仅次于
,如果只想表示加粗斜体，建议使用
,表示强调则使用
7、重要内容 HTML 代码放在最前面(使用 css 改变布局)
8、重要内容不要用 JS 输出(搜索引擎看不懂 JS)
9、尽量少使用 iframe 框架(搜索引擎不喜欢)
10、谨慎使用 display:none(搜索引擎会过滤掉其内容，设置 z-index 代替)
11、精简代码
请列举减少HTTP请求数和资源文件大小的方法
前端优化
(1)、减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
(2)、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
(3)、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
(4)、当需要设置的样式很多时设置className而不是直接操作style。
(5)、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6)、避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7)、图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
回答二：
(1)、减少HTTP请求次数
(2)、使用CDN
(3)、避免空的src和href
(4)、为文件头指定Expires
(5)、使用gzip压缩内容
(6)、把CSS放到顶部
(7)、把JS放到底部
(8)、避 免使用CSS表达式
(9)、将CSS和JS放到外部文件中
(10)、避免跳转
(11)、可缓存的AJAX
(12)、使用GET来完成AJAX请求
页面性能优化，为什么CSS放头上，JS放底下
js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。所以要放在底下加载
如果CSS放在底下加载的话，页面出现白屏。CSS放在前端，页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树
(1) 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
(2) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
(3) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7) 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
加载性能优化的方法；
谈谈前端页面的优化，雅虎34军规
http://blog.csdn.net/camel20/article/details/7283893
网站性能优化
移动端性能优化
移动优化
repaint和reflow区别(重排重绘)
(1)Reflow(回流)：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
(2)Repaint(重绘)：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。 Reflow要比Repaint更花费时间，也就更影响性能。所以在写代码的时候，要尽量避免过多的Reflow。
reflow的原因：
(1)页面初始化的时候；
(2)操作DOM时；
(3)某些元素的尺寸变了；
(4)如果 CSS 的属性发生变化了。
减少 reflow/repaint
(1)不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的class，然后修改 DOM 的 className。
(2)不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
(3)为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
(4)千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。
缓存
介绍一下cookie,localstorage,sessionstorage,session
共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
说说离线存储
在较高版本的浏览器中，js提供了sessionStorage和globalStorage。
在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
它们与cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
布局
三列布局
两列布局：左顶宽右+自适应
左边固定宽度为200，右边自适应，而且滚动条要自动选择只出现最高的
方法一：
HTML代码如下：
Document
第一种方法
CSS代码如下：
.one {
position: absolute;
height: 100px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
效果图：
第二种方法
第二种方法，我利用的是创建一个新的BFC(块级格式化上下文)来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：
float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible
关于BFC，在w3c里是这样描述的：在BFC中，每个盒子的左外边框紧挨着包含块的左边框(从右到左的格式化时，则为右边框紧挨)。即使在浮动里也是这样的(尽管一个包含块的边框会因为浮动而萎缩)，除非这个包含块的内部创建了一个新的BFC。这样，当我们给右侧的元素单独创建一个BFC时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。
HTML代码：
Document
第二种方法
CSS代码：
.one {
float: left;
height: 100px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
效果图：
左边定宽右边自适应。两种方法，NEC上的用负边距消除宽度，用弹性布局。然后问我有没有第三种。。
1)#left{
float:left;
width:200px;
background-color:blue;
}
#right{
overflow:hidden;
background-color:gray;
}
2)#left{
float:left;
width:200px;
background-color:blue;
}
#right{
margin-left:200px;
background-color:red;
}
3)#left{
position:absolute;
top:0px;
left:0px;
width:200px;
background-color:blue;
}
#right{
margin-left:200px;
background-color:red;
}
4)#left{
position:absolute;
top:0px;
left:0px;
width:200px;
background-color:blue;
}
#right{
position:absolute;
top:0px;
left:200px;
width:100%;
background-color:gray;
}
右边固定，左边自适应：
1)#left{
float:left;
width:100%;
background-color:blue;
margin-left:-200px;
}
#right{
float:right;
width:200px;
background-color:gray;
}
css:两个块状元素上下的margin-top和margin-bottom会重叠。啥原因？怎么解决？
(应该给父类元素添加BFC)
如何让各种情况下的div居中(绝对定位的div,垂直居中,水平居中)
给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
(1) 元素水平居中
内联元素水平居中
text-align:center;
块元素水平据居中
margin:0 auto;
(2) 单行文字垂直居中
height:n px;
line-height:n px;
(3) 文字相对图片、输入框垂直居中
vertical-align:middle;
实现布局：左边一张图片，右边一段文字(不是环绕)
这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字
两列布局的方式；
使用flex布局实现三等分，左右两个元素分别贴到左边和右边，垂直居中
垂直居中，多行文本垂直居中
基本的两列自适应布局
实现左定宽右撑满的布局。盒子模型。要使盒子表现与IE一致该如何？
css垂直水平居中有哪些方法
两列布局
css垂直水平居中的方法，flex布局的具体实现
实现一个左边定宽右边自适应的两列布局，要求使用浮动和flex两种方法
A：
.left {
float: left;
width: 320px; //这个是面试官给的，面试官画了图
} //下面这段我少写了，然后面试官就问你上面这样能够让右边自适应吗？囧
.right {
margin-left: 320px;
} //flex憋了很久没写出来。。。
实现一个三列布局
正则
手写一个正则表达式，验证邮箱
^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$
re = /^(\w-.)[email protected](\w-?)+(.\w{2,})+$/
Css实现三列布局
Css实现保持长宽比1:1
Css实现两个自适应等宽元素中间空10个像素。
less & sass
less和sass掌握程度
用LESS如何给某些属性加浏览器前缀？
用过LESS，具体用到了什么功能
sass的伪类怎么嵌套
组件
你对组件的理解
组件的html怎么进行管理
其他
form表单当前页面无刷新提交 target iframe
margin坍塌？水平方向会不会坍塌
可以触发一个BFC
对mvc的理解
对前端路由的理解？前后端路由的区别？
前后端分离的意义以及对前端工程化的理解
浏览器内核有哪些
转载于:https://www.cnblogs.com/Yfling/p/6735436.html
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved.
京ICP备09083238号