CSS学习

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <h1 style="font-size: 20px; color: blue;">使用CSS内行式修饰一级标题的字体大小和颜色</h1>
  </body>
</html>

2. 内嵌式CSS 样式表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      h2 {
        text-align: center;
      }

      p {
        font-size: 16px;
        font-family: "楷体";
        color: purple;
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h2>内嵌式CSS样式</h2>
    <p>使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，title标签之后。</p>
  </body>
</html>

3. 外联式样式表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="./css/wailianshi.css" type="text/css">
  </head>
  <body>
    <h2>内嵌式CSS样式</h2>
    <p>使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，title标签之后。</p>
  </body>
</html>

wailianshi.css 内容如下

h2 {
  text-align: center;
}

p {
  font-size: 16px;
  font-family: "楷体";
  color: purple;
  text-decoration: underline;
}

CSS选择器

1. 标签选择器

标签名 {
  属性1:属性值1;
  属性2:属性值2;
  属性3:属性值3;
}
例如：
p {
  font-size: 16px;
  font-family: "楷体";
  color: purple;
  text-decoration: underline;
}

2. 类选择器

.类名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}
例如：
.green {
  color: green;
}

.blue {
  color: blue;
}

3. id选择器

#id名 {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}
例如：
#fw300 {
  font-weight: 300;
}

4. 通配符选择器

* {
  属性1: 属性值1;
  属性2: 属性值2;
  属性3: 属性值3;
}
例如：
* {
  margin: 0;
  /*定义外边距*/
  padding: 0;
  /*定义内边距*/
}

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      p {
        font-size: 30px;
        font-family: "楷体";
        color: purple;
        text-decoration: underline;
      }

      .green {
        color: green;
      }

      .blue {
        color: blue;
      }

      #fw300 {
        font-weight: 300;
      }

      #font24 {
        font-size: 24px;
      }

      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <p>静夜思</p>
    <h2 class="green">窗前明月光</h2>
    <h2 class="blue">疑是地上霜</h2>
    <h2 id="fw300">举头望明月</h2>
    <h2 id="font24">低头思故乡</h2>
  </body>
</html>

5. 标签指定式选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class 选择器或 id 选择器，如h2.special、p#one。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      p {
        color: blue;
      }

      p.special {
        color: red;
      }

      .special {
        color: green;
      }
    </style>
  </head>
  <body>
    <p>普通段落文本p标签</p>
    <p class="special">指定了.special 类的段落文本p标签</p>
    <h3 class="special">指定了 .special 类的段落文本p标签</h3>
  </body>
</html>

6. 后代选择器

后代选择器用来选择标签的后代标签，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格隔开。当标签嵌套时，内层标签就成为了外层标签的后代。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      p strong {
        color: orange;
      }

      strong {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>段落标签内部<strong>嵌套了 strong 标签，使用 strong 标签定义的文本（橙色）</strong></p>
    <strong>由 strong 标签定义的文本（蓝色）</strong>
  </body>
</html>

7. 并集选择器

并集选择器是各个选择器通过逗号链接而成的，任何形式的选择器（包括标签选择器、类选择器以及id选择器等）都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为他们定义相同的CSS样式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      h2,
      h3,
      p {
        color: purple;
        font-size: 14px;
      }

      /* 不同的标签组成的并集选择器 */
      h3,
      .special,
      #e {
        text-decoration: underline;
      }

      /* 标签、类、id组成的并集选择器 */
    </style>
  </head>
  <body>
    <h2>二级标题文本</h2>
    <h3>三级标题文本，加下划线</h3>
    <p class="special">段落文本1，加下划线</p>
    <p>段落文本2，普通文本</p>
    <p id="e">段落文本3，加下划线</p>
  </body>
</html>

8. 属性选择器

属性选择器一般是一个标签后紧跟中括号“[]”，中括号内部是属性或者属性表达式。属性选择器通过已经存在的属性名或属性值匹配元素。

~=, |=, ^=, $=, *= 的区别

"value 是完整单词" 类型的比较符号: ~=, |=

"拼接字符串" 类型的比较符号: *=, ^=, $=

选择器	描述
[attr]	表示带有以 attr 命名的属性的元素。
[attr=value]	表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value]	表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr\|=value]	表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"`-`"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
[attr^=value]	表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
[attr$=value]	表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
[attr*=value]	表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

9. 关系选择器

关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器由符号 “>” 链接，兄弟选择器由符号 “+” 和 “~” 链接

关系选择器	举例	说明
子代选择器	h1 > strong	表示选择嵌套在 h1 标签的子标签 strong
临近兄弟选择器	h2+p	表示选择 h2 标签后紧邻的一个兄弟标签 p
普通兄弟选择器	p~h2	表示选择 p 标签所有的 h2 兄弟标签

10. 结构化伪类选择器

结构化伪类选择器可以减少文档内 class 属性和 id 属性的定义，是文档变得更加简洁。

关系选择器	举例	说明
:root		用于匹配文档根标签，使用 “:root 选择器” 定义的样式，对所有页面标签都生效
:not	body *:not(h2)	用于排除 body 结构中的子结构标签 h2
:only-child	li:only-child	用于匹配属于某父标签的唯一子标签（li），也就是说某个父类标签仅有一个子标签（li）
:first-child		用于选择父类元素第一个子标签
:last-child		用于选择父类元素最后一个子标签
:nth-child(n)	p:nth-child(2)	用于选择父类元素第二个子标签
:nth-last-child(n)	p:nth-last-child(2)	用于选择父类元素倒数第二个子标签
:nth-of-type(n)	h2:nth-of-type(odd)	用于选择所有 h2 标签中位于奇数行的标签
:nth-last-of-type(n)	p:nth-last-of-type(2)	用于选择倒数第二个 p 标签
:empty		用来选择没有子标签或文本内容为空的所有标签

11. 伪元素选择器

伪元素选择器一般书一个标签后面紧跟英文冒号 “:” ，英文冒号后是伪元素名。

关系选择器	举例	说明
:before	p:before	表示在 p 标签的内容前面插入内容
:after	p:after	表示在 p 标签的内容后面插入内容

值得一提的是，如果想要在文本后面添加图片，只需要更改 content 属性后的内容，其基本语法格式如下：

p:after {
content:url ();
}

CSS文本样式

字体样式属性

1. font-size：字号大小

相对长度单位	说明	相对长度单位	说明
em	相对于当前对象内文本的字体尺寸	cm	厘米
px	像素，最常用，推荐使用	mm	毫米
in	英寸

2. font-family：字体

网页常用的字体有宋体、微软雅黑、黑体等。

body {
  font-family: "华文彩云", "宋体", "黑体";
}

/* 网页首选“华文彩云”，当用户没有下载“华文彩云”字体时，使用“宋体”，当“宋体”不能使用时，使用“黑体” */

当使用 font-family 时需要注意以下几点：

各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包括空格、#、$等字符，则该字体必须加英文状态下的单引号或者双引号。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3. font-weight：字体粗细

属性值	描述
normal	默认值，定义标准的字符
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900（100的整数倍）	定义由细到粗的字符，其中400等于normal，700等于bold

4. font-style：风格字体

font-style 属性用来定义字体风格，如设置斜体、倾斜或正常字体

属性值	描述
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式
oblique	浏览器会显示倾斜的字体样式

5. font：综合设置字体样式

选择器 {
  font: font-style font-weight font-size/line-height font-family;
}
/* 其他可以省略 但必须保留 font-size 和 font-family */
例如：
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-style: italic;
  font-weight: bold;
  line-height: 40px;
}
/* 等同于 */
p {
  font: italic bold 30px/40px Arial, Helvetica, sans-serif;
}

6. @font-face 规则

通过@font-face规则，开发者可以在用户计算机未安装字体的情况下，使用任何喜欢的字体。其语法如下：

@font-face {
  font-family: 字体名称;
  src: url(字体路径);
}

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      @font-face {
        font-family: "方正舒体";
        /* 服务器字体名称 */
        src: url(font/FZSTJW.TTF);
        /* 调用服务器的字体 */
      }

      p {
        font-family: "方正舒体";
        /* 设置字体样式 */
        font-size: 32px;
        color: #3366cc;
      }
    </style>
  </head>
  <body>
    <p>逃之夭夭，灼灼其华</p>
    <p>之子于归，宜其室家</p>
  </body>
</html>

使用服务器字体步骤如下：

下载字体，并储存到对应的文件夹中。
使用 @font-face 规则定义服务器字体。
对标签应用 font-family 字体样式。

7. word-wrap：属性

word-wrap 属性用于实现长单词和 URL 地址的自动换行，其语法格式如下：

选择器 {
  word-wrap: 属性值;
}

属性值	描述
normal	只在允许的断字点换行（浏览器默认处理）
break-word	在长单词或 URL 地址内进行换行

文本外观属性

1. color：文本颜色

预定义的颜色名

名称	颜色	名称	颜色
white	白色	black	黑色
blue	浅蓝	navy	深蓝
silver	浅灰	gray	深灰
red	大红	maroon	深红
lime	浅绿	green	深绿
yellow	明黄	olive	褐黄
aqua	天蓝	teal	靛青
fuchsia	品红	purple	紫色

十六进制，如#ff0000

color:#66cc00

RGB 代码，rgb(255,0,0)或rgb(100%,0%,0%)

color:rgb(255,0,0);
color:rgb(100%,0%,0%);

2. letter-spacing：字间距

其属性可谓不同单位的数值，允许为负值默认为normal。

3. word-spacing：单词间距

只用于定义英文单词之间的间距，对中文字符无效。其属性可谓不同单位的数值，允许为负值默认为normal。

4. line-height：行间距

line-height 常用的属性值单位有3种，分别是px（像素）、em（对比值）和%（百分比），实际在工作中更多使用px。

5. text-transform：文本转换

text-transform 属性用于控制英文字符的大小写，其可用属性如下：

属性值	描述
none	不转换
capitalize	首字母大写
upperease	全部字符转化为大写
lowerease	全部字符转换为小写

6. text-decoration：文本装饰

text-decoration 属性可对应多个属性，用于给文本添加多种显示效果。例如，同时给文字加下划线和删除线效果，就可以在 text-decoration 属性后同时应用 underline 和 line-through。

属性值	描述
underline	下划线
line-through	删除线
overline	上划线
blink	闪烁文本
none	默认文本

7. text-align：水平对齐方式

属性值	描述
left	左对齐
right	右对齐
center	居中对齐
justify	实现两端对齐
inherit	规定应该从父类元素继承 text-align 属性的值

注：仅适用于块级元素，对行内元素无效

8. text-indent：文本缩进

用于设置行文本的缩进，其属性值可为不同的单位的数值、em 字符宽度的倍数或相于浏览器窗口宽度的百分比%，允许使用负值。建议使用 em 作为设置单位。

注：仅适用于块级元素，对行内元素无效

9. white-space：空白符处理

使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用 white-space 属性为设置空白字符的处理方式。其属性值如下：

属性值	描述
normal	常规（默认值），文本中的空格、空行无效，满行（到达区域边界）会自动换行。
pre	预格式化，按文本的书写格式保留空格、空行原样显示。
nowrap	空格空行无效，强制文本不换行，除非遇到换行指令<br/>。内容超出标签的边界也不换行，若超出浏览器页面则会自动增加滚动条。
pre-warp	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符

10. text-shadow：阴影效果

为页面中的文本加阴影效果，其语法格式如下：

选择器 {
  text-shadow: h-shadow v-shadow blur color;
}

上述语法中：

h-shadow 用于设置水平阴影的距离，v-shadow 用于设置垂直阴影的距离，blur 用于设置模糊半径，color用于设置阴影颜色。可以设置多个阴影，用逗号隔开。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      .one {
        font-size: 60px;
        text-shadow: 10px 5px 10px #60f, 20px 10px 10px green;
        /* 设置文字阴影距离（水平和垂直）、模糊半径、颜色 */
      }

      .two {
        font-size: 60px;
        text-shadow: -10px -5px 10px #60f;
        /* 设置文字阴影距离为负值（水平和垂直）、模糊半径、颜色 */
      }
    </style>
  </head>
  <body>
    <p class="one">窗前明月光</p>
    <p class="two">疑是地上霜</p>
  </body>
</html>

11. text-overflow：表示对象内文本的溢出

属性值	描述
visible	默认值，把内容不会被修建，会呈现再元素框之外
hidden	内容会被修建，且不可见
scroll	内容被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条
ellipsis	用省略标签“...”标示被修剪文本，省略标签插入的位置是最后一个字符
clip	修剪溢出文本，不显示省略标签“...”

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      .one {
        width: 300px;
        height: 50px;
        border: 1px solid blue;
        white-space: nowrap;
        /* 强制文本不能换行 */
        overflow: hidden;
        /* 修建溢出文本 */
        text-overflow: ellipsis;
        /* 用省略标签标示被修剪的文本 */
      }

      .two {
        width: 300px;
        height: 50px;
        border: 1px solid blue;
        white-space: nowrap;
        /* 强制文本不能换行 */
        overflow: hidden;
        /* 修建溢出文本 */
        text-overflow: clip;
        /* 不显示省略标签 */
      }
    </style>
  </head>
  <body>
    <p class="one">
      《楚辞》，是中国文学史上第一部浪漫主义诗歌总集，相传是屈原创作的一种新诗体。“楚辞”的名称，西汉初期已有之，至刘向乃编辑成集。东汉王逸作章句。原收战国屈原、宋玉及汉代淮南小山、东方朔、王褒、刘向等人辞赋共十六篇。后王逸增入己作《九思》，成十七篇。全书以屈原作品为主，其余各篇也是承袭屈赋的形式。以其运用楚地的文学样式、方言声韵和风土物产等，具有浓厚的地方色彩，故名《楚辞》，对后世诗歌产生深远影响。
    </p>
    <p class="two">
      《楚辞》经历了屈原的作品始创、屈后仿作、汉初搜集、至刘向辑录等历程，成书时间应在公元前26年至公元前6年间。刘向《楚辞》原书早亡，后人只能间接通过被认为保留最完整的东汉王逸《楚辞章句》（原书亦佚）、宋洪兴祖《楚辞补注》（《楚辞章句》的补充）追溯、揣测原貌。
    </p>
  </body>
</html>

12. text-indent：文本缩进

允许为负值，如果为负值首行会向左缩进，可以使用百分比值，百分比相对于缩进元素父元素的宽度。

例子：

p.one {
  text-indent: 1cm;
}
p.two {
  text-indent: 2em;
}

CSS权重

类型	权重
标签选择器	1
类选择器	10
id选择器	100
!important	最大

盒子模型

div 标签

简单而言就是一个块标签，可以实现网页的规划和布局。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      .one {
        width: 600px;
        height: 50px;
        background: #b08fb4;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
      }

      .two {
        width: 600px;
        background: #c1b0c6;
        font-size: 14px;
        text-indent: 2em;
      }
    </style>
  </head>
  <body>
    <div class="one">
      国风·鄘风·相鼠
    </div>
    <div class="two">
      <p>相鼠有皮，人而无仪！人而无仪，不死何为？</p>
      <p>相鼠有齿，人而无止！人而无止，不死何俟？</p>
      <p>相鼠有体，人而无礼，人而无礼！胡不遄死？</p>
    </div>
  </body>
</html>

宽和高

在CSS中使用宽度属性 width 和高度属性 height 控制盒子的大小，其值可以为不等同单位的数值或相对于父标签的百分比，实际工作中最长用的属性值是像素值。

border 边框

设置内容	样式属性	常用属性值
边框样式	border-style:上边 [右边下边左边]	none(默认)、solid、dashed、dotted、double
边框宽度	border-width:上边 [右边下边左边]	像素值
边框颜色	border-color:上边 [右边下边左边]	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框	border:四边宽度四边样式四边颜色
圆角边框	border-radius:水平半径参数/垂直半径参数	像素值或百分比
图片边框	border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式;

1. border-style 边框样式

基础语法格式如下：

border-style:上边 [右边 下边 左边];

四个常用属性值：

solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

不常用的属性值：

groove 定义 3D 凹槽边框，效果取决于 border-color 的值
ridge 定义 3D 垄状边框，效果取决于 border-color 的值
inset 定义 3D insert 边框，效果取决于 border-color 的值
outset 定义 3D outset 边框，效果取决于 border-color 的值

使用 border-style 属性综合设置四边样式时，必须按照上右下左的顺时针顺序，省略是采用值复制的原则，即一个值为四边，两个值为上下和左右，三个值为上、左右、下，四个值为上、右、下、左。

p {
  border-style: dashed solid solid solid;
}

/* 四个值为上、右、下、左 */
p {
  border-style: dashed solid solid;
}

/* 三个值为上、左右、下 */

2. border-width 边框宽度

基础语法格式如下：

border-width:上边 [右边 下边 左边];

使用 border-width 属性综合设置四边样式时，必须按照上右下左的顺时针顺序，省略是采用值复制的原则，即一个值为四边，两个值为上下和左右，三个值为上、左右、下，四个值为上、右、下、左。常用取值单位为像素（px）。在设置边框宽度前请先设置边框样式。

3. border-color 边框颜色

基础语法格式如下：

border-color:上边 [右边 下边 左边];

例子：

p {
  border-style: solid;
  /* 设置边框样式 */
  border-color: #CCC #FF0;
  /* 设置边框颜色：上下为灰色、左右为红色 */
}

分别定义边框颜色

border-top-color（顶部边框颜色）
border-right-color（右侧边框颜色）
border-bottom-color（底部边框颜色）
border-left-color（左侧边框颜色）

4. border 综合设置边框

基础语法格式如下：

border:样式 宽度 颜色;
/* 样式、宽度、颜色不分先后（样式不可省略） */

分别定义边框

border-top（顶部边框）
border-right（右侧边框）
border-bottom（底部边框）
border-left（左侧边框）

5. border-radius 圆角边框

border-radius 属性值有两个参数即水平半径参数和垂直半径参数，参数之间用“/”隔开，参数的取值单位可以为 px 或 %。

border-radius: 水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

border-radius 属性同样遵循值复制的原则

水平半径参数和垂直半径参数设置一个参数值时，表示四角的圆角半径均相同。
水平半径参数和垂直半径参数设置两个参数值时，表示第一个参数值代表左上圆角半径和右下圆角半径，第二个表示右上和左下的圆角半径。
水平半径参数和垂直半径参数设置三个参数值时，第一个参数值表示左上圆角半径，第二个表示右上和左下圆角半径，第三个表示右下圆角半径。
水平半径参数和垂直半径参数设置四个参数值时，第一个参数值表示左上，第二个表示右上，第三个表示右下，第四个表示左下圆角半径。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      img {
        height: 300px;
        width: 200px;
        border: 8px solid black;
        border-radius: 50px 20px 10px 70px/30px 40px 60px 80px;
        /* 分别设置四个角水平半径和垂直半径 */
      }
    </style>
  </head>
  <body>
    <img src="./img/maimai.jpg">
  </body>
</html>

值得一提的是：

 border-radius: 50%;
/* 图片显示为圆形 */

6. border-image 图片边框

border-image 是一种复合属性

基本语法格式如下：

border-image: border-image-source/ border-image-slice/ border-image-width/ border-image-outset/ border-image-repeat;

属性	描述
border-image-source	指定图片路径
border-image-slice	指定边框图片顶部、右侧、底部、左侧向内偏移量
border-image-width	指定边框宽度
border-image-outset	指定边框背景像盒子外部延伸的距离
border-image-repeat	指定背景图片平铺方式

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div {
        width: 300px;
        height: 300px;
        border-style: solid;
        border-image-source: url(img/maimai.jpg);
        border-image-slice: 33%;
        border-image-width: 40px;
        border-image-outset: 0;
        border-image-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

上述CSS代码可省略为：

border-image: url(img/maimai.jpg) 33%/40px repeat;

上述代码中 33%内偏移量和40px边框的宽度两者间需要用 “/” 隔开。

padding 内边距

padding 可以分别设置且各内边距均可为不同单位或百分比

padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

margin 外边距

margin 可以分别设置且各外边距均可为不同单位，可以是像素、英尺、毫米或 em 。margin也可以设为auto。

margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距

/* 常见如下 */
margin: 1px;
margin: 10px 0px 15px 5px;
margin: auto auto auto 20px;

margin设置为auto时在父元素中居中。

background 背景

1. background-color 背景色

设置背景颜色

2. background-image 背景图像

body {
    background-image: url("bgimage.gif");
}

3. background-repeat 重复背景

属性设置是否重复背景图像

属性值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图片仅显示一次
inherit	规定应该从父元素继承该属性值

4. background-position 背景图像的起始位置

属性值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果仅规定了一个关键词，那么第二个值将是“center”。默认值“top left”
x% y%	如“30% 40%” 第一个值是水平位置，第二个值是垂直位置左上角是“0% 0%”，右下角是“100% 100%”，如果只规定一个值，另一个值将是“50%”
xpos ypos	如“30px 40%”

CSS 列表

1. list-style-type：设置列表项目符号类型

属性值	描述
none	无项目符号
disc	默认。实心圆
circle	空心圆
square	实心方块
decimal	数字
decimal-leading-zero	0开头的数字标记“01，02，03”
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母
lower-greek	小写希腊字母
lower-latin	小写拉丁字母
upper-latin	大写拉丁字母
hebrew	传统的希伯来编号
armenian	传统的亚美尼亚编号

2. list-style-image 图像替换列表项标记

list-style-image: url("/i/arrow.gif");

3. list-style-position 列表项标记的位置

属性值	描述
inside	列表项目标记位置在文本以内，且环绕文本根据标记对其
outside	默认值，再文本左侧
inherit	规定继承

CSS表格

1. border 边框

table,th,td
{
    border: 1px solid blue;
}

2. 宽高

table {
    width: 100%;
    height: 50px;
}

3. text-align：文本对齐

td.one {
    text-align: right;
}

4. vertical-align：垂直对齐

td.two {
    vertical-align: bottom;
}

5. padding：内边距

td {
    padding: 15px;
}

7. border-collapse 边框是否合并为一个单一的边框

属性值	描述
separate	默认值，边框被分开，不会忽略 border-spacing 和 empty-cells 属性
collapse	边框会合并为一个单一的边框，会忽略 border-spacing 和 empty-cells 属性

8. border-spacing 设置相邻单元格的边框间的距离

属性值	描述
length	使用 px、cm等单位，不允许为负值，定义一个length参数时“如 border-spacing:20px”那么定义水平和垂直间距相等。如果定义两个的第一个时水平间距，第二个时垂直间距
inherit	规定继承

9. empty-cells 是否显示表格中的空单元格（仅适用于分离边框模式）

10. caption-side 设置表格标题的位置

CSS display（显示）和 visibility（可见性）

1. visibility 规定元素是否可见

属性值	描述
visible	默认值，元素可见
hidden	元素是不可见（会占页面空间）
collapse	用于表格元素时，可删除一行或一列，被删行或列占据的空间不保留，如果用于其他元素，会呈现为“hidden ”

2. display 规定应该生成的框的类型

属性值	描述
none	此元素不会被显示（不占页面空间）
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认，被显示为内联元素，元素前后没有换行符
inline-block	行内块元素
list-item	此元素会作为列表显示
table	作为块级表格来显示（类似于<table>)前后有换行符
table-row	此元素作为一个表格行显示（类似于<tr>）
table-column	此元素作为一个单元格列显示（类似于<col>）
table-cell	此元素作为一个表格单元格显示（类似于<td>）

CSS定位

1. position 定位

属性值	描述
static	默认，普通流定位
relative	元素相对原来的位置偏移某个位置，原本的空间会被保留
absolute	绝对位置，元素框从文档安全删除（原本占用的空间关闭），并相对其定位组件元素定位
fixed	以 body 为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过“left”“top”“right”“bottom”属性进行定位