1.字体font相关的属性
(1)font-family
font-family:字体族1,字体族2，...;
在 CSS 中，有两种不同类型的字体系列名称：
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
CSS 定义了 5 种通用字体系列：
serif 字体 衬线字体，字体边缘具有明显的艺术修饰效果，主要用于标题、大字体。如，宋体，Times New Roman
sans-serif 字体 无衬线字体，没有这些额外的装饰，字体比划一般粗细均匀、清晰，主要用于少量正文。如，微软雅黑，Arial
monospace 字体 等宽字体，主要针对英文，每个字符的宽度一致，如编程常用的字体。如，Consolas，Courier New
cursive 字体 手写体或草书体，这类字体的字就像手写的一样。
fantasy 字体 梦幻体，主要用在图片中，字体看起来很艺术，实际网页上用得不多。
两个字体族之间用 , 隔开。
当字体族名称有空格时需要加单引号或双引号，如'Times New Roman'。
把这些字体按照优先顺序排列，然后用逗号进行连接,用户代理会按所列的顺序查找这些字体。
建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，
在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选的通用字体。
例如： p {font-family: 'Times New Roman', Times, serif;}
使用中文字体时，则需要书写对应的英文名称，如微软雅黑体：Microsoft YaHei
(2)font-size 定义字体大小，即字号。
通过像素设置文本大小，可以对文本大小进行完全控制，如 p {font-size:14px;}
也可使用 em 来设置字体大小，1em 的默认尺寸是 16 像素，一般浏览器默认的字体大小就是16px。
如 p {font-size:0.875em;} /* 14px/16=0.875em */
(3)font-style 定义字体风格，最常用于规定斜体文本。
该属性有三个取值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
(4)font-weight 设置文本的粗细,使用 bold 关键字可以将文本设置为粗体。
例：p { font-weight:bold; }
(5)font-variant（不常用） 可以设定小型大写字母。
(6)font(简写属性) 这个简写属性用于一次设置元素字体的两个或更多方面。注意，至少要指定字体大小和字体系列的关键词。
可以按顺序设置如下属性：
font-style
font-weight
font-size
font-family
例：p { font:italic bold 12px/20px arial,sans-serif; }
2.文本text相关的属性
(1)color 设置文本颜色，同时也给元素的边框提供了一个默认取值
可以直接写颜色的英文名称，比如 red;
可以写颜色的十六进制值，比如 #ff0000;
可以写颜色的rgb代码，比如 rgb(255,0,0)
(2)text-indent 设置文本块中首行文本的缩进的大小。如 text-indent：32px;
一般浏览器中默认一个字的宽度是16px。
(3)letter-spacing 设置字符间距。允许使用负值，这会让字母之间挤得更紧。如 letter-spacing:2px;
(4)word-spacing 设置单词之间的间隔，对中文无效。CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。谨慎使用。
(5)line-height 设置行高。一般浏览器默认的行高设置会比字体大小稍微大一些。
通过行高可以设置“单行文本垂直居中”的效果。操作就是设置行高line-height的值和文本所在元素的高度height的取值相等，例如 line-height=30px; height=60px;
(6)text-decoration 文本装饰。
text-decoration 有 5 个值：
none——无装饰，会关闭原本应用到一个元素上的所有装饰。比如去掉超链接的下划线
underline——会对文本加下划线
overline——会在文本的顶端画一个上划线
line-through——在文本中间画一个贯穿线，起到把文本划掉的效果
blink——会让文本闪烁
(7)text-align 作用在块级元素上，规定元素中的文本的水平对齐方式（包括图片）。
可能的取值：
left——把文本排列到左边。默认值：由浏览器决定。
right——把文本排列到右边。
center——把文本排列到中间。
justify——实现两端对齐文本效果。注：不作用在图片上，以及纯文本的最后一行。
inherit——规定应该从父元素继承text-align属性的值。
(8)vertical-align 作用在具体的行内元素或者表格的单元格上，设置元素的垂直对齐方式。
可能的取值：
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐（这两个常用）。
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐（这两个常用）。
length 直接写在基线往上提升的像素值，px。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
(9)text-transform、text-shadow、white-space、text-overflow、word-wrap、word-break
3.盒模型以及box-sizing
.盒模型box model( border、margin、padding、width、height)
在一个文档中，每个元素都被表示为一个矩形的盒子。在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。
每个盒子有四个部分：
首先，盒子最内部分是元素实际的内容区域（content area）；
直接包围内容的是内边距（padding）,内边距呈现了元素的背景；
内边距的边缘是边框（dorder）,注意：边框是有宽度的，或者说边框是有厚度的；
边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
内边距、边框和外边距都是可选的，默认值是零。
但是，许多元素将由用户代理样式表设置外边距和内边距。
可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
这可以分别进行，也可以使用通用选择器对所有元素进行设置，例如： * { margin: 0; padding: 0; }
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
例如：margin-top、margin-bottom、margin-left、margin-right。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
border的设置：border的厚度默认是0，所以一般显示不出来。
要显示border，则可设置如下：border：1px solid blue;
这三个值分别是border-width、border-style、border-color，分别写的效果也是一样的。
border也有方向，如设置 border-bottom：1px solid blue; 则只会显示下边框。
.box-sizing 允许您以特定的方式定义匹配某个区域的特定元素。
默认值： content-box 宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
可能的取值： border-box 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
.box-shadow、border-raduis、border-image
4.垂直外边距折叠的问题
紧邻兄弟元素的垂直外边距会发生折叠。这种规则确保了不会出现元素外边距相加或者元素为空造成间距过大或过小的问题。
5.display属性（inline、block、inline-block、none）
display 属性规定元素应该生成的框的类型。
几个基本的取值：
(1)display:inline;
默认。此元素会被显示为行内元素，元素前后没有换行符。
CSS规范中，非可替换行内元素的width和height属性设置是无效的，外边距设置也是无效的。（img元素不存在该问题）
非要改的话，可以设置元素的display属性为：display:inline-block; 将该元素变成了行内块元素。
(2)display:block;
此元素将显示为块级元素，此元素前后会带有换行符。
(3)display:inline-block; 行内块元素。
行内块元素，简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。
虽然不能将行内元素变为块级元素，没有换行，但是这时就可以修改元素的width和height属性以及外边距设置等样式。
应用的例子有：将垂直排列的表单元素变为水平排列，比如做一个导航栏。
(4)display:none; 此元素不会被显示，元素在页面中占有的空间也会被回收。
是实现将元素隐藏的一种方式。
6.背景相关的属性
(1)background-color 背景颜色。
background-color:颜色英文名 或 十六进制值 或 rbg代码。
(2)background-image 背景图片。
background-image:url;
大多数背景都应用到 body 元素，不过并不仅限于此。
可以只为一个段落应用了一个背景甚至可以只为行内元素设置背景图像。
(3)background-repeat 背景重复。
默认属性值 repeat 导致图像在水平垂直方向上都平铺。
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，
no-repeat 则不允许图像在任何方向上平铺。
(4)background-position 背景定位。可以利用该属性改变图像在背景中的位置。
属性提供值有很多方法：
a.可以使用关键字：top、bottom、left、right 和 center。
通常，这些关键字会成对出现，不过也不总是这样。两个关键字分别对应水平方向和垂直方向
例如，top right 使图像放置在元素内边距区的右上角。
如果只出现一个关键字，则认为另一个关键字是 center。
b.使用百分数值：
默认值是 0% 0%，图像的左上角将放在元素内边距区的左上角。
如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
50% 50% 就是正中心。
c.长度值：长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
(5)background-size 规定背景图像的尺寸。默认值：auto auto;
可以取的值：
长度值——设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
百分数值——以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
cover——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
注：同比例拉伸直到背景图片完全覆盖背景区域。（二者比例不一致时图片会非常大）
contain——把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
注：同比例拉伸直到图片的宽度或者高度可以和背景区域一致。
(6)background（简写属性）
一般除了background-size属性需要单独写出来，其他的属性都可以组合到background简写属性里取值。
(1)font-family
font-family:字体族1,字体族2，...;
在 CSS 中，有两种不同类型的字体系列名称：
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
CSS 定义了 5 种通用字体系列：
serif 字体 衬线字体，字体边缘具有明显的艺术修饰效果，主要用于标题、大字体。如，宋体，Times New Roman
sans-serif 字体 无衬线字体，没有这些额外的装饰，字体比划一般粗细均匀、清晰，主要用于少量正文。如，微软雅黑，Arial
monospace 字体 等宽字体，主要针对英文，每个字符的宽度一致，如编程常用的字体。如，Consolas，Courier New
cursive 字体 手写体或草书体，这类字体的字就像手写的一样。
fantasy 字体 梦幻体，主要用在图片中，字体看起来很艺术，实际网页上用得不多。
两个字体族之间用 , 隔开。
当字体族名称有空格时需要加单引号或双引号，如'Times New Roman'。
把这些字体按照优先顺序排列，然后用逗号进行连接,用户代理会按所列的顺序查找这些字体。
建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路，
在用户代理无法提供与规则匹配的特定字体时，就可以选择一个候选的通用字体。
例如： p {font-family: 'Times New Roman', Times, serif;}
使用中文字体时，则需要书写对应的英文名称，如微软雅黑体：Microsoft YaHei
(2)font-size 定义字体大小，即字号。
通过像素设置文本大小，可以对文本大小进行完全控制，如 p {font-size:14px;}
也可使用 em 来设置字体大小，1em 的默认尺寸是 16 像素，一般浏览器默认的字体大小就是16px。
如 p {font-size:0.875em;} /* 14px/16=0.875em */
(3)font-style 定义字体风格，最常用于规定斜体文本。
该属性有三个取值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
(4)font-weight 设置文本的粗细,使用 bold 关键字可以将文本设置为粗体。
例：p { font-weight:bold; }
(5)font-variant（不常用） 可以设定小型大写字母。
(6)font(简写属性) 这个简写属性用于一次设置元素字体的两个或更多方面。注意，至少要指定字体大小和字体系列的关键词。
可以按顺序设置如下属性：
font-style
font-weight
font-size
font-family
例：p { font:italic bold 12px/20px arial,sans-serif; }
2.文本text相关的属性
(1)color 设置文本颜色，同时也给元素的边框提供了一个默认取值
可以直接写颜色的英文名称，比如 red;
可以写颜色的十六进制值，比如 #ff0000;
可以写颜色的rgb代码，比如 rgb(255,0,0)
(2)text-indent 设置文本块中首行文本的缩进的大小。如 text-indent：32px;
一般浏览器中默认一个字的宽度是16px。
(3)letter-spacing 设置字符间距。允许使用负值，这会让字母之间挤得更紧。如 letter-spacing:2px;
(4)word-spacing 设置单词之间的间隔，对中文无效。CSS 把“字（word）”定义为任何非空白符字符组成的串，并由某种空白字符包围。谨慎使用。
(5)line-height 设置行高。一般浏览器默认的行高设置会比字体大小稍微大一些。
通过行高可以设置“单行文本垂直居中”的效果。操作就是设置行高line-height的值和文本所在元素的高度height的取值相等，例如 line-height=30px; height=60px;
(6)text-decoration 文本装饰。
text-decoration 有 5 个值：
none——无装饰，会关闭原本应用到一个元素上的所有装饰。比如去掉超链接的下划线
underline——会对文本加下划线
overline——会在文本的顶端画一个上划线
line-through——在文本中间画一个贯穿线，起到把文本划掉的效果
blink——会让文本闪烁
(7)text-align 作用在块级元素上，规定元素中的文本的水平对齐方式（包括图片）。
可能的取值：
left——把文本排列到左边。默认值：由浏览器决定。
right——把文本排列到右边。
center——把文本排列到中间。
justify——实现两端对齐文本效果。注：不作用在图片上，以及纯文本的最后一行。
inherit——规定应该从父元素继承text-align属性的值。
(8)vertical-align 作用在具体的行内元素或者表格的单元格上，设置元素的垂直对齐方式。
可能的取值：
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐（这两个常用）。
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐（这两个常用）。
length 直接写在基线往上提升的像素值，px。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
(9)text-transform、text-shadow、white-space、text-overflow、word-wrap、word-break
3.盒模型以及box-sizing
.盒模型box model( border、margin、padding、width、height)
在一个文档中，每个元素都被表示为一个矩形的盒子。在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。
每个盒子有四个部分：
首先，盒子最内部分是元素实际的内容区域（content area）；
直接包围内容的是内边距（padding）,内边距呈现了元素的背景；
内边距的边缘是边框（dorder）,注意：边框是有宽度的，或者说边框是有厚度的；
边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
内边距、边框和外边距都是可选的，默认值是零。
但是，许多元素将由用户代理样式表设置外边距和内边距。
可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
这可以分别进行，也可以使用通用选择器对所有元素进行设置，例如： * { margin: 0; padding: 0; }
提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
例如：margin-top、margin-bottom、margin-left、margin-right。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。
border的设置：border的厚度默认是0，所以一般显示不出来。
要显示border，则可设置如下：border：1px solid blue;
这三个值分别是border-width、border-style、border-color，分别写的效果也是一样的。
border也有方向，如设置 border-bottom：1px solid blue; 则只会显示下边框。
.box-sizing 允许您以特定的方式定义匹配某个区域的特定元素。
默认值： content-box 宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
可能的取值： border-box 为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
.box-shadow、border-raduis、border-image
4.垂直外边距折叠的问题
紧邻兄弟元素的垂直外边距会发生折叠。这种规则确保了不会出现元素外边距相加或者元素为空造成间距过大或过小的问题。
5.display属性（inline、block、inline-block、none）
display 属性规定元素应该生成的框的类型。
几个基本的取值：
(1)display:inline;
默认。此元素会被显示为行内元素，元素前后没有换行符。
CSS规范中，非可替换行内元素的width和height属性设置是无效的，外边距设置也是无效的。（img元素不存在该问题）
非要改的话，可以设置元素的display属性为：display:inline-block; 将该元素变成了行内块元素。
(2)display:block;
此元素将显示为块级元素，此元素前后会带有换行符。
(3)display:inline-block; 行内块元素。
行内块元素，简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。
虽然不能将行内元素变为块级元素，没有换行，但是这时就可以修改元素的width和height属性以及外边距设置等样式。
应用的例子有：将垂直排列的表单元素变为水平排列，比如做一个导航栏。
(4)display:none; 此元素不会被显示，元素在页面中占有的空间也会被回收。
是实现将元素隐藏的一种方式。
6.背景相关的属性
(1)background-color 背景颜色。
background-color:颜色英文名 或 十六进制值 或 rbg代码。
(2)background-image 背景图片。
background-image:url;
大多数背景都应用到 body 元素，不过并不仅限于此。
可以只为一个段落应用了一个背景甚至可以只为行内元素设置背景图像。
(3)background-repeat 背景重复。
默认属性值 repeat 导致图像在水平垂直方向上都平铺。
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，
no-repeat 则不允许图像在任何方向上平铺。
(4)background-position 背景定位。可以利用该属性改变图像在背景中的位置。
属性提供值有很多方法：
a.可以使用关键字：top、bottom、left、right 和 center。
通常，这些关键字会成对出现，不过也不总是这样。两个关键字分别对应水平方向和垂直方向
例如，top right 使图像放置在元素内边距区的右上角。
如果只出现一个关键字，则认为另一个关键字是 center。
b.使用百分数值：
默认值是 0% 0%，图像的左上角将放在元素内边距区的左上角。
如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。
50% 50% 就是正中心。
c.长度值：长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
(5)background-size 规定背景图像的尺寸。默认值：auto auto;
可以取的值：
长度值——设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
百分数值——以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
cover——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
注：同比例拉伸直到背景图片完全覆盖背景区域。（二者比例不一致时图片会非常大）
contain——把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
注：同比例拉伸直到图片的宽度或者高度可以和背景区域一致。
(6)background（简写属性）
一般除了background-size属性需要单独写出来，其他的属性都可以组合到background简写属性里取值。
(7)background-attachment、background-clip、background-origin、multiple backgrounds
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
