Lyrics

< More and better />

small Test

HTML/CSS 专区

  1. css 选择器优先级 : 内联样式（style) >id（#) >类选择器（class) >元素选择器
  2. svg 标签的目的是：用可伸缩矢量图画图或文本
  3. Blob 对象中 type 属性表示文件的MIME类型（Blob是webAPI接口）webAPI
  4. H5新增元素：
    1. article 定义文章
    2. aside :定义内容之外的内容
    3. audio :定义声音内容音频
    4. bdi :定义文本的文本方向，会脱离其周围的文本方向
    5. canvas :定义图形
    6. command : 定义命令按钮（没有浏览器支持)
    7. datalist :定义和输入框相关内容，实现检索功能
    8. datails :定义细节（点击会出现细节提示)目前只有 Chrome 和 Safari 6 支持


        Copyright 2011.
        
      All pages and graphics on this web site are the property of W3School.



      8.1 summary :
      元素定义可见的标题。
    9. dialog : 定义对话框或窗口 目前只有 Chrome 和 Safari 6 支持
    10. embed 标签定义嵌入的内容，比如插件。
    11. figcaption :定义figure 的标题
    12. footer : 定义 section 或 page 的页脚。
    13. header : 定义 section 或 page 的页眉。
    14. keygen: 带有 keygen 字段的表单，提交会加密处理
    15. mark : 定义有记号的文本
      16 . meter :元素来度量给定范围（gauge）内的数据,类似进度条
    16. nav :定义导航链接
    17. output : 定义输出的一些类型。
    18. rt : 定义 ruby 注释的解释。
    19. ruby ： 定义 ruby 注释。
    20. video : 定义视频
    21. time :定义时间
    22. wbr :定义可能情况下的换行，类似于css的white-space :warp

  5. 页面加载js ： 位于body中的js会在界面加载时被执行 || 在head 中的会在被调用时执行(把脚本放在head中可以保证先加载)

  6. DHTML的动态样式的作用是：使得网页作者改变内容的外部特征而不是强制用户再次下载全部内容

  7. 关于背景图片的定位(图片是否固定还是屏幕滚动）：background-attachment: scorll(默认值) 跟随其余部分一起滚动 || fixed (不动) || inherit (继承父元素的设置)

  8. table 标签：cellspacing 单元格之间的间隔 || cellpadding 单元格内边距

  9. HTML head中必不可少的标签元素：title

  10. HTML5内建对象用于在画布上绘制：是利用Canvas的getContent()方法

  11. 关于IE6.0和FF(firefox)

    1. css的解释：在火狐浏览器中，非float的div前面有同一父级float的div
      如果此div有背景图，要是用clear：both,才能显示背景图，IE6.0中不用clear:both
    2. 在text-decoration:underline 的属性下，IE6.0显示的下划线会比Firefox低一点，在firefox 中部分笔画会在下划线的下面一个像素左右
    3. IE6.0 内嵌div可以把父级的高度撑大，而firefox 不会，要自己设置高度
    4. 当三列布局时，IE6.0 的float 宽度不能达到100%，firefox 可以，两列都可以100%；
    5. png 透明背景，firefox 下面没有问题，IE需要滤镜
      display：inline在IE7下不支持
      ul里面放其他标签，不光不符合语义，在IE7- 里面也会有问题：
      如果标签前面有
    6. 标签，浏览器会认为为
    7. 的子节点。
    8. z-index
    9. 首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：
      1. 父标签 position属性为relative； 2. 问题标签无position属性（不包括static）；
      * 3. 问题标签含有浮动(float)属性。
      解决方法有三，1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）
      相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上 的小小偏差。(就是绝对定位元素的是reletive的父元素的z-index
      style
      1
      2
      3
      4
      5
      6
      	<div style=”position:relative; z-index:1000;”>
            		 <div style=”position:absolute; z-index:9999;”>
              			<img src=”http://xxxxx/image/study/s/s256/mm3.jpg” />
             		</div>
         		</div>
      </div>

  1. 如果想在一个行内元素插入图片，如何保证图片100% 100% 显示，就是给 img设置ｗidth : **vw；

  2. margin 一般是以width为参照的（Chrom) 以height :（firefix)

如何减少回流、重绘

回流和重绘 ：回流必将引起重绘，而重绘不一定会引起回流。

  1. 重绘：每个页面至少又一次重绘（页面第一次加载的时候:浏览器会使得受影响的domn先失效，然后再次重绘) 改变元素的样式，不会影响布局
  2. 回流 ：当页面布局和几何属性改变时就需要回流 || 添加，删除domn ||元素位置，尺寸，内容 || 浏览器窗口尺寸改变——resize事件发生时
  3. 回流多了，在队列里面等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

  1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）

    // 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px";// 比较好的写法
el.className += " className1";
// 比较好的写法
el.style.cssText += "; 
left: " + left + "px; 
top: " + top + "px;";

  2. 将要处理的元素进行”离线处理”，处理完成后进行更新

    1.使用DocumentFragment进行缓存操作,引发一次回流和重绘；

    1. 使用display:none技术，只引发两次回流和重绘；
    2. 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

  3. 不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

     // 别这样写，大哥
 for(循环) {
 el.style.left = el.offsetLeft + 5 + "px";
 el.style.top = el.offsetTop + 5 + "px";
 }
 // 这样写好点
 var left = el.offsetLeft,
 top = el.offsetTop,
 s = el.style; 
 for (循环) { 
 left += 10; 
 top += 10; 
 s.left = left + "px"; 
 s.top = top + "px"; 
 }