css有趣的扩展知识,CSS知识扩展

CSS3、CSS2知识扩展

1：Column的几个属性值；columns是column-width与column-count的缩写前者指的宽度，后者指列数，column-gap指每列之间的宽度；column-rule:1px red solid;指每列用1像素红色实线分开；column-fill指让每列的高度相同；column-break-before:always;指不管本列写完没，都要另起一列。

2:代码简写border-color:red blue;指边框的上下与左右分别为红色和蓝色；线条的形状的分类：solid指实线条，dotted指点线条，dashed指虚线条，double指双线条，wavy指波浪线条。

3：给元素审核制边框时，再给元素设置background-color时得注意IE的作用区域是padding+content;而firefox是padding+content+border;这在设置了border的实线与虚线的情况下看得最清楚。body的背景色会延伸到margin部分。

4：标准流是css规定的默认的块级元素与行内元素的排列方式。

5：在一父块中让3个子块都左浮动时当让浏览器窗口缩小到一定程度时第三个子块会换到下一行并在第二个子块的下面。

6：选择器：

6.1：交集复合选择器，第一个必须是标记选择器、第二个必须是类选择器或ID选择器。他们之间不能有空格，必须是连续书写

6.2：并集选择器：选择器之间用逗号隔开，如果选择器的风格完全相同或部分相同这时便可以用并集选择器同时声明风格相同的CSS选择器。

6.3：后代选择器：两选择器用空格隔开，前者包含后者。

6.4：子选择器：两选择器用>隔开。

后代选择器与子选择器的区别：例子：

sdfdsdfdsd

p span{

color:red;

}

指span元素与b元素中的dsdf和dsd颜色为红色；

p>span{

color:red;

｝

指只让span元素中dsdf颜色为红色b元素中的dsd颜色不为红色。

类选择器与id选择器区别：“q w”>但不能写成“q w”>

类选择器可以结合使用，用空格号隔开，但id选择器不能结合使用

6.5：

属性选择器：form[action][method]{

Color:red;}

属性选择器

撒爹爹

结果将显示同时含action与method属性时的类容为红色，这个例子就只显示“属性选择器”为红色；

[action]与[method]之间是连续写的，无空格；属性值选择器与属性选择器用法相同。

6.6：p.q(交集选择器)等价于p[class~=“q”]指对class属性中含q的所有元素设置样式。

6.7：p[class^="a"]对class属性的值所有以a开头的元素设置样式；

p[class$="a"]对class属性的值所有以a结尾的元素设置样式；

p[class*="a"]对class属性的值所有包含a的元素设置样式；

6.8：伪类选择器顺序link>visited>hover>action。

6.9:选择器的特殊性值(权重)内链样式style特殊性值为1,0,0,0；

id选择器特殊性值为0,1,0,0；

属性或属性值与class选择器特殊性值为0,0,1,0；

标记(元素)选择器特殊性值为0,0,0,1；

通配符选择器特殊性值为0,0,0,0；

p[id=“q”]为0,0,0,0；#q为0,1,0,0；

如果是两个标记选择器同时对一个元素设置样式；则越后出现的权重越高(层叠)。

*权重越大级别就越高；

7：CSS中的代码书写顺序：

首先是：显示属性(例：display、position、float、clear、visibility、overflow)

其次是：自身属性(top、left、width、height、margin、padding、border、outline、background)

最后是：文本属性(color、font、line-height、text-align、text-decoration、text-indent、text-transform)。

8：不要滥用标签来换行。

9：XHTML 1.0 Transition中标记

不能包含标记

。

10：无继承性的元素：外边距、内边距、边框、背景、多列(Muti-column)、变换(Transform)、过度(Transition)、动画(Animation)、定位(position)、伸缩盒(fiexible Box)、打印(printing)、字间距(letter-spacing与word-spacing)、行高(line-height)、线条(text-decoration)

、文本阴影(text-shadow)、背景(background)、z-index、显示(display)、浮动(float)、清除(clear)、溢出(overflow)、；

a连接的特点：例：

结果将不会显示链接中的“asd”为红色而为蓝色(浏览器默认的颜色)

如果改为

结果将会显示链接中的“asd”为红色

继承值无特殊性，连0,0,0,0的特殊性都不是；

*注意：0,0,0,0的特殊性强过无特殊性；例子如下：

*{color:red;}

p{color:black;}

asdffdg

显示结果为p元素中的“asdf”为黑色em元素中的“fdg”为红色。

11：颜色：p{color:rgb(100%,0%,0%)}等价于p{color:red;}等价于P{color:#fff;}。

12:CSS2中的单位：

角度值：度(deg)、梯度(grad)、弧度(rad);直角为90deg、100grad、1.57rad.

13：字体：font-weight:;的属性值normal(100~400)、lighter、bold(700)、bolder(800~900),前两属性值为细字体，后两属性值为粗字体；

font-variant:small-caps;指把小写字母变为小型大写字母、大写字母原样写出；

font:small-caps italic bold 36px Arial;属性值分别对应font-variant、font-style、font-weight、font-size、font-family;等属性，注意这五个属性必须有后两个，并且前后两个顺序必须为此例子这样，前三个顺序可以随便排；

13：文本：

13.1缩进：p{text-indent:3em;}指使段落首行缩进3em的长度。

div{wight:400px;}

P{text-indent:10%}

这里的10%指使段落首行缩进为父元素div宽度的10%等价于40px;

vertical-align:的属性值分别为sub(下标)、super(上标)、100%(使元素升高的高度为字体line-height的100%的高度)。

13.2

文本转换：text-transform的属性值uppercase(字母转为大写)、lowercase(字母转为小写)、capitalize(只对每个单词的首字母大写)。

文本装饰：text-decoration-style:;指线条的形状；text-decoration-color:;指线条的颜色；text-decoration的属性值blink(让文本闪烁)、overline(加条上划线)、underline(加条下划线)、line-through(加条贯穿线)。

注意：例：

p{text-decoration:underline;}

span{text-decoration:none;}

显示span元素中的下划线去不掉。因为text-decoration无继承性而span元素的下划线只是p元素中的下划线经过span元素而已。

13.3空白符的处理：

white-space的属性值：pre(让文本照原样输出不保留空白符)、nowrap(让文本不换行不保留空白符，除非遇到br元素)、pre-wrap(让文本换行保留空白符)、pre-line(让文换行不保留空白符)。

13.4文本书写方向：

decoration的属性值：ltr(正方向书写)、rtl(反方向书写)。

文本显示不完用省略号显示：

在设置text-overflow:ellipsis;属性前必须设置overflow:hidden;的属性。

13.5:文本与块的阴影：text-shadow与box-shadow的四个属性指分别指水平偏移量、垂直偏移量、阴影的模糊量、阴影的颜色。注意：前两个属性可以为负数，第三个属性值不能。

13.6文字间距的处理：

word-spacing属性特点：调整汉词语英文单词间的距离。

letter-spacing属性的特点：调整单词和单词字母或汉字之间的距离。

13.7:list-style-type：；的一些属性；指列表分别以下列属性值开头；

disc：

实心圆(CSS1)

circle：

空心圆(CSS1)

square：

实心方块(CSS1)

decimal：

阿拉伯数字(CSS1)

lower-roman：

小写罗马数字(CSS1)

upper-roman：

大写罗马数字(CSS1)如Ⅲ

lower-alpha：

小写英文字母(CSS1)如a、b

upper-alpha：

大写英文字母(CSS1)

none：

不使用项目符号(CSS1)

armenian：

传统的亚美尼亚数字(CSS2)

cjk-ideographic：

浅白的表意数字(CSS2)如一、二

georgian：

传统的乔治数字(CSS2)

lower-greek：

基本的希腊小写字母(CSS2)如α、β

hebrew：

传统的希伯莱数字(CSS2)

hiragana：

日文平假名字符(CSS2)

hiragana-iroha：

日文平假名序号(CSS2)

katakana：

日文片假名字符(CSS2)

katakana-iroha：

日文片假名序号(CSS2)

lower-latin：

小写拉丁字母(CSS2)如a 、b

upper-latin：

大写拉丁字母(CSS2)

list-style-image:url();指一图像开头的列表。

list-style-position:outside;指列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

list-style-position:inside;列表项目标记放置在文本以内，且环绕文本根据标记对齐。

14：基本框：

14.1边距与边框：

边框与内边距不能为负数，但外边距可以。

14.2非替换元素：如元素的内容包含在文档中，如果一个段落的文本在该段落中，这个段落就为非替换元素。

替换元素：指作用为其他内容占位符的一个元素。如img元素，它只是指向一个图像文件，这个文件将插入到文档流中该img元素本身所在上的位置。大多数表单元素也可以替换如input元素。

14.3

父元素的width=400px也等于子元素的margin-left+border-left+padding-left+内容width+padding-right+border-right+margin-right;

只能对margin-left、width、margin-right 3个属性的值设置为auto;

如果父元素的width为400px,设置子元素的margin-left、width为100px时，不管设与不设margin-right的值都会强行换为auto(200px);

因此只要对margin-left、width、margin-right 3个属性中的任意两个设置为100px时，剩下的一个的值都为auto(200px).;

如对margin-left、width设置为auto,对margin-right设置为100px时，这时margin-left为0px,width为300px;

如对margin-left、width、margin-right 3个属性设置为auto时，外边距就为0px，width为400px。

14.4

父元素的height=400px也等于子元素的margin-top+border-top+padding-top+内容height+padding-bottom+border-bottom+margin-bottom;

只能对margin-top、width、margin-bottom 3个属性的值设置为auto;

如果子元素的height=100px,width=100px时，想让子元素在父元素里居中不能设置margin:auto 0;因为此时auto为0px,只能设置为

margin:150px 0;并且必须在父元素中设置overflow:hidden;或padding:1px;此时子元素才能在父元素里居中。

行间距：

line-height的属性值减去font-size的属性值再除以2就为行间距(用于非替换元素)；

14.5padding与margin不能使行内元素(行级盒子)变高(除img)。

15：行内元素与块级元素之间的互换：

display:block;将行内元素变为块级元素；

display:inline-block;将块级元素变为行内元素；

就算把行内元素换成块级元素，此时行内元素也不能嵌套块级元素，因为display:block;改变的只是元素的显示，而元素的本质没变；

16：边框属性的书写顺序的特点：

例1：p{

border-color:red;

border:solid thick;

}

sfsf

结果将显示边框的颜色为系统默认颜色而属性border-color:red;将不起作用；

若上例子改为：

p{ border:solid thick;

border-color:red;

}

sfsf

由于border-color:red;的顺序在后面因此边框的颜色将显示为红色；

例2：p{

border:solid thick;

color:red;

}

sfsf

结果将显示p元素的内容与边框都为红色，因为没设置border-color的属性，边框的默认颜色将是元素的前景色；

border-color:transparent;为隐藏边框的颜色(透明边框)；

行内元素边框的设置：

行内元素上下边框width的设置不会影响行高，若还设置了颜色有可能会挡住此行的上下两行，但并不会影响行高(内边距也使如此)；

行内元素左右边框width的设置不会影左右两边的内容；

17：

内边距与外边距：

内边距与外边距设置百分数时是以其父元素的width而决定；

例：div{

width:1000px;}

p{margin:10% 5%;

padding:20% 10%；

}

结果将显示:p元素的上下外边距为100px；左右外边距为50px;p元素的上下内边距为200px；左右内边距为100px;

18:背景：

background-attachment:fixed;指背景图片不会随内容滚动而滚动，相对于窗体固定。

background-attachment:scroll;背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

background-attachment:local;背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。

背景图像是以父元素的内边距的边界为边界的；

背景图像的定位：background-position:;属性也是以父元素内边距的边界为标准的；background-position的属性值分别是x轴与y轴方向上，若只设置其中一个，另一个将默认为center，background-position:left top;background-position:100px 200px；

background-position:10% 10%;

例:background-position:left top;

是指背景图像在父元素的左上方；

如果background-position的属性值指出现x轴或y轴方向上的一个则另一个默认为center(居中)

；

例：background-position：top;背景图像将在附父元素的水平居中位置；若为background-position：left;在垂直居中位置；

若为background-position：center;在父元素的正中位置；

background-clip的属性值：padding-box;(从padding区域但不含padding开始向外裁剪图像)；border-box;(从border区域但不含border开始向外裁剪图像)；content-box;(从content区域开始向外裁剪图像)；

background-size属性的应用：背景图width与height的缩放，当只有width值时height的值将默认为auto,auto的值将根据width作为参考等比例缩放。

background: -webkit-gradient(linear, 0 0, 0 100%, from(#888), to(#fff));

指背景色从#888过渡到#fff;

19：浮动与定位：

19.1浮动：会使被浮动元素变成一个块级框不管此元素是行内元素或块级元素，结果都一样；

浮动元素(或定位元素)的左或右的外边界不会超过父元素的左或右的内边界；

两个子元素在父元素都设置为左或右浮动时，他们是不会相互重叠的；

若父元素宽500px；两个子元素图像1和2宽都为300px；分别对两个子元素设置左浮动和右浮动；显示结果如下图：

这两图像是不会相互重叠的；

浮动元素的顶端也不可能超过之前浮动元素的顶端；如下图

行内框与浮动元素重叠时，其边框、背景、内容将在浮动元素之上；

块框与浮动元素重叠时，其边框、背景将在浮动元素之下，而内容将在浮动元素之上；

定位的特点

.w{

width: 400px;

height: 400px;

background-color: #cbcbcb;

position: relative;

}

.w p{

background-color: #6a6a6a;

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 50%;

}

显示结果如下图所示:

19.2：浮动对兄弟元素的影响:

1:如果兄弟元素为内联元素：例子如下

#w{

float: left;

width: 100px;

height: 100px;

background: blue;

}

#q{

display: inline-block;

width: 400px;

height: 400px;

border: 1px solid red;

white-space: pre-line;

}

污染物袁汝稳袁汝稳袁汝稳引入以侮辱

U树发生的纠纷和时间段回复可见和我姐夫那就能到健身房卡就飞快的师姐覅王二，那上面那件山海经双方就收到货福建省地方叫师傅开始发了开始交罚款是大家发生的会计法开始的减肥快乐是大家福克斯的放开那次快乐男声

结果如下图：

2:对上面的例子如果兄弟为块级元素( display: block;)例子如下

#w{

float: left;

width: 100px;

height: 100px;

background: blue;

}

#q{

display:block;

width: 400px;

height: 400px;

border: 1px solid red;

white-space: pre-line;

}

污染物袁汝稳袁汝稳袁汝稳引入以侮辱

U树发生的纠纷和时间段回复可见和我姐夫那就能到健身房卡就飞快的师姐覅王二，那上面那件山海经双方就收到货福建省地方叫师傅开始发了开始交罚款是大家发生的会计法开始的减肥快乐是大家福克斯的放开那次快乐男声

结果如图下：

19.3：z-index的技巧：z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。

每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定(每个元素仅属于一个层叠上下文)。

同一个层叠上下文中，层叠级别(即z-index属性值)大的显示在上面，反之显示在下面。

同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。

不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。

当z-index未定义时，在IE6,7下会创建新的局部层叠上下文，而在高级浏览器中，按照规范不产生新的局部层叠上下文，如下例：

div{position:relative;}

p{position:absolute;}

.a{background:#f00;z-index:10;}

.b{background:#0ff;z-index:3;}

asdas

asdaf

上述代码在IE6,7下的呈现与高级浏览器下不同。.test1和.test2未设置z-index，在高级浏览器下不会产生新的局部层叠上下文，也就是说它们的子元素没有被新的局部层叠上下文包裹，那么它们的子元素就处在同一个层叠上下文中，可以直接通过自身的层叠级别来决定显示顺序，所以结果是.a 覆盖了.b，因为.a的层叠级别比.b高；而在IE6,7下，.test1和.test2会产生新的局部层叠上下文，即它们的子元素被新的局部层叠上下文包裹，于是子元素显示顺序只能依赖.test1和.test2层叠级别来确定。所以结果是.b 覆盖了.a，因为.b的父元素.test2在HTML文档流中排在.test1之后，后来者居上覆盖前者。