CSS布局之float + 负margin的使用

最新推荐文章于 2021-07-12 22:41:15 发布
最新推荐文章于 2021-07-12 22:41:15 发布
阅读量520 收藏
点赞数
分类专栏： CSS 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Conradine_Lian/article/details/108085398
版权
负margin设置元素margin-left / margin-top 属性为负值时，元素会按照设置的方向移动相应的距离。设置元素margin-right / margin-bottom属性为负值时，元素本身不动，后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。圣杯布局HTML结构：<div class="wrapper clearfix"> <div class="left"></div> <div class="cente
摘要由CSDN通过智能技术生成
负margin
  • 设置元素margin-left / margin-top 属性为负值时，元素会按照设置的方向移动相应的距离。
  • 设置元素margin-right / margin-bottom属性为负值时，元素本身不动，后面的其他元素会往该元素的方向移动相应的距离，并且覆盖在该元素上面。
圣杯布局

HTML结构：

<div class="wrapper clearfix">
	<div class="left"></div>
	<div class
最低0.47元/天 解锁文章
Conradine_Lian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css-布局-负margin 使用
King Saj
04-11 64
上图效果: 按照我以前的思路:这种情况我会选择使用定位解决上面的需求. 现在想换一种思路,完成上面的需求. 使用float + (负)margin 实现 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink..
css如何利用负margin技术实现平均布局
01-19
我们平常会利用float布局来解决IE浏览器CSS的兼容性问题，比如淘宝，就是用float布局来实现的。 我们会在淘宝页面会看到下图这样一种布局。 这种图片均匀分布的布局我们叫平均布局，那这种布局又是怎么实现的呢？ ...
css布局之负margin妙用及其他实现
09-27
主要为大家详细介绍了css布局之负margin妙用及其他实现的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS中的float和margin的混合使用示例代码
11-20
在最近的学习中，在GitHub上找了一些布局练习，我发现了我自己对布局超级不熟悉（很难受）。 在以前的学习中，感觉使用CSS就记住各个属性的功能就OK了，但是呢？真的很打脸。不说了，太伤心了，进入正题吧！ 最近我使用float和margin布局，加深了我对这两个一起使用的理解。（新生可以看一下，大神请忽略） float属性 float: left | right | none | inherit 当然最常用的还是前面两个：向左浮动和向右浮动 浮动最主要的特点：脱标。 脱离标准流，处于更加高级的层面，影响父元素和后面元素的布局，这里就不具体介绍了。 margin属性 这里主要讲margin-
深入理解浮动元素与margin负值用法及三栏布局
刘运召的博客
01-14 3638
浮动元素与margin负值使用 正常两个浮动元素 首先给元素设置浮动以后，元素就会变成块级元素 <div class="content"> <div class="middle">123456789123456789123456789123456789</div> <div class="left">111</div...
float浮动元素IE6/7下margin-bottom失效解决方案
刚刚好
09-14 467
float浮动元素IE6/7下margin-bottom失效： 解决方案： 在浮动元素后面添加： &lt;div class="clearfix"&gt;&lt;/div&gt; 给类名设置样式： .clearfix{ clear:both; height:0; font-size: 1px; line-height: 0px;} 即可！...
CSS属性margin负值与float效果浅谈
qq_38384536的博客
06-19 1099
暂时只能了解这么多，以后可能会补充。
float的margin负值叠加效果
qq_34756106的博客
05-26 420
首先以下面这个例子做分析 如何用float和BFC配合圣杯布局 要实现的效果为三栏布局，它的特点：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定。（如果是3个宽度固定大小无需中间自适应的div则直接都用float即可，同时html结构是left,main,right的顺序）如下所示 代码如下 <!DOCTYPE html> <html> <head> <style> .wrapper{ ov
CSS - 浮动元素的margin-left和margin-right
伏城之外的博客
07-12 1万+
marigin-left和margin-right理解 margin-left：“盒子”元素的左外边距，当属性值增大，元素表现为向右移动，该属性值减少，元素表现为向左移动。 margin-right："盒子"元素的右外边距，当属性值增大，元素表现为向左移动，该属性值减少，元素表现为向右移动。 float:left和float:right理解 float:left 元素变为浮动元素，并向左浮动 float:right 元素变为浮动元素，并向右浮动 单纯的float:left 当前有如下情况.
div+css布局资料.zip
最新发布
11-08
《深入理解Div+CSS布局：构建高效网页设计》 在网页设计领域，Div+CSS布局是一种广泛应用的技术，它能够帮助开发者实现清晰、灵活且高效的页面布局。本资料将全面解析Div+CSS布局的核心概念和实战技巧，旨在提升...
百度新闻页面布局html+css
02-28
3. **新闻列表的实现**：在CSS中，可以使用`display`属性来控制元素的布局。对于新闻列表，通常会用`display: flex`或`display: grid`创建灵活的容器，使新闻条目能按行或列排列。通过`justify-content`和`align-...
解析HTML中的float和margin的疑惑
走在奋斗的路上
07-31 6224
对于HTMl中的一些小疑惑，在这里进行解析一下。 一、div的理解 DIV是基于行，就是一个div占据一行，不会让别的元素，和自己同行。 span不是基于行的，就是一个span哪里有空哪里专，不会单独占用一行。 二、Float理解 Float:Css样式的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局
[Web前端技术教学]网页布局-float及负margin技术的再认识-1
格码老师教编程
12-06 509
[Web前端技术教学]网页布局-浮动技术的再认识-1
浮动与负margin解释
Haley6的博客
04-18 173
浮动与负margin解释 参考https://blog.csdn.net/Liu_yunzhao/article/details/103976547： 代码 代码一 两个左浮动元素 <style type="text/css"> .content { width: 600px; height: 300px; background-color: green; margin: 100px auto; co
[Web前端技术教学]网页布局-float及负margin技术的再认识-2
格码老师教编程
12-06 690
Demo-1:利用margin及文本居中,使整个版面居中 无标题文档 <!-- *{ margin: 0px; padding: 0px; } .container{ width:80%; text-align: center; margin:0 auto; } .content { float: left; height: 500px; width: 100%; b
关于负margin的一些理解
weixin_38103152的博客
05-24 302
1、绝对居中{position:absolute; left:50%; top:50%; margin-left:-盒子宽度的一半; margin-top:-盒子高度的一半}2、子元素设置元素的margin-top:-负值时，父级元素不设置高度时=子元素高度-子元素的margin-top的绝对值解决方案：将父元素的padding-botton:1px;...
负margin几种用法的总结
前端岚枫
02-22 941
1.负margin在Tab选项卡中的应用       2.负margin负位移技术应用：       3.利用负margin制作自适应左右布局：这类布局效果（左边一个固定图片，右边为内容），负margin能够替代float浮动布局，进行左右布局规划，并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮，这个是做
我知道你不知道的负Margin
农村的我的专栏
09-19 964
原文转自：http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/ 现如今，负margin技术的应用可谓越来越广，任一个大型站点惊鸿一瞥之下都会有其身影所在。个人认为负margin技术是学习css路上必不可缺少的课题之一，许多高级应用及疑难杂症修复都可以使用负margin技术进行实现。 负margin理论： 在说明什么是
margin为负值产生的影响和常见布局应用
热门推荐
沉着前进
08-19 1万+
所以今天整理些margin：负数会对哪些元素或者定位产生影响、margin为负值在web布局中的应用做下总结。（不能说最全，我已经尽力收集整理） 一、margin为负值产生的影响 对于自身的影响 当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度，看下下面的例子 class="container"> class="box1">
使用DIV+CSS实现整体布局：盒子模型详解
"该资源主要介绍了使用DIV+CSS进行网页布局的基本概念和实践，强调了遵循W3C标准的重要性。内容涵盖了盒子模型、常见的HTML标签、CSS样式设置以及W3C标准的构成部分。" 在网页设计中，`盒子模型`是理解网页布局的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值