本文介绍了CSS的基础知识，包括class与id选择器的使用，盒子模型的内容、内边距、边框和外边距概念，以及定位中的relative、absolute和fixed。此外，还讲解了浮动元素如何影响布局，以及overflow属性的四种裁剪方式。最后，通过实例展示了伪元素的用法，如链接状态和段落样式。这些内容对于理解和应用CSS至关重要。
一.css语法
1.class与id选择器：id 选择器适用范围只有一个元素，而class可以有多个元素。
二.盒子模型
1.内容cotent：盒子的内容，如文本、图片等
2.内边距padding：即内容和边框之间的区域。
例如：padding-left,padding-right,padding-top,padding-bottom.(简写默认顺时针方向)
3.边框border：默认不显示
4.外边距margin：边框以外与其它元素的区域
三.定位
1.relative:相对定位，元素相对于他的静态（正常）位置进行偏移。
2.broad：占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？（即使改变浏览器串口大小）
3.fixed：这个按钮是固定的。
4.absolute：绝对定位，将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
四.溢出
-
visible 默认值，溢出部分不被裁剪，在区域外面显示
-
hidden 裁剪溢出部分且不可见
-
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
-
auto 裁剪溢出部分，视情况提供滚动条
-
-
五.浮动
float：让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
<html>
<head>
<style>
.example-float-right {
float: right;
}
</style>
</head>
<body>
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
modi nam vero!</p>
</body>
</html>
六.伪元素
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;} /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;} /* 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */
举例：
`
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>第一行会变成红色鸭yayayayyayayayyayayayayya！，第二行就是黑色啦啦啦啦啦啦</p>
</body>
</html>
`运行结果：
902
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
