本文的重要内容 CSS 单元
HTML中只有一个单位，就是像素px，所以这个单位可以省略，而CSS中则不同。 CSS 中的单位是强制性的，因为它没有默认单位。
绝对单位
1 英寸=2.54 厘米=25.4 毫米=72 点=6 件。
各种单位的含义：
相对单位
px：像素 em：相当于12点的彩色打印单位 %：比例，相对于周围文字的大小
为什么说像素px是相对单位呢？ 这也是很容易理解的。 例如css字体加黑加粗，笔记本屏幕的规格保持不变，我们可以让它显示不同的帧率。 在不同的码率下，单个像素的宽度肯定是不同的。
比率%的相对单位如何使用？ 这里还有一个反例：
字体 字体属性
CSS中有很多非布局的地方
样式（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰属性（宋体、斜体、下划线）等。
本节我们先来说说字体属性。
css样式中，常见的字体属性如下：
p{
font-size: 50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体*/
font-variant: small-caps; /*小写变大写*/
}
列宽
在 CSS 中，所有行都有列宽。 包包模型的padding绝对不是直接作用在文字上，而是作用在“线”上。
如右图所示：
上图中，我们设置列宽为30px，30px*5=150px，通过检查review元素，p标签的高度确实是150px。 而且我们发现我们没有给这个p标签设置高度，但它实际上是被内容拉高的。
在垂直方向上，文本以其自己的行为中心。 例如，文本为 14px，列宽为 24px，因此内边距为 5px：
为了严格保证文字居中，我们的工程师有一个约定：列宽和字号通常为奇数。 这样就可以保证，如果它们的差必须是奇数，就可以被2整除。
如何垂直居中单行文本
小方法：如果一段文字只有一行，此时如果设置列宽=包高，就可以保证单行文字垂直居中。 这很容易理解。
前面的小方法只适合单行文本垂直居中，不适用于多行文本。 如果想让多行文本垂直居中，还需要估计包的padding。 估算方法如下：
垂直对齐:middle;属性
vertical-align: middle; /*指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
三大属性：字体大小、行高、字体
(1) 字体大小：
font-size:14px;
(2) 列宽：
line-height:24px;
（3）字体：（font-family表示“字体”，family表示“家族”）
font-family:"宋体";
是否加粗属性和前三个属性，我们可以连续写：（是否加粗、font-size、line-height、font-family）
格式：
font: 加粗 字号/行高/ 字体
例子：
font: 400 14px/24px "宋体";
PS：400为名义值，700为粗体。
前几个属性可以连续写入，并且有一个要求，font属性的连续写入至少要有字体大小和字体，否则连续写入不会生效（相当于没有这行代码） 。
2.字体属性说明：
(1)并不是网页上的所有字体都可以使用，因为这个字体取决于用户的笔记本是否安装。 例如，如果您设置：
font-family: "华文彩云";
在上面的代码中，如果用户的Windows笔记本没有此字体，则会加粗。
在页面上，我们通常使用英文：Google Yahei、Song Ti、Hei Ti。 中文使用：Arial、TimesNewRoman。 如果页面中需要其他字体，则需要单独安装字体，或者剪切图片。
(2)为了避免用户笔记本中出现Google雅黑字体。 只需使用法式冒号并提供替代字体即可。 如下：（可以多选）
font-family: "微软雅黑","宋体";
上面代码的意思是：如果用户的笔记本中没有安装Google雅黑字体，那么它就是粗体。
（3）我们一定要把英文字体放在最上面，这样所有的英文字符都不能匹配到英文字体，手动改成旁边的英文字体：
font-family: "Times New Roman","微软雅黑","宋体";
上面的代码意味着中文将使用TimesNewRoman字体，而英文将使用Google Yahei字体（由于德国人设计的TimesNewRoman字体不是为英文设计的，所以英文将使用之前的Google Yahei字体）。 例如，对于文本 smyhvae hahaha，smyhvae 将使用 Times New Roman 字体，hahaha 将使用 Google Yahei 字体。
(4)所有英文字体都有英文昵称。
谷歌雅平的日语昵称：
font-family: "Microsoft YaHei";
粗体英文别名：
font-family: "SimSun";
因此，当我们将字体大小、行高、字体这三个属性合二为一时，我们也可以这样写：
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
(5) 列宽可以用字体大小的百分比来表示。
一般来说，该比例小于100%，因为列宽必须小于字体大小。
例如，font:12px/200%“宋体”相当于font:12px/24px“宋体”。 200%可以理解为word上列宽的2倍。
反之，font:16px/48px "宋体"； 相当于font:16px/300%“宋体”。
字体粗体属性
.div {
font-weight: normal; /*正常*/
font-weight: bold; /*加粗*/
font-weight: 100;
font-weight: 200;
font-weight: 900;
}
设置字体是否加粗时css字体加黑加粗，属性值可以用Normal、Bold等粗体字体填充，也可以直接用100到900的数字填充。Normal的值相当于400，Bold的值相当于700.
文本属性
在 CSS 样式中，常见的文本属性包括以下内容：
下面是表格的图片，可以清晰地概览：
列表属性
ul li{
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
margin-left:80px; /*公有属性*/
}
还有一种缩写属性称为list-style，用于将前面的属性写在一个声明中。
我们来看看list-style-image属性的功效：
列表后面的图片添加行距，否则显示不完整：
这是表格的图片，大家一目了然：
Overflow属性：超出范围的内容如何处理
溢出属性的属性值可以是：
对于里面不同的属性值，我们来看看疗效：例如：
Document div{ width: 100px; height: 100px; background-color: #00cc66; margin-right: 100px; float: left; } #div1{ overflow: auto;/*超出的部分让浏览器自行解决*/ } #div2{ overflow: visible;/*超出的部分会显示出来*/ } #div3{ overflow: hidden;/*超出的部分将剪切掉*/ }其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
功效：
键盘属性光标
键盘属性光标有以下属性值：
比如我想让键盘放在那个标签上时光标显示一只手，代码如下：
p:hover{
cursor: pointer;
}
另外还有以下属性：（不记得了，需要的时候勾选即可）
all-scroll：IE6.0有上、下、左、右四个箭头，中间有一个点光标。 用于标识页面可以向下、向下、向左、向右或向任意方向滚动。
col-resize：IE6.0左右有两个箭头，中间有一条竖线隔开一个光标。 用于标识可以水平调整大小的项目或标题栏。
十字准线：简单的十字准线光标。
default：客户端平台默认光标。 通常是箭头。
手：一只手臂举起的手形光标。 就像普通用户将光标移动到超链接上一样。
移动：十字箭头光标。 用于标识可以连接的对象。
帮助：带有问号的箭头。 用于标识帮助信息是否存在。
no-drop：IE6.0 有一个带有斜线交叉的圆圈的手形光标。 用来表示被拖动的对象不允许放置在光标当前位置。
not-allowed：IE6.0严格禁止标记（斜线交叉的圆圈）光标。 不允许执行用于标识请求的操作。
进度：IE6.0带沙漏标记的箭头光标。 用于标识进程正在后台运行。
row-resize：IE6.0有上下两个箭头，光标中间用横线隔开。 用于标识可以垂直调整大小的项目或标题栏。
text：用于标识可编辑水平文本的光标。 通常呈小写字母 I 的形状。
Vertical-text：IE6.0使用的光标，用于标识可编辑的竖排文本。 一般是小写字母旋转90度的形状。
wait：用于标识程序正忙、用户需要等待的光标。 通常呈沙漏或手表的形状。
*-resize：箭头光标，用于标识对象可以改变的方向。
w-调整大小|s-调整大小|n-调整大小|e-调整大小|ne-调整大小|sw-调整大小|se-调整大小|nw-调整大小
url(url)：IE6.0用户自定义光标。 使用绝对或相对URL地址来指定光标文件（后缀为.cur或.ani）。
筛选
这只是过滤器的一个示例。 例如，如果你想把图像变成灰度图，你可以这样设置滤镜：
示例代码：
| 原始图片 | 图片加入黑白效果 |
| /*滤镜：设置图片为灰白效果*/ |
疗效如下：（IE有疗效，谷歌浏览器无疗效）
发表评论