前言
本节内容我们接着上一篇内容继续学习有关前端的CSS的有关内容，今天我们将继续介绍CSS的相关属性和功能，让我们能够更加全面的认识它！！！！！！
提示：以下是本篇文章正文内容，下面案例可供参考
五、CSS的具体属性
其实，CSS的具体属性还是非常多的，这里也是列举一些常见的属性进行介绍;
5.1 字体属性
在这一块儿用得最多的就是 字体大小 和 字体粗细 两个，其他的就留有个印像即可;
5.1.1 设置字体格式
字体，即使是在表是同一个文字符号的时候，也会有许多种不同的形式，比如说：微软雅黑、仿宋体、楷书、黑体等等；
5.1.2 字体大小
在之前的博客中已经使用过了，我们可以使用 font-size 来设置字体大小，其单位是 px（像素，当然 也支持其他的单位）
比如：
font-size: 50px; => 设置成字体大小为50px代码示例：
演示结果：
5.1.3 字体粗细
在 CSS 中，可以直接使用 font-weight属性 来设置字体粗细；
此时 无论是不是标题标签，都可以设置成功 ；
语法格式：
font-weight属性 后面所接的值 可以是英文单词，也可以是 数字：
font-weight: normal; => 正常粗细（与 400等值）
font-weight: bold; =>变粗（与 700 等值）
font-weight: lighter; =>变细
font-weight: number; (其中，只能写 整一百的数字，100最细 900最粗);
代码示例：
5.1.4 文字样式
文字样式 使用的是：font-style属性；
语法格式：
比如：
font-style: italic; => 设置倾斜；
font-style: normal; => 取消倾斜;
说明：
一般情况下，很少使用 设置倾斜，因为倾斜看起来很不好看 ；
而更多的是使用 取消倾斜，经常把 em标签/i标签 改成 不倾斜 ；
5.2 文本属性
5.2.1 文本颜色
我们可以使用 color属性 来进行设置 ；
语法格式：
其中，color属性有三种写法：
- 直接使用 单词
- 使用 rgb 的形式
- 使用 十六进制 的写法
比如：
color: green; => 使用单词
color: rgb(100,150,200); => 使用rgb
color: #ff0000; => 使用十六进制
代码示例：
(1)使用单词：
（2）使用 rgb 的形式
（3）使用 十六进制 的写法
注意：
如果使用 十六进制的方式 改变文本的颜色，可能存在缩写的行为：
aabbcc 缩写为 abc ；
ff0000 缩写为 f00；
当然，需要三个都一样，否则不能缩写：
如：
aaabaa 不可以缩写成 aaba ；
5.2.2 文本对齐
文本对齐 是来控制文本水平方向的对齐情况的：左对齐、右对齐、居中对齐；
使用 text-align属性，然后可以选择：left(左对齐)、right(右对齐)、center(居中对齐)；
语法格式：
text-align：left => 左对齐；
text-align：right => 右对齐；
text-align：center => 居中对齐；
代码示例：
（1）左对齐：
演示（1）：
（1）右对齐：
演示（2）：
（3）居中对齐
演示（3）：
5.2.3 文本装饰
文本装饰 就相当于之前所介绍过的 下划线、删除线、上划线 之类的；
语法格式：
比如：
text-decoration: none; => 啥都没有；
text-decoration: underline; => 下划线；
text-decoration: overline; => 上划线；
text-decoration: line-through; => 删除线；
代码示例：
演示结果：
5.2.4 文本缩进
在 HTML 中，可以用 特殊字符 来实现缩进效果 ；
而在 CSS 中，如果想要实现首行缩进几个空格，就可以使用 文本缩进属性 ；
这个可以使用 text-indent属性 ，后面所接的数值就是所要缩进的数值 ；
语法格式：
比如：
text-indent: 50px; => 缩进50px；
代码示例和演示：
5.2.5 行高
行高 = 文字高度 + 行间距 ；
使用 line-height属性 来控制行高 ；可以通过行高，控制行间距的 ；
代码示例：
添加了行高之后：
代码示例：
演示：
5.3 背景属性
5.3.1 背景颜色
我们可以使用 background-color属性 来设置背景颜色 ；
语法格式：
比如：
background-color: grey; => 设置背景颜色为灰色；
代码举例和演示：
设置了背景颜色之后：
5.3.2 背景图片（重点）
使用 background-image: url(路径); 来设置背景图片 ；
其中，使用 background-image属性 来设置背景图片的方式 是平铺的 ；
语法格式：
比如：
background-image: url(image2/1.png); => 这个又是相对路径(当然，绝对路径也可以)
代码示例：
未设置背景图片：
演示1：
设置了背景图片之后：
演示结果：
但是，在实际生活中，我们可能想要 "平铺" 效果，也可能不想要 "平铺" 效果，这个时候就可以使用 background-repeat属性 来决定要不要 "平铺"，以什么样的方式实现 "平铺；
比如：
background-repeat: repeat-x; => 以水平方向平铺(横着铺，竖着不铺)
background-repeat: repeat-y; => 以竖直方向平铺(横着不铺，竖着铺)
background-repeat: no-repeat; =>不铺(只有原来设置的一张背景图片了)
代码示例：
没有平铺的效果：
演示：
一般的背景图片应该是居中比较好看，我们可以使用 background-position属性 来设置背景图片的位置 ；
background-position属性可以赋予的值有：
具体的数字,center,top,bottom,left,right 等，
我们可以通过这些，来控制背景图片所在的位置
比如：
background-position: right top; => 控制背景图片在右上角
background-position: center center; => 控制背景图片在中间
示例1：
演示1：
但是在一般情况下，我们不知道具体的像素位置是哪个，怎么设置呢？
我们可以这样来设置：
示例2：
演示2：
当然，我们也可以使用 background-size属性 来设置背景图片的尺寸
语法格式：
比如：
background-size: 300px 400px; => 宽度是300px，高度是400px
background-size: cover; => 图片会尽可能的填满背景
background-size: contain; => 图片会尽可能的填满背景
需要注意的是，cover和contain 都会使得 图片会尽可能的填满背景，
不过 cover 尽可能的延展的更大，contain 会保证背景图片一定在里面，
所以自己认为，contain 可能会用的更多一点；
代码示例：
演示：
5.4 圆角矩形
语法规则：
//圆角矩形的语法规则：
border-radius: length;
//其中,length表示内切圆的半径,length越大,说明弧线越圆
代码示例：
没有设置圆角矩形：
演示1：
设置圆角矩形：
演示2：
上述内容，描述的是一个元素自身的相关样式属性，接下来就介绍一些 元素和元素 之间的相关样式属性(即：布局)
5.5 元素的显示模式
元素的显示模式有很多，在此处 就只介绍两种显示模式：
- 块级元素
- 行内元素
常见的 块级元素 有：h1~h6，p，div，ul，ol，li ......；
常见的 行内元素 有：a，span，u，del，i，em ......；
可以使用 display属性 来修改该元素的 "显示模式" ；
语法格式：
display: block; => 设置为块级元素；
display: inline; => 设置为行内元素；
display: none; => 直接把元素给隐藏了，不显示；
块级元素和行内元素的区别：
块级元素独占一行，行内元素不独占一行 ；
块级元素 高度、宽度、内外边距、行高 都是可以控制的；行内元素 设置高度、宽度、行高 都是无效的，设置内边距都有效，设置外边距 左右外边距有效，上下外边距无效 ；
块级元素 默认的宽度，是和父元素一样宽；行内元素 宽度则是内容本身(与 里面包含的文字 相关) ；
块级元素 内部的元素可以是块级元素，也可以是行内元素；行内元素 内部的元素只能是文本 或者 行内元素，不能是块级元素 ；
代码举例：
要想让它生效，就可以在里面加上 display:block 即可 ：
5.6 盒模型
盒模型 不适用于行内元素，都是以块级元素为基准来介绍的；
盒模型 是 HTML 中 最最基本的排列规则：
- 每个 HTML 元素，都是一个 "矩形" 的盒子 ；
- 每个这样的盒子，都由这几个部分组成：外边距，边框，内边距，内容 ；
注意：
边框 会撑大盒子，所以一般会使用 通配符选择器 来修改浏览器的行为，使其不会撑大盒子
* { box-sizing: border-box; }
5.6.1 边框
关于 边框 的知识点，只要掌握下面的内容就可以了
采用 border属性，后面所接的值是：粗细,样式(实心的啥的),颜色
具体的可以设置成啥样式的,可以去查文档:mdn border
比如：
border: 10px solid red;
border: 10px dashed black;
border: 10px dotted blue;
代码示例：
当然，边框是分方向的，我们既可以给四个方向都加上边框，也可以只加某个方向，还可以让不同的方向设置上不同的边框；
语法格式：
比如：
border-top: 10px solid black;
border-bottom: 20px dashed red;
border-left: 30px dotted orange;
border-right: 40px solid gray;
代码示例：
演示结果：
5.6.2 内边距
内边距 可以使用 padding属性 来设置；
只是单纯的设置 内容和边框之间的距离而已（不像是边框，可以设置粗细，样式，颜色）
当然，和边框类似，既可以给四个方向都加上内边距，也可以只加某个方向，还可以让不同的方向设置上不同的内边距；
语法格式：
比如： padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 20px;
代码举例和演示：
在实际上，虽然可以给四种方向分别设置内边距，但是通常都不这么做 ；
通常采用的是复合写法，
如：
5.6.3 外边距
外边距 使用的是 margin属性，和 padding属性 的用法非常类似
它也是可以 既可以给四个方向都加上外边距，也可以只加某个方向，还可以让不同的方向设置上不同的外边距（这里的具体用法就不再过多介绍了）（外边距是 元素与元素之间 的距离 ）
代码示例：
演示结果：
关于外边距，还有一个特殊的用法：设置元素水平居中(使用 auto属性值：让浏览器自己决定)
代码示例：
演示结果：
注意：
设置成 垂直方向设为 auto 是无效的，相当于没有外边距 ；
毕竟垂直方向的内容不知道有多少；
5.7 弹性布局
弹性布局 是后来引入的特性，使用弹性布局，就可以代替很多旧式的写法，是页面的布局更加方便，更符合逻辑 ；
代码示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
div{
height: 150px;
background-color: red;
}
span{
background-color: green;
width: 100px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>演示结果1：
但是，此时如果给 div 加上一个 display:flex;
代码示例2：
演示演示2：
代码示例3：
演示结果3：
当然，使用 弹性布局，可以更方便的使用居中效果：
语法格式：
使用 justify-content属性,属性值 可以是：space-around;
此时是水平方向居中 ~
可以使用 align-items属性，属性值 可以是：center;
此时 垂直方向也居中了 ~代码举例和演示：
当给一个元素设为 display:flex; 之后，此时的子元素就不再遵守原来的 "块级元素" 的规则了，变成了弹性元素，这些元素就会按照弹性布局的规则来排列 ；
但是，这不会对 "孙子"元素 产生影响 ；
弹性布局常用的属性：
display: flex; => 开启弹性布局
justify-content属性 => 描述的是主轴上的排列方式(默认水平方向)
align-items属性 => 描述的是侧轴上的排列方式(侧轴是和主轴垂直的方向)
现在就来介绍一下 justify-content属性：
justify-content属性 描述的是主轴上的排列方式(默认水平方向)
语法格式：
比如：
justify-content: flex-start; => 默认靠左排列
justify-content: flex-end; => 默认靠右排列
justify-content: center; => 居中
justify-content: space-between; => 元素之间有空白间隙,首尾没有间隙(很多网站都是有这种布局的)
justify-content: space-around; => 元素之间和首尾都有间隙(很多网站都是有这种布局的)
代码举例和演示：
现在就来介绍一下 align-items属性：
align-items属性 描述的是侧轴上的排列方式(侧轴是和主轴垂直的方向)
语法格式：
比如：
align-items: center; => 居中效果
align-items: flex-start; => 默认靠上排列
align-items: flex-end; => 默认靠下排列
代码举例和演示：
align-items属性 和 justify-content属性 的用法基本上就是差不多的，这里就不再一一的演示了
总结
目前为止，有关css的有关内容就介绍完成了；本两个小节详细介绍了css算法的一系列常用的使用方法，要能够熟练掌握和应用他们，让我们下期再见吧！！！！！！！！！！！！！！！！！
