©2020-2024 ioDraw All rights reserved
<>一、CSS介绍
CSS的中文全称是“层叠样式表”(Cascading Style Sheets)。 最新版本是CSS3。
CSS的主要功能是用于为HTML和XML等文档添加样式和布局。通过CSS，可以控制网页的外观和格式，如设置文本颜色、背景、字体样式、布局等。
CSS还支持过渡效果、动画、响应式设计和媒体查询等高级特性，使得网页制作更加灵活和可交互。
<>二、CSS基础语法
<>1.选择器
*
标签选择器：通过HTML元素的标签名进行选取，如p、div。
*
类选择器：通过HTML元素的class属性进行选取，使用.开头，如.container。
*
ID选择器：通过HTML元素的id属性进行选取，使用#开头，如#header。
*
属性选择器：通过元素的属性值进行选取，如[type="text"]。
*
伪类选择器：通过元素的状态或位置进行选取，如:hover、:nth-child(2)。
<>2.声明块
声明块用于设置选中元素的样式属性和值。声明块由一对大括号{}包围，包含一个或多个属性及其对应的值。
CSS属性由属性名和属性值组成，中间用冒号:分隔，每条声明以分号;结束。常见的CSS属性有：
* color：设置文本颜色
* background：设置背景颜色或图片
* font-size：设置字体大小
* border：设置边框样式
* margin：设置外边距大小
* padding：设置内边距大小
* width：设置宽度大小
以下是一个简单的CSS代码示例：
p { color: blue; font-size: 16px; } .container { background: #f5f5f5; margin:
10px; padding: 20px; }
以上是CSS的基础语法，通过选择器和声明块，你可以对指定的HTML元素应用相应的样式。
注:背诵记忆CSS属性是重中之重
<>3.伪类和伪元素的区别
* 选择器表示方式不同：伪类使用单个冒号:来表示，而伪元素使用双冒号::来表示。不过，为了保持向后兼容性，某些旧版本的伪元素依然使用单个冒号。
* 应用范围不同
：伪类选择的是处于特定状态的元素，例如:hover（鼠标悬停）、:active（被点击）等。而伪元素则选择的是元素的特定部分，例如::before（前面添加内容）和::after（后面添加内容）。
* 是否插入内容：伪类仅用于选择元素，并不能实际插入新的内容。而伪元素可以在选中元素的特定位置插入新的内容或样式，使得开发者能够通过CSS添加额外的元素。
* 语法上的限制：在使用伪元素时，还需要为其添加content属性来指定要插入的内容。而伪类通常只需要直接用作选择器即可。
<>4.选择器权重计算
CSS选择器的权重（specificity）用于确定在页面中定义多个相同样式属性的情况下，哪个样式将应用于特定的元素。权重是根据选择器的特性和数量来计算的。
* 内联样式具有最高的权重，为1000。
* ID选择器的权重为100。
* 类选择器、属性选择器和伪类选择器的权重为10。
* 标签选择器和伪元素选择器的权重为1。
当应用到一个元素上的多个选择器具有相同的权重时，后面出现的选择器将覆盖先前的选择器。
<>5.继承性
继承性（inheritance）是CSS中的一个特性，指的是某些属性值能够从父元素继承到子元素。这意味着如果在父元素上设置了某个具有继承性的属性的值，那么子元素将默认继承该属性的值，除非显式地在子元素上重新定义该属性的值。
一些常见的具有继承性的属性包括：
* 字体相关属性：font、font-size、font-family、font-weight等。
* 文本相关属性：color、line-height、text-align、text-decoration等。
* 盒子模型属性：margin、padding等。
* 表格相关属性：border-collapse、border-spacing等。
然而，并非所有属性都具有继承性。例如，宽度（width）、高度（height）、背景图片（background-image）等属性通常不会被子元素继承。
就近原则（cascading
principle）是CSS中指定样式应用优先级的规则。按照就近原则，当同一个元素被多个选择器选中时，其样式将从具有最近位置的选择器那里继承。
具体来说，就近原则可以简化为以下几个层次的优先级：
* 内联样式的样式表优先级最高，将覆盖其他样式。
* ID选择器的样式表优先级次之。
* 类选择器、属性选择器和伪类选择器的样式表优先级比标签选择器高。
* 具有相同优先级的多个选择器时，后面出现的选择器将覆盖先前的选择器。
<>三、盒模型
<>1.盒模型的基本概念
盒模型是CSS中用于描述和布局HTML元素的基本概念。它将每个HTML元素视为一个矩形的盒子，由四个部分组成：内容区域、内边距、边框和外边距。
具体来说，盒模型包括以下组成部分：
*
内容区域（Content）：表示元素实际显示内容的区域，它的大小由width和height属性决定。
*
内边距（Padding）：位于内容区域的周围，用于设置元素内部的空白区域。通过padding属性设置，可以为每个边设置不同的值。
*
边框（Border）：位于内边距的外部，创建一个可见的边界。可以使用border属性设置边框的样式、颜色和宽度。
*
外边距（Margin）：位于元素边框之外，用于设置元素与其他元素之间的距离。通过margin属性设置，也可以为每个边设置不同的值。
<>2.盒模型的布局
* 内容溢出处理:指当元素的内容超出其指定的尺寸或容器时，如何处理溢出的部分。在CSS中，可以使用一些属性和值来控制内容溢出的处理方式。
以下是常用的内容溢出处理属性：
*
overflow：该属性用于设置元素的溢出内容处理方式。常见的取值包括：
* visible（默认值）：内容超出元素范围时可见。
* hidden：超出元素范围的内容被剪切，不可见。
* scroll：显示滚动条，以便用户可以查看超出元素范围的内容。
* auto：根据需要自动显示滚动条。
*
text-overflow：该属性用于设置文本内容溢出时的处理方式，仅适用于单行文本。常见的取值包括：
* clip（默认值）：将内容截断并隐藏溢出的部分。
* ellipsis：使用省略号（…）表示溢出的文本。
如果想区分水平和垂直方向的内容溢出处理，可以使用属性overflow-x和overflow-y来分别控制。比如，可以只在水平方向上显示滚动条，而在垂直方向上则隐藏。
需要注意的是，内容溢出处理通常只应用于具有指定宽度和高度的块级元素，并且要求父容器也有明确的尺寸。
* 行内块元素和流动性：当需要将块级元素转换为行内块元素时，可以使用CSS的display属性来实现。
* 将元素转换为行内块元素：使用display属性将元素的display值设置为"inline-block"。 .block-element {
display: inline-block; }
这样，该元素就会具有行内块元素的特性，可以在同一行内显示且可以设置宽度、高度等。
2.调整元素的流动性：
浮动元素：使用CSS的float属性，可以将元素设置为浮动。比如，将元素向左浮动可以使用float: left;。
.float-element { float: left; }
*
清除浮动：如果希望解决由浮动元素引起的父元素高度塌陷问题，可以使用clearfix技巧。创建一个clearfix的CSS类，并将其应用于浮动元素的父元素上。
.clearfix::after { content: ""; display: table; clear: both; } .parent-element
{ /* 添加clearfix类 */ /* 清除浮动元素的影响 */ /* 防止父元素高度塌陷 */ overflow: auto; }
*
margin的塌陷:在某些情况下，相邻的元素的垂直外边距会合并，导致它们之间的间距比预期的要小或消失。
Margin的塌陷规则主要适用于垂直方向：
*
上下相邻块级元素的外边距发生塌陷：
* 当上面的元素没有上边距时，下面的元素的上边距会与上面的元素的下边距合并，取两者中的较大值作为最终的上边距。
* 当下面的元素没有下边距时，上面的元素的下边距会与下面的元素的上边距合并，取两者中的较大值作为最终的下边距。
* 如果上面和下面的元素都有边距，则它们不会发生塌陷，边距不会合并。
*
嵌套块级元素的外边距不会发生塌陷：
* 对于父子元素，父元素和子元素的外边距不会合并。
* 如果父元素和子元素的外边距存在重叠问题，可以采用使用padding或border属性来避免。
注:行内元素、浮动元素和绝对定位元素的外边距不会发生塌陷。
为了避免意外的Margin塌陷，可以采用以下方法：
* 使用padding属性替代外边距。
* 使用边框（border）或空的块级元素创建一个层以防止Margin塌陷。
* 使用浮动（float）或者定位（position）属性等来改变元素的布局方式。
* 实现盒子居中
*
使用margin属性和auto值实现水平居中：
.box { margin-left: auto; margin-right: auto; }
这将使盒子在水平方向上居中显示。这适用于具有块级属性（display: block）的盒子。
*
使用flex布局实现居中：
在容器元素上应用flex布局，并使用align-items和justify-content属性来实现水平和垂直居中。
.container { display: flex; align-items: center; /* 垂直居中 */ justify-content:
center; /* 水平居中 */ }
这将使容器内的盒子在水平和垂直方向上均居中。
*
使用绝对定位实现居中：
在父容器上设置position: relative;，在子盒子上设置position: absolute;和以下样式：
.parent { position: relative; } .child { position: absolute; top: 50%; left:
50%; transform: translate(-50%, -50%); }
这将使用绝对定位和transform属性将子盒子在父容器中居中显示。
*
使用网格布局实现居中：
将父容器设为网格容器，使用grid布局的place-items: center;属性将盒子在中心定位。
.container { display: grid; place-items: center; }
* 盒模型的盒子模型类型：内容盒模型（content-box）和边框盒模型（border-box）。
*
内容盒模型（content-box）：
* 默认的盒子模型类型。
* 宽度和高度仅应用于内容区域。
* 内容区域宽度 = width - 左右内边距 - 左右边框。
* 内容区域高度 = height - 上下内边距 - 上下边框。
* 内容盒模型不包含内边距和边框，它们会增加盒子的总尺寸。
*
边框盒模型（border-box）：
* 设置盒子模型类型为 border-box，将宽度和高度应用于整个盒子，包括内容区域、内边距和边框。
* 宽度和高度直接指定整个盒子的尺寸，不会减去内边距和边框的大小。
* 内容区域的尺寸会受到内边距和边框的影响，并自动调整以适应设置的总体尺寸。
为了使用边框盒模型（border-box），可以在 CSS 中使用 box-sizing 属性进行设置。
.box { box-sizing: border-box; }
使用边框盒模型（border-box）可以更方便地控制元素的尺寸，特别是在响应式设计和布局中更加灵活。它能更好地管理内容、内边距和边框所占据的空间，简化了盒子尺寸的计算和调整过程。