二十四，相对定位与浮动

最新推荐文章于 2023-09-18 17:32:45 发布
最新推荐文章于 2023-09-18 17:32:45 发布
阅读量112 收藏
点赞数
分类专栏： CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36792120/article/details/111275320
版权
本文深入探讨了在CSS布局中，float和relative属性如何同时使用。float属性用于元素浮动，不被忽略，而relative则设置元素的相对定位，调整其四周边距。这种组合常见于复杂网页布局，允许元素在保持浮动的同时进行位置微调，创建灵活的网页设计解决方案。
摘要由CSDN通过智能技术生成

float和relative同时使用时，会同时具有各自的特点：
float——浮动，且不会被忽略
relative——四周边距
在这里插入图片描述

好多可乐
关注
专栏目录
CSS浮动七：相对定位和浮动的结合使用 （并不是说这二者结合就一定更好；看需求）
小枯林的博客
12-26 1889
浮动：可以脱离文档流，浮动起来，而且文档中的其他内容不会忽略浮动的位置，会绕开； 相对定位：可以设定上下左右四个边距（设了上边距，就不需要设下边距了；左右边距同理，设置一个即可）；即定位可以设定坐标！ 可以发现，这俩简直是完美组合！！！ 目录 1.不采取定位 2.只使用相对定位 3.只使用绝对定位： 4.当相对定位和浮动结合在一起使用时候（重点） 1.不采取定位 <!DOCTYPE html> <html> <head> <title>相.
CSS中的定位：相对定位、绝对定位、浮动
weixin_47844457的博客
05-12 908
定位：允许编程时定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置； 三种基本的定位机制 普通流； 除非专门指定，否则所有框都在普通流中定位； 浮动； 绝对定位； 绝对定位 position属性 属性值的含义： static 默认值； 元素框正常生成：元素出现在正常的流中，忽略top、bottom、left、right或者z-index声明； relative（相对定位） 元素框相对于其正常出现位置偏移某个距离； 元素仍保持其未定位前的形状，它
css 浮动 相对定位 绝对定位区别
weixin_30291791的博客
03-08 185
　　今天下班在地铁上看了一个样式教学视频，因为最近在学习前端。以前刚毕业的时候，感觉后台才是王道，但最近发现，前端也很重要，比如：自己接一些私单做的时候，自己要根据需求做好界面，才能更加符合客户需求，不然还得找人去做；不同的是，后台的就可以放心找人做，只要测试得没问题，效率还过得去就可以了，所以最近打算学好点前端，自己接一些单子来做。废话不多说，入正题： 　　html是按照文件流（普通流）的方式...
【Web-CSS基础】CSS的三大特性、定位方式、静态定位、相对定位、绝对定位、浮动定位、固定定位、设置缩放动画
居然天上楼的博客
11-02 1387
CSS的三大特性、定位方式、静态定位、相对定位、绝对定位、浮动定位、固定定位。
Css中关于定位的理解，相对定位、绝对定位、浮动定位
包子源的博客
11-15 2325
Css中的定位网页制作中扮演着举足轻重的角色，通过定位，可以轻松的使快元素放置在合适的位置。定位分为三种，绝对定位、相对定位、浮动定位。绝对定位会使同级元素重新从（0,0）坐标开始定位。相对定位会考虑同级元素产生的位置影响。浮动定位时，如果有滚动条，元素位置不受滚动条的影响。 有些情况下必须使用定位，使元素具备层级关系需要使用z-index时，首先必须定位。需要使元素出现在页面最底部，首先要添加
css 相对定位 绝对定位 浮动 分析
09-25
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
深入理解css布局之定位与浮动
09-27
【深入理解CSS布局之定位与浮动】 在CSS布局中，定位和浮动是两个非常关键的概念，它们能够帮助开发者实现复杂的网页布局和设计效果。本文将详细介绍这两个概念以及它们在实际应用中的工作原理。 1. **文档流** -...
CSS3定位和浮动详解
09-24
CSS的定位属性主要通过position属性实现，它有四个可能的值：static（静态定位，默认值）、relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。每个定位模式都有其特殊的用途和行为。 1. 静态定位...
CSS布局（定位、浮动）
最新发布
li17835756262的博客
09-18 1024
（2）父元素宽度如果不够， 例如不能放下一个子元素4， 那么子元素4在贴边时， 会跳过上一个子元素3， 向更上一个子元素2进行贴边， 如果子元素2后面位置不够， 继续跳过子元素2向前面的子元素1进行贴边。（3）如果子元素4在跳过子元素3向更前面的子元素2贴边时， 子元素2的高度不高于子元素3， 子元素2没有延伸出一个高度的边让子元素4贴边， 那么子元素4就会跳过子元素2向子元素1进行贴边。性质： 固定定位的元素脱离标准流， 让出标准流位置， 可以设置宽高， 根据偏移量属性可以任意设置在浏览器窗口的位置。
浮动定位、相对定位、绝对定位、固定定位
Future_fq的博客
11-17 799
css浮动定位、相对定位
关于对同一个盒子同时设置相对定位和浮动或者绝对定位和浮动的问题
她夏了夏天
12-13 9720
可能细心的朋友在查看某些网页的时候发现，某些盒子或是图片既设置了相对定位又设置了浮动，觉得很奇怪，其实呢，这个设置是非常的正常。    比如，在布局页面的时候，我希望导航和轮播图一左一右的进行显示，就可以对导航设置左浮动float。轮播图右浮动。但是呢、如果导航里面有些小图标之类的东西要进行绝对定位absolute操作时，那么就可以对该导航设置相对定位relative了，相当于小图标的已定位的祖
CSS - 浮动，绝对定位，相对定位
kikajack的博客
01-10 1755
1. 文档流文档流是文档中的盒子模型按顺序排列形成的，是相对于盒子模型讲的。 文本流是由文字段落组成的。 浮动、绝对定位、相对定位使得元素脱离文档流。2. 浮动 float1） 特性元素添加 float 属性浮动后，会跳出文档流，加入当前盒子模型的浮动流。 当浮动元素后面还有正常文档流中的元素时，会直接在浮动元素的下面布局（可以通过构建 BFC 防止覆盖）。但是文本流中的文字会围绕浮动元素布局
html浮动和相对定位,浮动与相对定位、绝对定位的区别
weixin_42629522的博客
06-07 746
浮动与相对定位、绝对定位的区别最近学校的HTML课程在讲浮动和定位。为了搞清楚这些样式的区别，也是查了不少资料在这里来谈谈我对浮动与相对定位、绝对定位的理解一、浮动浮动的使用场景： 一般是将竖起来的多个div进行横向的排列浮动的负面作用： 因为添加了浮动就脱离了标准文档流，有可能导致父元素无法被撑开示例如下：在一个div中定义2个div并设置为float：leftrTitle.box{width:...
CSS——浮动与定位
weixin_44749830的博客
06-04 216
盒子模型 用于布局 要素： 内容区（content）:由盒子的宽高决定 内边距（padding）：指内容区与边框的距离 边框（border）：盒子边框的长度、样式、颜色 以上三要素会改变盒子的大小 外边距（margin）：盒子边框以外都叫外边距 外边距规定了盒子位置 ...
解析什么是绝对定位，相对定位与浮动
weixin_34174422的博客
10-13 280
在理解定位之前，先说一个概念，文档普通流，就是元素标签正常在HTML里的顺序，块级元素从上至下排列，行内元素从左到右排列。 绝对定位 绝对定位：absolute，元素相对于离它最近的已定位祖先元素进行移动，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（一般是HTML元素，也可能是画布，这是由用户的代理决定的）。注意，绝对定位使元素原先在正常文档流中所占的空间会关闭，就好像该元素...
html浮动定位和绝对定位进行布局,绝对定位(absolute)和浮动定位(float)分析绝
weixin_39946964的博客
06-08 647
css中的绝对定位和相对定位有什么区别css中的绝对定位和相对定位有什么区别，以及两者的联系和详细用法，如果个人的理解。相对定位：在原位置上占用空间，可以设置浮动的上下位置。绝对位置：在原位置上，不占用空间，设置位置会以整个页面为标准。 以下是复制别人的 -一.相对定位css布局时，为什么fixed定位元素设置width:100%会css样式如下： *{ margin:0; padding:0; ...
CSS 布局1（绝对定位、相对定位、浮动）
litengbin的博客
01-15 3673
CSS 如何进行绝对定位详解 绝对定位  属性：position  值： absolute  通过指定left,top绝对定位一个元素 1.绝对定位 属性：position  值： absolute  设置了绝对定位的元素，相当于该元素被从原文档中删除了  所以”正常文字4“会紧接着出现在 ”正常文字2“后面，而不会留下空档 p.abs{ position: ab
CSS定位详解：相对、绝对与浮动
"这篇文章主要分析了CSS中的相对定位、绝对定位以及浮动的概念，并结合实例进行了讲解。" 在CSS布局中，定位（Positioning）是一种重要的技术，它允许开发者精确控制元素在网页上的位置。W3School网站上的页面设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值