【10.HTML入门知识-CSS元素定位】

最新推荐文章于 2024-08-17 22:24:13 发布
最新推荐文章于 2024-08-17 22:24:13 发布
阅读量732 收藏 1
点赞数
分类专栏： HTML5+CSS5入门 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31421983/article/details/130418252
版权

1 标准流（Normal Flow）

默认情况下，元素都是按照normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
从左到右、从上到下按顺序摆放好
 默认情况下，互相之间不存在层叠现象

1.1 margin-padding位置调整

在这里插入图片描述

1.1 画布 和 视口

在这里插入图片描述

2 认识position属性

除了static,其他定位属性都会脱标(自定义位置)
在这里插入图片描述

position值对比

在这里插入图片描述

2.1 静态定位 - static

会占据标准布局空间

在这里插入图片描述

2.2 相对定位 - relative

会占据标准布局空间
在这里插入图片描述

2.3 固定定位 - fixed

不会占据标准布局空间
在这里插入图片描述

2.4 绝对定位 - absolute

不会占据标准布局空间
在这里插入图片描述

2.5 子绝父相

在这里插入图片描述

2.6 将position设置为absolute/fixed元素的特点

在这里插入图片描述
在这里插入图片描述

2.7.粘性定位 - sticky

在这里插入图片描述
在这里插入图片描述

3 层叠 CSS属性 - z-index

在这里插入图片描述

努力修福报
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web-前端html+css从入门到精通 164. column分栏布局.zip
05-23
在描述的文件"Web-前端html+css从入门到精通 164. column分栏布局.zip"中，我们可以通过观看"Web-前端html+css从入门到精通 164. column分栏布局.mp4"来深入理解这一技术。 首先，HTML5引入了一些新的标签，如`...
HTML如何理解定位position？分别有几种定位？
qq_48109675的博客
08-30 3155
语法：position：absolute 特点： 脱离标准流 不区分块级、行内、行内块级元素 同一方向上的定位属性只能使用一个，right/left+top/bottom 忽略祖先元素的padding 参考点：若绝对定位的元素有祖先元素也是定位流（绝对定位、固定定位、相对定位）, 那么这个绝对定位的元素就会以该元素作为参考点，若有多个参考点，则就近原则。否则，都以body为参考点 ...
html中的定位知识点如何使用
小魏快起床的博客
11-23 4191
系列文章目录文章目录前言一、定位是什么？有什么用？二、定位方式有哪些？怎么使用？ 1、静态定位：就是默认的定位方式，意思就是没有定位; 2、相对定位： 3、绝对定位： 4、固定定位：固定定位永远参照于浏览器的视口进行定位三、相对定位解析： 1、 这里我们先用标准流写一个小demo： 2、得到一个效果图 ，是一个大盒子里面嵌了2个小盒子的效果：3、这个时候我要开始给盒子2号加相对定位，然后让其进行
HTML：CSS定位（position），怎么样定好位？精简！有效！
qq_42319810的博客
05-12 458
概要：首先，需要知道定位有几种方式，搞清楚不同的方式所具备的效果，这样才能定好，定清楚位置，而不是出现一个组件动，全图都在动的糟糕情况。一、CSS定位的几个方式二、重叠的元素，怎么调整它显示的图层？
html-and-css-course
03-27
"html-and-css-course" 提供的课程可能涵盖了从入门到进阶的全方位HTML与CSS学习内容，旨在帮助学习者掌握创建动态、美观且功能丰富的网页的技能。 HTML（HyperText Markup Language）是一种标记语言，用于定义网页...
Web-前端html+css从入门到精通 160. 小米官网盒子阴影效果.zip
05-23
在本课程中，“Web-前端html+css从入门到精通 160. 小米官网盒子阴影效果”主要探讨了HTML和CSS在构建网页时如何实现类似小米官网中的盒子阴影效果。这是一个至关重要的概念，因为阴影效果可以为网页元素增添深度感...
Web-前端html+css从入门到精通 184. flex弹性布局（1-7）.mp4.zip.zip
05-23
我们通过分析标题“Web-前端html+css从入门到精通 184. flex弹性布局（1-7）.mp4.zip.zip”和描述“Web-前端html+css从入门到精通 172. 布局扩展之圣杯布局.zip”来深入探讨这两个知识点。 首先，让我们关注“flex...
html+css入门到实战源码
12-09
CSS选择器如类选择器（`.class`）、ID选择器（`#id`）和伪类（`:hover`、`:active`等）使得我们可以精确地定位并操作网页中的任何元素。 在"html+css的入门视频源码"中，你将学习如何结合这两者创建实际的网页项目...
13.体验CSS,CSS的引入方式,标签选择器
Little_Green1的博客
08-13 464
为了看清楚我把整个骨架写进来了,CSS书写在<title>标签下,写了一个<style>双标签,然后在<style>标签内添加选择器,p就是个选择器,这个选择器名字跟HTML代码中<p>标签同名,这种选择器叫标签选择器(<p>标签是段落标签,前面好像忘记讲了),然后在标签后加大括号,在大括号里面写CSS代码.写完然后通过<link>标签引入,<link>标签是什么,以后会学到的,现在知道就行,后面学习我们都是用内部样式表。还有就是行内样式,就是直接在标签里加style属性,属性值写CSS代码,比如。
深入探索CSS的:unresolved伪类：选择未解析元素的神秘面纱
2401_85702623的博客
08-17 557
伪类是CSS的一个选择器，用于选择那些尚未解析的元素。在Web开发中，我们可能会遇到一些元素，它们依赖于外部资源或异步加载的内容，这些元素在加载过程中可能还没有完全解析。使用伪类，我们可以为这些元素定义特定的样式，直到它们完全解析并显示在页面上。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
最新发布
2402_85758349的博客
08-17 453
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
CSS 的 position 属性
于坤
08-16 235
CSS 的position属性用于指定一个元素在文档中的定位方式。static（默认值）toprightbottomleftrelativetoprightbottomleftabsolutestaticfixedstickytoprightbottomleft。
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能
qq_42431718的博客
08-13 318
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
CSS的:read-write和:read-only伪类：增强表单元素的样式与用户体验
liuxin33445566的博客
08-17 278
伪类在CSS中用于选择不在文档树中的元素，或者根据元素的特定状态来选择元素。和:read-only伪类就是根据输入字段是否可编辑来选择元素。
css-定位
m0_73882020的博客
08-17 267
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
在vue3中配置scss
iku_n的博客
08-12 543
要在 Vue 3 中使用 SCSS（Sass 的一个子集），你需要安装相应的依赖，并对项目进行一些配置。
掌握CSS的时间之旅：:past和:future伪类的探索与应用
2401_85763803的博客
08-17 403
CSS（层叠样式表）是控制网页样式的核心技术，而CSS4引入了一些新的选择器，其中就包括:past和:future伪类。这些伪类基于元素与当前时间的相对位置来选择元素，为开发者提供了一种创新的方式来处理基于时间的样式需求。本文将详细介绍:past和:future伪类的使用方式、应用场景以及如何通过它们增强网页的交互性和视觉表现。
html+css+js网页设计 电商模版4个页面
qq_42431718的博客
08-13 388
html+css+js网页设计 电商模版4个页面 带js 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
CSS的:definite和:indefinitte伪类：探索确定性与不确定性的元素选择
2401_85763803的博客
08-17 436
CSS（层叠样式表）是控制网页样式的核心技术，它允许开发者根据元素的特性来应用样式。CSS4提出了一些新的伪类选择器，其中就包括:definite和伪类。这些伪类基于元素的确定性或不确定性来选择元素，为开发者提供了一种创新的方式来处理基于上下文的样式需求。本文将详细介绍:definite和伪类的使用方式、应用场景以及如何通过它们增强网页的语义表达和视觉表现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力修福报

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值