CSS
CSS
CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页上的元素样式和布局的标记语言。它是一种样式表语言，与HTML（超文本标记语言）结合使用，用于控制网页的外观和样式。
CSS的主要作用是将样式应用到HTML元素上，以改变其外观和布局。通过CSS，可以控制元素的字体、颜色、大小、间距、背景、边框、位置等属性，使网页更加美观、统一和易于阅读。
一、优势
分离样式和内容：CSS将网页的样式信息与HTML文档内容分离，使得样式与结构相互独立。通过将样式信息集中在CSS文件中，可以提高代码的可维护性和可重用性。这也使得多个页面可以共享同一套样式，提升了开发效率。
可以控制页面布局：CSS提供了丰富的布局功能，可以通过盒模型、定位、弹性布局、网格布局等来控制元素在页面中的位置和大小。这使得网页设计更加灵活，并且能够适应不同的屏幕尺寸和设备类型。
样式重用和继承：使用CSS可以定义样式类并将其应用于多个元素，实现样式的重用。此外，CSS还支持样式的继承，子元素可以继承父元素的样式，减少了冗余的样式定义，提高了代码的简洁性。
可以创建交互效果：CSS提供了丰富的动画和过渡效果，可以通过添加类或伪类来实现鼠标悬停、点击等交互效果，增强用户体验。
跨浏览器兼容性：CSS是一个标准化的技术，几乎所有现代浏览器都支持它。通过使用CSS，可以确保网页在不同浏览器上呈现一致的外观和样式。
可扩展性：CSS具有很好的扩展性，可以通过自定义样式类、选择器和属性来实现各种样式效果。此外，CSS还支持使用预处理器（如Sass、Less）和后处理器（如PostCSS）来增强样式表的功能和可维护性。
综上所述，CSS具有分离样式与内容、灵活的布局能力、样式重用和继承、交互效果、兼容性和可扩展性等优势，使得它成为构建现代网页的重要技术之一。
二、基本导入方式
行内样式
<h1 style="color: brown;">我是标题</h1>链接:
<!-- 先渲染后展示 -->
<link rel="stylesheet" href="path">
<!-- 先展示后渲染 -->
<style>
@import url("path");
</style>三、选择器
CSS选择器是一种用于选择HTML元素并为其应用样式的模式。以下是常见的CSS选择器类型：
元素选择器（Element Selector）：通过指定HTML元素的标签名称来选择元素。例如，
p选择所有<p>元素。ID选择器（ID Selector）：通过指定HTML元素的ID属性值来选择单个元素。使用
#符号加上ID值来定义ID选择器。例如，#myElement选择具有id="myElement"的元素。类选择器（Class Selector）：通过指定HTML元素的class属性值来选择一个或多个元素。使用
.符号加上类名来定义类选择器。例如，.myClass选择具有class="myClass"的元素。属性选择器（Attribute Selector）：通过指定HTML元素的属性来选择元素。可以根据属性的存在、值等条件进行选择。例如，
[type="text"]选择具有type="text"的元素。伪类选择器（Pseudo-class Selector）：通过选择元素的特殊状态或位置来选择元素。例如，
:hover选择鼠标悬停在元素上的状态，:first-child选择第一个子元素。直接后代选择器（Child Selector）：通过选择元素在特定元素的直接子元素中的位置来选择元素。使用
>符号来定义直接后代选择器。例如，div > p选择所有紧跟在<div>元素内部的<p>元素。
这只是CSS选择器的一小部分，还有许多其他类型的选择器可供使用。选择器的灵活运用可以更精确地选择要样式化的元素，以满足不同的设计需求。
3.1 优先级
id选择器>类选择器>元素选择器
3.2 元素选择器
<style>
h1{
color: #000;
}
</style>
<h1>hihihi</h1>3.3 类选择器
<style>
.类名{
color: #ff0000;
}
</style>
<h2 class="类名">test1</h2>
<h3 class="类名">test2</h3>类选择器可以归类，实现复用的效果。
3.4 id选择器
<style>
#id名{
color: #000;
}
</style>
<p id="test3"></p>3.5 层次选择器
3.51后代选择器
body p{
background : red;
}body后面的所有p标签
3.52子选择器
只选择一代
body > p{
background: red;
}body下面的第一层p标签
3.53相邻兄弟选择器
.active + p{
background: red;
}同一层次，下相邻的第一个元素。
3.54通用兄弟选择器
.active ~ p{
background: red;
}3.6结构伪类选择器
ul第一个子元素：
ul li:first-child{
color: #000;
}ul最后一个子元素
ul li:last-child{
color: #000;
}这个选择器表示选择文档中任意父元素下的第一个子元素，并判断该子元素是否为
<p>元素并为其设置红色背景。
p:nth-child(1){
background: red;
}选择所有p元素中的第二个
p:nth-of-type(2){
background: red;
}3.8属性选择器
形式一：
a[条件]{
background: red;
}
/*条件可以使用通配符*/
/*a标签中所有带有id属性的标签*/
a[id]{
background: red;
}
/*a标签中所有id属性为test的标签*/
a[id="test"]{
background: red;
}
/*a标签中所有id属性包含test的标签*/
a[id*="test"]{
background: red;
}
/*a标签中所有id属性以test开头的标签*/
a[id^="test"]{
background: red;
}
/*a标签中所有id属性以test结尾的标签*/
a[id$="test"]{
background: red;
}四、美化网页
span标签
重点突出的内容用span标签
<span>test</span>字体
font-family：字体font-size：字体大小font-weight：字体粗细color：字体颜色
这些可以单独写，也可以写在一起。例如：
.p{
font: 风格 粗细 字体大小 字体样式;
}文本样式
颜色
颜色可以使用单词，也可以使用RGB,RGBA
RGB:0~F
RGBA(透明度):0~1
color: red;
color: #000;
color: rgb(0, 255, 255);
color: rgba(0, 255, 255, 0.1);文本对齐方式
text-align:left/right/center;首行缩进
text-indent:2em;行高
line-height:300px;装饰
下划线
text-decoration:underline;中划线
text-decoration:line-through;上划线
text-decoration:overline图片与文字居中对齐
<style> img,span{ vertical-align: middle; } </style> <p> <img src="path" alt=""> <span>test</span> </p>阴影
#test{ text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径 }
列表
<style>
ul li{
list-style: circle; 去掉原点
list-style: none; 空心圆
list-style: decimal; 数字
list-style: square; 正方形
}
</style>背景图片
<style>
div{
background-image: url("path");
}
.div1{
background-color: rebeccapurple;
}
</style>渐变
background-image:linear-gradient(115deg,#FFFFFF 0%, #6284FF 50%，#FF0000 100%)五、盒子模型
margin：外边距
padding：内边距
#test{
/* 一个参数代表上下 */
margin: 1;
/* 两个参数代表上下 左右 */
margin:1 auto;
/* 四个参数代表上右下左 */
margin: 1px 2pc 3pc 4px;
}padding与margin类似。
border用于设置元素的边框样式、宽度和颜色。
selector {
border: [border-width] [border-style] [border-color];
}其中 selector 是要应用样式的元素选择器，border-width 是边框宽度，border-style 是边框样式，border-color 是边框颜色。这些值可以按照需要进行组合或省略。
border-width定义边框的宽度，可以是像素（px）、百分比（%）或其他支持的单位。border-style定义边框的样式，常见的样式包括solid（实线）、dotted（点线）、dashed（虚线）和none（无边框）等。border-color定义边框的颜色，可以使用具体的颜色值（如red、#000000）或者 CSS 预定义的颜色名称。
示例：
p {
border: 1px solid #000000; /* 边框宽度为 1px，样式为实线，颜色为黑色 */
}
div {
border: 2px dotted blue; /* 边框宽度为 2px，样式为点线，颜色为蓝色 */
}还可以分别使用 border-width、border-style 和 border-color 来单独设置边框的宽度、样式和颜色。
p {
border-width: 1px;
border-style: solid;
border-color: #000000;
}六、圆角边框
border-radius 是一个 CSS 属性，用于设置元素的边框圆角半径。
test {
border-radius: value;
}其中value 是边框圆角半径的值，可以是像素（px）、百分比（%）或其他支持的单位。可以使用一个值来设置所有四个角的圆角，也可以使用两个值来分别设置水平方向和垂直方向的圆角，还可以使用四个值分别设置左上角、右上角、右下角和左下角的圆角。
示例：
div {
border-radius: 10px; /* 所有四个角的圆角半径为 10px */
}
button {
border-radius: 5px 10px; /* 左右两个角的圆角半径分别为 5px 和 10px，上下两个角的圆角半径为 0 */
}
input {
border-radius: 20px 10px 5px 15px; /* 左上角为 20px，右上角为 10px，右下角为 5px，左下角为 15px */
}在实际应用中，border-radius 属性可以用于创建圆形或椭圆形的元素，也可以用于创建具有不同圆角效果的元素。
阴影
box-shadow 是一个 CSS 属性，用于向元素添加阴影效果。它可以用来为盒子模型的元素创建一个或多个阴影。
box-shadow 属性的语法如下：
box-shadow: [水平偏移量] [垂直偏移量] [模糊半径] [扩展半径] [颜色] [投影方式];[水平偏移量]：指定阴影相对于元素的水平位置。可以使用正值（向右偏移）或负值（向左偏移）。[垂直偏移量]：指定阴影相对于元素的垂直位置。可以使用正值（向下偏移）或负值（向上偏移）。[模糊半径]：指定阴影模糊的程度。较大的值会产生更模糊的效果，而值为 0 时则没有模糊效果。[扩展半径]：可选参数，指定阴影的大小范围。如果省略该值，则阴影将根据模糊半径自动调整大小。[颜色]：指定阴影的颜色。可以使用颜色名称、十六进制值或 RGB 值。[投影方式]：可选参数，指定阴影的投影方式。常用的值为inset（内阴影）和outset（外阴影）。如果省略该参数，默认为外阴影。
七、display
display 是 CSS 的一个属性，用于定义元素的显示方式。通过 display 属性，我们可以控制元素是以何种方式在页面上呈现。
常用的 display 属性值包括：
block：将元素呈现为块级元素，元素会在页面上独占一行，默认情况下会自动换行。inline：将元素呈现为内联元素，元素会根据内容的大小自动排列，并且不会独占一行。inline-block：将元素呈现为内联块级元素，具备块级元素的特性，但又可以在同一行显示多个元素。none：元素不会被显示，完全隐藏，并且不占据空间。flex：将元素呈现为弹性盒子（flex container），可以使用弹性布局来进行排列。grid：将元素呈现为网格容器，可以使用网格布局来进行排列。
除了以上常用的 display 属性值外，还有其他一些取值，如 table、table-cell、table-row 等适用于创建表格布局。
八、浮动
在前端开发中，浮动（float）是 CSS 中一个常用的定位属性，通过设置元素的浮动，可以实现元素在页面中的流动布局效果。具体来说，浮动可以使元素脱离正常的文档流，漂浮在其他元素的周围。
浮动有两个主要的取值：
left：元素向左浮动。right：元素向右浮动。
使用浮动属性的元素称为浮动元素。当一个元素设置了浮动后，它会尽可能地靠近容器的左侧或右侧，并且后续的元素会围绕着它进行排列。
浮动元素的特点和行为包括：
元素浮动后，会占据尽可能小的宽度，仅包含其内容和内边距。
其他非浮动的块级元素会忽略浮动元素的存在，直接填充到浮动元素的下方。
内联元素会根据浮动元素的位置进行环绕。
浮动元素之间如果相邻，则会紧密排列在一起。
浮动元素会导致父元素的高度塌陷（父元素的高度不考虑浮动子元素的高度），需要进行清除浮动以保证正确布局。
父级边框塌陷
父级边框塌陷（也称为“坍塌”或“崩塌”）是指在某些情况下，包含浮动元素的父元素会因为其子元素浮动而无法正确计算高度，导致父元素的边框无法包裹浮动元素。
当一个父元素包含了浮动元素（设置了 float: left 或 float: right）但没有显式地设置高度（或未使用 clearfix 清除浮动），且没有其他内容撑开父元素的高度时，父元素的高度会被浮动元素忽略，造成父元素的边框不会扩展到包含浮动元素的高度。
这种现象会导致布局混乱和视觉上的问题，特别是当希望父元素能够正确包裹浮动元素时，例如在实现两栏布局或多列布局时。
解决父级边框塌陷问题的常用方法是进行浮动清除。常见的浮动清除方法包括：
使用空标签进行清除：在浮动元素后添加一个空标签，给该标签应用
clear: both;的样式，以清除浮动，例如：<div class="parent"> <div class="float-child"></div> <div class="clearfix"></div> </div>.clearfix { clear: both; }使用 clearfix 类进行清除：给父元素添加一个包含清除浮动的类，一般称为 clearfix 类，例如：
<div class="parent clearfix"> <div class="float-child"></div> </div>.clearfix::after { content: ""; display: table; clear: both; }使用伪元素进行清除：通过在父元素上使用伪元素来清除浮动，同样可以使用
::after伪元素，例如：<div class="parent"> <div class="float-child"></div> </div>.parent::after { content: ""; display: block; clear: both; }
其中.parent::after 是CSS中的一个伪元素选择器，它表示选择父元素（class为.parent）的最后一个子元素之后生成的伪元素。
伪元素是在文档中不存在的元素，可以使用CSS选择器来选择和修改它们的样式。常见的伪元素包括::before和::after，它们分别可以在选中元素的前面和后面插入内容。
以上方法都能够解决父级边框塌陷问题，使得父元素能够正确计算高度并包裹浮动元素。
溢出
overflow是一个CSS属性，用于控制元素内容溢出时的处理方式。它可以应用于块级元素或可滚动元素。
overflow属性有以下几个可能的取值：
visible（默认值）：元素内容会溢出父容器时不进行裁剪，而是完全显示在父容器之外。hidden：元素内容会溢出父容器时进行裁剪，隐藏超出部分。scroll：当元素内容溢出父容器时，会显示滚动条以便查看被裁剪的内容。auto：当元素内容溢出父容器时，会根据需要显示滚动条。如果内容没有溢出，则不显示滚动条。
例如，如果要将一个具有固定高度和宽度的容器元素设置为可滚动，并在内容溢出时显示滚动条，可以使用以下CSS代码：
.container {
width: 300px;
height: 200px;
overflow: auto;
}这样，当容器内的内容超出了200像素的高度或300像素的宽度时，会自动显示相应方向的滚动条。
需要注意的是，overflow只能裁剪块级元素的内容，对于内联元素（如文本）无效。此外，overflow属性只能裁剪元素自身的内容，并不能裁剪子元素的内容。
九、定位
相对定位
注意：相对定位会保留原有位置
相对于当前位置进行偏移
#test{
position:relative;
top: 10px;
left: 20px;
right:20px;
bottom:-10px;
}绝对定位
注意：
基于指定位置进行偏移，没有指定位置默认相对浏览器进行偏移。
如果父级元素存在定位，会相对于父级元素进行偏移。
在父级元素内部进行偏移
#test{
position:absolute;
}固定定位
当将元素的position属性设置为fixed时，元素将相对于浏览器窗口进行定位，而不是相对于文档流中的其他元素。无论滚动页面或者改变窗口大小，该元素都会保持在指定的固定位置上。
具体来说，固定定位的特点包括：
元素脱离了正常文档流，不会占据其他元素的空间。
元素的位置是相对于浏览器窗口而言的，而不是相对于父级元素。
可以使用top、bottom、left、right等属性来精确指定元素在窗口中的位置。
元素会随着页面滚动而固定在指定位置，不会随滚动而移动。
以下是一个使用固定定位的示例：
<div style="position: fixed; top: 10px; right: 20px;">
这是一个使用固定定位的元素。
</div>在上述示例中，div元素将固定在浏览器窗口的右上角，距离顶部10像素，距离右边缘20像素。
z-index
z-index是CSS中的一个属性，它用于控制元素在垂直方向上的层叠顺序。
具体来说，z-index属性定义了元素在层叠上下文中的堆叠顺序，数值越大的元素会在视觉上覆盖数值较小的元素。也就是说，元素的z-index值越大，它在层叠中越靠近顶部。
可以将z-index应用于具有定位属性的元素，如position: relative、position: absolute或position: fixed。默认情况下，元素的z-index为auto，这意味着它们按照它们在HTML文档中的顺序进行堆叠。
以下是使用z-index的示例：
<div style="position: relative; z-index: 2;">
这是z-index值为2的元素。
</div>
<div style="position: relative; z-index: 1;">
这是z-index值为1的元素。
</div>在上述示例中，第一个div元素具有更高的z-index值（2），因此它会在视觉上覆盖第二个div元素（z-index值为1）。
需要注意的是，z-index只在相同的层叠上下文中才有意义。通过创建新的层叠上下文，可以将一组元素与其他元素分隔开来，并在其中进行层叠。可以使用CSS属性如position、transform和opacity等来创建新的层叠上下文。
