【CSS3】css开篇基础（3）

1.❤️❤️前言~🥳🎉🎉🎉

Hello, Hello~ 亲爱的朋友们👋👋，这里是 E 绵绵呀✍️✍️。

如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！

加油，一起 CHIN UP！💪💪

🔗个人主页： E 绵绵的博客
📚 所属专栏：

1. JAVA 知识点专栏

        深入探索 JAVA 的核心概念与技术细节

2.JAVA 题目练习

        实战演练，巩固 JAVA 编程技能

3. c 语言知识点专栏

        揭示 c 语言的底层逻辑与高级特性

4. c 语言题目练习

        挑战自我，提升 c 语言编程能力

5.Mysql 数据库专栏

        了解 Mysql 知识点，提升数据库管理能力

6.html5 知识点专栏

        学习前端知识，更好的运用它

7. css3 知识点专栏

        在学习 html5 的基础上更加熟练运用前端

8.JavaScript 专栏

        在学习 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）。这些区域一起决定了元素的最终显示效果和占用空间。

盒子模型组成部分

1. 内容区域（Content）：

   • 内容区域 是元素实际内容的区域，它显示文本、图像、视频等。它的尺寸由 width 和 height 控制。
   • 例如，如果你设置 width: 200px; height: 100px;，那么内容区的宽度为 200px，高度为 100px。

2. 内边距（Padding）：

   • 内边距 是元素内容与边框之间的空间。它让内容与边框之间留有空白区域，保证内容不会紧贴着边框。
   • padding 是可以单独控制每个边的（上、右、下、左）
     

     ---

     单一值：padding: 20px; 设置所有方向的内边距相同。

     ---

     两个值：padding: 10px 20px; 上下内边距为 10px，左右内边距为 20px。

     ---

     三个值：padding: 10px 15px 20px; 上内边距 10px，左右内边距 15px，下内边距 20px。

     ---

     四个值：padding: 10px 15px 20px 25px; 按顺序设置上、右、下、左的内边距。

   • padding 影响元素的总尺寸，内边距会增加元素的总宽度和总高度。

3. 边框（Border）：

4. 外边距（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% 的圆角边框可以使一个正方形元素变成圆形，使矩形变成椭圆。

5. 盒子阴影和文字阴影