CSS中的position和display通俗理解

最新推荐文章于 2025-05-02 10:08:09 发布

Enarm

最新推荐文章于 2025-05-02 10:08:09 发布

阅读量723

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Enarm/article/details/50817411

本文深入解析CSS中的position和display属性，详细说明了position属性的absolute和relative模式，以及display属性的inline、block和inline-block模式，帮助理解布局与元素显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：一直对CSS中的position和display懵懵懂懂，这几天查了一下，结合自己理解，通俗解释如下。

1、position属性：主要分为absolute和relative。

(其中好理解的static为默认值，按照在html文档中顺序显示；fixed为以浏览器为参照。)

我们知道<html>是所有元素的父节点。在一个html文档中，某一个节点（称为a节点）被设置为position:absolute时，“绝对位置”的“绝对”两字的参考点，是距离a节点最近的一个被设置为position:relative的父节点。

2、display属性：主要分为inline、block和inline-block。

inline:宽度高度与父节点的padding等属性有关，且与其他元素在同一行。

block:宽度高度与父节点的padding等属性无关，且单独一行。

inline-block:结合inlin和block的特点，宽度高度与父节点的padding等属性无关，且与其他元素在同一行。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Enarm

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS 显示、定位、布局、浮动

corlin6688的博客

11-07

399

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。两者的区别：visibility:hidden可以隐藏某个元素，但隐藏的元素仍占用之前的空间，即该元素虽然被隐藏，但仍然会影响布局；relative定位元素的定位是相对其正常的位置。absolute定位的元素的位置相对于最近的已定位父元素。如果元素没有已定位的父元素，那它的位置相对于。Fixed定位：元素的位置相对于浏览器窗口是固定位置，即窗口是滚动的，元素是不会移动的。

CSS中的pointer-events属性：控制鼠标事件以实现复杂的交互逻辑

最新发布

weixin_41455464的博客

06-25

348

通过今天的课程，我们了解了属性的基本用法及其在不同场景下的应用。它不仅可以帮助我们简化代码，还能实现一些复杂的交互逻辑。无论是让元素“隐身”，还是创建透明的点击区域，都是一个非常强大的工具。当然，并不是万能的，它也有一些局限性。比如，它只能控制鼠标事件，不能影响键盘事件或其他类型的输入。但在大多数情况下，它已经足够强大，能够满足我们的需求。希望今天的课程对你有所帮助！如果你有任何问题或想法，欢迎在评论区留言，我们下次再见！

参与评论您还未登录，请先登录后发表或查看评论

position 和 display 的取值和各自的意思和用法

splendid_can的博客

11-26

8422

position 1、position属性取值：static(默认)、relative、absolute、fixed、inherit。 2、postision：static；始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让top，right，bottom，left的值失效。在切换的时候可以尝试这个方法。 3、除了static值，在其他三个值的设置下

CSS基础中属性position的使用方法（新手入门到精通）

2401_83607690的博客

05-02

1556

css中position属性详解，适合新手小白，前端学习者，面试复习者

css有两个重要的基本属性display和position，是前端开发必需掌握的。

weixin_71087234的博客

04-19

844

css有两个重要的基本属性display和position，是前端开发必需掌握的。

css的display和position属性

qq_42804737的博客

08-13

1315

css的positon和display属性positon属性position：static；position：relative；position：absolute;position：fixed；position：inherit；display属性display：none；display：inline；display:block;display:inline-block;display:flex;f...

CSS中position和display理解

潇潇的博客

09-16

4584

Display理解 1、display常见属性解释 block 默认为block，宽度默认为100%。块状元素有：div、p、h1、form、ul、li。 inline 宽度就是它的文字或图片的宽度，不可改变。行内元素有：span、a、label、input、img、strong、em。 inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被

CSS简明通俗教程

cnds123的专栏

09-23

1184

CSS简明通俗教程

深入理解 CSS 浮动（Float）：详尽指南

2301_79175212的博客

10-03

2777

在学习 CSS 布局时，你可能经常会听到“浮动”这个词。虽然现代布局工具如 Flexbox 和 Grid 已经成为主流，但float仍然是 CSS 里一个非常重要的属性。它不仅在一些特定场景中有用，还为我们理解布局的运作原理提供了基础。本文将详细介绍float的用法、常见应用及其对文档流的影响，带你逐步掌握这个经典但重要的布局工具。CSS 浮动（float）是一种将元素从其正常文档流中移出，并使其向左或向右浮动的布局方式。浮动元素的周围内容会环绕其周围，常用于图文混排和简单的多列布局。虽然float。

狂神说——CSS3最新教程快速入门通俗易懂

淡水瑜的博客

05-24

1447

参考资料文章目录1.CSS的简单介绍2.什么是CSS和发展史3.CSS的快速入门及优势4.四种css导入方式5.三种基本选择器（重要）6.层次选择器7.结构伪类选择器8.属性选择器（常用重要）9.CSS的作用及字体样式10.文本样式11.文本阴影和超链接伪类12.列表样式练习13.背景图像应用及渐变14.盒子模型及边框使用（重要）15.内外边距及div居中16.圆角边框及阴影和经验分享17.display（重要）和浮动18.overflow及父级边框塌陷问题19. 相对定位的使用及练习20.方块定位练习讲

css圆角边框、盒子阴影、浮动、浮动的清除和综合案例学成在线

2302_77099705的博客

04-23

864

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

CSS Position

03-15

NULL 博文链接：https://sugongqing.iteye.com/blog/323093

【css】display与position

miao5995的博客

02-20

420

position display

CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制

weixin_34405557的博客

10-26

415

float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block; 有些时候可以替代float实现相同的效果.position: absolute|relative; 要配合top,left等定位; position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-...

CSS（八） display和position

Oliver尹的博客

07-01

877

display，指元素呈现框的类型常见的有，display:none|inline|block|inline-block|table... 块级元素block：会新开始一行并且尽可能的撑满容器，并且此元素的前后默认带有换行符，可设置宽高并且显示例如p,h1,div 行内元素：只占据它对应标签的边框内所包含的空间，此元素强制设置成行内元素，不可设置宽高并同行显示，例如：span bu...

css中的display以及position属性

weixin_34061555的博客

08-30

171

我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 　　　我们先定义三个div: 以上的三个div都是块级元素,输出的结果为: 块级元素的特征就是各占一行. 接下来用display将第二个div转换成行内元素:(先看一下几个现象) 1. 结果变成了: ...

关于前端position属性和display属性，这篇文章已足够

岩浆李的游鱼

06-30

7175

在我初学前端的时候，对position和display，尤其是flex特别的混乱，故总结一套，希望能帮助到有需要的同学。这里我想特别告诫一下移动端学习web的同学，例如position:relative，web端叫相对定位，意思是这个属性加在一个元素上，这个元素就使用相对定位的规则在ui上去渲染；而不是和移动端那样设置了相对布局，子布局里都按相对布局去排列，和移动前端还是有很大的差别的，只要记住相对定位和相对布局是有区别的。一、关于position属性 1.1、position:static 默认值，没

说说position，display

碉堡飞哥的博客

08-20

1720

1、display属性的值与作用常用的值有none、inline、block、inline-block none 1）表示该元素不会显示，并且该元素的空间也不存在，可理解为已删除； 2）visibility：hidden只是将元素隐藏，但不会改变页面布局，但也不会触发该元素已经绑定的事件； 3)opacity：0，将元素隐藏，不会改变页面布局，但会触发该元素绑定的事件。 in...

Html中grid布局

03-16

<think>嗯，用户想了解HTML中的Grid布局。我需要先理清Grid布局的基本概念和用途。Grid布局是CSS的一种二维布局系统，适合处理复杂的页面结构，比如行和列的排列。我应该从它的基本术语开始介绍，比如容器、项目、行、列、轨道、单元格和线。接下来，需要说明Grid布局和Flexbox的区别。Flexbox是一维的，适合线性布局，而Grid是二维的，更适合整体页面结构。这点对用户理解两者的适用场景很重要。然后，要给出一个简单的示例代码，展示如何创建Grid容器，定义行列，以及放置项目。这样用户能直观地看到语法结构。同时，需要解释每个CSS属性的作用，比如grid-template-columns和grid-template-rows。还要覆盖常用的Grid属性，比如对齐方式、间距设置，以及响应式设计的应用。例如，使用auto-fill和minmax函数来实现自适应布局。此外，可以提到fr单位，这是一个相对单位，方便分配剩余空间。可能用户会遇到的问题包括兼容性，所以需要提醒注意浏览器的支持情况，建议使用Autoprefixer工具。另外，要强调Grid布局的优势，比如代码简洁、灵活性高，适合复杂布局，但也要指出学习曲线相对较高。需要检查是否有遗漏的重要概念，比如隐式轨道和显式轨道的区别，或者如何合并单元格。不过作为介绍，可能不需要太深入，保持基础全面即可。确保语言通俗易懂，结构清晰，分点说明，方便用户逐步理解。</think>好的！我将以结构化的方式为您介绍HTML中的Grid布局，帮助您逐步理解其核心概念和应用方法。 ### 一、Grid布局基础 1. **定义** Grid布局是CSS提供的二维布局系统，通过行（row）和列（column）的组合来构建复杂页面结构，比传统布局（如float/position）更灵活。 2. **核心概念** - **容器 (Container)**：设置`display: grid`的元素 - **项目 (Item)**：容器的直接子元素 - **轨道 (Track)**：行或列的集合（由`grid-template-rows/columns`定义） - **单元格 (Cell)**：行和列的交叉区域 - **线 (Line)**：划分轨道的分界线（编号从1开始） --- ### 二、基本使用步骤 #### 1. 创建Grid容器 ```css .container { display: grid; } ``` #### 2. 定义行列结构 ```css .container { grid-template-columns: 100px 1fr 2fr; /* 3列：固定宽度 + 比例分配 */ grid-template-rows: 50px auto; /* 2行：固定高度 + 自适应 */ } ``` #### 3. 放置项目 ```css .item { grid-column: 1 / 3; /* 从第1列线到第3列线 */ grid-row: 2; /* 占据第2行 */ } ``` --- ### 三、关键属性详解 #### 1. 容器属性 - **间距控制** ```css gap: 10px; /* 行列统一间距 */ row-gap: 5px; /* 单独行间距 */ column-gap: 15px; /* 单独列间距 */ ``` - **对齐方式** ```css justify-content: center; /* 水平对齐 */ align-content: end; /* 垂直对齐 */ place-content: center end;/* 合并写法 */ ``` #### 2. 项目属性 - **跨轨道布局** ```css grid-area: 2 / 1 / 4 / 3; /* 行起始/列起始/行结束/列结束 */ ``` - **重叠控制** ```css z-index: 2; /* 控制重叠层级 */ ``` --- ### 四、响应式布局技巧 #### 1. 自动填充 ```css grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); ``` #### 2. 媒体查询适配 ```css @media (max-width: 600px) { .container { grid-template-columns: 1fr; } } ``` --- ### 五、与Flexbox对比 | 特性 | Grid | Flexbox | |---------------|-------------------------------|-----------------------| | **维度** | 二维布局 | 一维布局 | | **控制方向** | 同时控制行列 | 单一方向（主轴） | | **适用场景** | 整体页面结构 | 组件级布局 | | **内容流** | 显式定位优先 | 内容流驱动 | --- ### 六、浏览器支持 - 现代浏览器全面支持（Chrome/Firefox/Edge/Safari） - IE11部分支持（需加`-ms-`前缀） - 推荐使用Autoprefixer工具处理兼容性 --- ### 七、最佳实践建议 1. 优先使用`fr`单位进行比例分配 2. 结合命名网格线提升可读性 ```css grid-template-columns: [sidebar] 200px [main] 1fr; ``` 3. 使用`minmax()`函数设置弹性尺寸 ```css grid-template-rows: minmax(100px, auto); ``` 通过掌握这些核心概念和技巧，您可以高效构建复杂的响应式页面布局。建议从简单布局开始练习，逐步尝试更复杂的网格组合。