CSS3秘笈第三版涵盖HTML5学习笔记6~8章_html/css_WEB-ITnose

网络上免费的图标和项目符号： www.cssjuice.com/38-free-icon-checkpoints/

.testClass{    list-style-image:url(image/bullet.gif);     /* 不需要使用引号将路径包含 */}

第7章，margin、padding和border

对浏览器而言，任何标签都是里面装有东西的盒子

盒模型

参看： HTML5与CSS3基础教程第八版学习笔记11-15章，第十一章

padding指内容与其边框线之间的空间

border指盒子周边的直线

background-color用来填充边框内部空间的，包括padding区域

margin指一个标签和另一个标签之间的间隔

margin、padding在使用percentage时，浏览器是以外围元素的宽度为基础计算空间量的。

边距冲突

当元素的bottom margin碰到另一个元素的top margin时，浏览器会应用他们之间较大的一个值，而不是将两个值相加。

例：一个无序列表的bottom margin为20px，与列表相连的段落top margin为30px，最终浏览器使用30px来分隔，而不是50px

行内盒子、块级盒子及其他显示设置

对于行内盒子，浏览器不能对其进行top/bottom margin、top/bottom padding的设置

使用display属性改变元素盒子

display:inline; 使块级元素像行内元素

display:block; 使行内元素像块级元素

display有无数种可能选项，大部分在所有浏览器都不起作用，inline-block值在当前浏览器中有效

添加边框

border通过三个属性进行控制：color（颜色）、width（宽度）、style（样式）

可以统一设置所有方向的边框，也可以单独设置单方向上的边框，使用border-top、border-bottom、border-right、border-left

还可以单独设置单方向上的单个属性，例：border-top-color、border-top-width、border-top-style，其三个方向也有类似属性

还能够设置多方向的单属性，例：border-color:green yellow red blue，其他两个属性也有类似用法

设置背景色

.testClass{    background-color:rgb(109,218,63);}

创建圆角

使用border-radius属性

CSS3允许你给任何元素都设计圆角，一定要确保该元素有背景色或者边框，否则将看不到任何圆角

border-radius:0 30px 10px 5px; 第一个值左上角，第二个值右上角，第三个值右下角，第四个值左下角

border-radius也可以接受一个值，两个值，三个值，接受的值将会作为半径，在元素对应角画圆。

还可以创建椭圆角： border-radius:20px/40px; 第一个是从轨迹中心点到左边或右边的半径，第二个是从轨迹中心点到上边或下边的距离

还可以混合使用圆角和椭圆角

还可以单独设置： border-top-left-redius:10px;

注：IE8及更早不支持border-radius属性，iOS的Safari3.2和Android Browser2.1需要提供厂商前缀-webkit-

供应商前缀

1、-webkit-：用于Chrome、Safari以及其他基于WebKit的浏览器

2、-moz-：用于Mozilla Firefox

3、-o-：用于Opera

4、-ms-：用于IE

添加阴影

box-shadow任何现代浏览器都支持，包括IE9，只是画出的阴影比其他浏览器细，IE8及更早版本会完全忽略

box-shadow:-4px 6px 8px #999;

第一个值表示水平偏移量，正值阴影移右边，负值阴影移左边，第二个表示垂直偏移量，正值阴影在下方，负值在上方，第三个是阴影半径，决定阴影的模糊度和宽度，值为0完全不模糊，值越大越模糊且更宽，第四个是颜色值，grba值看起来更好。

box-shadow包括两个可选值，inset关键字和阴影尺寸（spead）。inset告诉浏览器阴影画在方框内。还可以添加阴影尺寸作为第4个值（在阴影半径和阴影颜色之间）

box-shadow与text-shadow一样可以设置多个阴影，方法与text-shadow类似

确定高度和宽度

使用百分比值都是以样式外围元素为基准

利用box-sizing属性调整盒子的宽度

box-sizing属性提供了以下3个选项：

1、content-box是浏览器定义元素的屏幕宽度和高度的一种方法。这是默认行为，不需要为content-box定义任何值

2、padding-box告诉浏览器当在一个样式中设置了width或height时，应该包含padding作为该值的一部分。例：假设一个元素的left/right padding为20px，width为100px，实际上内容区域的宽度将只有60px

3、border-box值包含了padding厚度和border厚度

注：IE8及更新版本支持box-sizing，IE7不支持

用overflow属性控制溢出

visible，浏览器通常的做法

scroll，添加滚动条，无论是否需要都会添加

auto，与scroll一样，不过，只会在需要的时候出现

hidden，隐藏任何超出的内容

高度和宽度的最大化和最小化

max-height，最大高度

max-width，最大宽度

min-width，最小宽度

min-height，最小高度

用浮动元素包围内容

使用float属性可以把元素移到左边或右边，元素下方的内容会上移，包围浮动元素。

3种选项：left、right、none

background-color、border不能像其他网页元素一样浮动。假设让一个元素附到右边，侧边栏下方的内容通常应该上移将它包围起来。但若内容设置了背景或边框，背景或边框就会出现在浮动侧边栏的下方。可以对浮动元素下方的背景或边框添加overflow:hidden规则。

停止浮动

使用clear属性可以指示元素不要包围浮动项目。

接受以下选项：

left、样式将落至左浮动元素下方，但扔将环绕右浮动对象

right、样式将落至右浮动元素下方，但仍将环绕左浮动元素

both、样式将落至浮动样式下方

none、关闭清除，让项目包围左右浮动元素

添加背景图片

background-image属性是使网站看起来美观的关键

以下三种格式都是可以的：

.testClass{    background-image:url(image/example.gif);    background-image:url("image/example.gif");    background-image:url('image/example.gif');}

可以使用相对路径，相对路径是相对于样式表的路径，而不是相对于要设置的HTML页面的路径

控制重复

使用background-repeat属性指定图片如何平铺

1、repeat是默认设置，将背景图从左到右、从上到下平铺，直到填满整个空间

2、no-repeat只显示图片一次

3、repeat-x是沿着X轴水平重复某一张图

4、repeat-y是沿着Y轴垂直地重复某一张图

定位背景图片

background-position属性，可使用多种方式来精确控制图片位置。可通过3种不同方法来设定，keyword、精确值、percentage

关键字

left、fight、center控制水平

top、center、bottom控制垂直

精确值

可以用pixel或em值来定位背景图片。使用两个值：一个值指明图片左侧和容器左侧之间的距离，另一个指明图片顶边和样式顶边之间的距离（第一个控制水平方向，第二个控制垂直方向）

percentage百分比值

以百分比时要讲究技巧，如果能够使用关键字或精确值达到效果，建议不要使用百分比

使用百分比一样要提供两个值：一个值指明水平方向的定位，一个指明垂直方向的定位。

百分比值是被格式化的元素百分比

可以与精确值混用

background-position: 5px 50%;

固定图片

background-attachment属性有两个选项：scroll和fixed

background-origin和background-clip属性

background-origin属性可以调整图片起点。有三个选项：

1、border-box将图片放在border的左上角

2、padding-box将图片放在padding区域的左上角

3、content-box将图片放在内容区域的左上角

通常来说，背景图片会铺满某个元素的整个区域，包括border和padding区域的背面，但是，利用 background-clip来定义图片显示位置，有以下选项：

1、border-box让图片显示在内容区域的后面，包括border区域的背后

2、padding-box所有背景图片都只能显示到元素的padding区域和内容区域

3、content-box限制背景图片只显示在内容区域

缩放背景图片

CSS3还可以调整背景图片尺寸，background-size属性，可以利用值或关键字来设置这个尺寸：

1、用一个高度值和宽度值来设置图片尺寸

.testClass{    background-size:100px 200px;    background-size:100px auto;    background-size:100% 100%;     /* 使用百分比值，让图片缩放完全适应背景 */}

2、关键字contain会迫使图片进行尺寸调整，以保持图片的长宽比

background-size:contain

3、关键字cover会迫使图片的宽度或高度进行调整，以便适应元素的宽度或高度

background-size是修改背景图片尺寸的唯一方法。IE8不支持

background快捷方式可以使用较新的CSS background属性，但由于IE8不支持一些新属性，如果都用一个background设置，会导致其他有效属性也变得无效，而且目前尚未有浏览器能够在一个声明中同时处理background-position和background-size值，为此，最好用正常的、可接受的快捷属性创建一个声明，再在快捷声明之后单独添加CSS3新属性声明

免费图片网站

www.morguefile.com、 www.sxc.hu、 http://openphoto.net、 http://search.creativecommons.org、 www.flickr.com/creativecommons、 http://picasaweb.google.com

项目符号或导航栏增色图标

Some Random Dude网站免费提供了一套图标： www.somerandomdude.com/work/sanscons/

趣味的平铺图案

ColourLovers.com网站（ www.colourlovers.com/patterns）、Pattern4u网站（ www.kollermedia.at/pattern4u）、Squidfingers网站（ http://squidfingers.com/patterns）

图案生成器

BgPatterns网站（ http://bgpatterns.com）、StripeGenerator2.0网站（ www.stripegenerator.com）、PatternCooler网站（ www.patterncooler.com）

使用多张背景图片

使用

.testClass{    background-image:url(scrollTop.jpg),                     url(scrollBottom.jpg),                     url(scrollMiddle.jpg);}

可以放一行，不过格式最好有

由于背景一般会平铺，为此还需要包含一个background-repeat属性：

.testClass{    background-repeat:no-repeat,                      no-repeat,                      repeat-y;}

值都是一一对应的，不过，太麻烦，容易混乱，为此使用快捷方法：

.testClass{    background:url(scrollTop.jpg) center top no-repeat,               url(scrollBottom.jpg) center bottom no-repeat,               url(scrollMiddle.jpg) center top repeat-y;}

在IE8中可以使用:before和:after伪类来实现上述功能

使用渐变色背景

线性渐变

使用关键字：

.testClass{    background-image:linear-gradient(left,black,white);/* 从元素左边以黑色开始，渐变到元素右边以白色结束 */    background-image:linear-gradient(top left,black,white);/* 从元素左上角开始到元素右下角，黑色开始白色结束 */}

还可以使用程度值：0~360

使用方法：

.testClass{    background-image:linear-gradient(45deg,rgb(0,0,0),rgb(204,204,204));}

颜色站

渐变使用的颜色不只是两种，可以为其添加多种颜色：

.testClass{    background-image:linear-gradient(45deg,black,white,black);    background-image:linear-gradient(left,#900,#FC0 10%,#FC0 90%,#900);}

10%应用到第二种颜色，告诉浏览器，需要让颜色到达元素宽度10%位置处，同样地，90%告诉浏览器需要一直保持橘黄色到元素宽度90%处然后在转变。

注：许多浏览器需要提供供应商前缀才能使用CSS新属性，IE9及更早版本还不支持渐变

不只可以使用百分比，还可以使用pixel和em，不过百分比更灵活

重复线性渐变

在这里，pixel更有用。

用指定颜色站定义一种渐变，然后重复模式，将它平铺到背景中。

.testClass{    background-image:repeating-linear-gradient(bottom left,#900 20px,#FC0 30px,#900 40px);}

效果：

非常棒哦。。。。

径向渐变

最简单语法：

.testClass{    background-image:radial-gradient(red,blue);/* 创建了一个适合颜色高度和宽度的椭圆形，渐变中心处于元素中心 */}

添加关键字"circle"还可以创建圆形渐变：

.testClass{    background-image:radial-gradient(circle,red,blue);}

浏览器一般是从元素中心点开始绘制径向渐变的中心，但可以利用与background-position属性相同的关键字和值来定位渐变中心点。

.testClass{    background-image:radial-gradient(20% 40%,circle,red,blue);/* 从元素左边20%处以及元素上方40%处开始 */}

为了指明渐变尺寸，可以使用以下4个关键字之一：

1、closest-side告诉浏览器，渐变从中心点一直延伸到离中心点最近的那一边。

.testClass{    background-image:radial-gradient(20% 40%,circle closest-side,red,blue);}

2、closest-corner用于测量渐变宽度，指的是从它中心点到最近元素角的距离

.testClass{    background-image:radial-gradient(20% 40%,circle closest-corner,red,blue);}

3、farthest-side用于测量圆形半径，即从它中间点到元素最远那一边的距离

.testClass{    background-image:radial-gradient(20% 40%,circle farthest-side,red,blue);}

4、farthest-corner用于测量圆形半径，即从它中间点到元素最远角的距离

.testClass{    background-image:radial-gradient(20% 40%,circle farthest-corner,red,blue);}

与线性渐变一样，可以使用颜色站，一样需要供应商前缀

重复径向渐变

.testClass{    background-image:repeating-radial-gradient(circle,red 20px,orange 30px,yellow 40px,red 50px);}

注：为了创建看起来比较自然的渐变，终止色应该与起始色相同。

用Colorzilla轻松创建渐变

使用CSS渐变生成器（ www.colorzilla.com/gradient-editor/）帮助轻松创建出大多数类型的渐变（重复渐变除外）