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