4. 有关文字的属性
4.1. 字体属性
字体属性是用来设定“文字字形”的外观表现，主要包括：
颜色， 字体名称， 大小， 是否斜体（字体样式）， 是否粗体。
color， font-family， font-size， font-style font-weight
常用字体属性如下所示：
| 属性名称 | 含义与说明 | 举例 | 其他 |
| color | 文字的颜色，又称为“前景色” | color: red; color:#ff0000; color:rgb(255, 50, 100) color:rgba(250,0,0,0.7) | 颜色值可以有多种写法 |
| font-family | 文字的字体，比如宋体，黑体，微软雅黑，隶书。 | font-family: 宋体； font-family: 微软雅黑，宋体； font-family: “Times New Roman”; | 可以设定多个值，浏览器优先使用前面的，没有再依次找后面的，或使用内部字体。 |
| font-size | 文字的大小 | font-size: 14px; | px是长度单位，表示“像素” |
| font-style | 文字的样式（决定字体是正体还是斜体） | font-style: itatic; font-style: normal;（默认值） | normal（正常字体，默认值）；itatic（斜体） |
| font-weight | 文字的粗细度 | font-weight: bold; font-weight:bolder; | 有4个值可用： normal, bold, bolder, lighter |
| font | 上述所有文字属性的综合属性。 | font:red 宋体 14px italic bold; | 属性值依次写出，空格隔开，不分顺序 |
演示：
使用一段话，在该段落中，能够表现所有上述属性。
font综合属性的语法：
font：[ <' font-style '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ];
4.2. 文本属性
文本属性通常指的是作为文字内容的整体性特性（而不是具体文字的表现特性）。
常用属性有：
| 属性名称 | 含义 | 举例 | 其他说明 |
| text-align | 一段文字的对齐方式 | text-align: center; | 可用值：left， center， right |
| text-decoration | 一段文字的”修饰线” | text-decoration：underline | 可用值：underline（下划线），overline（上划线），line-through（中划线） |
| text-indent | 设置一段文本的“首行缩进”的宽度（距离） | text-indent: 24px; | px是长度单位，表示“像素” |
| line-height | 设定文字的“行高” | line-height: 30px; line-height: 2em; | em是长度单位，表示“字高” |
| letter-spacing | 设定文字的“字符间距” | letter-spacing: 3px; | 注意：中文的每个字都算一个字符 |
| word-spacing | 设定文字的“单词间距” | word-spacing: 15px; | 注意：单词通常是以“空格”隔开的。因此，连续的中文即使很长也只能算一个单词。 |
演示：
使用一段话，在该段落中，能够表现所有上述属性。
5. 有关盒子的属性
盒子就是一个元素（标签）的所辖范围，简单来说，基本就是一个“矩形区域”。
5.1. 盒子概述
所谓盒子，就是将html网页中的标签在网页版面中所占据的平面范围，抽象出来的一个“视觉形状”。
一个最简单的理解就是：几乎所有标签，都可以看做是一个“矩形盒子”，具有一定的宽高（区域）。
总体上来说，一个盒子，是由若干个部分构成的，从内到外依次包括：
盒子内容区，内边距区，边框，外边距区
图示如下：
记住以下几个单词：
content：内容
padding：内边距，又称为内补白，是一片空白区域
border：边框
margin：外边距，又称为外补白，也是一片空白区域
top，right，bottom，left：上，右，下，左
特别注意：
1，一般情况下，一个盒子中放置内容或其他元素（元素也是盒子），实际是放在内容区的。
2，平常我们看不到内边距，边框和外边距，是因为他们默认都是0（宽度，或厚度）。
5.2. 盒子的宽高属性width和height
设置盒子的宽高属性，实际上设置的是盒子内容区的宽高。比如：
div{
width: 100px;
height: 100px;
}
而盒子实际占据的区域的宽高，可以这样来计算：
盒子所占宽：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
盒子所占高：
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
除了这两个基本宽高属性，还有以下4个范围限定性宽高属性，有时候也会用一用：
min-width： 设定最小宽度
max-width： 设定最大宽度
min-height： 设定最小高度
max-height： 设定最大高度
5.3. 边框属性border
边框属性就是设置一个盒子的边框线的具体特性。
边框线的特性有3个：
border-style：
线型，属性值通常有：solid(实线)， dashed(虚线)， dotted(点线)
border-width：
线的粗细，长度单位，比如1px
border-color：
线的颜色，颜色值，比如red， rgb(255, 0, 0)， #FF3366
又由于一个盒子的边框有4个方位(top, right, bottom, left)，则总体上就至少有12个边框属性，形式为：
border-方位-特性，比如：
border-top-style， border-top-width，border-top-color， border-right-width， border-left-color，等等。
示例：
border-top-style: solid;
border-right-color: #FF0000;
border-left-width: 2px;
实际上，还有若干个“单边综合属性”，比如：
border-top：一次性设置上边框线的特性；
border-left：一次性设置左边框线的特性；
....
示例：
border-top: 1px solid blue;
border-right: 5px dotted green;
应用中，最常用的其实是“border”这一个最大的综合属性，它一次性设置4个边的3个特性，比如：
border： 1px solid red; //表示4变的边框线都是宽度为1px的红色实线。
演示：
以下其实是两个a连接：
5.4. 内边距属性padding
含义：
内边距是指在盒子结构中，盒子的边框线和内容之间的一段空白区域（内容放不进去）。
我们能设置的就是这个空白区域的大小（宽度）。
同样分4个方向，分别可以单独设置：
padding-top：1px； //上内边距
padding-right：2px； //右内边距
padding-bottom：4px； //下内边距
padding-left：8px； //左内边距
还有一个综合属性：
padding：宽度1 [宽度2] [宽度3] [宽度4]； //这个用的最多，推荐使用。
这个综合属性可以设置1-4个值，不同个数的值，其含义不同，如下所示：
1个值： 表示4个方向都是这个值。
2个值： 第1个表示上下边距的值，第2个表示左右边距的值。
3个值： 第1个表示上边距的值，第2个表示左右边距的值，第3个表示下边距的值。
4个值： 依次代表top， right， bottom， right这4个方向的内边距的值。
记忆：
按给出值的个数，按顺时针依次给上，右，下，左去“赋值”，没有的，就找对面。
5.5. 外边距属性margin
含义：
外边距是指在盒子结构中，盒子的边框线，跟盒子的外部其他元素之间的一段空白区域。
我们能设置的就是这个空白区域的大小（宽度）。
它的属性设置和含义，跟内边距（padding）非常类似：
margin-top：1px； //上外边距
margin-right：2px； //右外边距
margin-bottom：4px； //下外边距
margin-left：8px； //左外边距
margin：宽度1 [宽度2] [宽度3] [宽度4]； //同时设置4个方向，用的最多，推荐使用。
演示：
做法1（不带边框）：
做法2（带边框）：
外边距的“重叠性”：
当两个垂直方向的外边距（即margin-top和margin-bottom）挨在一起的时候（就是垂直方向上相邻），则这两个外边会“重叠在一起”，表现为只有更大的那个外边距的高度(本来“按理”是两个相加的高度)。
情况1：
margin-bottom和margin-top相邻（挨着）：
情况2：
2两个margin-top相邻（此时其实是两个嵌套的div）。
（两个margin-bottom道理一样）
5.6. 背景属性background
含义：
背景是指在盒子结构中，衬托在边框线范围以内的背景颜色或背景图。
可以设置背景颜色，或背景图，或同时设置。其中背景图有多项参数可设置。
主要的背景属性设置有：
设置背景颜色：
background-color：yellow;
设置背景图：
background-image：url(图片路径); //注意，图片路径是相对于当前网页或css文件(对外部样式来说)
设置背景图的位置（有背景图的前提下有效）
background-position：水平位置 [，垂直位置]；
说明：
1，如果不设置该属性，默认值为“0,0”，即在盒子的左上角。
2，可以设置1个值或2个值；设置1个值的时候，第二个默认为center（居中）。
3，水平位置：可以设置为长度值，或百分比，或以下固定值：left/center/right。
4，垂直位置：可以设置为长度值，或百分比，或以下固定值：/top/center/bottom
设置背景图是否重复（有背景图的前提下有效）：
background-repeat：属性值1 [,属性值2]； //有以下几个属性值可用：
repeat： 重复，默认值；
no-repeat： 不重复；
repeat-x： 只在x方向重复；
repeat-y： 只在y方向重复；
背景综合属性background：
可以同时设置上述几个有关背景的属性，相互之间用空格隔开，比如：
background：yellow； 只设置背景颜色；
background：yellow url(./images/bg.jpg) no-repeat；
background：yellow url(./images/bg.jpg) repeat-y lelft top；
background：yellow url(‘/images.bg.jpg) repeat no-repeat 5px 10px；
示例：
背景图的经典应用：
用一个背景图，在“分配”到若干个小的盒子中！
5.7. 轮廓属性outline
含义：
轮廓指的是盒子边框线外面再套一层“修饰性”线条，该线条只有视觉效果，不占版面空间。
实际上，如果有外边距（margin），轮廓线是可以跟margin有重叠的。
轮廓属性主要有：
outline-width： 轮廓线宽度
outline-style： 轮廓线线型
outline-color： 轮廓线颜色
outline-offset： 轮廓线距离边框线的距离（间隙）
5.8. 盒子综合案例
定义一个div盒子，要求实现如下效果：
1，盒子宽350，高150；
2，盒子边框线为5px的蓝色虚线，内外边距分别是10px和5px；
3，盒子背景颜色为黄色；
4，盒子背景图为100x100，水平和垂直居中，且水平重复；
5，盒子有一圈1px的红色轮廓实线，距离边框线5px。
类似下图这样（图中没有表现出margin）：
代码如下：
6. 有关布局的属性
布局与定位属性，主要是用来确定一个页面上的各个盒子（几乎所有标签都是盒子）怎么排布，以及怎么固定在页面所要求的区域和位置。
比如下面这个页面效果，要怎么来实现呢？
即使每一个部分，又继续涉及到其内部再分小区域，比如主体区域和右侧区域就明显还分几个不同区域。
这就需要用到我们要学习的“页面布局技术”了——这是重中之重！
6.1. 布局属性
6.1.1. 盒子的显示效果属性display
含义：
指设置一个盒子（元素，标签）在网页中的基本显示特性，最常见的就是显示为块元素特性还是行内元素特性。
tip：通过这个属性，则所有表现型元素，都可以任意将其作为块元素或者行内元素来使用！
常用的属性值有：
block： 显示为块状元素
inline： 显示为行内元素
block-inline：显示为行内块元素
含义：整体表现为块元素(不会自动折行)，但可以跟其他行内元素并行在一行(表现为行内元素)。
说明：一个img就是典型的行内块元素（它本身不会折行，但一行可以放置多个）。
none： 不显示（隐藏元素）
关于元素按显示特性分类：
块状元素：
元素独占“一行”。
典型标签：div, p, h1~h6, pre, hr, ul, ol, li, dl, dt, dd, table。
行内元素：
元素在一行内从左到右“流式显示”，直到碰到行尾，再自动换行下一行显示。
典型元素：span, a, b, strong, i, font, em,
行内块元素：
元素本身不换行（不折断），但只要能显示得下，则一行可以显示多个（跟行内元素一样）。
典型元素：img, input, select, textarea, button, video, audio
特别注意：
1，行内元素不能设置宽高值。行内元素的宽高值由其中的内容多少、文字大小和行高决定。
2，行内元素不能设置上下外边距和上下内边距（实际可以设置，但无效，不占空间）。
3，行内元素可以设置边框，但上下边框不占空间（左右边框会占空间）。
4，行内块和块元素都具有盒子的所有属性，唯一区别是行内块可以多个出现在一行中。
6.1.2. 浮动属性float
6.1.2.1. 浮动的含义与作用：
浮动就是让一个元素往左或右边“尽量挤靠”，以使其周边文字（行内元素）可以围绕该浮动元素显示。
其典型的表现就是一张图片向左对齐（align=”left”）的时候，图片标签前后的文字都能够绕着图片展示。
浮动属性float的值包括：
left（向左浮动）， right（向右浮动）， none（不浮动）。
语法：
float：left； 或 float：right；
课堂练习：将一个span， div，一个img放在一行上，都设定边框，并且都一样宽高：
做法1：使用float：left；
做法2：使用display:inline-block;
结果如下：
附有关字体的几根线：
6.1.2.2. 浮动的特性：
1，对行内元素来说：浮动元素会先于同一行中的行内元素而占据其所设定方向的水平空间；
2，对块状元素来说：浮动元素相当于“浮起来了”，块状元素会被浮动元素“遮挡”；
3，多个浮动元素会依次往设定的方向“挤靠”，直到放不下，再往“下一行”，继续“挤靠”；
4，浮动元素往下一行挤靠时，如碰到“突出物”，则会被“卡住”，但仍然按挤靠规则进行显示；
5，浮动盒子失去“垂直支撑力”，表现为不占它外层盒子高度，但仍然有宽度；
表现盒子的浮动特性案例：
案例1：
对行内元素来说：浮动元素会先于同一行中的行内元素而占据其所设定方向的水平空间：
结果：
案例2：
对块状元素来说：浮动元素相当于“浮起来了”，块状元素会被浮动元素“遮挡”：
代码如下：
案例3：
多个浮动元素会依次往设定的方向“挤靠”，直到放不下，再往“下一行”，继续“挤靠”：
代码：
案例4：
浮动元素往下一行挤靠时，如碰到“突出物”，则会被“卡住”，但仍然按挤靠规则进行显示，类似如下效果：：
演示代码：
结果如下：
案例5：
浮动盒子失去“垂直支撑力”，表现为不占它外层盒子高度，但仍然有宽度：
代码演示：
结果如下：
有关案例5的特别提示：
内层浮动盒子在版面（视觉上）超出了它的的父盒子。
在绝大多数实际应用中，这不能忍！我们要清除浮动！
6.1.2.3. 浮动的清除：
当一个盒子内部出现浮动元素，则该盒子不会被该浮动元素“撑高”，也就是说，父盒子失去了理应包住子盒子的高度。
（当然，如果父盒子中有其他非浮动元素撑着，也就具有该其他非浮动元素所应该撑出的高度）
这通常都不符合正常的文档布局的需要——正常的需要就是外层盒子需要包住内层盒子。
怎么办？
——清除浮动。
使用属性clear，有常见的3个值：
clear: left:表示该元素左边不要出现浮动元素；
clear: right：表示该元素右边不要出现浮动元素；
clear:both：表示该元素两边都不要出现浮动元素；——这是最常见的需求（场景）。
所谓清除浮动，其实就是让父盒子中的浮动特性“终止”（结束）。这样父盒子就具有了正常的高度，可以正常包住其内部的浮动盒子。
做法1：
设置父盒子的overflow属性为hidden；
做法2：
在父盒子内部的末尾添加一个“清除浮动”的空盒子。
做法3：
给父盒子的末尾添加一个“清除浮动”的伪元素（::after）。
——推荐做法！
案例：实现如下经典两栏布局效果：
总宽度为960px。黄色盒子左侧空隙5px，其右侧空隙10px。
整体版面窗口居中！
代码如下：
6.1.3. 溢出属性overflow
当一个盒子里面有浮动元素，则：
1，如果该盒子不设置高度，就应该清除浮动。
2，如果该盒子设置了高度，此时就应该考虑溢出时的处理效果！
3，如果该盒子设置了高度，则里面盒子的浮动，清不清除都无关紧要。
含义：
就是设置一个盒子内部的内容，超出了该盒子的设定大小的时候，怎么显示该内容的问题。
overflow常用值有：
auto： 自动，按浏览器的默认设置自动处理，可能各浏览器会有所不同。
scroll： 滚动，就是超出范围的时候，盒子出现滚动条（像浏览器的滚动条那样）。
hidden： 隐藏，就是将超出部分隐藏起来（视觉上不可见）。
visible： 显示，就是虽然，超出去了，但仍然显示出来，这是这个属性的默认值，无需设置。
此时，虽然可能超出外层盒子，但不会影响外层盒子后续的位置（布局）。
6.1.4. 可见性属性visibility
含义：
设置元素的可见性。主要有两个值：
visible： 可见；
hidden： 隐藏。
特别注意：
设置visibility为hidden，虽然元素不可见了，但元素原本所占的空间仍然存在（效果是一片空白）
对比：设置display为none，也是隐藏，但此时该元素不但不可见，而且不占版面空间。
6.2.1. 布局思想
表格布局思想：
使用表格，将页面分割为若干区域：
纵向：就用表格的tr。
横向：就用表格的td实现。
层层分割：每个区块只考虑是“横向”还是“纵向”。
表格布局思想，被抛弃的原因是：网页展示速度慢！非常慢！
div+浮动布局思想：
纵向：使用div，自然上下排列出来。
横向：使用浮动div，并做好清除浮动工作（使浮动元素不影响后续元素）。
层层分割：每个区块只考虑是“横向”还是“纵向”。
典型布局效果：
6.2.2. 纵向布局的实现
若干div自然就实现的纵向布局（自然从上到下排列出来）
6.2.3. 横向布局的实现
若干div使用浮动，就横过来了。
注意清除浮动以使外层盒子有正常的高度（包住内层浮动盒子，并避免影响后续内容）。
1.1.1. 整体布局的实现
非常简单，就是“层层分割”：
1，确定当下要进行布局设计的区域范围（毫无疑问是矩形盒子，而且最初肯定是整个网页区域）；
2，确定该区域按纵向布局还是横向布局，依此进行盒子样式设计；
3，对第2步中分割出来的“小区域”，继续用第2步的思路进行布局设计，以此类推，层层细分。
1.1.2. 经典圣杯布局
所谓经典圣杯布局（不知道谁取的这个名字），就是一个网页最常见的布局需求，大致如下所示：
其中主要的布局实现其实是中间部分。中间部分也可能是2栏（或左或右）。两边的宽度是固定的，中间主体部分的宽度可以是固定的，也可以是可变的（根据需要而定）。
案例1：
实现网页两栏典型布局效果。其中左边侧栏宽度固定（200px），右边主体栏宽度可变（最小600px）。
方法1：
代码如下：
<div class="box">
<aside>边栏</aside>
<main>
<div class="main">
主体主体主体主体</div>
</div>
</main>
</div>
<style>
.mainpage{
border:1px solid red;
margin:0 auto;
width:90%;
min-width: 800px;
}
.box{
border:1px solid red;
margin:5px;
}
.box::after{
content:"";
display:block;
clear:both;
}
.box>aside{
background: yellow;
width:200px;
float:left;
}
.box>main{
margin-left:210px;
}
.box>main>.main{
border:solid 1px blue;
background: pink;
}
</style>
方法2；
<style>
.mainpage{
border:1px solid red;
margin:0 auto;
width:90%;
min-width: 800px;
}
.box{
border:1px solid red;
margin:5px;
}
.box::after{
content:"";
display:block;
clear:both;
}
.box>aside{
background: yellow;
width:200px;
float:left;
margin-left:-100%;
}
.box>main{
float:left;
width:100%;
height:40px;
background: orange;
}
.box>main>.main{
margin-left:210px;
border:solid 4px blue;
background: pink;
}
</style>
</head>
<body>
<div class="mainpage">
<header>头部</header>
<div class="box">
<main>
<div class="main">
主体主体主体主体主体主体主体
</div>
</main>
<aside>边栏<br><br></aside>
</div>
<footer>底部</footer>
</div>
案例2：
实现网页三栏典型布局效果。其中左边和右边侧栏宽度固定（均为200px），中间主体栏宽度可变（最小400px）。
方法1：
代码如下：
<style>
.mainpage{
border:1px solid red;
margin:0 auto;
width:90%;
min-width: 800px;
}
.box{
border:solid 1px blue;
}
.box:after{
content:"";
display: block;
clear:both;
}
.box>.side_left{
width:200px;
background: yellow;
float:left;
}
.box>.side_right{
width:200px;
background: yellow;
float:right;
}
.box>main{
margin-left:210px;
margin-right:210px;
background: gray;
}
</style>
</head>
<body>
<div class="mainpage">
<header>头部</header>
<div class="box">
<aside class="side_left">左边栏<br><br></aside>
<aside class="side_right">右边栏<br><br></aside>
<main>
<div class="main">
主体主体主体主体主体主体主体
</div>
</main>
</div>
<footer>底部</footer>
方法1：
<style>
.mainpage{
border:1px solid red;
margin:0 auto;
width:90%;
min-width: 800px;
}
.box{
border:solid 1px blue;
}
.box:after{
content:"";
display: block;
clear:both;
}
.box>main{
float:left;
width:100%;
}
.box>main>.main{
background: gray;
margin-left:210px;
margin-right:210px;
}
.box>.side_left{
width:200px;
background: yellow;
float:left;
margin-left:-100%;
}
.box>.side_right{
width:200px;
background: yellow;
float:right;
margin-left:-10px;
}
</style>
</head>
<body>
<div class="mainpage">
<header>头部</header>
<div class="box">
<main>
<div class="main">
主体主体主体主体主体主体主体
</div>
</main>
<aside class="side_left">左边栏<br><br></aside>
<aside class="side_right">右边栏<br><br></aside>
</div>
<footer>底部</footer>
</div>
7. 定位属性
定位就是通过有关定位的属性来明确设定一个盒子的在以下两个方面的位置：
1，在（x,y）平面上所处位置。
2，在高度（z轴）方向的位置（层次）。
这是相对于一个盒子的“自然位置”和“浮动位置”而言的。
自然位置就是所谓的正常的文档流所确定的位置。
浮动位置就是由于浮动的特性而确定的位置。
1.1.3. 定位方式属性position
position用于设定一个元素的位置按什么方式来确定。
通俗说就是设定元素“放在哪个位置”（可由4个定位属性确定：top，left, right, bottom）。
有如下4个值可用：
static： 静态定位（其实就是没有定位）
是一个元素的默认定位方式，也就是一个文档中元素的正常文档流所确定的定位。
对其给定定位位置（top，left, right, bottom）的值无效。
relative：相对定位
相对于其本来应该所处的位置而设定一个相对性定位。
需给定位置（top，left, right, bottom）
absolute：绝对定位
相对于其上层最近的一个非static定位元素而设定的一个绝对性定位。
需给定位置（top，left, right, bottom）；
而如果其所有上级都没有非static定位元素，就相对于窗口来定位——手册上说的相对于body，是不准确的！
fixed： 固定定位
相对于当前网页窗口而设定的一个绝对性定位。
需给定位置（top，left, right, bottom）。
注意：
1，relative定位虽然会改变元素的位置，但不影响上级盒子和相邻盒子该有的正常宽高和位置。
2，absolute定位和fixed定位的元素脱离了文档流，也就是上级盒子中不会计算其宽高（像没有一样）
1.1.4. 定位位置属性：top，left，right，bottom
就是对于3种定位方式（relative， absolute， fixed），所给定的具体位置值。
可以是使用距离“上”，“左”，“下”，“右”各多少来定。
比如：
.cc1{
position: absolute;
left: 5px; top: 10px;
}
注意：top和bottom不能同时用；left和right不能同时用！
1.1.5. 层叠属性z-index
含义：
就是将一个元素（盒子）默认情况下所展示在的那个平面（就是屏幕所在面）的垂直线当做z轴方向（就是眼睛盯屏幕时的那个“视线”方向），朝眼睛方向为z轴的正方向。则z-index可以设定一个元素（盒子）在z轴方向的“叠放层次”的高低，用整数表示。越大值表示越高，也就是离眼睛越近，自然就会覆盖住比它低的其他盒子。
如下图所示：
<style>
.box{
border:solid 1px red;
width:300px;
height:200px;
position: relative;
}
.box .box1{
background: yellow;
width:100px;
height:100px;
z-index:10;
position: relative;
left:10px;
top:10px;
}
.box .box2{
background: blue;
width:60px;
height:50px;
z-index:6;
position: relative;
}
.box .box3{
background: green;
width:80px;
height:30px;
z-index:3;
position: relative;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
8. 列表与表格样式
列表样式指的是ul（无序列表）和ol（有序列表）的表现特性；
表格样式指的是table的表现特性。
都比较简单，用得也不多。
1.2. 列表样式
列表样式主要是设置ul或ol前面的那个“列表符”的特性，包括：
list-style-type：
用于设置列表样式的类型，比如原点(disc)，圆圈(circle)，阿拉伯数字(decimal)，罗马数字，英文字母。
有了这个属性，对ul和ol来说，就没有差别了！
list-style-image
用于设置列列表前面的小图标（图像），也就是说，用一个图片来代替上面的列表符。
如果设置了这项，则list-style-type就失效。
list-style-position：
用于设置列表项目符的位置，只有两个值：outside(外面，默认），inside（里面）。指的是列表符，是放在li盒子的里面，还是放在li盒子的外面。
list-style：上述3个属性的综合属性。
说明：
实际应用中，通常使用背景图像来代替“list-style-type”和“list-style-image”。
1.3. 表格样式
表格样式主要是从整体上设置一个表格的外观表现，而不涉及到具体的每一个单元格。
表格样式的属性主要包括：
border-collapse：
设置表格的单元格边线是否合并；有两个值可用：separate（分离），collapse（合并）
border-spacing：
设置表格单元格之间的间隙，长度单位。
注意：只有在border-collapse的值为separate时才有效。
caption-side：
设置表格标题（caption标签）的放置位置，可用值有：top，bottom。（FF还有left和right）
9. CSS3高级特性
CSS3高级特性主要包括：
盒子新特性
多栏布局
弹性布局
2D变换
3D变换
过渡属性
动画属性
1.4. 盒子新特性
CSS3中的盒子，有如下几点加强：
盒子阴影
边框可设定圆角；
可用图片做边框；
背景图可进一步设定定位原点和大小；
背景图可进行裁切；
背景图可使用渐变色。
1.4.1. 盒子阴影box-shadow
属性：
box-shadow
作用：
用于设定一个盒子的阴影效果
形式：
box-shadow：水平偏移值 垂直偏移值 [模糊值] [外延值] [颜色] [inset]；
说明：
1，至少设置两个长度值，分别表示阴影的水平偏移量和垂直偏移量，可以为负；
2，模糊值是设定阴影的模糊效果的宽度，可以不设置，则默认为0；
3，外延值是设定阴影再“扩大”的宽度，可以不设置，则默认为0；
4，inset表示设置“内阴影”，可以不设置，则默认为外阴影。
举例：
.box1{ box-shadow: 2px 2px red; }
.box2{ box-shadow: 2px 5px 2px #00FFFF; }
.box3{ box-shadow: 2px 5px 2px 3px rgba(33, 33, 33, 0.5); }
.box4{ box-shadow: 2px 5px rgba(66,66,66,0.5) inset; }
1.4.2. 圆角边框border-radius
属性：
border-radius
作用：
用于设定一个盒子的圆角特性。
形式：
border-radius: 水平圆角半径 [/ 垂直圆角半径]；
说明：
1，垂直半径可以省略，则其同水平半径的值。
2，半径设置可以提供1~4个值，具体如下。
提供1个：4个角都为该值；
提供2个：第1个表示上左和下右，第2个表示上右和下左；
提供3个：第1个表示上左，第2个表示上右和下左；第3个表示下右；
第供4个：分别代表4个角上的半径（依次上左，上右，下右，下左）
举例：
border-radius: 5px; //4个角半径均为5px；
border-radius: 5px/15px; //4个角水平半径为5px，垂直半径为15px；
border-radius: 5px 6px 7px 8px; //四个角半径分别是5px，6px，7px，8px；
border-radius: 5px 6px 7px 8px/15px 16px 17px 18px;
有关水平半径和垂直半径的图示：
代码为：
border-radius: 40px 20px / 25px 15px;
1.4.3. 图像边框border-image
1.4.3.1. 原理说明
图像边框是指使用一张图片来作为一个盒子的边框。其实就是将图片作为背景图铺上到“边框区域”上去。
但这个铺设到边框的图片，并非像常规背景图那样简单直接地铺设上去，而是有其特定的规则。
边框上铺设图片的基本原理如下图所示：
其铺设原理是：
将要作为背景的图片，分割为9个部分（如上图所示），然后4个角4个边分别铺设对应部分，中间区域就铺设背景图片的中间部分。其中4个边和中间区域，可以类似常规背景一样进行“平铺(repeat)”,或进行拉伸(缩放)。从而达到整个盒子的完美背景呈现。
其主要用于实现类似下面这类“可变内容”的盒子背景：
1.4.3.2. 主要属性
边框背景的主要属性有：
border-image-source:
设置作为边框背景的图片源；
border-image-slice:
设置要将边框背景图片进行“切割”的分割方式。形式为：
border-image-slice: 数值 [fill]; //特别注意：这里的数值不带单位！
其中“数值”可以是1-4个值，分别代表上右下左4个方向的“切割厚度”。
fill代表“填充”，用于中间区域填充到盒子内容区。
border-image-width:
设置图片边框的宽度，也可以设定1-4个值。
通常设定为auto（自动），此时就会使用border-image-slice所设定的切割厚度。
border-image-repeat:
设置边框背景的填充方式，可以设定1-2个值，表示横向和纵向的填充方式。
可用值如下：
stretch： 指定用拉伸方式来填充边框背景图，这是默认值，也最常用，推荐使用。
repeat： 指定用重复平铺方式来填充边框背景图。类似背景图的repeat，背景图不改变大小。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
注：有的浏览其中应用边框图属性需同时设定border属性。
1.4.3.3. 案例
使用这个图片作为边框背景图：
来实现如下效果：
案例演示：
效果如下：
1.4.4. 背景图高级特性
前面有关一个盒子的背景设置，我们主要学习了这几个基本属性：
background-color: 设置背景颜色。
background-image: 设置背景图像源文件。
background-repeat: 设置背景图像的重复性，可用值：repeat, no-repeat, repeat-x, repeat-y。
background-position: 设置背景图片起始位置或定位位置。
background: 上述几个属性的综合属性。
有关盒子的背景设置，在CSS3中，又增加了几个属性，如下所示：
background-attachment：
设置背景图像的滚动特性，可用值有：
scroll： 相对于当前盒子固定（盒子滚动，则背景图也会滚动），这是默认值。
local： 相对于当前盒子的内容固定（内容滚动，则背景图也会滚动）。
fixed： 相对于当前浏览器窗体固定（类似固定定位，即它会始终在窗口的某个位置）。
background-origin:
设置背景图像的参考原点（位置），实际就是背景出现的范围。可用值有：
border-box： 在boder区域范围内（含border）。
padding-box：在padding区域范围内（含padding），这是默认值。
content-box： 在内容区域范围内。
此属性主要是跟background-position的位置计算有关。
background-clip:
设置背景图像向外裁剪的区域，裁剪范围以外就被裁剪了(不显示)。可用值有：
border-box： 从border区域外沿（即不含border）开始向外裁剪背景，这是默认值。
padding-box：从padding区域外沿（即不含padding）开始向外裁剪背景。
content-box： 从content区域外沿开始向外裁剪背景。
background-size: 值1 [, 值2]
设置背景图像的大小，可设置2个值，分别表示横向和纵向的大小。可用值有：
长度： 用长度值指定背景图像大小。不允许负值。
百分比： 用百分比指定背景图像的缩放大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像不超出容器。
演示案例：
背景重复性的值在C3中多两个可用的值：round，space
效果：
space的情况：
1.4.5. 渐变背景gradient
渐变背景其实是设置background-image属性的值，设置的不是一个单一颜色，而是多个颜色，并按给定方式进行渐变。
1.4.5.1. 线性渐变linear-gradient
含义：
线性渐变是让背景颜色按照某个方向（角度）的方式来进行过渡变化。
类似这样：
语法：
background-image：linear-gradient([角度，] 颜色1，颜色2 [，颜色n...] );
说明：
1，角度以从下到上（12点整的方向）为0度，顺时针为正角度，默认为180度。
2，角度还可以使用to left，to right，to top， to bottom这几个关键字；
2，至少设置2个颜色（这样才能实现渐变）；可设置多个颜色，都能自动实现渐变；
3，每个颜色还可以设置“截止位置”，表示该颜色在渐变中的“关键点”（位置），形式为：颜色 位置，比如：red 30px; 或 #00ff00 20%;
举例：
background-image：linear-gradient(red, blue); //从上到下由红色转蓝色
background-image：linear-gradient(90deg, red, blue); //从左到右由红色转蓝色
background-image：linear-gradient(90deg, red, blue, green); //从左到右由红色转蓝色再转绿色
background-image：linear-gradient(45deg, red, blue 30%, green ); //从左下角到右上角，由红色转蓝色到30%位置，然后再渐变为绿色终止
演示代码1：
结果：
代码2：
代码3：
1.4.5.2. 径向渐变radial-gradient
含义：
径向渐变是让背景颜色从某个中心点以圆或椭圆向外扩散的方式来进行过渡变化。
类似这样：
或这样：
语法：
background-image：radial-gradient( [形状] [大小] [at 位置，] 颜色1，颜色2 [，颜色n...])
说明：
1，形状可以是circle（圆）或ellipse（椭圆），默认是跟随盒子（可能是圆，也可能是椭圆）；
2，大小是指渐变从圆心开始向外进行过渡变化的距离（半径），圆用一个值，椭圆用2个值（空格隔开）；
大小还可以使用如下4个关键字：
farthest-corner： 最远角，表示从圆心开始，渐变到最远的角的位置。下面也类似；
farthest-side： 最远边；
closest-corner： 最近角；
closest-side： 最近边；
3，位置可以是一个值（表示横坐标，纵坐标默认居中），或2个值（横纵坐标，空格隔开）；位置还可以使用top， right， bottom，left，center这5个关键字；
4，颜色至少包含2个，每个颜色还可以设定“截止位置”；
举例：
background-image: radial-gradient(red, green, white); //默认为适应盒子，并在中心
background-image: radial-gradient(circle,red, green, white); //设定为圆形
background-image: radial-gradient(circle at 60px 30px, red, green, white); //圆心位置为（60,30）
background-image: radial-gradient(farthest-side at 60px 30px, red, green, blue); //渐变到最远角
background-image: radial-gradient(circle closest-side, red, green, blue);//圆形，渐变到最近的边
background-image: radial-gradient(100px, red, green, blue);//大小为100px(圆形)，默认在中心位置
background-image: radial-gradient(100px 50px, red, green, blue);//大小为100px和50px(椭圆形)
198
