css笔记

雷霆教父雷某—柯里昂

已于 2024-03-25 14:58:06 修改

阅读量1.4k

点赞数 40

文章标签：笔记

于 2024-03-10 21:08:49 首次发布

本文链接：https://blog.csdn.net/weixin_74146451/article/details/136602298

版权

本文介绍了CSS中的关键概念，包括长度单位（如em、px、百分比），flex布局的direction、justify-content和align-items属性，元素的定位方法（static、relative、absolute和fixed），以及伪元素选择器和元素浮动的使用。

摘要由CSDN通过智能技术生成

1.CSS单位

CSS中包含了多种单位，用于描述长度、百分比等度量。

相对单位(em)：元素大小参照另一个对象的大小来决定。

em特点:

em参照的对象是其父元素的font-size，1em等于其父元素的font-size一倍；
em的具体值会出现嵌套计算的现象

绝对单位(px)：元素大小是所设定的固定的绝对值。

像素(px)是最常用的单位，它表示屏幕上的一个物理像素点。像素单位在不同设备上具有相对固定的大小，可以精确控制元素的尺寸和位置。

CSS中的相对单位主要分为两大类：

字体相对单位：与font-size属性有关的单位，常见的字体相对单位有em和rem

浏览器窗口相对单位：与浏览器窗口大小有关的单位，常见的浏览器窗口相对单位有vw、vh、vmax和vmin。

rem特点:

1.rem参照的对象是根元素html的font-size，1rem = 16px；
2.rem的具体值不会出现嵌套计算的现象，因为无论在哪个层级使用rem单位，都是参照根元素html的font-size。

rem：rem单位也是相对于根元素（即html元素）的字体大小计算的。与em不同，rem单位不会受到父元素字体大小的影响。

百分比（%）：百分比单位是相对于父元素的尺寸进行计算的。例如，如果一个元素的宽度设置为50%，那么它的宽度将是父元素宽度的一半

2.flex布局

声明定义
容器里面包含着项目元素，使用 `display:flex` 或 `display:inline-flex` 声明为弹性容器

flex-direction属性:

flex-direction属性用于设置主轴方向，通过设置主轴方向可以规定项目的排列方向。

row:默认值，主轴为从左到右的水平方向。

row-reverse:主轴为从右到左的水平方向。

column:主轴为从上到下的垂直方向。

column-reverse:主轴为从下到上的垂直方向。

flex布局的作用

在父内容里面垂直居中一个块内容。
使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度 / 高度可用。
使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

justify-content属性

justify-content属性用于设置项目在主轴方向上的对齐方式，能够分配项目之间及其周围多余的空间。

flex-start:默认值，表示项目对齐到主轴起点，项目间不留空隙。

flex-end:项目对齐到主轴终点，项目间不留空隙。

center:项目在主轴上居中排列，项目间不留空隙。

align-items属性

align-items属性用于设置项目在交叉轴上的对齐方式。

center:项目在交叉轴的中间位置对齐。

flex-start:项目顶部与交叉轴起点对齐

flex-end:项目底部与交叉轴终点对齐。

baseline:项目的第一行文字的基线对齐。

3.元素定位

在CSS中，元素的定位主要通过position属性来实现，它决定了元素在网页上的布局方式。

`position`属性有多个可能的值，每个值都对应一种不同的定位方式：

static：这是元素的默认值。当元素的position属性设置为static时，元素按照正常的文档流进行布局，即按照其在HTML中出现的顺序进行排列。此时，top、right、bottom和left属性将无效。
relative：相对定位。元素首先按照正常的文档流进行布局，然后可以通过top、right、bottom和left属性进行偏移。偏移是相对于元素原来的位置进行的。
absolute：绝对定位。元素会脱离正常的文档流，其位置相对于最近的已定位父元素。如果没有已定位的父元素，那么它的位置就相对于初始包含块。此时，top、right、bottom和left属性用于指定元素的位置。
fixed：固定定位。元素会脱离正常的文档流，其位置相对于浏览器窗口进行定位，即使页面滚动，它也会始终停留在同一位置。top、right、bottom和left属性用于指定元素的位置。