CSS基础
CSS太难了，而且好长好难学，慢慢学吧。
学习链接：https://www.w3school.com.cn/css/index.asp
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。
**注意：**请勿在属性值和单位之间添加空格
简介
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
语法
CSS 规则集（rule-set）由选择器和声明块组成：
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
p {
color: red;
text-align: center;
}
选择器
我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
元素选择器
元素选择器根据元素名称来选择 HTML 元素。比如p
id选择器
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
attention：
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
您还可以指定只有特定的 HTML 元素会受类的影响。
p.center {
text-align: center;
color: red;
}
通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
h1, h2, p {
text-align: center;
color: red;
}
声明分组
我们既可以对选择器进行分组，也可以对声明分组。
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}
注意：在规则的最后一个声明后也加上分号是一个好习惯
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
img[alt] {border: 5px solid red;}
还能具体属性值
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
属性值必须完全匹配，差一点都不行
<p class="important warning">This paragraph is a very important warning.</p>
这样子就达咩
p[class="important warning"] {color: red;}
部分匹配的方法，使用则需要使用波浪号（~）
p[class~="important"] {color: red;}
子串匹配属性选择器
| 类型 | 描述 |
|---|---|
| [abc^=”def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
| [abc$=”def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
| [abc*=”def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
特定的属性选择类型
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
*[lang|="en"] {color: red;}
后代选择器
后代选择器可以选择作为某元素后代的元素。又称为包含选择器。用空格间隔开来
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，
h1 em {color:red;}
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。使用大于号
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
结合后代选择器
table.company td > p
上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。
相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（+号）
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。（这个有点意思）
这个有意思了
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
输出结果是下面这样子的
- List item 1
- List item 2
- List item 3
- List item 1
- List item 2
- List item 3
使用
三种方式：
- 外部 CSS
- 内部 CSS
- 行内 CSS
外部CSS在head里面引用
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部css
在head里面<style>直接定义。
行内CSS
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
<h1 style="color:blue;text-align:center;">This is a heading</h1>
就近原则，页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
- 行内样式（在 HTML 元素中）
- 外部和内部样式表（在 head 部分）
- 浏览器默认样式
注释
使用 /*...*/，能够横跨多行
/* 这是一条单行注释 */
颜色
背景色
<h1 style="background-color:DodgerBlue;">China</h1>
文本颜色
<p style="color:DodgerBlue;">China is a great country!</p>
边框颜色
<h1 style="border:2px solid Tomato;">Hello World</h1>
颜色值
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
背景
颜色
background-color 背景颜色
opacity 不透明度
**注意：**使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。可以使用rgba
图片
background-image 属性指定用作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。
body {
background-image: url("paper.gif");
}
背景重复
repeat-x是水平重复，repeat-y是垂直重复
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
no-repeat 没有重复，只显示一次
background-position指定图像位置，放到右上角
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}
附着
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：fixed是在显示器上固定，scroll是随浏览器滚动
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
简写
在使用简写属性时，属性值的顺序为：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body {
background: #ffffff url("tree.png") no-repeat right top;
}
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。
background-size:80px 60px;规定图像的背景图像尺寸
边框
样式
border-style 属性指定要显示的边框类型。
允许以下值：
- dotted – 定义点线边框
- dashed – 定义虚线边框
- solid – 定义实线边框
- double – 定义双边框
- groove – 定义 3D 坡口边框。效果取决于 border-color 值
- ridge – 定义 3D 脊线边框。效果取决于 border-color 值
- inset – 定义 3D inset 边框。效果取决于 border-color 值
- outset – 定义 3D outset 边框。效果取决于 border-color 值
- none – 定义无边框
- hidden – 定义隐藏边框
宽度
border-width 属性指定四个边框的宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick：
特定边的宽度
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：
p.one {
border-style: solid;
border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}
颜色
border-color 属性用于设置四个边框的颜色。
可以通过以下方式设置颜色：
- name – 指定颜色名，比如 “red”
- HEX – 指定十六进制值，比如 “#ff0000”
- RGB – 指定 RGB 值，比如 “rgb(255,0,0)”
- HSL – 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
- transparent
也可以特定边框，（用于上边框、右边框、下边框和左边框）。
各边
在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
四个值，则是上右下左；三个值，则是上（右左）下，两个值（上下）（右左），一个值（上右下左）
或者样子理解
四个值，则是上右下左；三个值，则是上右下（左对应右），两个值上右（下对应上）（左对应右），一个值（上右下左）
如果 border-style 属性设置四个值：
border-style: dotted solid double dashed;
- 上边框是虚线
- 右边框是实线
- 下边框是双线
- 左边框是虚线
如果 border-style 属性设置三个值：
border-style: dotted solid double;
- 上边框是虚线
- 右和左边框是实线
- 下边框是双线
如果 border-style 属性设置两个值：
border-style: dotted solid;
- 上和下边框是虚线
- 右和左边框是实线
如果 border-style 属性设置一个值：
border-style: dotted;
- 四条边均为虚线
简写
border 属性是以下各个边框属性的简写属性：
border-width-
border-style（必需） border-color
您还可以只为一个边指定所有单个边框属性：
p {
border-left: 6px solid red;
background-color: lightgrey;
}
圆角
border-radius 属性用于向元素添加圆角边框
p {
border: 2px solid red;
border-radius: 5px;
}
外边距
CSS 拥有用于为元素的每一侧指定外边距的属性：
- margin-top
- margin-right
- margin-bottom
- margin-left
所有外边距属性都可以设置以下值：
- auto – 浏览器来计算外边距
- length – 以 px、pt、cm 等单位指定外边距
- % – 指定以包含元素宽度的百分比计的外边距
- inherit – 指定应从父元素继承外边距
**提示：**允许负值。
简写，上右下左
p {
margin: 25px 50px 75px 100px;
}
您可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。
然后，该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。
inherit 值继承父元素的外边距情况。
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
外边距合并
这节有点牛逼，全新的知识，https://www.w3school.com.cn/css/css_margin_collapse.asp
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
**注释：**只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
内边距
CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。
CSS 拥有用于为元素的每一侧指定内边距的属性：
- padding-top
- padding-right
- padding-bottom
- padding-left
所有内边距属性都可以设置以下值：
- length – 以 px、pt、cm 等单位指定内边距
- % – 指定以包含元素宽度的百分比计的内边距
- inherit – 指定应从父元素继承内边距
**提示：**不允许负值。
例子是和上面的外边距差不多
CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分。因此，如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。这通常是不希望的结果。
在这里，<div> 元素的宽度为 300px。但是，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）。相当于是加号
div {
width: 300px;
padding: 25px;
}
若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。相当于是减号
使用 box-sizing 属性将宽度保持为 300px，无论填充量如何：
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
宽高
height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
height 和 width 属性可设置如下值：
- auto – 默认。浏览器计算高度和宽度。
- length – 以 px、cm 等定义高度/宽度。
- % – 以包含块的百分比定义高度/宽度。
- initial – 将高度/宽度设置为默认值。
- inherit – 从其父值继承高度/宽度。
**注意：**请记住，height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！
这句话到底怎么理解？
max-width 属性用于设置元素的最大宽度。是会随着浏览器大小的变化而变化，针对手机必备。
注释：max-width 属性的值将覆盖 width（宽度）。
还有max-height，min-height，min-width
框模型
或者叫盒模型
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：
对不同部分的说明：
- 内容 – 框的内容，其中显示文本和图像。
- 内边距 – 清除内容周围的区域。内边距是透明的。
- 边框 – 围绕内边距和内容的边框。
- 外边距 – 清除边界外的区域。外边距是透明的。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
**提示：**背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：
* {
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
**提示：**内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
**提示：**外边距可以是负值，而且在很多情况下都要使用负值的外边距。
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
轮廓
轮廓是在元素周围绘制的一条线，在边框之外（而不是外边框），以凸显元素。
CSS 拥有如下轮廓属性：
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
**注意：**轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
样式
outline-style 属性指定轮廓的样式，并可设置如下值：
- dotted – 定义点状的轮廓。
- dashed – 定义虚线的轮廓。
- solid – 定义实线的轮廓。
- double – 定义双线的轮廓。
- groove – 定义 3D 凹槽轮廓。
- ridge – 定义 3D 凸槽轮廓。
- inset – 定义 3D 凹边轮廓。
- outset – 定义 3D 凸边轮廓。
- none – 定义无轮廓。
- hidden – 定义隐藏的轮廓。
宽度
outline-width 属性指定轮廓的宽度，并可设置如下值之一：
- thin（通常为 1px）
- medium（通常为 3px）
- thick （通常为 5px）
- 特定尺寸（以 px、pt、cm、em 计）
颜色也一样，简写也一样
偏移
outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
下例指定边框边缘外 25px 的轮廓：
p {
margin: 50px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 25px;
}
文本
color 属性用于设置文本的颜色。颜色由以下值指定：
- 颜色名 – 比如 “red”
- 十六进制值 – 比如 “#ff0000”
- RGB 值 – 比如 “rgb(255,0,0)”
**提示：**对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。
对齐
文本可以左对齐或右对齐，或居中对齐。当 text-align 属性设置为 “justify” 后，实现两端对齐。
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
text-align: justify;
}
方向direction 和 unicode-bidi 属性可用于更改元素的文本方向：
p {
direction: rtl;
unicode-bidi: bidi-override;
}
垂直对齐
vertical-align 属性设置元素的垂直对齐方式。
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
装饰
text-decoration 属性用于设置或删除文本装饰。
none; 通常用于从链接上删除下划线
overline 上划线
line-through 中划线（删除线？）
underline 下划线
转换
text-transform 属性用于指定文本中的大写和小写字母。
uppercase 转大写
lowercase 转小写
capitalize 首字母大写
间距
text-indent 属性用于指定文本第一行的缩进
letter-spacing 字母间距
line-height 行间距 0.8,1.8，这种
word-spacing 词间距
white-space: nowrap; 禁用元素内的文本换行
阴影
text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px），加上颜色。
h1 {
text-shadow: 2px 2px red;
}
给阴影添加模糊效果（5px）：
h1 {
text-shadow: 2px 2px 5px red;
}
字体
在 CSS 中，有五个通用字体族：
- 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
- 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
- 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
- 草书字体（Cursive）- 模仿了人类的笔迹。
- 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
一些字体的例子
| 通用字体族 | 字体名称实例 |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
我们使用 font-family 属性规定文本的字体。
font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。
**注释：**如果字体名称不止一个单词，则必须用引号引起来，例如：”Times New Roman”。
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
样式
font-style 属性主要用于指定斜体文本。
此属性可设置三个值：
- normal – 文字正常显示
- italic – 文本以斜体显示
- oblique – 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
font-weight 属性指定字体的粗细
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
大小
font-size 属性设置文本的大小。
**注释：**如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。
像素是px
em是相对于16px的比例大小
vw是响应式文字大小， 1vw = 视口宽度的 1％（浏览器窗口的大小1%）
简写
font 属性是以下属性的简写属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
注意：font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。
图标
向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。
<script src="https://kit.fontawesome.com/yourcode.js"></script>
<i class="fas fa-heart"></i>
Bootstrap使用
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<i class="glyphicon glyphicon-thumbs-up"></i>
链接
四种链接状态分别是：
- a:link – 正常的，未访问的链接
- a:visited – 用户访问过的链接
- a:hover – 用户将鼠标悬停在链接上时
- a:active – 链接被点击时
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}
如果为多个链接状态设置样式，请遵循如下顺序规则：
- a:hover 必须 a:link 和 a:visited 之后
- a:active 必须在 a:hover 之后
文本装饰 text-decoration: none;或者underline来删除下划线和添加
背景色就是background-color
列表
在 HTML 中，列表主要有两种类型：
- 无序列表（
<ul>）- 列表项用的是项目符号标记 - 有序列表（
<ol>）- 列表项用的是数字或字母标记
CSS 列表属性使您可以：
- 为有序列表设置不同的列表项标记
- 为无序列表设置不同的列表项标记
- 将图像设置为列表项标记
- 为列表和列表项添加背景色
list-style-type 属性指定列表项标记的类型。
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
list-style-image 属性将图像指定为列表项标记：
ul {
list-style-image: url('sqpurple.gif');
}
list-style-position 属性指定列表项标记（项目符号）的位置。
“list-style-position: outside;” 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的。
“list-style-position: inside;” 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本。
list-style-type:none 属性也可以用于删除标记/项目符号
list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：
在使用简写属性时，属性值的顺序为：
- list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
- list-style-position（指定列表项标记应显示在内容流的内部还是外部）
- list-style-image（将图像指定为列表项标记）
表格
边框
如需在 CSS 中设置表格边框，请使用 border 属性。
table, th, td {
border: 1px solid black;
}
**注意：**上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。
合并边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：
table {
border: 1px solid black;
}
水平对齐
text-align 属性设置 <th> 或 中内容的水平对齐方式（左、右或居中）。
默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。
垂直对齐
vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。
默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。
其他
表格内边距，padding
水平分割线， <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：
可悬停表格
tr:hover {background-color: #f5f5f5;}
条状表格，为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：
tr:nth-child(even) {background-color: #f2f2f2;}
响应式表格，在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
CSS中级
和基础不一样，中级开始难起来了，个人感觉中级更加重要，高级可能还得往后稍一稍，中级才是CSS基础。
布局
display
display 属性是用于控制布局的最重要的 CSS 属性，规定是否/如何显示元素。
块级元素（block element）总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。
块级元素的一些例子：
<div><h1> - <h6><p><form><header><footer><section>
行内元素（inline element）内联元素不从新行开始，仅占用所需的宽度。
行内元素的一些例子：
<span><a><img>
**Display: none;**通常与 JavaScript 一起使用，以隐藏和显示元素，而无需删除和重新创建它们。如果您想知道如何实现此目标，请查看本页面上的最后一个实例。
默认情况下，<script> 元素使用 display: none;。
覆盖默认的display，最常见的例子就是把li变成行内元素
li {
display: inline;
}
**注意：**设置元素的 display 属性仅会更改元素的显示方式，而不会更改元素的种类。因此，带有 display: block; 的行内元素不允许在其中包含其他块元素。
删除OR隐藏？
display:none有点像删除，布局都不在了
visibility:hidden是视觉隐藏，但是布局还是在，占用之前的空间
display的值
| 值 | 描述 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| none | 此元素不会被显示。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| inline-block | 行内块元素。（CSS2.1 新增的值） | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| list-item | 此元素会作为列表显示。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| compact | CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| marker | CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| table | 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
|
