目录
[1. 内容区](#1. 内容区)
[2. 内边距](#2. 内边距)
[3. 边框](#3. 边框)
[4. 外边距](#4. 外边距)
[1. 列表符号 list-style-type](#1. 列表符号 list-style-type)
[2. 图像符号 list-style-image](#2. 图像符号 list-style-image)
[3. 列表缩进 list-style-position](#3. 列表缩进 list-style-position)
[4. 列表复合属性 list-style](#4. 列表复合属性 list-style)
[1. 定位方式 position](#1. 定位方式 position)
[2. 元素位置 top、right、bottom、left](#2. 元素位置 top、right、bottom、left)
[3. 层叠顺序 z-index](#3. 层叠顺序 z-index)
[4. 浮动属性 float](#4. 浮动属性 float)
[5. 清除属性 clear](#5. 清除属性 clear)
[6. 可视区域 clip](#6. 可视区域 clip)
[7. 层的宽度和高度 width、height](#7. 层的宽度和高度 width、height)
[8. 超出范围 overflow](#8. 超出范围 overflow)
[9. 可见属性 visibility](#9. 可见属性 visibility)
[1. 不透明度 alpha](#1. 不透明度 alpha)
[2. 高斯模糊效果 blur](#2. 高斯模糊效果 blur)
[3. 对颜色进行透明处理 chroma](#3. 对颜色进行透明处理 chroma)
[4. 阴影效果 drop-shadow](#4. 阴影效果 drop-shadow)
[5. 对象翻转 flipH、flipV](#5. 对象翻转 flipH、flipV)
[6. 发光效果 glow](#6. 发光效果 glow)
[7. 灰度处理 grayscale](#7. 灰度处理 grayscale)
[8. 反转图像的颜色 invert](#8. 反转图像的颜色 invert)
[9. X光片效果 xray](#9. X光片效果 xray)
[10. 遮罩效果 mask](#10. 遮罩效果 mask)
[11. 波形滤镜 wave](#11. 波形滤镜 wave)
[12. 调整图像的亮度 brightness](#12. 调整图像的亮度 brightness)
[13. 调整图像的对比度 contrast](#13. 调整图像的对比度 contrast)
五、盒子模型
在 CSS 中一个独立的盒子模型由 Content(内容)、padding(内边距)、border(边框)和margin(外边距) 4部分组成。
1. 内容区
内容区有三个属性 width、height 和 overflow。
2. 内边距
内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。
内边距的属性有5种：
(1) padding-top：
顶端内边距属性 padding-top 用于设置上边框和选择内容之间的间隔。
语法：
padding-top:间隔值**说明：**间隔值可以设置为长度值或百分比。其中，百分比不能使用负数。
(2) padding-bottom：
底端内边距属性。
**语法：**同 padding-top。
(3) padding-left：
左边内边距属性。
**语法：**同 padding-top。
(4) padding-right：
右边内边距属性。
**语法：**同 padding-top。
(5) padding：
内边距复合属性。综合了以上四种方向的快捷内边距属性。
语法：
padding:长度值|百分比例：
body{ padding: 10px 20px 30px 40px; }3. 边框
边框的属性有4种：
(1) 边框样式 border-style：
使用边框样式属性可以定义边框的风格样式，这个属性必须用于指定可见的边框。
语法：
border-style:样式值 border-top-style:样式值 border-right-style:样式值 border-bottom-style:样式值 border-left-style:样式值**说明：**边框样式的取值和含义如下：
值 描述 none 默认值，无边框 dotted 点线边框 dashed 虚线边框 solid 实线边框 double 双实线边框 groove 边框具有立体感的沟槽 ridge 边框成脊形 inset 使整个边框凹陷，即在边框内嵌入一个立体边框 outset 使整个边框凸起，即在边框外嵌入一个立体边框 (2) 边框宽度 border-width：
边框宽度用于设置元素边框的宽度。
语法：
border-width:宽度值 border-top-width:宽度值 border-right-width:宽度值 border-bottom-width:宽度值 border-left-width:宽度值**说明：**边框宽度的取值范围如下：
值 描述 medium 表示默认宽度; thin 表示小于默认宽度; thick 表示大于默认宽度; (3) 边框颜色 border-color：
border-color 属性用来设置边框的颜色，可以用16种颜色的关键字或RGB值来
设置。
语法：
border-color:颜色值 border-top-color:颜色值 border-right-color:颇色值 border-bottom-color:颜色值 border-left-color:颜色值(4) 边框属性 border：
综合了边框样式、宽度和颜色的快捷边框属性
语法：
border:边框宽度边框样式颜色值 border-top:上边框宽度上边框样式颜色值 border-right:右边框宽度右边框样式颜色值 border-bottom:下边框宽度下边框样式颜色值 border-left:左边框宽度左边框样式颜色值**说明：**边框属性 border 只能同时设置4个边框，也只能给出一组边框的宽度和
样式，而其他的边框属性只能给出某一个边框的属性，包括样式、宽度和颜色。
4. 外边距
外边距位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。
外边距的属性有5种：
(1) margin-top：
顶端外边距属性。
语法：
margin-top:边距值**说明：**margin-top 取值范围包括如下：
序号 描述 1 长度值相当于设置顶端的绝对边距值，包括数字和单位; 2 百分比是设置相对于上级元素的宽度的百分比，允许使用负值; 3 auto是自动取边距值，即元素的默认值; (2) margin-bottom：
底端外边距属性。
**语法：**同 margin-top。
(3) margin-left：
左边外边距属性。
**语法：**同 margin-top。
(4) margin-right：
右边外边距属性。
**语法：**同 margin-top。
(5) margin：
外边距复合属性。综合了以上四种方向的快捷外边距属性。
语法：
margin:长度值 | 百分比 | auto**说明：**margin 的值可以取1到4个，如果只设置1个值，则应用于所有的4个
边界；如果设置2个或3个值，则省略的值与对边相等；如果设置4个值，则按照
上、下、左、右的顺序分别对应其边距。
六、列表
1. 列表符号 list-style-type
使用列表符号属性可以设置列表项所使用的符号类型。
语法：
list-style-type:值**说明：**列表符号的取值范围：
值 描述 disc 默认值，实心圆 cicle 空心圆 square 实心方块 decimal 阿拉伯数字 lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha 小写英文字母 upper-alpha 大写英文字母 none 不使用任何项目符号或编号 2. 图像符号 list-style-image
图像符号属性是指使用图像作为列表符号，以美化网页。
语法：
list-style-image:none | url(图像地址)**说明：**取值如下：
值 描述 none 表示不指定图像; url 则使用绝对地址或相对地址指定符号的图像; 3. 列表缩进 list-style-position
使用列表缩进属性可以设置列表缩进的程度。
语法：
list-style-position:outside | inside说明：
值 描述 outside 表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐; inside 表示列表项目标记放置在文本以内，且环绕文本根据标记对齐; 4. 列表复合属性 list-style
列表复合属性用于设置列表项目的相关样式。
语法：
list-style:list-style-image | list-style-position | list-style-type**说明：**当 list-style-image 和 list-style-type 都被指定的时候，list-style-image 将优先，除非 list-style-image 设置为 none 或指定 url 地址的图片不能被显示。
七、定位
使用定位属性可以控制元素的位置，包括相对定位和绝对定位两种方式。相对定位是指允许元素在相对于文档布局的原始位置上进行偏移，而绝对定位是指允许元素与原始的文档布局分离且任意定位。
1. 定位方式 position
使用定位方式属性可以控制浏览器应如何定位 HTML 元素。
语法：
position:static | relative | absolute | fixed说明：
值 描述 static 表示默认值; relative 表示采用相对定位，对象不可层叠; absolute 表示采用绝对定位,需要同时使用left、right、top和bottom等属性进行绝对定位; fixed 表示当页面滚动时，元素不随着滚动; 2. 元素位置 top、right、bottom、left
元素位置属性与定位方式共同设置元素的具体位置。
语法：
top:auto | 长度值 | 百分比 right:auto | 长度值 | 百分比 bottom:auto | 长度值 | 百分比 left:auto | 长度值 | 百分比**说明：**auto 表示采用默认值，长度值包含数字和单位，也可以使用百分比来设置。
3. 层叠顺序 z-index
使用层叠顺序可以设置层的先后顺序和覆盖关系。默认情况下，z-index 值为1，表示该位于最底层。
语法：
z-index:auto | 数字**说明：**auto 遵从其父对象的定位，数字必须是无单位的整数值，可以取负值。
4. 浮动属性 float
使用浮动属性 float 可以设置文字在某个元素的周围，它能应用于所有的元素。
语法：
float:none | left | right说明：
值 描述 none 默认值，表示对象浮动; left 表示文字浮动在元素的右边; right 表示文字浮动在元素的左边; 5. 清除属性 clear
清除属性用于指定一个元素是否允许有其他元素漂浮在它的周围。
语法：
clear:none | left | right | both说明：
值 描述 none 表示允许两边都可以有浮动对象，是默认值; let 表示不允许左边有浮动对象; right 表示不允许右边有浮动对象; both 表示不允许有浮动对象; 6. 可视区域 clip
使用 clip 属性可以限定只显示裁切出的区域，裁切出的区域为矩形。只要设置两个点即可，一个是矩形左上角的顶点，由 top 和 len 两项设置完成，另一个是右下角的顶点，由 boto 和 right 两项设置完成。
语法：
clip:auto | rect(数字)说明：
值 描述 auto 表示对象不裁切，是默认值。 rect(数字) 表示它依据上、右、下、左的顺序提供自对象左上角(0，0)坐标计算 的四个偏移数值，其中任一数值都可用auto替换，即此边不裁切。 例：
clip:rect(auto,6cm,64px,auto)7. 层的宽度和高度 width、height
width 和 height 分别用于设置层的宽度和高度。
语法：
width:auto | 长度值 height:auto | 长度值**说明：**说明表示自动设置长度，一般以层包含的内容为准，如果要设置确切的长度，需要设置数值和单位。
8. 超出范围 overflow
使用 overflow 属性可以设置当层内的内容超出层所能容纳的范围时的显示方式。
语法：
overflow: visible | auto | hidden | scroll说明：
值 描述 visible 表示层的大小和内容都会自动显示出来; auto 表示只在内容超出层的范围时才显示滚动条: hidden 表示会隐藏超出层范围的内容: scroll 表示总是显示滚动条。 9. 可见属性 visibility
visibiliy 属性是针对嵌套层的设置，嵌套层是插入在其他层中的层，分为嵌套的层和被嵌套的层。
语法：
visibility:inherit | visible | hidden说明：
值 描述 inherit 表示继承父对象的可见性，是默认值; visible 表示无论父层对象是否可见，子层都是可见的: hidden 表示无论父层对象是否可见，子层都隐藏。
八、光标
使用光标属性可以设置在对象上移动时鼠标指针采用的光标形状。
语法：
cursor:auto | 形状取值 | url(图像地址)**说明：**光标的形状取值如下：
值 描述 default 客户端平台的默认光标。通常是一个箭头 hand 竖起一只手指的手形光标 crosshair 简单的十字线光标 text 大写字母I的形状 help 带有问号标记的箭头 wait 用于标示程序忙用户需要等待的光标 e-resize 向东的箭头 ne-resize 向东北的箭头 n-resize 向北的箭头 nw-resize 向西北的箭头 w-resize 向西的箭头 sw-resize 向西南的箭头 s-resize 向南的箭头 se-resize 向东南的箭头 auto 默认值。浏览器根据当前情况自动确定光标类型
九、滤镜
CSS 中滤镜相关的属性主要通过 filter 属性来实现，该属性允许对元素应用图形效果滤镜。
1. 不透明度 alpha
alpha 属性用于设置对象内容的透明度，使图片产生透明渐变效果。
语法：
filter:alpha(参数1=参数值，参数2=参数值，...)**说明：**alpha 属性的参数如下：
参数 含义 opacity 开始时的透明度，取值范围为0~100，默认值为0，即完全透明，100为完全不透明 finishopacity 结束时的透明度，取值范围为0~100 style 设置渐变的样式，其中0表示无渐变，1为直线渐变，2为圆形渐变，3为矩形渐变 startx 设置透明渐变开始点的水平坐标。其数值作为对象宽度的百分比处理，默认值为0 starty 设置透明渐变开始点的垂直坐标 finishx 设置透明渐变结束点的水平坐标 finishy 设置透明渐变结束点的垂直坐标 2. 高斯模糊效果 blur
blur 属性用于设置对象的动态模糊效果。
语法：
filter:blur(add=参数值，direction=参数值，strength=参数值)**说明：**blur 属性的参数如下：
参数 含义 add 设置是否显示原始图片 direction 设置动态模糊的方向，按顺时针的方向以45度为单位进行累积 strength 设置动稭薔偏态模糊的强度，只能使用整数来指定，默认是5个 3. 对颜色进行透明处理 chroma
chroma 滤镜的作用是将图片中的某种颜色转换为透明色，产生透明效果
语法：
filter:chroma(color=颜色代码或颜色关键字)4. 阴影效果 drop-shadow
dropShadow 滤镜用于设置在指定的方向和位置上产生阴影效果。
语法：
drop-shadow(color=阴影颜色，offX=参数值，offY=参数值，positive=参数值)说明：
值 描述 color 控制阴影的颜色; offx 和 offY 分别设置阴影相对于原始图像移动的水平距离和垂直距离; positive 属性设置阴影是否透明; 5. 对象翻转 flipH、flipV
flipH 滤镜用于设置沿水平方向翻转对象，flipV 滤镜属性用于设置沿垂直方向翻转对象。
语法：
filter:FlipH filter:FlipV6. 发光效果 glow
glow 滤镜用于设置在对象周围产生发光的效果。
语法：
filter:Glow(color=颜色代码，strength=强度值)说明：
值 描述 color 用于设置发光的颜色; strength 用于设置发光的强度，取值范围为1~255，默认值为5; 7. 灰度处理 grayscale
grayscale 滤镜用于把彩色图片中的色彩去掉，转换为黑白色图片。
语法：
filter:grayscale(参数值)**说明：**参数值可以是0%到100%之间的任何值。
8. 反转图像的颜色 invert
invent 滤镜用于设置对象反相，可以将图片的颜色、饱和度以及亮度完全反转过来。
语法：
filter:invert(参数值)**说明：**参数值可以是0%到100%之间的任何值。
9. X光片效果 xray
xray 滤镜用于制作类似X光片的效果。
语法：
filter:xray10. 遮罩效果 mask
mask 滤镜用于为对象产生遮罩效果，可以做出像印章一样的效果。
语法：
filter:Mask(Color=颜色代码)**说明：**Color 用于设置外围遮盖的颜色，可以是颜色关键字或十六进制数。
11. 波形滤镜 wave
wave 滤镜用于为对象内容创建波纹扭曲效果。
语法：
filter:wave(add=参数值，freq=参数值，lightstrength=参数值，phase=参数值，strength=参数值);说明：
值 描述 add 用于设置是否要把对象按照波形样式打乱; freg 用于设置图片上的波浪数目; lightstrength 用于设置波浪的光照强度，取值范围为0~100; phase 用于设置波浪的起始位置; strength 用于设置波浪的强度大小; 12. 调整图像的亮度 brightness
语法：
filter:brightness(参数值)**说明：**参数值可以是0%到100%之间的任何值。
13. 调整图像的对比度 contrast
语法：
filter:contrast(参数值)**说明：**可以是0%到200%之间的任何值。