CSS布局之float + 负margin的使用
发布日期:2022-02-22 16:04:48
浏览次数:47
分类:技术文章
本文共 848 字,大约阅读时间需要 2 分钟。
负margin
- 设置元素margin-left / margin-top 属性为负值时,元素会按照设置的方向移动相应的距离。
- 设置元素margin-right / margin-bottom属性为负值时,元素本身不动,后面的其他元素会往该元素的方向移动相应的距离,并且覆盖在该元素上面。
圣杯布局
HTML结构:
center
思路:
- container设置左右内边距(值等于left,right的宽度);
- 三个子元素都设置float:left;
- left,right占据container左右内边距的宽度;
- center设置宽度为100%,占据container内容的宽度;
实现步骤:
实现效果:margin-right:-200px; 相当于是自身宽度从右向左不断地减少,当为0的瞬间左边框会浮动到上一行的末尾。right 为什么设置margin-right:-200px(自身宽度)后会移动到右上角(上图步骤3)?
margin-left:-200px; 相当于是自身宽度从左往右不断地减少,当为0的瞬间右边框会浮动到上一行的末尾。出现上图所示的情况。如果设置margin-left为负值会怎样呢?
双飞翼布局
HTML结构:
思路:
- wrapper设置左右内边距用于放置left,right
- wrapper,left,right,三者设置左浮动
实现步骤:
注意:margin值为百分比时,相对父元素的宽度
实现效果:
总结
-
float:left ; margin-left: - 自身宽度; 会使自身右边框与上一浮动元素右边框重叠(向左移动自身宽度);
-
float:left ; margin-right: - 自身宽度; 会使自身左边框与上一浮动元素右边框重叠,下一浮动元素会向该元素方向移动相应距离。
-
margin值为百分比时,相对父元素的宽度。
【参考】:
转载地址:https://blog.csdn.net/Conradine_Lian/article/details/108085398 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2024年03月12日 07时06分31秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
linux正向连接shell_[经验] Linux 怎么连接 Xshell?
2019-04-21
nc 监听数据_nc命令使用解析大全
2019-04-21
简述tcp协议三报文握手过程_TCP协议中的三次握手和四次挥手(图解)
2019-04-21
手机键鼠映射软件_吃鸡,我最专业!---盖世小鸡键鼠吃鸡套装评测
2019-04-21
maskrcnn还可以加网络吗_绿茶加蜂蜜的功效,绿茶可以加蜂蜜吗?
2019-04-21
marquee滚动起始位置_巧用喵影关键帧制作滚动水印,让视频小偷无可盗
2019-04-21
css 旋转45_CSS教程——第14期
2019-04-21
全年营业额怎么计算_门店盈亏平衡计算及案例分析 | 商品管理
2019-04-21
卡尔曼_卡尔曼估计两步法
2019-04-21
区域转换为二值图像_Matlab图像处理系列教程(一)
2019-04-21
字符串是单一字符的无序组合吗_Python学习笔记(八)组合数据类型
2019-04-21
从当前元素继续寻找_云漫圈 | 寻找无序数组的第k大元素
2019-04-21
控制是否展示_现场展示板管理不在于看,而在于管!
2019-04-21
pip 设置超时时间_Python pip使用超时问题解决方案
2019-04-21
python定义一个_Python,包括定义一个类
2019-04-21