CSS布局之float + 负margin的使用
发布日期:2022-02-22 16:04:48 浏览次数:47 分类:技术文章

本文共 848 字,大约阅读时间需要 2 分钟。

负margin

  • 设置元素margin-left / margin-top 属性为负值时,元素会按照设置的方向移动相应的距离。
  • 设置元素margin-right / margin-bottom属性为负值时,元素本身不动,后面的其他元素会往该元素的方向移动相应的距离,并且覆盖在该元素上面。

圣杯布局

HTML结构:

center

思路:

  1. container设置左右内边距(值等于left,right的宽度);
  2. 三个子元素都设置float:left;
  3. left,right占据container左右内边距的宽度;
  4. center设置宽度为100%,占据container内容的宽度;

实现步骤:

在这里插入图片描述

实现效果:
在这里插入图片描述

right 为什么设置margin-right:-200px(自身宽度)后会移动到右上角(上图步骤3)?

在这里插入图片描述

margin-right:-200px; 相当于是自身宽度从右向左不断地减少,当为0的瞬间左边框会浮动到上一行的末尾。

如果设置margin-left为负值会怎样呢?

在这里插入图片描述

margin-left:-200px; 相当于是自身宽度从左往右不断地减少,当为0的瞬间右边框会浮动到上一行的末尾。出现上图所示的情况。

双飞翼布局

HTML结构:

思路:

  1. wrapper设置左右内边距用于放置left,right
  2. wrapper,left,right,三者设置左浮动

实现步骤:

在这里插入图片描述

注意:margin值为百分比时,相对父元素的宽度

实现效果:

在这里插入图片描述

总结

  1. float:left ; margin-left: - 自身宽度; 会使自身右边框与上一浮动元素右边框重叠(向左移动自身宽度);

  2. float:left ; margin-right: - 自身宽度; 会使自身左边框与上一浮动元素右边框重叠,下一浮动元素会向该元素方向移动相应距离。

  3. margin值为百分比时,相对父元素的宽度。

【参考】:

转载地址:https://blog.csdn.net/Conradine_Lian/article/details/108085398 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:CSS拾遗篇之浮动元素の影响
下一篇:ES6知识总结 — 上篇(思维导图版)

发表评论

最新留言

网站不错 人气很旺了 加油
[***.192.178.218]2024年03月12日 07时06分31秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

pytorch tensor 初始化_PyTorch简明笔记[1]-Tensor的初始化和基本操作 2019-04-21
linux正向连接shell_[经验] Linux 怎么连接 Xshell? 2019-04-21
nc 监听数据_nc命令使用解析大全 2019-04-21
简述tcp协议三报文握手过程_TCP协议中的三次握手和四次挥手(图解) 2019-04-21
手机键鼠映射软件_吃鸡,我最专业!---盖世小鸡键鼠吃鸡套装评测 2019-04-21
easyui datagrid 中怎么选中所有页面的数据_学会这5个Excel中常用技巧,可以准时下班去摆摊了... 2019-04-21
maskrcnn还可以加网络吗_绿茶加蜂蜜的功效,绿茶可以加蜂蜜吗? 2019-04-21
marquee滚动起始位置_巧用喵影关键帧制作滚动水印,让视频小偷无可盗 2019-04-21
css 旋转45_CSS教程——第14期 2019-04-21
rust火箭基地主楼开启方法_Rust 为什么能成为 Stack Overflow 最受欢迎的语言? 2019-04-21
全年营业额怎么计算_门店盈亏平衡计算及案例分析 | 商品管理 2019-04-21
卡尔曼_卡尔曼估计两步法 2019-04-21
区域转换为二值图像_Matlab图像处理系列教程(一) 2019-04-21
字符串是单一字符的无序组合吗_Python学习笔记(八)组合数据类型 2019-04-21
从当前元素继续寻找_云漫圈 | 寻找无序数组的第k大元素 2019-04-21
控制是否展示_现场展示板管理不在于看,而在于管! 2019-04-21
pe下找不到ssd硬盘_【进入pe系统后认不到硬盘解决方法】进入pe系统看不到硬盘_pe系统不认硬盘... 2019-04-21
windows 禁用ipv6服务_在 Windows 7 中禁用IPv6协议/IPv6隧道 2019-04-21
pip 设置超时时间_Python pip使用超时问题解决方案 2019-04-21
python定义一个_Python,包括定义一个类 2019-04-21