这是我参与「第五届青训营」伴学笔记创作活动的第3天
由于CSS的知识内容很多，今天也来整理CSS使用中的相关难点笔记。
CSS的三种样式表
行内样式表（行内式）
在元素标签内部的style属性中设定css样式 适合于修改简单样式
div style="color:red;font-size:26px;"
style其实就是标签属性
在双引号中间，写法要符合css规范
可以控制当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
内部样式表
style
div{
}
/style
一般放在文档的head标签中
代码结构清晰，但没有实现结构与样式完全分离
使用内部样式表设定css，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式
外部样式表
通常也被称为外链式或链接式引入，最常用
实际开发都是外部样式表，适合于样式比较多的情况
核心：样式单独写到css文件中，之后把css文件引入到html页面中使用
1、新建一个后缀名为.css的样式文件，把所以css代码都放入此文件中
2在html页面中，使用link标签引入这个文件
link rel="stylesheet" href="css文件路径"
rel 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href定义所链接外部样式报表文件的URL，可以是相对路径，也可以是绝对路径
盒子模型
边框
简写border:black 1px solid;没有顺序
border-style:solid;dotted;dashed;hidden;
允许指定一个元素边框的样式
eg:只设定上边框
border-top:1px solid red；
边框会影响盒子实际大小
解决： 1、测盒子大小的时候不量边框
2、量完包括边框的值后再减去边框宽度
内边距（padding）
若盒子有宽度高度，会影响盒子实际大小
padding-bottom：下内边距
padding属性（简写属性）可以有一到四个值
padding:5px;上下左右
5px 10px;上下5 左右10
5px 10px 20px;上5 左右10 下20
5px 10px 20px 30px；顺时针 上右下左
小米侧边栏文字距离左侧距离用text-indent不精确，实际开发用padding
如果盒子本身没有指定width/height，此时padding不会撑开盒子大小
外边距（margin)
简写方式代表意义跟padding完全一致
典型应用：让块级盒子水平居中，但必须满足两个条件：
1盒子必须指定了宽度（width）
2盒子左右的外边距都设置为auto
常见的写法，以下三种都可以：
margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto;
以上方法是让块级元素水平居中，行内元素或者行内块元素
水平居中给其父元素添加text-align:center;即可
