1.对web标准的理解
网页主要是由三部分组成的(结构、表现、行为)
所以,对应的标准也是这三方面的。
对于结构的要求:标签和属性名字母要小写
标签要注意闭合
标签不允许随意嵌套
对于CSS/js的要求:尽量使用外链的JS/CSS,使网站结构化更高,性能更好
样式尽量不要使用行内样式,使得结构和表现分离,id class等命名符合语义化,增加代码可读性
2.浏览器内核差异:
浏览器内核负责对网页进行语法解释(HTML JAVASCRIPT),同时负责对网页的渲染。
不同的浏览器对网页语法解释可能有所不同,所以渲染的内容也有可能不同
Trident:IE使用的内核。(虽然很强大,但是可能一段时间内更新不足,造成内核与w3c标准脱节)
Gecko:(开源,可开发性高)如firefox使用
webkit:苹果公司自己的内核,google使用的内核。在手机上也有很好的应用
Presto:opera使用的内核,渲染速度极快,但是兼容性相对来说不好
3.CSS盒子模型
w3c盒子模型:content margin padding border
Ie盒子模型: content(包含了border padding) margin
4.link和@import的区别
link是HTML标签,没有兼容性问题,页面加载时,link同时被加载,权重高
@import是css提供的 ie5以上支持 页面加载完以后才加载 权重低
5.CSS选择符 属性 CSS3新增的伪类
可继承的样式:font- color
不可继承的样式:margin padding border width height之类的
优先级:内联>id>class>tag
6.BFC 块级格式化上下文
块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。(避免了 margin穿透,还有避免了清除浮动)
在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。
以下方法会生成一个BFC环境:
浮动元素、
绝对定位元素,
块级元素以及块级容器(比如inline-block、table-cell、table-capation)
overflow值不为visible的块级盒子
BFC的作用:
1.清除父级元素的浮动(例如通过设置overflow:hidden触发BFC)
2.阻止元素被浮动元素遮挡(给没有设置浮动的元素添加overflow:hidden触发BFC)
3.同一个BFC下的两个块级元素会在垂直方向上发生margin重叠。会按照较大的margin来布局(解决办法,将他们放在两个BFC中)
9.CSS sprites(css精灵) 未来可能不会在使用了,因为有了http2
优点:
减少http请求,从而提高网页性能
减少图片的字节
缺点:
开发和维护比较麻烦
10.浮动和他的原理,清除浮动的技巧 (要么一起浮动,要么都不浮动)
浮动使得元素脱离文档流,不占据空间。浮动元素碰到包含他的边框或者浮动元素的边框停留
浮动元素引起的问题:
:如果一个块中全部都是浮动元素,那么这个块的高度将会消失。 解决办法:1.添加一个空的标签设置属性clear:both;2..clearfix(overflow:auto;height:1%)
:与浮动元素同级的非浮动元素会紧随其后 解决办法:clear:both
:如果第一个元素浮动,不然会影响页面结构 解决办法:clear:both
{overflow:auto;_height:1%}但是这种方法在子元素超过父元素的时候
会出现滚动条,所以不好。
我们推荐使用:after来解决这个问题 .div:after{ after是向元素后面插入一个内容,内容就是content中的东西。
clear:both;
content:'';
display:block;
visibility:hidden;
}
11.对于网站重构的理解
网站重构:在不改变外部行为的前提下,简化结构、添加可读性,而在网站前端保持一致的行为。也就是说是在不改变UI的情况下,对网站进行优化,在扩展的同时保持一致的UI。
将表格布局改成DIV+CSS
减少代码耦合
按照严格规范编写代码
设计可以拓展的api
网页性能的优化
压缩资源(css js image)
12.px em rem 的区别:
PX是相对浏览器分辨率决定的,em是相对当前对象内的文本的字体尺寸(如果当前文本尺寸没有被设置,那就相对于浏览器默认字体大小16px设置。)
em的特点:1.em的值不是固定的 2.em会继承父级元素的字体大小(em是相对于父级元素的)
rem的特点:rem是仍然是相对元素,但是它相对的是HTML的根元素(html),也就是说只需要条正根元素就可以成比例的调整所有字体的大小。