1. 单位转换
1M=1024KB 1K=1024B,1B=8b(it);
B是字节,b也就是bit,是位,KB跟Kb是不一样的。
2.
Cookie:通过在客户端 ( 浏览器 ) 记录信息确定用户身份,最大为 4 kb ;
url :参数用的是 get 方法,从服务器上获取数据,大小不能大于 2 kb ;
Session: 是服务器端使用的一种记录客户端状态的机制 ;
post :是向服务器传送数据,数据量较大;
local Storage :也是 HTML5 的本地存储,将数据保存在客户端中(一般是永久的),
写入字段有三种方式:
localStorage[“a”]=1;
localStorage.b=1;
localStorage.setItem(“c”,3);
读取字段也有三种方式:
var a= localStorage.a;
var b= localStorage[“b”];
var c= localStorage.getItem(“c”);
3. margin-top,padding-top
当margin-top、padding-top的值是百分比时,分别是如何计算的?
相对最近父级块级元素的width,相对最近父级块级元素的width;
为什么不是height?
采用height,就可能导致一个无限循环,父元素的height会增加,以适应后代元素上下外边距的增加,而相应的,上下外边距因为父元素height的增加也会增加。
4. reflow和repaint(回流与重绘)
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲染。
reflow(回流,渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
例:
display:none才会产生reflow;(dom结构发生改变)
visibility:hidden只会产生repaint。(dom结构未改变)
5. css 选择器优先级
嵌入(行内)>ID选择器>Class选择器=伪类>标签名称选择器
一般来说,选择器的优先级(从上往下依次降低)是:
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
例:
关键字!important必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果
div{
margin-left:20px!important;
margin-left:40px;
}
- 作为style属性写在元素内的样式(权重:1000)
- id选择器(权重:100)
- 类选择器(伪类选择器)(权重:10)
- 标签选择器(权重:1)
- 通配符选择器
权重计算:
ul#related span 的权重为 1+100+1=102
6. css 伪类
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
触发顺序:
link–>visited—>hover—>focus—>active
7. css 结构
<dl>
<dt> </dt><!--definition title-->
<dd> </dd><!--definition description-->
</dl>
8.@import url()和link
1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。
2,@import 是css2里面的,所以古老的ie5不支持。
3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css
9. 无font-color,text-color
字体颜色统一用color,加上就近原则
10. 置换元素和非可置换元素
置换元素:
是指:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
<img> <input> <textarea> <select> <object>
都是置换元素,这些置换元素往往没有实际内容,即是一个空元素。
非可置换元素:
<p> <label>
11. document.querySelectorALL()
该方法返回匹配的元素集合,如果没有匹配项,返回空的nodelist(节点数组)
该方法接受三种类型的参数:id(#),class(.),标签 ,用法如下:
document.querySelectorAll('.file/#file/div')[0]
12. 图片格式
网页html文档支持的图片格式有jpg , gif , png 和 bmp
13. 可继承和不可继承属性
可继承:
color,font相关的,line-height
不可继承:display、margin、border、padding、background、height、width、overflow、position、left、right、top、 bottom、z-index、float、clear
所有元素可继承:
visibility和cursor。
14. table的cellpadding,cellspacing
15. 添加css样式
内联式:即直接加在标签上的样式 如:
<div style="width:100px;"></div>
导入样式:
@import url("css/style.css")
嵌入式:即用
<style> </style>
标签括起来写在页面中的样式外部引用式:即将样式单独放到一个文件夹中,然后用link标签引入页面的形式,如:
<link rel="stylesheet" type="text/css" href="Css.css" />
16. 块级元素,行内元素
块级元素
行内元素
17. 层级显示优先级
优先级:
frameset(帧元素) > 表单元素(如文本输入框,密码输入框,单选框) > 非表单元素(a,div,table,span)
有窗口的元素总是显示在无窗口元素的前面
18. H5新增标签
article: 标签定义外部的内容。
aside:标签定义 article 以外的内容。a
audio:h5新增音频标签。没有高宽属性。
canvas:h5新增画布标签。
command: 定义命令按钮(未测试)
datalist:标签定义选项列表。
datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。
details:标签用于描述文档或文档某个部分的细节。
figure:标签用于对元素进行组合。
figcaption:定义 figure 元素的标题。
footer:定义 section 或 document 的页脚。
header:定义 section 或 document 的页眉。
hgroup:用于对网页或区段(section)的标题进行组合。
keygen:标签规定用于表单的密钥对生成器字段
mark:标签定义带有记号的文本。
meter:通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。
nav:定义document或section或article的导航。
output:定义不同的输出类型,比如脚本。
progress:定义任何类型的任务的进度。
rp:定义若浏览器不支持 ruby 元素显示的内容
rt:定义 ruby 注释的解释
ruby:定义 ruby 注释
section:标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。
source:audio和video的属性之一。为audio和video定义媒介源。
summary:为details定义标题。
time:定义日期或时间。
video:h5新增视频标签。具有高宽属性。
19. CSS3之转化(transform),过渡(transition)
transition 属性是一个简写属性,用于设置四个过渡属性:transition-property、transition-duration、transition-timing-function、transition-delay
transition:all 0.5s;
20. ::after, ::before的用法
div::after{
content:"123";/*content属性必须有*/
}
注:::after,::before的内容是添加在被选择元素的内容(不是被选择元素)的前后,上述例子123会显示在div内部。
21. border和::after画三角形
<style >
.wrap{
width: 100px;
height: 100px;
position: relative;
background-color: yellowgreen;
}
.wrap::after{
content: ""; /*!!!!*/
width: 0;
height: 0;
position: absolute;
left: 100px;
border: solid 50px;
border-color: transparent transparent transparent blue;
}
</style>
<body>
<div class="wrap"></div>
</body>
效果如下:
22. line-height和height
line-height为行高,若div的line-height:20px,则其实际高度取决于它有多少行;
当line-height和元素height一样时,可实现文字垂直居中。
23. css Sprites
合并后的图片小于各图片之和
24. overflow参数
overflow:scroll //必会出现滚动条
overflow:auto //子元素内容大于父元素时出现滚动条
overflow:visible //溢出的内容出现在父元素之外
overflow:hidden //溢出隐藏
25. target=”_blank”
<a href="/XXXX" target="_blank" >打开</a>
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
26. hover之后的事件
.tooltip{
display: none;
}
/*hover之后改变toolitip的样式,当tooltip和input为兄弟节点时*/
input:hover+.tooltip{
display: block;
}
/*当toolitip和input为父子节点时*/
input:hover .tooltip{
display: block;
}
27. viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width://控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height://和 width 相对应,指定高度。
initial-scale://初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale://允许用户缩放到的最大比例。
minimum-scale://允许用户缩放到的最小比例。
user-scalable://用户是否可以手动缩放。
事件捕获->事件处理->事件冒泡