a 链接
- a链接的四种状态
- link:连接平常的状态
- visited:连接被访问过之后
- hover:鼠标放到连接上的时候
- active:连接被按下的时候
-
顺序：a:link、a:visited、a:hover、a:active
-
注意：a:hover定义一定要放在a:link、a:visited的后面
-
:focus -> :hover -> :active
前端分为哪三层?其作用分别是什么?
- 结构层
- HTML 结构层用于存储客户想要阅读或查看的所有内容。
- 表示层
- CSS 表示层指示结构化HTML文档如何看待网站的访问者，并由CSS（层叠样式表）定义。网站的所有视觉样式都应位于外部样式表中。
- 行为层
- JavaScript 行为层使网站具有交互性，允许页面响应用户操作或基于一组条件进行更改。
网站重构
在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改 变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
- 对于传统的网站来说重构通常是： 表格(table)布局改为DIV+CSS 使网站前端兼容于现代浏览器(针对于不合规范的 CSS、如对IE6有效的) 对于移动平台的优化 针对于SEO进行优化
- 深层次的网站重构应该考虑的方面 减少代码间的耦合 让代码保持弹性 严格按规范编写代码 设计可扩展的API 代替旧 有的框架、语言(如VB) 增强用户体验
- 通常来说对于速度的优化也包含在重构中 压缩JS、CSS、image等前端资源(通常是由服务器来解决) 程序的性能优化 (如数据读写) 采用CDN来加速资源加载 对于JS DOM的优化 HTTP服务器的文件缓存
box-sizing
- content-box，默认值，只计算内容的宽度，border和padding不计算入width之内
- padding-box，padding计算入宽度内
- border-box，border和padding计算入宽度之内
清除浮动的方法
- 给父级div定义高度 （不推荐使用）
- 原理：给父级DIV定义固定高度（height），能解决父级DIV 无法获取高度得问题。
- 优点：代码简洁
- 缺点：高度被固定死了，是适合内容固定不变的模块。
- 使用空元素，如
(.clear{clear:both}) （不推荐使用）- 原理：添加一对空的DIV标签，利用css的clear:both属性清除浮动，让父级DIV能够获取高度。
- 优点：浏览器支持好
- 缺点：多出了很多空的DIV标签，如果页面中浮动模块多的话，就会出现很多的空置DIV了，这样感觉视乎不是太令人满意。
- 让父级div也一并浮起来这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了，又会产生新的浮动问题。 (不推荐使用)
- 父级div定义 display:table （不推荐使用）
- 原理：将div属性强制变成表格
- 优点：不解
- 缺点：会产生新的未知问题。
- 父元素设置 overflow：hidden、auto； （亦不太推荐使用）
- 原理：这个方法的关键在于触发了BFC（块级格式化上下文）。在IE6中还需要触发 hasLayout（zoom：1）
- 优点：代码简介，不存在结构和语义化问题；
- 缺点：无法显示需要溢出的元素
- 父级div定义 伪类:after 和 zoom;
-
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
-
优点：结构和语义化完全正确,代码量也适中，可重复利用率（建议定义公共类）
-
缺点：代码不是非常简洁（极力推荐使用）
.clearfix:after{ content:'.'; display:block; height:0; clear:both; visibility: hidden; } .clearfix {zoom:1;}// 精益求精写法
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix { *zoom:1; } 照顾IE6，IE7就可以了
-
CSS隐藏元素的几种方式及区别
- display:none
- 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
- 不会触发其点击事件
- visibility:hidden
- 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。
- 无法触发其点击事件
- 适用于那些元素隐藏后不希望页面布局会发生变化的场景
- opacity:0
- 将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。
- 和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。
- 可以触发点击事件
- 设置height，width等盒模型属性为0
- 简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素。
- 如果元素设置了border，padding等属性不为0，很显然，页面上还是能看到这个元素的，触发元素的点击事件完全没有问题。如果全部属性都设置为0，很显然，这个元素相当于消失了，即无法触发点击事件。
- 这种方式既不实用，也可能存在着着一些问题。但平时我们用到的一些页面效果可能就是采用这种方式来完成的，比如jquery的slideUp动画，它就是设置元素的overflow:hidden后，接着通过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。