1. 文字属性
CSS可以通过设置文字属性来呈现出我们想要看到的文本效果。
为了缩短代码，也可以在一个属性 font 中指定所有单个字体属性。
font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。
常用的文字属性设置：
| 属性 | 描述 |
|---|---|
| font | 简写属性。在一条声明中设置所有字体属性
|
| font-family | 规定文本的字体系列 (即设置哪一种字体) |
| font-size | 用于设置字号(字体大小） |
| font-style | 规定文本的字体样式 （e.g. 倾斜是italic, 不倾斜是normal） |
| font-variant | 规定是否以小型大写字母的字体显示文本 |
| font-weight | 规定字体的粗细 （加粗是700 / bold，不加粗是normal / 400） |
常用的文本属性：
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 （通常用十六进制，e.g. #fff表示白色） |
| text-decoration | 向文本添加修饰 |
| text-align | 设置文字水平的对齐方式 |
| vertical-align | 设置文字垂直的对齐方式 |
| line-height | 设置行与行之间的距离 |
| text-shadow | 设置文本阴影 |
| text-indent | 缩进文本的首行 |
| word-spacing | 设置字间距 |
| letter-spacing | 设置字符间距 |
举个例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSS文字属性</title>
<style>
a {
text-decoration: none;
padding: 10px;
background: #aaa;
}
p {
text-align: center;
/*
2 行高等于当前字体大小的两倍
10px 10px行高
*/
line-height: 1.6;
/*
underline 下划线
overline 上划线
line-through 删除线
*/
text-decoration: underline;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet,
consectetur adipisicing elit.
Tenetur at a recusandae repellat ipsum facilis optio nemo doloribus iure cumque aliquam eos,
est fuga qui minima error non rerum saepe.
</p>
<a href="#">click</a>
</body>
</html>
效果如下：
2. 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- 盒子与盒子之间的距离是外边距
- 盒子的厚度 我们称为为盒子的边框
- 盒子内容与边框的距离是内边距
- 盒子里面的文字和图片等元素是 内容区域
下面的图片说明了盒子模型(Box Model)：
常用的盒模型属性：
| 属性 | 作用 |
|---|---|
| border-width | 设置边框粗细，单位是px |
| border-style | 设置边框的样式
|
| border-color | 设置边框颜色 |
举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS盒子模型(Box Model)</title>
<style>
div {
background: cyan;
width: 100px;
height: 100px;
padding: 20px;
/*
border边框的宽度
边框的样式 solid dotted dashed
*/
border: 5px solid lightgreen;
margin: 20px;
}
</style>
</head>
<body>
<div>
div1
</div>
<div>
div2
</div>
</body>
</html>
效果如下：
对div1分析：
margin部分：
border部分：
padding部分：
content部分：
3. display属性
display(标签显示模式)是标签以什么方式进行显示。
HTML标签一般分为块标签和行内标签两种类型，它们也称为块元素和行内元素。
- display: block; 块级元素，即使设置了width宽度,也要独占一行整宽
- display: inline; 行内元素，内嵌行内文字，margin只能变化左右宽度，上下高度不变化
- display: inline-block; 行内块元素，内嵌行内块文字，margin可以变化上下左右宽高度
- display: none; 隐藏块元素
行内元素与行内块元素区别：
- 行内元素只能左右添加margin
- 行内块元素上下左右都可以
举个例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSSdisplay属性</title>
<style>
body {
margin: 0;
}
.block {
/*
块级元素 block 默认占整宽，
即使限制宽度，也会用margin填充剩下部分
*/
display: block;
background: #ccc;
width: 100px;
}
.inline {
display: inline;
background: aqua;
}
.inline-block {
display: inline-block;
background: aquamarine;
}
</style>
</head>
<body>
<!-- div默认的display就是block -->
<div class="block">
块级元素
</div>
Lorem
<div style="margin: 10px; padding: 10px" class="inline">
行内元素
</div>
ipsum dolor
<div style="margin: 10px; padding: 10px" class="inline-block">
行内块元素
</div>
sit amet, consectetur adipisicing elit.
Tenetur at a recusandae repellat ipsum facilis optio nemo doloribus iure cumque aliquam eos,
est fuga qui minima error non rerum saepe.
abc
</body>
</html>
效果如下：
4. 浮动
什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，不占位置，移动到指定位置。
它的作用是什么？
- 让多个盒子水平排列成一行
- 可以实现盒子的左右对齐等
- 可以用来控制图片，实现文字环绕图片效果
- float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。生成的块级框和我们前面的行内块极其相似。
| 属性 | 描述 |
|---|---|
| none | 不浮动 |
| left | 向左浮动 |
| right | 向右浮动 |
当父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。
这个时候我们该怎么做？
利用清除浮动：
清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流。
适用于下列场景：
- 父级没高度
- 子盒子浮动
- 影响下面布局
清除浮动常用方法：
- 父盒子设置固定高度清除浮动
直接在父盒子上设置固定高度，不过不便于维护。
- 额外标签法(隔墙法)
通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签 br 等亦可。
- 父级添加overflow属性方法
给父级添加： overflow为 hidden| auto| scroll 都可以实现。
- 使用after伪元素清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
- 使用双伪元素清除浮动
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
举个例子：
不加清除浮动时：
加了之后：
因为加了清除浮动，所以新购网那一部分的父级盒子高度撑了起来，所以可以正常显示了。
591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
