CSS是 Cascading Style Sheets（级联样式表）
CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个 .css 文件中或HTML文档中的某一个部分。
CSS与HTML的关系
HTML是网页内容
CSS定义页面的样式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。
常用的选择器：
标签选择器：通过标签选择器可以选择页面中的所有指定标签
语法：标签名{}
类选择器：通过标签class属性值选中一组标签
语法：.class属性值{}
id选择器：通过标签的id属性值选中唯一的一个标签
语法：#id属性值{}
选择器组合：通过选择器分组可以同时选中多个选择器对应的标签
语法：选择器1，选择器2，选择器N{}
通配选择器：可以用来选中页面中的所有标签
语法：*{}
CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类
伪类的语法：
:hover 伪类表示鼠标移入的状态
:active表示的是被点击的状态
:foucus向拥有键盘输入焦点的标签添加样式
定义透明效果的属性是opacity
opacity 属性设置标签的不透明级别 值为1。
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。
什么是块级标签？
块级标签：无论内容多少，都会独自占据一行的。
例如<p>、<h1>、<ul>、<ol>、<hr/>等
什么是行级标签？
行级标签：只占自身大小的标签，不会占一行。
例如<font>、<b>、<i>、<a>等。
什么是行级块标签
例如<input/> <img> 等
注意： 一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签。
a可以包含任何标签，除去a本身；
p标签不可以包含任何的块标签。
通过display样式可以修改标签的类型。
可选值：
block : 设置标签为块标签
inline : 设置标签为行级块标签
none: 隐藏标签（标签将在页面中完全消失）
CSS处理网页时，他认为每个标签都包含在一个不可见的盒子中
如果把所有的标签都想成盒子，那么我们对网页的布局就相当于摆放盒子
我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。
一个盒子会分为以下几个部分：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
顾名思义，内边距指的就是标签内容区与边框以内的空间。
内边距会影响整个盒子的大小。
使用padding属性来设置变迁的内边距
例如：
padding-left : 10px;
padding-right : 10px;
//这样会依次设置标签的上、右、下、左四个方向的内边距
padding : 10px 20px 30px 40px。
可以在标签周围创建边框，边框是可见框的最外部。
可以使用border属性来设置盒子的边框：
//指定了边框的宽度、颜色和样式
border：1px red solid;
//也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框
边框可以设置样式：
dotted(点线) dashed（虚线） solid（实线）double（双线）groove（槽线）
border-radius：设置四个角为圆角边框
border-top-left-radius：设置左上为圆角边框
外边距是标签边框与周围标签相距的空间。使用margin属性可以设置外边距，用法与padding类似，同样可以对四个方向进行设置。
margin-top/right/bottom/left
magin的值可以为负值
magin的值可以auto，设置外边距为最大值，当将左右外边距设置为atuo时，浏览器会将左右外边距设置为相等。
垂直设置为auto时值为0，所以水平居中也可以简写为magin：0 auto。
外边距不会影响盒子整体大小，但会影响盒子的位置，会影响盒子的实际控制范围
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所
以为很多的标签都设置了一些默认的margin和padding，而它的这些默
认样式，正常情况下我们是不需要使用的。
所以我们往往在便携样式之前需要将浏览器中的默认的margin和padding全部去掉。
*{
margin: 0;
padding: 0;
}
clear属性 可以用于清除标签周围的浮动对标签的影响，其他标签的位置不发生变化
可选值：
left：忽略左侧浮动
right：忽略右侧浮动
both：忽略全部浮动
相对定位的特点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2GqARxjP-1659188611612)(C:\Users\dell\Desktop\自写笔记\暑假笔记\CSS\c7.png)]
，因此视觉上会与其他的标签重叠
