CSS进阶之浮动的细节规则

最新推荐文章于 2024-05-30 15:01:09 发布
最新推荐文章于 2024-05-30 15:01:09 发布
阅读量124 收藏
点赞数
分类专栏： CSS进阶 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yihen0214/article/details/120078576
版权

浮动的细节规则

盒子位置

  • 左浮动的盒子向上向左排列
  • 右浮动的盒子向上向右排列
  • 浮动盒子的顶边不得高于上一个盒子的顶边
  • 若剩余空间无法放下浮动盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动

示例
指向左边的箭头表示左浮动
在这里插入图片描述
若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动。

在这里插入图片描述
在这里插入图片描述
浮动盒子的顶边不得高于上一个盒子的顶边

在这里插入图片描述

在这里插入图片描述

资料来源于渡一教育，仅作学习使用

传说中的懿痕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS进阶学习资源 面试题
03-07
CSS需要注意的事情！面试官98%会问你的问题！没学这些好意思说自己是前端开发？我就是靠这份找到了实习！
CSS进阶指引
09-25
主要介绍了CSS入门指引,其中包括BEM和OOCSS等的代码示例,强烈推荐!需要的朋友可以参考下
css盒子居中问题
L_Lintellect的博客
07-18 1030
静态页面布局中通过css控制盒子居中的常用方法。 在静态页面不居中，总会遇到许许多多的居中布局，在导航条、图文解说等，都需要用居中（本文说的居中为垂直和水平都是居中的），在此整理出四种居中的方法，提供参考。 f话不多说，先上基本代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
html+css(笔记)定位
m0_67518243的博客
03-21 176
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。如果祖先有定位（无论是相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。让固定定位的盒子margin-left:版心宽度的一半距离，就可以让固定的盒子贴着版心右对齐。固定定位的盒子left:50%,走到浏览器可视区（也可以看做版心）的一半位置。子绝父相原因（子级是绝对定位，父级要用相对定位）不是绝对的但是比较多的应用。绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。固定定位也可以看做一种绝对定位。
【css】盒子上下左右居中的方法汇总
永远热爱前端
03-01 282
css 盒子上下左右居中的方法汇总
轻松认识浮动的六大规则的细节处理
weixin_43342105的博客
05-31 378
文章目录浮动规则一三种元素的层叠关系浮动规则二浮动规则三前三浮动规则的几种情形情形一情形二情形三情形四情形五 浮动规则一 规则一的是浮动的基本的规则，脱离标准流是一个重要的注意点。 三种元素的层叠关系 上面的3个盒子描叙的是三种元素的层叠关系，其中标准元素是不存在层叠的，它在最下面，定位元素会层叠到标准元素的上面，定位元素之间可以z-index，前提是必须是定位元素，不能是static元素，浮动元素的层叠在标准元素之后，层叠关系具体如下： 标准元素->浮动元素->定位元素 浮动规则二 具体情
css系列之浮动博客源码
09-10
css系列之浮动博客源码。 1.使用winara解压文件。 2.使用visual studio code工具打开，即可运行。
css进阶笔记，通俗易懂
04-22
css进阶笔记，通俗易懂，后期会持续更新
盒模型浮动布局
dkxy35121的博客
12-17 118
一、css盒模型 1.常用标签的使用 　　前往本页面中个某个位置：Top =>锚点 　　1.设置锚点 　　2.设置前往锚点的a跳转 　　 设置前往锚点的a跳转：#锚点名 　　　　<div id="t_123">123</div> 　　　　<a href="#page_top"Top</a> 　　　　<a href...
css - inline-block 盒子下的内容文字错位问题
08-05 609
参考资料： 　　“display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法； 正文： 　　场景：两个 div 排在一行上，各有固定宽高，其中有一个 div 内部有文字和排版等其他填充；两个 div 杂七杂八的宽度加起来远小于 father 宽度。 　　拿到设计图之后，略想了一下，这不 so easy 么...
CSS - 浮动
chuangshangbeidong的博客
03-29 372
学习笔记：记录 CSS 的学习
html盒子在始终在左侧,DIV+CSS网页盒子错位的原因是什么？
weixin_39805355的博客
06-02 816
常常我们会遇到我们要设置在一行显示的布局，却因为种种原因造成了错位，看到结果是在一行的最后一个盒子布局错位掉下去了(如下图)。错位一 3错位掉落与1和2下方错位二 网页布局错位示范造成DIV CSS网页布局错位的原因大概有两种情况，一种是宽度计算错误，一种是IE BUG造成，特别是IE6和IE7。接下来我们挨着为大家介绍错位与解决错位方法。一、宽度计算错误宽度计算错误，假如总宽度为500px，有3...
CSS盒子模式<css定位>2
weixin_30544657的博客
10-30 104
3．实例强化对定位属性的理解 （1）无定位设置，对象遵循HTML定位规则。一般是子级不会跑出父级外边去（子级没有使用负边界情况），子级一般是靠在父级左上角的，父级放在最下层。 （4）相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，可以看到文本环绕在它右边，但是后来用相对定位方法把绿色小盒子重定位到...
CSS实现一个雨滴滑落效果
云加速
05-28 1240
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
css让padding、border不占据宽度
于忠会的博客
05-29 438
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
最新发布
lbcbjtlhmjq的博客
05-30 720
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
【JS实战案例汇总——不定时更新版】
微木
05-30 334
练习JS的实用案例，倒计时算法、定时轮播图
CSS学习笔记之高级教程（四）
wz_1992的博客
05-30 732
19、CSS 用户界面 19.1 CSS 调整大小：resize resize 属性规定元素是否应（以及如何）被用户调整大小。 resize: horizontal;水平方向可改变大小 resize: vertical;垂直方向可改变大小 resize: both;水平+垂直方向都可改变大小 20、CSS 变量：var()函数 var() 函数用于插入 CSS 变量的值。 var() 函数的语法如下：var(name, value)，变量名称必须以两个破折号（--）开头，且区分大小写！ 20.1 C
Css进阶练习(实现抽屉网样式布局)
05-26
抽屉网是一种常见的网页布局，可以用 CSS 实现。下面是一个简单的实现方法： HTML 结构： ```html <!-- 网页主体内容 --> <!-- 抽屉内容 --> ``` CSS 样式： ```css .container { display: flex; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

传说中的懿痕

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

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

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

打赏作者

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

抵扣说明：

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

余额充值