CSS

2024-05-05 09:48:35   0  举报





AI智能生成

CSS（Cascading Style Sheets）是一种用于描述网页样式的语言，它允许开发者通过为HTML元素添加各种修饰语来定制其外观和行为。这些修饰语可以包括颜色、字体、大小、对齐方式等属性。CSS的核心内容包括选择器、属性和值，通过将这三者组合在一起，可以定义元素的样式。这种语言分离了网页内容和样式，使得网页设计和开发更加灵活和高效。

css

前端开发

作者其他创作

大纲/内容

引入方式

行内（优先级1）

<div style="width:100px; height:100px; background:red ">hello</div>

内嵌（优先级2）

<head> <style type="text/css"> h3{ color:red; } </style> </head>

外联（优先级3）

选择器

标签（优先级3）

以标签开头

类（最常用）（优先级2）

以 . 开头

*通配符（优先级最低）

所有元素

属性选择器

input[type="text"] {   background-color: yellow; } 所有type属性为text的input元素设置背景颜色

element[attribute='value'] {   /* styles */ }

层级

E F{ }

E 的所有 F 后代

E>F{ }

E 的所有 子 F

G+F{ }

G和F同父，F紧接在G之后

G~F{ }

G和F同父，F在G后面

id（优先级1）

#id名{ }

组

，分开

.box1,.box2,.box3{       width:100px;       height:100px }

伪类

a:link{ }未访问过的链接

a:visited{ }访问过的链接

property:active{ }点击后的效果

property:hover{ }鼠标放置的效果

div p:nth-child(n) 第n个p标签

伪类

用于定义元素的特定状态，例如当元素处于悬停状态、获得焦点或被选中时。

动态伪类 :link：选择所有未访问链接。 :visited：选择所有已访问的链接。 :hover：当鼠标悬浮在元素上时，应用样式。 :active：选择激活的链接，即鼠标点击但未释放时的状态。 :focus：选择获得焦点的元素，如输入框、按钮等。 结构性伪类 :first-child：选择其父元素的第一个子元素。 :last-child：选择其父元素的最后一个子元素。 :nth-child(n)：选择其父元素的第n个子元素。n可以是数字、关键字或公式（如2n+1）。 :nth-last-child(n)：选择其父元素的倒数第n个子元素。 :first-of-type：选择同类型中的第一个同级兄弟元素。 :last-of-type：选择同类型中的最后一个同级兄弟元素。 :nth-of-type(n)：选择同类型中的第n个同级兄弟元素。 :nth-last-of-type(n)：选择同类型中的倒数第n个同级兄弟元素。 :only-child：选择只有一个子元素的父元素的那个子元素。 :only-of-type：选择父元素中唯一的特定类型的子元素。 :empty：选择没有任何子元素（包括文本节点）的元素。 表单伪类 :disabled：选择被禁用的表单元素。 :checked：选择被选中的输入元素，如复选框和单选按钮。 :valid：选择内容有效的输入元素。 :invalid：选择内容无效的输入元素。 :required：选择设置了required属性的元素。 :optional：选择没有设置required属性的元素。 :in-range、:out-of-range：选择数值在或不在指定范围内的输入元素。 否定伪类 :not(selector)：选择不匹配给定选择器的元素。

伪元素

用于样式化元素指定的部分，或在元素中创建虚拟内容。

::before：在元素内容的前面插入虚拟内容。 ::after：在元素内容的后面插入虚拟内容。 ::first-line：特定于元素第一行的文本。 ::first-letter：特定于元素第一个字母。

属性（属性名：属性值）

布局常用属性

文本常用属性

1. color 用途：设置文本的颜色。 示例：color: #ff0000; 或 color: red;

2. text-align 用途：设置文本的水平对齐方式。 示例：text-align: left;、text-align: center;、text-align: right;、text-align: justify; 说明：justify值将文本两端对齐，添加额外的空格以确保每行具有相同的宽度。

3. text-decoration 用途：向文本添加装饰，如下划线、删除线或上划线。 示例：text-decoration: underline;、text-decoration: line-through; 说明：CSS3中，text-decoration成为了一个简写属性，允许你同时设置线的类型、颜色和样式。

4. text-transform 用途：控制文本的大小写。 示例：text-transform: uppercase;、text-transform: lowercase;、text-transform: capitalize; 说明：capitalize会使每个单词的首字母大写。

5. text-indent 用途：设置文本首行的缩进。 示例：text-indent: 20px; 说明：通常用于段落的首行缩进，可以使用像素或em等单位。

6. letter-spacing 和 word-spacing 用途：分别设置字母间距和单词间距。 示例：letter-spacing: 2px;、word-spacing: 4px;

7. line-height 用途：设置行间距，即行的基线之间的距离。 示例：line-height: 1.5; 说明：提高文本的可读性，可以是无单位的数字、长度值或百分比。

8. text-shadow 用途：给文本添加阴影效果。 示例：text-shadow: 2px 2px 4px #000; 说明：阴影的偏移量、模糊半径和颜色可以自定义

9. text-overflow 用途：设置当文本溢出包含元素时如何处理。 示例：text-overflow: ellipsis; 说明：ellipsis表示用省略号（...）表示被裁剪的文本。通常与white-space: nowrap;和overflow: hidden;一起使用，以创建一个不换行的单行文本溢出效果。

font

1. font-family 用途：设置元素的字体族。 语法：font-family: 字体名, 备用字体名, ...; 示例：font-family: "Times New Roman", Times, serif; 说明：可以指定一个或多个字体名称，浏览器会按顺序尝试使用这些字体。推荐至少指定一个通用字体族（如serif, sans-serif）作为后备选项。

2. font-size 用途：设置字体的大小。 语法：font-size: 大小值; 示例：font-size: 14px; 说明：大小值可以是绝对值（如像素px或点pt）或相对值（如百分比%、em、rem）。

3. font-weight 用途：设置文本的粗细。 语法：font-weight: 值; 示例：font-weight: bold; 说明：值可以是normal、bold、bolder、lighter，或者数值（100到900之间的百的整数）。

4. font-style 用途：设置字体的风格，如正常、斜体或倾斜。 语法：font-style: normal | italic | oblique; 示例：font-style: italic; 说明：通常用于强调文本。

5. line-height 用途：设置行间距。 语法：line-height: 数值; 示例：line-height: 1.5; 说明：可以是数字（相对于当前字体大小的倍数）、长度值或百分比。增加行高可以提高文本的可读性。

6. font-variant 用途：设置文本的变体，如小型大写字母。 语法：font-variant: normal | small-caps; 示例：font-variant: small-caps; 说明：small-caps值将文本转换为小型大写字母的样式。

7. text-transform 用途：设置文本的大小写转换。 语法：text-transform: none | capitalize | uppercase | lowercase; 示例：text-transform: uppercase; 说明：此属性控制文本的大小写显示，但不改变文本内容本身。

8. font（简写属性） 用途：同时设置多个字体样式。 语法：font: font-style font-variant font-weight font-size/line-height font-family; 示例：font: italic normal bold 12px/1.5 "Times New Roman", serif; 说明：这是一个简写属性，可以一次性设置多个字体相关的样式。不是所有的值都必须指定，但font-size和font-family是必需的。

display

### `display: block;` - 元素会表现为块级元素，占据一整行，可以设置宽度和高度。通常用于布局中的主要容器和结构性元素。 ### `display: inline;` - 元素会表现为行内元素，不会独占一行，且无法设置固定的宽度和高度。主要用于文本内的小段元素，如强调文本。 ### `display: inline-block;` - 元素同时拥有行内元素和块级元素的特性，即它不会独占一行，但可以设置宽度和高度。适用于需要在一行内排列的容器，同时又需要具体尺寸。 ### `display: none;` - 元素不会被显示在页面上，完全从布局中移除（与`visibility: hidden;`不同，后者仍占据空间但只是不可见）。常用于通过脚本动态显示和隐藏元素。 ### `display: flex;` - 元素被设为一个弹性容器，其直接子元素的布局将遵循弹性盒模型。提供了对子元素在主轴和交叉轴上的对齐、方向和排序的高级控制。非常适合于一维布局。 ### `display: grid;` - 元素被设为一个网格容器，其直接子元素将遵循网格布局模型。允许创建复杂的二维布局，通过定义行和列以及它们的尺寸来实现精准布局。适用于更复杂的布局需求。 ### `display: table;` - 元素会表现如表格元素`<table>`，适用于需要表格布局但不想使用表格标签的情况。这种方式使得布局更加语义化。 ### `display: list-item;` - 元素会表现为列表项，类似于`<li>`，通常会伴随一个列表标记和潜在的列表计数。适合在自定义列表样式时使用。 ### `display: inline-flex;` - 类似于`display: flex;`，但元素作为行内元素显示。其内部布局仍遵循弹性盒模型，适用于需要弹性布局但又希望元素在行内显示的场景。 ### `display: inline-grid;` - 类似于`display: grid;`，但元素作为行内元素显示。其内部布局遵循网格布局模型，适用于需要网格布局但又希望元素在行内显示的场景。

background

### `background-color` - 指定元素的背景颜色。可以使用颜色名（如`red`）、HEX颜色代码（如`#ff0000`）、RGB（如`rgb(255, 0, 0)`）、RGBA（如`rgba(255, 0, 0, 0.5)`）等方式来定义颜色。 ### `background-image`（在background-color上层） - 设置一个或多个背景图片。图片通过URL指定，如`background-image: url('image.jpg');`。也可以使用渐变生成器来创建复杂的背景效果。 ### `background-repeat` - 控制背景图片的重复方式。可选值包括`repeat`（默认值，图片在水平和垂直方向重复）、`repeat-x`（图片仅在水平方向重复）、`repeat-y`（图片仅在垂直方向重复）和`no-repeat`（图片不重复）。 ### `background-position` - 确定背景图片开始的位置。可以使用关键字（如`top left`、`center center`、`bottom right`）或精确值（如`20px 10px`）来指定位置。 ### `background-size` - 规定背景图片的尺寸。可设置为具体的宽高值（如`100px 200px`），也可使用`cover`（保证背景图覆盖整个元素区域，可能会被裁剪）或`contain`（保证背景图完整显示在元素区域内，可能会留白）。 ### `background-attachment` - 设置背景图片是否随着页面的其余部分滚动。`scroll`（默认值，背景图随页面滚动）、`fixed`（背景图固定，不随页面滚动）和`local`（背景图随元素内容滚动）。 ### `background-clip` - 定义背景的绘制区域。常用值有`border-box`（背景延伸到边框下）、`padding-box`（背景延伸到内边距下，不包括边框）和`content-box`（背景仅覆盖内容区域）。 ### `background-origin` - 指定`background-position`属性相对于哪个位置来定位。可选值与`background-clip`相同。

flex (css面试八成问这个)

Flexbox（Flexible Box）布局提供了一种更加有效的方式来布置、对齐和分配容器内项目的空间，即便它们的大小是未知或动态变化的。Flexbox布局旨在提供一个在页面布局方向（行或列）上均匀分配空间的容器模型。 ### Flex容器属性 - **`display`**: 将元素定义为Flex容器；设置为`flex`（生成块级Flex容器）或`inline-flex`（生成行内级Flex容器）。    - **`flex-direction`**: 定义Flex项目的主轴方向。可选值有`row`（默认，水平方向，起点为内容的左端）、`row-reverse`（水平方向，起点为内容的右端）、`column`（垂直方向，起点为内容的顶端）、`column-reverse`（垂直方向，起点为内容的底端）。 - **`flex-wrap`**: 控制Flex容器是单行/单列还是多行/多列，以及如何换行。可选值包括`nowrap`（默认，不换行）、`wrap`（换行，第一行在上方）、`wrap-reverse`（换行，第一行在下方）。 - **`justify-content`**: 在主轴上对齐Flex项目。常用选项包括`flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`space-evenly`。 - **`align-items`**: 在交叉轴上对齐Flex项目。选项包括`flex-start`、`flex-end`、`center`、`baseline`、`stretch`。 - **`align-content`**: 当Flex容器有多个轴线时，此属性控制轴线的对齐方式。选项包括`flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`stretch`。 ### Flex项目属性 - **`flex-grow`**: 控制Flex项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。 - **`flex-shrink`**: 控制Flex项目的缩小比例，默认为`1`，即如果空间不足，该项目将缩小。 - **`flex-basis`**: 设置Flex项目在分配多余空间之前所占据的主轴空间。默认值为`auto`，即项目的本来大小。 - **`flex`**: 是`flex-grow`、`flex-shrink`和`flex-basis`的简写，默认值为`0 1 auto`。它允许一次性设置上述三个属性。 - **`align-self`**: 允许单个Flex项目有与其他项目不同的对齐方式，可覆盖`align-items`属性。接受`align-items`的所有选项。 Flexbox布局的引入大大简化了复杂布局的实现方式，特别是在响应式设计和动态内容大小方面，它提供了比传统布局技术更高的灵活性和控制能力。

主轴（Main Axis） 主轴定义了Flex项目沿着Flex容器排列的方向。 flex-direction属性决定了主轴的方向。 如果flex-direction设置为row或row-reverse，则主轴沿水平方向。 如果flex-direction设置为column或column-reverse，则主轴沿垂直方向。 主轴的开始和结束分别称为main start和main end。 主轴决定了如何使用justify-content属性来对齐Flex项目。 交叉轴（Cross Axis） 交叉轴垂直于主轴，定义了Flex项目在垂直于主轴方向上如何排列。 交叉轴的方向由主轴的方向决定。 交叉轴的开始和结束分别称为cross start和cross end。 交叉轴决定了如何使用align-items和align-content属性来对齐Flex项目。

grid

处理两维布局（行和列）

.grid-container {   display: grid;   grid-template-columns: 100px 1fr 2fr; }

第一列被设置为 100px 宽 剩下的三等分 一份第二列 两份第三列

//6 column 等分 grid-template-columns: repeat(6, 1fr);

// 14column，图总共12个，每张图4个，每个column最小auto，最大60px。最左最右各一个 grid-template-columns: 1fr repeat(12, minmax(auto, 60px)) 1fr;

//2开始，span6 grid-column: 2/span 6;

//span 4 columns grid-column-end: span 4;

box-shadow

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

offset-x 和 offset-y：这两个值确定阴影的水平和垂直偏移量。正值使阴影向右或向下偏移，负值向左或向上偏移。 blur-radius（可选）：定义阴影的模糊半径。值越大，阴影越模糊。如果不设置或值为0，则阴影的边缘是硬边缘。 spread-radius（可选）：定义阴影的大小扩展。正值会使阴影扩大，负值会使其缩小。 color（可选）：定义阴影的颜色。如果未指定，通常会使用浏览器的默认颜色（大多数浏览器默认为黑色）。 inset（可选）：如果指定了inset关键字，阴影将从外部阴影变为内部阴影。

outline

在元素外围绘制一条线，这条线不会占据空间，也不会影响元素的布局或大小。

outline可以设置宽度、样式、颜色，但不可单独设置各边。

outline: [outline-width] [outline-style] [outline-color];

outline: 2px solid blue;

outline-color: 指定轮廓线的颜色。例如，outline-color: red; 将轮廓线颜色设置为红色。 outline-style: 定义轮廓线的样式，比如solid（实线）、dotted（点线）、dashed（虚线）等。如果没有指定样式，轮廓线将不会显示。 outline-width: 设置轮廓线的宽度。可以使用具体的尺寸（如2px）或关键字（如thin、medium、thick）。 outline-offset: 定义轮廓线与元素边缘之间的空间。正值使轮廓线离元素边缘更远，负值则使轮廓线向元素内部移动。

元素溢出

子元素(标签)的尺寸超过父元素(标签)的尺寸，设置overflow属性

overflow的设置项： 1. visible 默认值, 显示子标签溢出部分。 2. hidden 隐藏子标签溢出部分。 3. auto 如果子标签溢出，则可以滚动查看其余的内容。

自定义属性

定义

--name: 值

调用

var（--name）

opacity 透明度

透明度的值可以从 0（完全透明）到 1（完全不透明）

三大特性

层叠性（Cascading）

样式冲突，遵循就近原则。 哪个样式离结构近，就执行哪个

继承性（Inheritance）

子标签会继承父标签的文字相关样式 高度和盒模型内外边距等不会继承

会被继承

<ul><li>文字相关属性：这包括font-family、font-size、font-weight、font-style、line-height、color、text-align、text-indent、text-transform、letter-spacing、word-spacing和white-space等。这些属性影响文本的外观，使得在文档层级较高的地方设置这些属性能够影响到更多的子元素。</li><li>列表样式属性：如list-style-type、list-style-position和list-style-image等，通常用于<ul>、<ol>及其子<li>元素。</li><li>元素可见性：visibility属性也是可继承的，这意味着如果一个元素被设置为不可见，其子元素默认也将不可见。</li></ul>

不会被继承

<ul><li>盒模型相关属性：包括width、height、margin、padding、border、overflow等，这些属性影响元素的布局和尺寸，通常只适用于具体被选择的元素。</li><li>背景样式：如background-color、background-image、background-position、background-repeat、background-size等，这些属性定义元素的背景，不被子元素继承。</li><li>定位和浮动属性：position、top、right、bottom、left、z-index、float和clear等属性控制元素的布局和堆叠上下文，也不会被继承。</li><li>显示属性：display属性决定元素如何显示（如块级或行内），不会被子元素继承。</li></ul>

特殊情况

设置属性值为inherit来强制继承父元素的对应属性，如margin: inherit;。

优先级（Specificity）

块，行内，行内块

Block

定义

块级元素在页面布局中以块的形式展示，通常会占据调用它的容器的整个宽度，其后的元素会被排列到新的一行上。

特性

<ul><li>自动填满其父元素的宽度。</li><li>可以设置宽度（width）和高度（height）。</li><li>默认情况下，其后的元素会显示在新行上。</li></ul>

常见

<div>、、<h1>～<h6>、<ol>、<ul>、<li>、<table>、<section>、<header>、<footer>等。

Inline

定义

行内元素不会以新块的形式显示，而是会在文本流中按序排列，不会导致文本换行。

特性

<ul><li>不会独占一行，与其他行内元素或文本并排显示。</li><li>宽度和高度直接受到内容的影响，不可强制改变其宽度和高度。</li><li>可以设置水平方向的边距（margin-left、margin-right）和填充（padding），但垂直方向的边距和填充可能不会产生期望的效果。</li></ul>

常见

、<a>、、、<img>、<input>等。

Inline-block

定义

介于块级元素和行内元素之间

特性

<ul><li>与行内元素一样，不会独占一行，可以与其他元素并排显示。</li><li>与块级元素一样，可以设置宽度（width）和高度（height），以及垂直和水平方向的边距（margin）和填充（padding）。</li></ul>

常见

默认情况下，HTML中没有直接作为行内块显示的元素，但可以通过CSS将任何元素设置为行内块显示，如display: inline-block;。

总结

Inline: ⾼宽⽆效，对外边距（margin）和内边距（padding）仅设置左右⽅向有效上下⽆效。 内边距（padding）设置上下从显⽰效果是增加的，但其实设置时⽆效的，并不会影响周围的元素。

Inline-block,block: ⾼度、⾏⾼、外边距以及内边距都可以控制。

盒模型

要看点开看

<ul><li>内容（Content）：元素的实际内容区域，包括文本、图片或其他元素。</li><li>内边距（Padding）：内容区域与边框之间的空间。增加内边距会增加元素的总尺寸，除非使用了box-sizing: border-box;。</li><li>边框（Border）：紧随内边距之外的线框。它围绕内容和内边距，是元素可见的部分。</li><li>外边距（Margin）：元素外围的透明区域，用于元素之间的间隔。外边距不会影响元素本身的尺寸，但会影响元素与其他元素的距离。</li></ul>

padding: 10px; margin: 20px;

padding: 10px 15px; /* 上下10px，左右15px */ margin: 5px 10px; /* 上下5px，左右10px */

padding: 10px 15px 20px; /* 上10px，左右15px，下20px */ margin: 5px 10px 15px; /* 上5px，左右10px，下15px */

padding: 10px 15px 20px 25px; /* 上10px，右15px，下20px，左25px */ margin: 5px 10px 15px 20px; /* 上5px，右10px，下15px，左20px */

border

border: 2px solid black;

1. Border Width（边框宽度） 指定边框的厚度，可以使用具体的尺寸（如px、em等）或使用预定义的关键字（thin、medium、thick）

2. Border Style（边框样式） 定义边框的样式，这是设置边框的必需属性，因为如果没有指定样式，边框不会显示。常见的边框样式包括： none：无边框。 solid：实线边框。 dotted：点状边框。 dashed：虚线边框。 double：双线边框。 groove：3D凹槽边框（效果依赖于边框颜色）。 ridge：3D脊状边框（效果依赖于边框颜色）。 inset：3D内嵌边框（效果依赖于边框颜色）。 outset：3D突出边框（效果依赖于边框颜色）。

3. Border Color（边框颜色） 设置边框的颜色，可以使用颜色名（如red）、HEX值（如#FF0000）、RGB（如rgb(255, 0, 0)）或RGBA（如rgba(255, 0, 0, 0.5)）等格式。

其他

CSS中与`border`相关的属性非常丰富，允许开发者详细控制元素边框的各个方面。以下是一些常用的`border`相关属性及其简要说明： ### Border Style - **`border-style`**: 设置边框的样式。常见的样式包括`solid`（实线）、`dotted`（点线）、`dashed`（虚线）、`double`（双线）、`none`（无边框）等。 ### Border Width - **`border-width`**: 设置边框的宽度。可以使用具体的尺寸值（如`px`、`em`等）或预定义的厚度值（如`thin`、`medium`、`thick`）。 ### Border Color - **`border-color`**: 设置边框的颜色。可以使用颜色名（如`red`）、十六进制（如`#ff0000`）、RGB（如`rgb(255, 0, 0)`）或RGBA（如`rgba(255, 0, 0, 0.5)`）等格式。 ### Individual Borders - **`border-top`**, **`border-right`**, **`border-bottom`**, **`border-left`**: 分别设置上、右、下、左边框的宽度、样式和颜色。例如，`border-top: 1px solid black;`。 ### Border Radius - **`border-radius`**: 设置元素边框的圆角。支持指定一个值以统一设置所有角的圆角，或者分别指定每个角的圆角。可以创建圆形或椭圆形边框效果。 ### Border Shorthand - **`border`**: 简写属性，允许你在一个声明中设置边框的宽度、样式和颜色。例如，`border: 2px dashed green;`。 ### Advanced Border Properties - **`border-image`**: 允许你使用图片作为边框。需要指定`border-image-source`、`border-image-slice`、`border-image-repeat`等属性来控制图片边框的表现。 - **`border-collapse`** 和 **`border-spacing`**: 这两个属性主要应用于`<table>`元素，用于控制表格单元格之间的边框合并行为和间距。 这些属性使得开发者能够实现各种复杂和美观的边框效果，提高网页的视觉效果和用户体验。在使用这些属性时，可以根据需要进行组合，以实现所需的布局和样式效果。

特殊情况

### 1. 边距合并（Margin Collapsing） 边距合并是`margin`属性的一个特殊行为，主要发生在块级元素上： - **相邻元素的外边距合并**：当两个垂直排列的块级元素之间只有外边距（无边框、内边距、内容或清除浮动等分隔），它们之间的外边距会合并成一个外边距，其大小为两个外边距中的较大者。 - **父子元素的外边距合并**：如果块级容器没有顶部边框、顶部内边距、内联内容分隔，且它的第一个子元素有外边距，则这个外边距可能会传递给父元素（即父元素看起来也拥有这个外边距）。 ### 2. 内边距（Padding）和背景色 - 内边距不会合并，但会影响元素的背景色。元素的背景色会延伸到其内边距区域。 ### 3. 外边距（Margin）不影响内部布局 - 外边距用于控制元素与其周围元素的空间，但不影响元素内部的布局。 ### 4. 垂直方向的外边距不会影响内联元素 - 垂直方向的`margin-top`和`margin-bottom`不会影响内联元素（如``或`<a>`），因为内联元素主要在水平方向上布局。 ### 5. 0值的特殊情况 - 将`margin`或`padding`设置为0时，表示在相应的方向上没有空间，这对于消除元素默认的边距或填充非常有用。 ### 6. 负外边距（Negative Margins） - 使用负值的`margin`可以使元素向相反的方向移动，这在调整布局时非常有用，但需要谨慎使用，以避免产生意外的布局重叠。 ### 7. 自动外边距（Auto Margins） - 在CSS布局中，将`margin`设置为`auto`可以实现居中对齐效果，特别是在使用`flexbox`或`grid`布局时。对于块级元素，如果左右外边距都设置为`auto`，元素将水平居中。

样式塌陷

样式塌陷（或布局塌陷）通常指的是在Web布局中发生的一个问题，其中最常见的是父元素因为子元素的某些特定布局属性（如浮动或绝对定位）而看似“塌陷”，即父元素的高度变为0或小于其内容的实际高度。这会导致布局上的问题，如相邻元素重叠或不期望的页面布局。以下是一些常见原因及其解决方法： ### 常见原因 1. **浮动子元素**：当子元素应用了`float`属性时，它们会脱离正常的文档流，导致父元素无法正确计算其高度，因为浮动元素不再占据父元素的空间。 2. **绝对定位子元素**：使用`position: absolute;`或`position: fixed;`定位的元素同样会脱离正常的文档流，导致父元素高度计算不正确。 ### 解决方法 1. **清除浮动（Clearfix Hack）**：这是解决浮动导致的样式塌陷问题的一种常见技术。通过在浮动元素之后添加一个清除浮动的元素或使用伪元素自动清除浮动。    ```css    .clearfix::after {      content: "";      display: table;      clear: both;    }    ```    应用`clearfix`类到父元素上，可以清除子元素的浮动，防止布局塌陷。 2. **使用Flexbox或Grid布局**：这些现代的CSS布局技术自然解决了浮动问题，因为它们不需要浮动来实现布局。父元素使用`display: flex;`或`display: grid;`，子元素将正常占据空间，父元素的高度也会正确计算。 3. **为父元素设置最小高度（min-height）**：这是一种简单直接的方法，通过为父元素指定一个最小高度，可以防止因子元素特定布局属性导致的塌陷。这种方法适用于父元素高度大致已知的情况。 4. **使用Overflow属性**：给父元素设置`overflow: auto;`或`overflow: hidden;`也能解决某些情况下的塌陷问题。这种方法的原理是，设置了`overflow`属性的元素会创建一个新的块格式化上下文（Block Formatting Context），这意味着浮动子元素的布局会被父元素考虑在内。 样式塌陷问题虽然常见，但通过以上方法通常都可以有效解决。在实际开发中，推荐使用现代布局技术如Flexbox或Grid，这样可以在很大程度上避免这类问题。

清除内外边距

通常，浏览器会对某些元素应用默认的内外边距（如<body>、、<ul>等），这些默认样式会影响到页面布局的一致性。 通过清除这些内外边距，开发者可以从一个干净的基线开始布局，自定义所需的样式。

* {   margin: 0;   padding: 0;   box-sizing: border-box; }

*通配符优先级最低，之后的设置可以覆盖

单位

vh和vw

vh（Viewport Height）和 vw（Viewport Width）

vh（Viewport Height） 1vh 等于视口高度的 1%。 例如，如果浏览器的视口高度是 900px，那么 1vh 等于 9px。 vw（Viewport Width） 1vw 等于视口宽度的 1%。 例如，如果浏览器的视口宽度是 1200px，那么 1vw 等于 12px。

视口变化：vh 和 vw 单位与视口大小直接相关，这意味着如果视口大小发生变化（例如，用户调整了浏览器窗口的大小），使用这些单位的元素也会相应地调整大小。 兼容性：大多数现代浏览器都支持 vh 和 vw 单位，但在一些较旧的浏览器中可能需要额外的兼容性处理。 与固定单位的对比：与固定长度单位（如 px）相比，vh 和 vw 提供了更灵活的布局选项，特别是在创建响应式设计时。

em和rem

基于用户的默认浏览器字体大小或元素的字体大小进行缩放的能力

基于父元素的字体大小

元素的width/height/padding/margin用em的话是相对于该元素的font-size

rem

基于root元素（html元素）的字体大小

BEM（语义话命名）

block__element--modifier

Block（块）：代表了一个独立的、高度可复用的功能组件，例如 header、container、menu 等。Block 在 BEM 中是一个顶级抽象概念，它可以在页面中独立使用。 Element（元素）：代表了 Block 内部的一部分，依赖于 Block 的存在。Element 用于组成 Block 的部分，例如 menu__item（menu 块的一个元素）。 Modifier（修饰符）：用于表示 Block 或 Element 的不同状态、变化或样式变体。例如，button--large 表示一种大号的按钮样式。

@media

@media not|only mediatype and (conditions) {     CSS-Code; } not：排除特定的媒体类型。 only：指定某个媒体类型，避免旧浏览器不支持媒体查询的情况。 mediatype：指定媒体类型，如 screen、print。 conditions：指定媒体特性，如宽度、高度、分辨率等。

根据媒体类型（如屏幕、打印等）和特定条件（如视口尺寸、设备方向等）对样式进行条件性地应用 可以为不同尺寸的设备设置不同的样式

例

后面的范围不能包含前面的范围，不然后面的样式会覆盖前面的样式

定位

position：static；

静态定位，默认，就是没有定位

不能通过 top、bottom、left、right 来改变 static 定位元素的位置。

position：relative；

元素相对于自己原来的位置

可以使用 top、right、bottom、left 属性来指定偏移量

但是元素原本static时的位置还会占着

position：absolute；

相对于最近的非 static 定位的祖先元素定位

可以使用 top、right、bottom、left 属性来指定位置。

如果没有就相对于<html>元素

原来的位置不会占用

必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 才能激活绝对定位

position：fixed；

相对于浏览器窗口定位

可以使用 top、right、bottom、left 属性来指定位置。

不随滚动条滚动。

不占有原来位置。

position：sticky；

达到某个滚动位置之后，固定住

使用 top、right、bottom、left 属性来指定“粘”住时的位置

transition

z-index

指定在页面上重叠的元素的堆叠顺序，值越大越上 只对position非static的元素有效

z-index: 999; 最上层

Scss

特性

Variables（变量）

$primary-color: #333; body {   color: $primary-color; }

Nesting（嵌套）

nav {   ul {     margin: 0;     padding: 0;     list-style: none;   }   li { display: inline-block; }   a {     display: block;     padding: 6px 12px;     text-decoration: none;   } }

Mixin（混入）

定义可重用的代码片段，可带参数，用于多处应用

@mixin border-radius($radius) {   -webkit-border-radius: $radius;   -moz-border-radius: $radius;   -ms-border-radius: $radius;   border-radius: $radius; } .box { @include border-radius(10px); }

Partials（部分）

引用其他scss文件

// _variables.scss $primary-color: #333;

// styles.scss @import 'variables'; body {   color: $primary-color; }

Extend/Inheritance（扩展/继承）

从一个选择器到另一个选择器

.btn {   padding: 10px 15px;   border: none;   cursor: pointer; } .btn-primary {   @extend .btn;   background-color: blue;   color: white; }

&

引用父选择器

.btn {   // 基础样式   &--primary {     // 修饰符样式   }   &:hover {     // 状态变化样式   } }

占位选择器（Placeholder Selectors）

可以被继承但不会直接输出到 CSS 文件中的样式规则