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

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

负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知识总结 — 上篇(思维导图版)

发表评论

最新留言

路过按个爪印,很不错,赞一个!
[***.188.9.157]2022年09月30日 07时12分03秒

关于作者

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

最新文章