巩固前端03--盒模型

CSS样式巩固

今天又重新接触到了CSS，在第三天的课程里面也学到了，所以不仅重温了CSS理论知识，也让我更系统性的记住了这些样式属性的使用方法。

盒模型

CSS盒模型是网络布局的基础——每个元素表示为一个矩形盒子，矩形盒子的content、padding、border 和 margin像是洋葱一样嵌套。当浏览器渲染一个页面的时候，它会分析哪些样式渲染到每个盒子的内容 (content) 当中，盒子周围的 “洋葱层” （padding、border、margin）有多大，以及盒子间的位置关系。在学习如何使用CSS布局之前，你需要理解盒子模型。

选择器

1、类选择器

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)，例如：

HTML代码：
< ul>
< li class=”first done”>Create an HTML document</ li>
< /ul>

CSS代码：
first {
font-weight: bold;
}

.done {
text-decoration: line-through;
} 即一个类选择了两个属性。

2、ID 选择器

ID选择器是由一个哈希/磅符号 (#)，后面跟着给定元素的ID名称组成的。 任何元素都可以使用id属性设置唯一的ID名称。 由你自己决定选择一个ID名称是什么。 这是选择单个元素的最有效的方式。
注意：一个ID名称必须在文档中是唯一的。关于重复ID的行为是不可预测的，比如一些浏览器只是计入第一个实例，其余的将被忽略。
例如：

HTML代码：
< p id=”polite”> — “Good morning.”< /p>
< p id=”rude”> — “Go away!”< /p>

CSS代码：

#polite {
font-family: cursive;
}

#rude {
font-family: monospace;
text-transform: uppercase;
}

3、组合选择器

选择器组 A,B 匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
后代选择器 A B 匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器 A > B 匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器 A + B 匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器 A ~ B 匹配B元素，满足条件：B是A之后的任意一个兄弟节点（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

CSS字体样式

字体包括：颜色、大小、种类、装饰、样式、粗细、转换和阴影。它们各自的标签属性为：color：颜色值、font-size：xxpx、font-family：Arial（默认）、
text-decoration：none（默认）、font-style：normal（默认）、font-weight：normal（默认）、text-transform：none（默认）、text-shadow：none（默认）。其中font-size的单位可以试px、em、rem三种，font-family一般在网页中加入网页安全字体（指的是在任何浏览器都能显示出来的字体），当然我们也可以加入一个字体栈，这样浏览器就可以有多种选择了，text-decoration的属性值有none、underline（下划线）、overline（上划线）、line-through（文本中划线），text-decoration可以接收多个属性值，比如同时加入上划线和下划线，text-decoration：overline underline；同时注意 text-decoration 是一个缩写形式，它由 text-decoration-line, text-decoration-style 和 text-decoration-color 构成；font-style的属性值有normal、italic、oblique三种，font-weight的属性值有normal、bold、lighter三种，text-transform的属性值有none（无）、uppercase（转换为大写）、lowercase（转换为小写）、capitalize（首字母大写）、full-width（规定字符长度宽度相等）四种属性；可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

text-shadow: -1px -1px 1px #aaa,
0px 4px 1px rgba(0,0,0,0.5),
4px 4px 5px rgba(0,0,0,0.7),
0px 0px 7px rgba(0,0,0,0.4);

CSS布局风格

1、文本对齐

text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

left: 左对齐文本。
right: 右对齐文本。
center: 居中文字
justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如 hyphens，打破一些更长的词语。

2、行高

line-height 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 font-size 来获得 line-height。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:
line-height: 1.5;

3、字母和单词间距

letter-spacing 和word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

其他一些值得看一下的属性

Font 样式:

font-variant: 在小型大写字母和普通文本选项之间切换。
font-kerning: 开启或关闭字体间距选项。
font-feature-settings: 开启或关闭不同的 OpenType 字体特性。
font-variant-alternates: 控制给定的自定义字体的替代字形的使用。
font-variant-caps: 控制大写字母替代字形的使用。
font-variant-east-asian: 控制东亚文字替代字形的使用, 像日语和汉语。
font-variant-ligatures: 控制文本中使用的连写和上下文形式。
font-variant-numeric: 控制数字，分式和序标的替代字形的使用。
font-variant-position: 控制位于上标或下标处，字号更小的替代字形的使用。
font-size-adjust: 独立于字体的实际大小尺寸，调整其可视大小尺寸。
font-stretch: 在给定字体的可选拉伸版本中切换。
text-underline-position: 指定下划线的排版位置，通过使用 text-decoration-line 属性的underline 值。
text-rendering: 尝试执行一些文本渲染优化。

文本布局样式：

text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。
text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。
white-space: 定义如何处理元素内部的空白和换行。
word-break: 指定是否能在单词内部换行。
direction: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。)
hyphens: 为支持的语言开启或关闭连字符。
line-break: 对东亚语言采用更强或更弱的换行规则。
text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。
text-orientation: 定义行内文本的方向。
word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。
writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。

Font 简写

许多字体的属性也可以通过 font 的简写方式来设置 . 这些是按照以下顺序来写的： font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.，在所有这些属性中，只有 font-size和font-family是一定要指定的。