☕导航小助手☕
🍚写在前面
🥡🥡5.1 字体属性
🥟🥟🥟5.1.1 设置字体
🍔🍔🍔5.1.2 字体大小
🧀🧀🧀5.1.3 字体粗细
🥨🥨🥨5.1.4 文字样式
🥮🥮5.2 文本属性
🍤🍤🍤5.2.1 文本颜色
🦪🦪🦪5.2.2 文本对齐
🍲🍲🍲5.2.3 文本装饰
🥩🥩🥩5.2.4 文本缩进
🥘🥘🥘5.2.5 行高
🍛🍛5.3 背景属性
🍞🍞🍞5.3.1 背景颜色
🥣🥣5.4 圆角矩形
🍜🍜5.6 盒模型
🍨🍨🍨5.6.1 边框
🍝🍝🍝5.6.2 内边距
🎂🎂🎂5.6.3 外边距
🍱🍱5.7 弹性布局
写在前面
本篇博客是仅仅承接与上一篇博客的内容，若要学习完整的 CSS内容，可移步至上一篇博客，依次学习 ~
五、CSS的具体属性
其实，CSS的具体属性还是非常多的，这里也是列举一些常见的属性进行介绍 ~
5.1 字体属性
在这一块儿用得最多的就是 字体大小 和 字体粗细 两个，其他的就留有个印像即可 ~
5.1.1 设置字体
字体，即使是在表是同一个文字符号的时候，也会有许多种不同的形式，比如说：微软雅黑、仿宋体、楷书、黑体、......
这里就不进行演示了 ~
5.1.2 字体大小
在之前的博客中已经使用过了，我们可以使用 font-size 来设置字体大小，其单位是 px（像素，当然 也支持其他的单位）~
比如：
font-size: 50px; => 设置成字体大小为50px示例：
演示：
5.1.3 字体粗细
其实，并不一定借助 h标签（标题标签），也可以实现字体粗细的效果 ~
在 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; => 使用十六进制
不过需要注意的是，如果使用 十六进制的方式 改变文本的颜色，可能存在缩写的行为：
如：
aabbcc 缩写为 abc ~
ff0000 缩写为 f00~
当然，需要三个都一样，否则不能缩写：
如：
aaabaa 不可以缩写成 aaba ~
5.2.2 文本对齐
文本对齐 是来控制文本水平方向的对齐情况的：左对齐、右对齐、居中对齐 ~
使用 text-align属性，然后可以选择：left(左对齐)、right(右对齐)、center(居中对齐)~
示例1：
演示1：
示例2：
演示2：
示例3：
演示3：
5.2.3 文本装饰
文本装饰 就相当于之前所介绍过的 下划线、删除线、上划线 之类的 ~
这些功能在 CSS 里面又实现了一遍 ~
比如：
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：
演示1：
示例2：
演示2：
但是，在实际生活中，我们可能想要 "平铺" 效果，也可能不想要 "平铺" 效果，这个时候就可以使用 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：
演示1：
示例2：
演示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 的知识点就介绍到这里了 ~
怎么样，是不是很神奇~
如果感觉这一篇博客对你有帮助的话，可以一键三连走一波，非常非常感谢啦 ~
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
