css+html 笔记1 - 技术栈

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的效果。