CSS-position 定位知识 小笔记

最新推荐文章于 2024-09-14 08:09:14 发布
最新推荐文章于 2024-09-14 08:09:14 发布
阅读量123 收藏
点赞数
分类专栏： CSS重点 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gygygydgh/article/details/104107372
版权
position 定位
默认值 static 静止
1.fixed 固定定位 会脱离文档流

需要提供一对坐标点----定位
至少提供一个坐标
left/right
top/bottom
参考点：基于 body 进行定位

2.relative 相对定位 子绝父相

相对于自己定位，没有脱离文档流
参考点：自己
一般情况下：我们设置相对定位，是不设置坐标点的
更常用于，改变“绝对定位”元素的参考点

3.absolute 绝对定位

会脱离文档流
参考点：基于position为非static的爸爸进行定位
假如都没有，则最终以body为参考点

！脱离文档流的定位元素，不受行内标签的影响，可以直接设置宽高，宽度不会独占一行

z-index 层叠优先级
默认值 auto

二段飞踢
关注
专栏目录
css笔记2-position 定位
weixin_45145722的博客
03-18 162
又来了一个新比喻：HTML就像是我们买的毛坯房，把一个房子分成卧室，卫生间，客厅，厨房这些不同的结构部分，css就是做装饰，把一个灰秃秃的空房子，装饰成一个漂亮的，温馨的家 在css出现之前，咱们的网页搞纯html来构建，常用表格来构建网页（见到过了） 在书写css的时候，还要引入其他css文件，可以用@import来引入 /* 当然是一个css文件 它依赖其他的css文件 */ @import url('other.css'); 标签选择器：对元素进行选择 所以标签选择器的作用范围非常广啦，因为
CSS 定位 position
houyanhua1的专栏
11-02 359
position: （配合着定位坐标来使用）定位坐标：left:10px 距左边， top距上边， right 距右边， bottom 距底边 static 静态，不定位 fixed  固定， 脱离正常的文档流，比普通元素层级要高。相对于浏览器窗口进行定位。不会随页面的滚动而移动。 relative 相对定位。（相对于自己原来的位置，霸道的相对，定位之后任然霸占着原来的位置） abso
css-day07笔记-CSS定位position
xhqxhq_的博客
04-14 577
typora-copy-images-to: media 第01阶段.WEB基础：css-day07笔记-CSS定位position 一、定位(position) 学习目标 理解 能说出为什么要用定位 能说出定位的4种分类 能说出四种定位的各自特点 能说出我们为什么常用子绝父相布局 应用 能写出淘宝轮播图布局 1. CSS 布局的三种机制 网页布局的核心 —— 就是用 CS...
Web网页开发-CSS定位-笔记
编程在手天下我有的博客
01-03 711
CSS的三种布局 四种定位模式及元素居中的两种情况 嵌套型盒子的外边距合并问题的解决方案
前端基础笔记-CSS-05-定位
mkx2723的博客
08-07 269
定位基本概念static静态定位relative相对定位absolute绝对定位fixed固定定位拓展使绝对/固定定位的盒子居中堆叠顺序(z-index) 基本概念 css布局的三种机制分别为标准流、浮动、定位。 定位主要的作用是将盒子固定在浏览器某一固定位置。 设置了定位的盒子是漂浮在标准流和浮动盒子的上面的。 定位=定位模式+边偏移 边偏移用top bottom left right属性来表示。 定位模式 position:static(静态) || relative(相对定位) || absolut
css ------笔记相关案例
sumuqi的博客
04-23 204
css 图片案例 01 css语法.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red } h2{ color...
CSS笔记-定位Position 及 浮动清除
Handy
03-27 8004
position属性 比较【转】static：对象遵循常规流。此时4个定位偏移属性不会被应用。relative：对象遵循常规流，并且参照自身在常规流中的位置通过[top]，[right]，[bottom]，[left]这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元...
html-css-learning：HTML + CSS学习笔记
03-03
- **浮动与定位**：`float`用于元素的横向排列，`position`（static、relative、absolute、fixed）控制元素位置。 4. **CSS进阶** - **层叠与继承**：CSS规则的优先级和继承机制，影响样式应用。 - **响应式设计...
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1331
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
HTML、CSS实现树状图
p_s_p的博客
09-09 641
【代码】HTML、CSS实现树状图。
使用HTML和CSS制作网页的全面指南
最新发布
weidl001的博客
09-14 1156
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
CSS 图片廊：打造精美视觉体验
wjs2024的博客
09-13 571
使用CSS创建图片廊是一个简单而有效的方法，可以提升网页的视觉效果和用户体验。通过本文的介绍，相信你已经掌握了如何使用CSS来打造一个精美的图片廊。在实际开发中，你可以根据自己的需求进行调整和优化，以创建出更加出色的图片廊效果。
CSS框架 Tailwind CSS
专研技术的大学生
09-11 782
在项目中如何集成Tailwind Css框架
如何利用 CSS 渐变实现多样化背景效果
weixin_63625059的博客
09-10 951
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下来看MDN是如何说的CSS 渐变由 [] 数据类型表示，它是 [] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。
项目实训：CSS基本布局理解——WEB开发系列38
一条晒干的咸鱼的博客
09-13 606
对CSS学习已经接近尾声，下面你可以对以下两道“小卡拉米”测试进行测试下CSS理解程度。
less和css在写法上有什么区别吗？
qq_50853940的博客
09-11 562
【代码】less和css在写法上有什么区别吗？
表格标记＜table＞
qq_74861982的博客
09-13 372
table标记是表格中最外层标记，tr表示表格中的行标记，一对表示表格中的一行，在中可以嵌套几对标记或几对标记。valign：设置单元格垂直对齐方式，可取top bottom middle baseline。align：设置表格或者单元格中，文字水平对齐方式。border:设置边框的值，默认为0，表示不可见。height：设置表格或者单元格的高度。width：设置表格或者单元格的宽度。4.td:表格中数据单元格标记。1table：表格标记。这里直接贴上代码了哦。
CSS 响应式设计（补充）——WEB开发系列36
一条晒干的咸鱼的博客
09-11 1152
随着移动设备的普及，网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示，还要适应不同设备的特性。
CSS基础入门与常用标签笔记
本篇CSS自学笔记记录了作者在学习...这篇笔记提供了丰富的CSS基础知识和实践经验，适合初学者系统地学习和巩固CSS技能。通过阅读和实践这些内容，读者可以更好地理解和掌握CSS语言，为网页设计和开发打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值