CSS基础2（文字基本属性以及盒模型基础 怪异盒模型和标准盒模型）

六，字体

1.选择字体font-family

在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family 属性应包含多个字体名称作为备用字体，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号分隔。

.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}

效果如下：

2.字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置二个值：

normal - 文本正常显示

italic - 文本以斜体显示

3.字体粗细

font-weight 属性指定字体的粗细。

一般分为normal,bold,bolder… normal为正常 bold为加粗，bolder的意思是更粗。

100-900之间的数字也可以表示粗细。400是正常，700是加粗。

4.字体大小

font-size 属性设置文本的大小。

font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小。

不允许用户在所有浏览器设置中更改文本大小（可访问性不佳）。

当输出的物理尺寸已知时，绝对尺寸很有用。

相对尺寸：

设置相对于周围元素的大小。

允许用户在浏览器中更改文本大小。

4.1像素设置文字大小

也是经常用作设置字体大小的单位 px

4.2以em来设置自已的大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

总之，1em就是字体大小的一倍。

4.3响应式字体的大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”。

这样，文本大小将遵循浏览器窗口的大小。当调整浏览器窗口的大小时，字体大小将会缩放。

1vw意思就是屏幕宽度的百分之一。

七，盒子模型

1.盒子模型概述。

1.所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。

CSS 盒模型实质上是一个包围每个 HTML 元素的盒子。它包括：外边距、边框、内边距以及实际的内容。下图展示了盒模型：

对不同部分的说明：

1. 内容 - 盒的内容，其中显示文本和图像。
2. 内边距 - 清除内容周围的区域。内边距是透明的，可以呈现元素的背景。
3. 边框 - 围绕内边距和内容的边框。
4. 外边距 - 清除边界外的区域。外边距是透明的，不会遮挡其后的任何元素。

盒模型允许我们在元素周围添加边框，并定义元素之间的空间。

我们平时定义的盒子也叫标准盒模型，她的宽度一般都是内容的宽度，正常的盒子设置内边距和边框会撑大盒子。所以我们盒子的整体的宽度就是内容的宽度加上两个内边距的宽度再加上两条边框的宽度再加上两个外边距的宽度。，但是有例外的怪异盒模型也叫IE盒模型。它增加元素的内边距和边框元素的宽度不会增大，它所设置的宽度就是内边距加上边框和内容的宽度。如果需要修改边框的宽度和内边距的宽度，他会减少内容的宽度。

标准盒模型：

从上图可以看出，w3c盒子模型的范围包括margin。border、padding、content，并且content部分不包含其他部分。

怪异盒模型：

从上图可以看出，IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.

将标准盒模型转化为怪异盒模型的话需要用到一下属性：

box-sizing:boder-box;

2.宽度和高度

盒子模型中定义的宽度和高度是内容的宽度和高度。

  .one {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

显示效果如下：

3.边框

1.边框类型

1.border-style 属性指定要显示的边框类型。

     p{ 
        /* 虚线 */
        border-style: dashed;
        /* 实线 */
        border-style: solid;
	}

显示效果如下：

2.边框宽度

border-width 属性指定四个边框的宽度。一般为px或%

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick 。

3.边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

1. name - 指定颜色名，比如 “red”
2. HEX - 指定十六进制值，比如 “#ff0000”
3. RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
4. HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
5. transparent

4.简写

border：1px solid pink

显示效果如下：

4.外边距

margin 属性用于在任何定义的边框之外，为元素周围创建空间。

为了缩减代码，可以在一个属性中指定多个外边距属性。

• margin: 25px 50px 75px 100px; ：上外边距是 25px；右外边距是 50px；下外边距是 75px；左外边距是 100px。
• margin: 25px 50px 75px; ：上外边距是 25px；右和左外边距是 50px；下外边距是 75px。
• margin: 25px 50px; ：上和下外边距是25px；右和左外边距是 50px。
• margin: 25px; ：四个外边距都是 25px。

你可以将 margin 属性设置为 auto，以使元素在其容器中水平居中。

     .one {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            margin: 0 auto;
        }

显示效果如下：