CSS的标签模式设置Display属性

  display可以控制标签的显示模式。

  display：none | inline | block | inline-block

  继承性：无

display值的解释：

  none ：此元素不被显示，在文档中被移除。

  block ：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素

  inline ：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素

  inline-block：按行内标签进行排版，但是可以设置宽高，而且高度可以影响行高（以后再详细讲）。

对比一下：

/*display: none;*/   /*直接把当前标签从页面中直接移除了，不影响页面的布局*/

visibility: hidden;   /*这个只是不显示，但还是占用页面的空间*/

行内块元素设置

  宽高    边距            独占行

行内元素：    X        左右边距      不独占

块级元素：    √       上下左右       独占

行内块元素：  √        左右          不独占

行内元素不能设置宽高，只能通过他的内容来撑开他的宽度和高度。如果你设置了宽高是不会影响行内元素的显示的。

CSS的颜色表示

RGB：red，green，blue三元素叠加组成不同颜色。

语法： color: rgb(33,33,33);

取值： 0-255 ，也可以用百分比： 0% - 100%

十六进制是另外一种写法：

Color:#3333333;

长度单位

绝对长度单位：

cm：厘米，mm：毫米，in：英寸，pc：派卡（Picas），相当于我国新四号铅字的尺寸。都不常用，了解即可。

相对长度单位：

px：像素点，像素就是显示器显示的一个点。

em：1em 等于当前的字体大小，例如：当前元素的字体大小为16px，那么1em = 16px。

单位之间的关系：1in = 2.54cm = 25.4 mm  = = 96px

p { width: 1in; height:20px; }

在PC时代主要以px为主。在移动web时代主要以： em、rem、pw、ph、百分比等来做布局的设置。

相对单位解释：像素是相对单位。不同平面尺寸可以是相同的分辨率，也就相同的像素大小，对应的实际的尺寸可能不同。

文字排版

字体大小设置font-size

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large|smaller | larger

一般页面中：12px      14px   12cm

1em

例如：

p { font-size: 32px; }

设置字体font-family

使用font-family设置字体时，需要注意以下几点：

Ø各种字体之间必须使用英文状态下的逗号隔开。

Ø中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。

Ø如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

Ø尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

字体系列

衬线体：字体有一些修饰的东西，让字体变的美观。

非衬线体：没有修饰。

font-famliy:  tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

v前面的字体都查找失败后，在系统中找一种sans-serif字体作为默认字体。

v注意顺序，如果把sans-serif放前面去，后面的都失效了。

设置字体颜色

通过color属性可以设置字体的颜色。

Color: red;

建议最好使用十六进制的方式来写。

设置字符的间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

可以设置连续汉字（汉字间没有空格）的间距，也可以设置英文字母之间的间距。

letter-spacing: 10px;

设置单词间距

word-spacing属性用于定义英文单词之间的间距。也可以设置汉字中出现断字的距离（比如：文字间出现空格等）。

玩转行高

行高的CSS定义：行高是两行文本基线的距离。实际上就是：文本的高度+一倍的行距。

一行文本的高度正好是：  0.5倍行距+ 文本的高度 + 0.5倍行距

四线：

Ø文字顶端的线，称为顶线。

Ø中线：穿过x中心的线为中线。

Ø小写X字母底部的线为基线。

Ø文字底部的线为底线。

text-decoration:文本装饰

text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：

<s>删除线</s>

none：没有装饰（正常文本默认值）。

underline：下划线。

overline：上划线。

line-through：删除线。

text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

text-indent:首行缩进

text-indent属性用于设置段落首行文本的缩进，只能设置于块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

搜索官网对于：logo的优化

空白符的处理：

Normal：正常的显示，如果宽度不够进行折行显示。

Nowrap：即使超过盒子的宽度，文本也不进行换行显示。

Pre：写html代码的时候是什么样式的，显示就显示成什么样的。