您的位置：首页 > Web前端

前端开发札记（一）

2016-04-23 21:44 288 查看

前端开发札记（一）

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

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兼容性问题探讨

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 前端开发 css3

相关文章推荐

新的分享

章节导航