1.❤️❤️前言~🥳🎉🎉🎉
Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。
如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。
当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！
加油，一起CHIN UP！💪💪
🔗个人主页：E绵绵的博客**
📚所属专栏：**1. JAVA知识点专栏
深入探索JAVA的核心概念与技术细节
2.JAVA题目练习****
实战演练，巩固JAVA编程技能
3.c语言知识点专栏****
揭示c语言的底层逻辑与高级特性
4.c语言题目练习****
挑战自我，提升c语言编程能力
了解Mysql知识点，提升数据库管理能力
学习前端知识，更好的运用它
在学习html5的基础上更加熟练运用前端
在学习html5和css3的基础上使我们的前端使用更高级
📘 持续更新中，敬请期待 ❤️❤️
2.css三大特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则:
样式冲突，遵循的原则是后者居上原则，哪个在后面，用哪个，很简单。
继承性
某些CSS属性可以从父元素继承给其子元素。如果子元素没有指定某个样式，它会继承其父元素的样式。
可继承的属性 ：包括
color（颜色）、font-family（字体）、line-height（行高）、text-align（文本对齐）等。不可继承的属性 ：如
margin（外边距）、border（边框）、padding（内边距）等属性默认不会继承。
优先级
优先级决定当多个选择器应用于同一元素时，哪个选择器的样式生效。它由选择器的类型和复杂度决定。
这张图片展示了CSS选择器的**优先级**（Specificity）规则，具体内容如下：
继承（Inheritance）或通用选择器
*：
- 优先级 ：0, 0, 0, 0
- 这是最低的优先级，表示这个选择器会应用于所有元素，除非有更具体的选择器来覆盖它。
元素选择器 （如
div、p、h1）：
- 优先级 ：0, 0, 0, 1
- 比通用选择器的优先级更高。
类选择器、伪类选择器 （如
.class、:hover）：
- 优先级 ：0, 0, 1, 0
- 优先级高于元素选择器。
ID选择器 （如
#id）：
- 优先级 ：0, 1, 0, 0
- ID选择器的优先级高于类选择器和元素选择器。
行内样式
style=""：
- 优先级 ：1, 0, 0, 0
- 行内样式的优先级最高，覆盖其他所有选择器，除非使用
!important。
!important：
优先级 ：∞
!important是所有CSS规则中优先级最高的，它会覆盖所有其他样式，包括行内样式，只有另一个!important优先级更高时，才会被覆盖。
如果一个元素使用多个选择器，它们的优先级会叠加。例如：.class1.class2 {
color: blue; /* 优先级 0,0,2,0 */
}#id1.class2 {
color: green; /* 优先级 0,1,1,0 */
}要注意的是只适用于后代选择器，不适用于并集选择器。
3.盒子模型
CSS 盒子模型（Box Model）是网页布局的核心。每个HTML元素都会被看作一个矩形的"盒子"，这个盒子包括了多个区域：内容区域（content） 、内边距（padding） 、边框（border）和外边距（margin）。这些区域一起决定了元素的最终显示效果和占用空间。
盒子模型组成部分
内容区域（Content）：
- 内容区域 是元素实际内容的区域，它显示文本、图像、视频等。它的尺寸由
width和height控制。- 例如，如果你设置
width: 200px; height: 100px;，那么内容区的宽度为 200px，高度为 100px。内边距（Padding）：
内边距是元素内容与边框之间的空间。它让内容与边框之间留有空白区域，保证内容不会紧贴着边框。
padding是可以单独控制每个边的（上、右、下、左）
单一值：
padding: 20px;设置所有方向的内边距相同。
两个值：
padding: 10px 20px;上下内边距为10px，左右内边距为20px。
三个值：
padding: 10px 15px 20px;上内边距10px，左右内边距15px，下内边距20px。
四个值：
padding: 10px 15px 20px 25px;按顺序设置上、右、下、左的内边距。
padding影响元素的总尺寸，内边距会增加元素的总宽度和总高度。边框（Border）：
边框 是围绕元素内容的线条，位于内边距的外部。你可以设置边框的宽度、颜色和样式（例如：
border: 1px solid black;）。
以下是边框的样式：
边框也可以单独设置每个边（如
border-top,border-right等）。边框会影响元素的大小。在 CSS 盒子模型中，边框是构成元素总尺寸的一部分。
外边距（Margin）：
- 外边距是元素与其他元素之间的空白区域，位于边框的外面。它用于控制元素之间的间距。
margin也可以单独控制每个边（如margin-top,margin-right等）。并且它的复合写法跟padding一样。- 外边距不会影响元素的实际尺寸，但它会影响元素与其他元素的相对位置和间距。
下图是其基本分布：
示例
.box { width: 100px; height: 100px; padding: 20px; border: 5px solid #000; }
- 结果：总宽度为
100px + 20px (左) + 20px (右) + 5px (左边框) + 5px (右边框) = 150px- 总高度为
100px + 20px (上) + 20px (下) + 5px (上边框) + 5px (下边框) = 150px
水平居中
使用
margin: auto（适用于块级元素）：
这种方法要求块级元素或行内块元素有固定宽度（如
div）。设置
margin: auto，要求元素指定宽度，使其水平居中。.centered {
width: 300px;
margin: 0 auto; /* 上下外边距为0，左右外边距自动 */
}
上述针对于块级元素。
而对于行内元素或行内块元素：可以通过设置
text-align: center来实现水平居中。.container { text-align: center; /* 水平居中内联元素 */ }
清除内外边距
对于内外边距不同游览器有不同默认的值，一般我们要布局的话，会将其全部清楚，用该代码:
* { margin: 0; padding: 0; }
表格边框
对于表格内部一般是不显示边框的。
如果要显示边框，我们就要用该代码：
table,th,td { border:2px solid black; } 显示如下：
而如果我们不想要单元格之间有间隙，可以变成这样，加上一句代码。 table,th,td { border:2px solid black; border-collapse:collapse; }
4.圆角边框
为元素添加圆角边框，设置
border-radius为一个数值。.element { border: 2px solid black; border-radius: 10px; /* 设置圆角半径 */ }这原理是我们设置四个圆在各自底部。
border-radius的值可以使用百分比，50%的圆角边框可以使一个正方形元素变成圆形，使矩形变成椭圆。
