前端开发札记（一）

前端开发札记（一）

如果你不小心点进来了，很抱歉地告诉你，并没有这里并没有什么干货，只是一些知识积累。抱歉了！

1 CSS优先级

优先级是每种选择器类型构成的级联字符串计算而成的。他是一个对应匹配表达式的权重。

如果表达式相同，靠后的CSS会应用到元素上。

优先级顺序

从低到高的优先级顺序是：

• 通用选择器（*）
• 元素（类型）选择器
• 类选择器
• 属性选择器
• 伪类
• ID选择器
• 内联样式

!important规则

!important声明与以上优先级无关。该声明会覆盖其他任何的CSS声明。如果同时都有!important声明，则会计算除了!important以外的选择器类型构成的级联字符串的优先级，来决定应用哪一个CSS。

:not 伪类

:not否定伪类在优先级计算中不会被当成伪类来计算，而:not中的类型选择器则会被当做普通选择器来进行计算。

基于类型的优先级

在优先级的计算中，是基于类型的。这一点比较容易混淆的是属性选择器。如：

[id="foo"] {
    color: red;
}

这是属性选择器，计算的时候不会被当做ID选择器。

DOM树的距离与优先级无关

在优先级的计算当中，元素之间的距离是不被考虑的。所有的计算规则，都是按照选择器的类型和优先级顺序来进行计算的。

参考

• 优先级

2 CSS3新特性

CSS的发展历史是这样的：

CSS -> CSS2 -> CSS3

在此我总结一下CSS3有哪些新特性。

CSS3选择器

Selector	Example	Description
element1~element2	p~ul	选择前面有<p>元素的每个<ul>元素。
[attribute^=value]	a[src^="https"]	选择其src属性值以"https"开头的每个<a>元素。
[attribute$=value]	a[src$=".pdf"]	选择其src属性以 ".pdf" 结尾的所有<a>元素。
[attribute*=value]	a[src*="abc"]	选择其src属性中包含"abc"子串的每个<a>元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个<p>元素的每个<p>元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后<p>元素的每个<p>元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的<p>元素的每个<p>元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个<p>元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个<p>元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个<p>元素的每个<p>元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个<p>元素。
:root	:root	选择文档的根元素。
:empty	p:empty	选择没有子元素的每个<p>元素（包括文本节点）。
:target	#news:target	选择当前活动的#news元素。
:enabled	input:enabled	选择每个启用的<input>元素。
:disabled	input:disabled	选择每个禁用的<input>元素
:checked	input:checked	选择每个被选中的<input>元素。
:not(selector)	:not(p)	选择非<p>元素的每个元素。
::selection	::selection	选择被用户选取的元素部分。

活用CSS3的选择器可以减少很多无谓的js代码。

@font-face特性

可以自定义字体文件，并且定义CSS字体，体现在font-family属性里面。

例子：

 @font-face { 
     font-family: BorderWeb; 
     src:url(BORDERW0.eot); // 服务器字体文件
 } 
 @font-face { 
     font-family: Runic; 
     src:url(RUNICMT0.eot); // 服务器字体文件
 } 

word-wrap & text-overflow 样式

word-wrap: 设置或检索当前行超过指定容器的边界时是否断开转行
text-overflow: 设置或检索当前行超过指定容器的边界时如何显示

text-decoration 文字渲染

CSS3 里面开始支持对文字的更深层次的渲染。

text-fill-color: 文字内部填充颜色
text-stroke-color: 文字边界填充颜色
text-stroke-width: 文字边界宽度

CSS3 的多列布局（multi-column layout）

column-count：表示布局几列。
column-rule：表示列与列之间的间隔条的样式
column-gap：表示列于列之间的间隔

边框和颜色（color, border）

颜色：CSS3提供透明度支持。
边框：CSS3圆角支持。

CSS3 的渐变效果（gradient）

线性渐变: linear
径向渐变: radial

CSS3 的阴影（shadow）和反射（reflect）效果

阴影：

.class1{
    text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5); 
} 
.class2{ 
    box-shadow: 3px 3px 3px rgba(0, 64, 128, 0.3); 
}

反射：

.classReflect{ 
     -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.51))); 
 }

CSS3 的背景效果

background-clip: 背景画区

background-clip: border-box; // 背景从 border 开始显示;
background-clip: padding-box; // 背景从 padding 开始显示;
background-clip: content-box; // 背景显 content 区域开始显示;
background-clip: no-clip; // 默认属性，等同于 border-box;

background-origin: 背景位置

background-origin: border-box; // 从border开始计算 background-position;
background-origin: padding-box; // 从padding开始计算 background-position;
background-origin: content-box; // 从content开始计算 background-position;

background-size: 调整背景图片的大小

background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包含元素的尺寸

background-break: CSS3中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示

background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景

多背景图片

div { 
    background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x;
}

CSS3 的盒子模型

<div class="boxcontainer"> 
    <div class="item"> 1 </div> 
    <div class="item"> 2 </div> 
    <div class="item"> 3 </div> 
    <div class="item flex"> 4 </div> 
</div>

水平排列

.boxcontainer { 
    width: 1000px; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
}
.item {
    background: #357c96; 
    font-weight: bold; 
    margin: 2px; 
    padding: 20px; 
    color: #fff;
    font-family: Arial, sans-serif;
}

box-flex

<div class="boxcontainer"> 
    <div class="item"> 1 </div> 
    <div class="item"> 2 </div> 
    <div class="item flex2"> 3 </div> 
    <div class="item flex"> 4 </div> 
</div>

.flex {
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
 }
.flex2 { 
    -webkit-box-flex: 2; 
    -moz-box-flex: 2; 
}

box-direction: 可以用来翻转这四个盒子的排序
box-ordinal-group: 可以用来改变每个盒子的位置
box-ordinal-group: 属性值越高，就排在越后面
box-align: 盒子的对方方式
box-pack: 盒子的对方方式

CSS3的transition, transform和animation

transition: 过渡
transform: 变换
animation: 动画

参考

• CSS选择器
• 深入了解 CSS3 新特性

未完待续…

3 清除浮动的方式

4 元素上下左右居中

5 cookies，sessionStorage，localStorage的区别

6 IE6/7/8兼容性问题探讨