用户界面样式
参考一
参考二
参考三
系统字体
css2定义了6个系统字体关键字，如下：
1.caption 由标题控件使用的字体样式，如按钮和下拉控件
2.icon 操作系统图表标签使用的字体样式，如硬盘驱动器，文件夹和文件图标
3.menu 下拉菜单和菜单列表中文本使用的字体样式
4.message-box 对话框中文本使用的字体样式
5.small-caption 对话框中文本使用的字体样式
6.status-bar 窗口状态中文本使用的字体样式
这些属性只能适用于font属性
body{
font:caption;
}123系统颜色
如果你想重用用户操作系统中指定的颜色，css2为此定义了一系列系统颜色关键字。只要能用color值的环境，就可以使用这些值。例如，下面声明可以让一个元素的背景与用户的桌面颜色一致：
body{
background: Background
}123可以如下为文档指定系统的默认文本颜色和背景颜色
body{
color: WindowText;
background: Window;
}1234光标 cursor
值：url | default | auto | crosshair | pointer | move | e-resize| nw-resize | ne-resize| n-resize| se-resize | sw-resize| s-resize| s-resize | w-resize | text | wait | help | url | inherit
1.url 需使用的自定义光标的 URL。（请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。）
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）
轮廓样式 outline-style
值：none | dotted | dashed | double | groove |ridge | inset | outset | inherit
1.none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。
轮廓宽度 outline-width
值：thin | medium | thick | length | inherit
1.thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
inherit 规定应该从父元素继承轮廓宽度的设置。
2.outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。
轮廓颜色 outline-color
值：color_name | hex_number | rgb_number | invert | inherit
1.color_name 规定颜色值为颜色名称的轮廓颜色（比如 red）。
hex_number 规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。
invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit 规定应该从父元素继承轮廓颜色的设置。
汇总 outline
值：outline-color | outline-style | outline-width | inherit
1.outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
2.inherit 规定应该从父元素继承 outline 属性的设置。
防止拖拽文本域
ｒｅｓｉｚｅ
| 描述 | |
|---|---|
| none | 用户无法调整元素的尺寸。 |
| both | 用户可调整元素的高度和宽度。 |
| horizontal | 用户可调整元素的宽度。 |
| vertical | 用户可调整元素的高度。 |
行内块元素与文字的对齐
既然看到这就先来看看浮动
- 盖不住的文本
- 浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且屏幕放不下时将会换行）
- 浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非没有位置了
- 当元素设置定位值为absolute、fixed时，浮动将被忽略
- float引起父元素高度塌陷
- 浮动元素会被后一个元素的margin-top影响
示例
浮动的本质：文字环绕图片
display:inline-block和float"left在某些场合作用是一样的，区别只是ｆｌｏａｔ有方向
浮动的破坏性
浮动破坏了正常的line boxes
ｏｋ，那ｌｉｎｅｂｏｘｅｓ是个什么东西（懂的同学请绕过）
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式，我们常见的盒模型大致有两种，一种是块级的盒子（Block Box），一种是行级的盒子（Line Box）
盒子模型是处理盒子本身内部属性，像比如边距，边框的，而视觉格式化模型是来处理这些盒子摆放的
Block Box
display ： block 、 list-item 以及 table 会让一个元素成为块级元素。Line Box
每一行称为一条Line Box，它又是由这一行的许多inline-box组成
display：inline会让一个元素称为行内元素inline-block
将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。
Formatting context
每个元素，或者说每个Box会根据设置的display值，去选择渲染它的方式，不同的display有不同层级：block-level box（块级）inline-level box(行级)，run-in box(插入型框 css3)，不同的层级会参与不同的环境（formatting context）去渲染
视觉格式化模型
CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。
视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：
- 盒子的尺寸：精确指定、由约束条件指定或没有指定
- 盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）
- 定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位
- 文档树中的其它元素：即当前盒子的子元素或兄弟元素
- 视口尺寸与位置
- 所包含的图片的尺寸
- 其他的某些外部因素
该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）。
块：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。
包含块：containing block，包含其他盒子的块称为包含块。
盒子：box，一个抽象的概念，由CSS引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。
块级元素：block-level element，元素的
display为block、list-item、table时，该元素将成为块级元素。元素是否是块级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。块级盒子：block-level box，由块级元素生成。一个块级元素至少会生成一个块级盒子，但也有可能生成多个（例如列表项元素）。
块盒子：block box，如果一个块级盒子同时也是一个块容器盒子（见下），则称其为块盒子。除具名块盒子之外，还有一类块盒子是匿名的，称为匿名块盒子（Anonymous block box），匿名盒子无法被CSS选择符选中。
块容器盒子：block container box或block containing box，块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。
行内级元素：inline-level element，
display为inline、inline-block、inline-table的元素称为行内级元素。与块级元素一样，元素是否是行内级元素仅是元素本身的属性，并不直接用于格式化上下文的创建或布局。行内级盒子：inline-level box，由行内级元素生成。行内级盒子包括行内盒子和原子行内级盒子两种，区别在于该盒子是否参与行内格式化上下文的创建。
行内盒子：inline box，参与行内格式化上下文创建的行内级盒子称为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。
原子行内级盒子：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子一开始叫做原子行内盒子（atomic inline box），后被修正。原子行内级盒子的内容不会拆分成多行显示。
快级元素
块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素
1 >//定义地址
2 >//定义表格标题
3 //定义列表中定义条目
4 <div> //定义文档中的分区或节
5 //定义列表
6 - //定义列表中的项目
7