2025年css默认定位类型（2025年css的定位属性）

什么是文档流?

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。也就是说，文档流指示了页面上的元素如何去排列。文档流影响元素位置的方法文档流主要通过以下三种方式影响页面元素的排列：显示类型（Display Type）HTML 元素最初按其显示类型定位。

文档流是指页面元素的排列顺序和 HTML 元素的顺序，由 CSS 定位语句定义，涉及每个元素如何占据空间以及如何影响其他元素的位置。以下是关于文档流的详细解释：显示类型：显示类型决定了 HTML 元素的初始定位方式。

文档就是页面，doctype。流就指输入输出的形式，其中输入应该是“布局”，输出应该是“显示”综合起来就是：页面布局和显示的形式。就是普通流了。就像你以前用表格布局基本只涉及到文档流，如绝对定位的元素不占文档流，它会忽略文档流的存在而浮在已有东西的上面。

排列时所占用的位置。文档流是文档中可显示对象在排列时所占用的位置，由CSS定位语句定义的页面元素的排列，以及HTML元素的顺序。

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。 网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。

CSS定位有哪些类型_position属性详解与布局应用技巧

CSS中的position属性用于控制元素的定位方式，直接影响页面布局结构。合理使用不同的定位类型，能帮助我们精准控制元素的位置，实现复杂的页面效果。下面详细介绍position的五种取值及其实际应用技巧。

static 描述：默认值，没有定位。元素会按照正常的文档流进行排列。特点：可以用于取消元素之前的定位设置。元素保持在文档流中的原始位置，不会受到 top、right、bottom、left 属性的影响。 relative 描述：相对定位。元素的定位是相对于其正常位置进行的。

CSS中position属性详解：position属性在CSS中用于控制元素的定位方式，它主要有以下五种值：Static：描述：元素的默认定位方式。行为：元素按照正常的文档流进行排列，不会受到其他元素的影响，也不会偏移其原始位置。Relative：描述：相对于元素原来的位置进行定位。

可以通过设置偏移量（left、right、top、bottom）相对于其定位上下文（即最近的已定位祖先元素或body）进行定位。可以使用z-index属性来调整元素的堆叠顺序。偏移量可以设置负值，以实现更灵活的布局。定位上下文：绝对定位的元素是相对于其最近的已定位（非static）祖先元素进行定位的。

在div+css布局中，position属性是控制元素定位方式的核心属性，主要包含relative（相对定位）和absolute（绝对定位）两种常用值。以下是对这两种定位方式的详细解析：相对定位（relative）定义：相对定位是相对于元素在正常流中的原始位置进行偏移。

cursorCSS中的光标类型

默认光标：描述：默认情况下，浏览器会使用默认光标，通常是一个箭头。代码：cursor： default；指针光标：描述：光标变为手指形状，适用于链接元素。代码：cursor： pointer；移动光标：描述：表示元素可以被移动。

手型光标：cursor： pointer； 通常用于可点击元素，提示用户可以交互。 手形光标（兼容IE5）：cursor： hand； 和 cursor： pointer； 类似，但特别考虑到IE5的兼容性。 等待或沙漏：cursor： wait； 表示操作正在进行中，用户需等待。 帮助光标：cursor： help； 提示用户获取帮助或显示帮助信息。

- row-resize：垂直调整光标，适用于IE0，与col-resize类似，但方向不同。- text：用于编辑文本的光标，通常显示为大写的I。- vertical-text：专为垂直文本设计，是大写的I旋转90度。- wait：表示程序忙，用户需要等待的光标，如沙漏或手表形状。

cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 值 描述 url 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。default 默认光标（通常是一个箭头）auto 默认。

Cursor是网页制作CSS中的光标类型，与图标文件Icon一样，是特殊类型的小位图。文件拓展名 扩展名一般为.cur。与图标文件Icon一样，是特殊类型的小位图，但是光标包含热点，通过其X和Y坐标可跟踪光标位置的像素。

HBuilder-X自定义模板的存放路径和使用方法说明

1、自定义模板的存放路径初次定位模板目录 新建文件时（如vue文件），在右上角找到“自定义模板”入口。返回两级目录，可找到HBuilder-X的全局模板目录templates，包含子文件夹如vue、js、css、html等。

2、【hbuilderX】使用总结自定义模板文件的使用：在项目开发中有一个自定义的模板文件会一定程度上减少开发时间；所以开发项目时有必要根据项目情况新建一个或多个自定义模板文件。一个HBuilderX文件就创建好了，输入要完成的HTML代码即可。

3、Android SDK自带ADB：默认路径为Android SDK目录/platform-tools/adb.exe（如C：Users用户名AppDataLocalAndroidSdkplatform-toolsadb.exe）。自定义ADB：若使用第三方修改版ADB，需填写完整可执行文件路径（如D：toolscustom_adbadb.exe）。

4、启动HBuilderX软件确保已安装HBuilderX并完成初始化配置。打开软件后，界面将显示主工作区，顶部菜单栏包含文件操作相关选项。 通过菜单栏创建项目点击顶部菜单栏的“文件”选项，在弹出的下拉菜单中选择“新建”，随后点击“项目”。此操作将打开项目创建向导窗口。

CSS双列、三列、双飞翼、圣杯等15种布局

CSS 双列、三列、双飞翼、圣杯等布局方式的简要说明：双列布局：定义：页面被分为左右两部分，左侧元素固定宽度，右侧元素自适应。实现方法：浮动布局：要求父元素高度固定，以避免布局混乱。绝对定位：适用于左侧元素宽度已知且右侧元素内容较少的情况。负margin布局：需要额外的 div 元素以确保元素在同一行显示。

先聊聊布局方面的知识，先列据一个实现三栏水平布局（左右定宽，中间自适应）案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。相同点：差异点：DOM节点结构：双飞翼布局比圣杯布局多使用了一个div，少用大致4个css属性，比圣杯布局思路更直接和间接一点。

所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式。

左边固定，右边自适应布局的两种实现方式效果图如下：大屏展示：小屏展示： 第一种实现方式通过负边距与浮动 实现左边固定，右边自适应的布局。

通过调整负边距的大小，可以实现元素位置的调整，甚至使其覆盖其他元素。在某些布局设计中，如圣杯布局、双飞翼布局等，负边距被巧妙地利用，以实现元素在视觉上的前后排列。这种布局方式允许元素在实际编码顺序后，仍能展示在更前面的位置。对于绝对定位元素，负边距同样发挥作用。

系统学习路线第一阶段：基础核心技能HTML+CSS 学习HTML进阶（语义化标签、表单验证）、CSS进阶（选择器、盒模型、浮动定位）。掌握div+css布局（如圣杯布局、双飞翼布局）和整站开发（从页面结构到样式整合）。实践：完成3-5个静态页面（如企业官网、个人博客）。

CSS布局有哪几种类型?

所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式。

利用盒模型：盒模型是CSS布局的基础，它定义了元素的内容、内边距、边框和外边距的尺寸和关系。通过调整这些属性，可以控制元素在页面上的占据空间和位置。设置元素的显示类型：使用display属性来控制元素是行内显示还是块级显示，或者是其他特殊的显示类型。

五种基本布局定位类型：* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户， 这可能更有吸引力、更易于访问， 因为栏宽度将变得更宽， 能以任何大小显示更舒适、更可读的行长度。

CSS居中的几种方法：在CSS中，实现元素居中有多种方法，根据具体需求和布局情况可以选择不同的方案。以下是几种常见的CSS居中方法：使用Flexbox：优势：这是现代CSS布局中最常用且最强大的方法之一，适用于各种场景。