浮动和margin-left负值的有趣现象

最新推荐文章于 2022-07-20 12:27:04 发布
最新推荐文章于 2022-07-20 12:27:04 发布
阅读量302 收藏
点赞数
原文链接：http://www.cnblogs.com/amiezhang/p/8276581.html
版权

我将第二个浮动的元素的margin-left的值不断减小：

被设置元素左移，后面的元素跟着动

当被设置元素的右边界超过了前面元素的左边界，后面边的元素被前面的元素挡在外面了

转载于:https://www.cnblogs.com/amiezhang/p/8276581.html

anshaobiao6449
关注
【CSS面试题】Margin负值的问题
Milk~每天分享一点点，技术进步一点点
07-16 596
对margin 的 top left right bottom设置负值，有何效果？ margin-top和margin-left负值，元素向上、向左移动 margin-right负值，右侧元素左移，自身不受影响 例子：比如 a 元素和 b元素是左右的关系，a元素的右边是b元素，给a元素的margin-right设置-10px;自身不受影响，a元素里面的内容不受影响，但b元素会向左移动10px 3.如果margin-bottom负值，下方元素上移，自身不受影响 例子：比如 a 元素和 b元素是上下
如何理解margin重叠问题
weixin_47450807的博客
04-08 3438
一、写在前面 根据w3c规范，两个margin产生折叠的必备条件： 1、必须处于常规文档流（不能是浮动和定位）的块级盒子，并且处于同一个BFC当中。 2、没有线盒，没有空隙，没有padding和border将他们分割。 3、都处于垂直方向相邻的外边距。 二、例子 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
浮动元素margin负值的应用
weixin_30632899的博客
02-07 310
上次写到三列布局,其中提到浮动元素margin为负值时的应用,今天就来总结一下,它的用处何在. 首先,先来探究一下,当一个元素的margin为负值时,都会有哪些影响. 其一,对自身的影响. 当元素不存在width属性或则width:auto的时候,负值margin会增加元素的宽度.(注意:这仅仅是在元素不存在width属性或则width属性默认的时候,如果有宽度设置,margin-left和...
CSS - 浮动布局（float）
程序员阿甘的博客
07-20 1万+
标准布局、标准流、标准布局的不足、浮动、浮动流、浮动元素特点、脱标、父容器高度塌陷、清除浮动、clear、额外标签法、::after伪元素法、浮动元素margin负值原理、双飞翼布局、圣杯布局、三栏式布局......
Margin 负值的问题-对 margin 的top、left、right、bottom 设置负值，有何效果？
m0_49456900的博客
03-01 793
margin-top 和 margin-left 为负值，元素会向上、向左移动； margin-right 为负值，右侧元素会左移，但自身不会受影响； margin-bottom 为负值，下方元素上移，但自身不会受影响。
深入理解浮动元素与margin负值用法及三栏布局
刘运召的博客
01-14 3744
浮动元素与margin负值使用 正常两个浮动元素 首先给元素设置浮动以后，元素就会变成块级元素 <div class="content"> <div class="middle">123456789123456789123456789123456789</div> <div class="left">111</div...
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 当前有如下情况.
CSS中的边界margin的取值为负值说明
09-25
例如，将"box1"的`margin-left`设置为正值（如105px），而将"box2"的`margin-left`设置为负值（如-420px）。这样，"box2"会向左移动，穿透"box1"原本的位置，从而实现了两个元素的位置互换。 需要注意的是，负...
CSS笔记——常见布局技巧margin负值，文字围绕，行内块，强化三角
Yomuki的博客
11-28 176
一、margin负值使用 解决边框1+1=2的问题。 div { display: inline-block; float: left; width: 30px; height: 200px; border: 1px solid red; margin-left: -1px; } div:nth-child(1)
CSS常见布局技巧——margin负值运用、文字围绕浮动元素 、三角强化
qq_43623147的博客
12-13 306
一、margin负值运用 1. 消除两个盒子外边框重合1+1=2的效果。 解决方法：让每个盒子margin往左侧移动-1px，正好压住相邻盒子边框。 2. 解决鼠标经过盒子需要显示外边框时，右侧边框被右边盒子压住显示不出来问题 解决方法：鼠标经过盒子时，如果盒子没有定位，给盒子添加相对定位；如果盒子有定位，则加z-index，提高盒子层级。 ul li { position: relative; float: left; list-style: none;
CSS布局--使用margin-left负值布局
Micircle的前端笔记
07-20 1899
CSS布局--使用margin-left负值布局 如下图所示，在一个容器中整齐排列N行、N列宽度固定的元素，并且元素与容器左右没有间距： 一种方法是，设置li的margin-right值，然后使用js遍历li为第(n+1)%4==0的li添加样式margin-right:0； 但在这里我采用另一种方法，为每个li设置margin-left值，然后为ul设置margin
[css] margin-left 为负值的应用
weixin_36210698的博客
05-09 3344
margin-left 为负值的应用 按钮组中双边框隐藏 要点：按钮设置为浮动，按钮组中非第一个按钮设置为向左浮动边框的距离 <style type="text/css"> .btn { padding: 6px 12px; border: 1px solid #ccc; display: inline-block; vertical-align: middle; ...
margin为负值产生的影响和常见布局应用
沉着前进
08-19 1万+
所以今天整理些margin：负数会对哪些元素或者定位产生影响、margin为负值在web布局中的应用做下总结。（不能说最全，我已经尽力收集整理） 一、margin为负值产生的影响 对于自身的影响 当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度，看下下面的例子 class="container"> class="box1">
浮动和清浮动，内外边距和margin的坑
等，你的到来。
10-11 4255
浮动：使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。 可以往left，也可以往right 一般建议用ul.f>li.s编写，（ unorder list无序标签，需搭配li作为子标签）, 用div也可以，但是有些浮动效果做不到。 特性： 1.浮动的元素排在同一排 2.浮动的元素内容撑开高度 3.浮动的元素支持所有的CSS样式 4.浮动的元素脱离文档
css 理解margin负值对浮动元素的影响
Bigfishseasugar
07-16 1281
在学习三栏布局的时候，很多地方都有用到margin的负值。但《css 权威指南》却没有提到有关浮动元素使用margin负值的内容，索性自己整理总结一下。若无特殊说明，本文的盒模型都是基于content-box模式下的，并且只针对宽度进行讨论。 涉及的概念有点多，理解原理就好懂了，希望能对你有所帮助。 预备知识 盒模型 一般来说，盒模型包括 margin、border、padding、content 四个部分，而《css权威指南》为了方便解释一些概念，它加上了内边界和外边界，分别指代上图内外..
网页弹出遮罩层时页面向右偏移出现抖动问题
Buddha_ITXiong的博客
04-01 1677
网页中经常会用到遮罩层的情况，在出现遮罩层的时候页面会整体向右偏移一段距离，因此会出现页面抖动，用户体验不好。 首先我们要思考为什么会出现这种现象： 1：写遮罩层的时候我们一般会给它设置fixed定位 2：为了不让遮罩层下面的内容可滚动，我们一般会把body设置为overflow:hidden; 当遮罩层出现的时候，会把浏览器默认的17px宽度的滚动条给隐藏掉，这时候页面就会向右偏移17p...
负margin实现流体布局：经典应用与DOM结构保持
作者提到了一个经典的应用场景：利用margin-left的负值结合浮动来实现不改变DOM结构的流体布局。在提供的代码示例中，`.container`元素设置了固定的宽度（600px），并使用`margin-left`和`margin-right`的auto值使其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值