margin的负值的理解

weixin_29052371 2017-10-12 04:56:12

给第一个div设置了左浮动，第二个没有设置，那个2为什么会在下面??

...全文

284 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

当作看不见 2017-10-13

打赏
举报

div 是块级元素,独占一行就这么简单,设置float 的话,,会强制把块级元素变为inline-block .第一个浮动了,所以成了行内元素,第二个还是块级元素,so..........

一念_天涯 2017-10-13

打赏
举报

第2个div实际还是在第一个div的那个位置，但是文本能识别浮动元素，所以会下来，当你第2个div 宽度大于第一个时（至少是文字的宽度）文字才会显示在第一行

FeeLinear_iiiiiiiiii 2017-10-13

打赏
举报

恭喜你，踢馆没人理哈哈哈

skyblue_bin 2017-10-13

打赏
举报

引用 2 楼 qq_29594393 的回复:

div 是块级元素,独占一行就这么简单,设置float 的话,,会强制把块级元素变为inline-block .第一个浮动了,所以成了行内元素,第二个还是块级元素,so..........

正解！！！

第1章　（X）HTML与CSS核心基础　　1.1　HTML与XHTML　　　1.1.1　追根溯源　　　1.1.2　 DOCTYPE（文档类型）的含义与选择　　　1.1.3　XHTML与HTML的重要区别　　1.2　（X）HTML与CSS　　　1.2.1　CSS标准简介　　　1.2.2　在HTML中引入CSS的方法　　1.3　基本CSS选择器　　　1.3.1　标记选择器　　　1.3.2　类别选择器　　　1.3.3　ID选择器　　1.4　复合选择器　　　1.4.1　“交集”选择器　　　1.4.2　“并集”选择器　　　1.4.3　后代选择器　　1.5　CSS的继承特性　　　 1.5.1　继承关系　　　1.5.2　CSS继承的运用　　1.6　CSS的层叠特性　 1.7　本章小结　第2章　 “CSS禅意花园”作品鉴赏　　2.1　“CSS禅意花园”简介　　2.2　郊野——两列布局　　2.3　像素画——三列布局　　 2.4　百合池塘——三列布局变体　　2.5　郁金香——多列布局　　2.6　日与夜——包含圆角的设计　　2.7　Si6—— 包含倾斜的设计　　2.8　清茶时光——装饰性设计　　2.9　爱之空气——流体布局　　2.10　谷香——食品主题设计　　 2.11　城市——建筑主题设计　　2.12　“卡通版”禅意花园——特色效果　　2.13　收音机——特色效果　　2.14　杀手风格——特色效果　　2.15　海底世界——特色效果　　2.16　博物馆——特色设计　　2.17　剧院效果——特色效果　　2.18　本章小结　第3章　深入理解盒子模型　3.1　盒子的内部结构　　3.2　边框（border）　　　3.2.1　实验1——border-style 　　　3.2.2　属性值的简写形式　　　3.2.3　实验2——属性的缩写形式　　　3.2.4　实验3——边框与背景　　3.3　内边距（padding）　　3.4　外边距（margin）　　3.5　盒子之间的关系　　　3.5.1　HTML与DOM　　　3.5.2　标准文档流　　　3.5.3　 div 标记与 span 标记　　3.6　盒子在标准流中的定位原则　　　3.6.1　实验1——行内元素之间的水平margin　　　3.6.2　实验 2——块级元素之间的竖直margin　　　3.6.3　实验3——嵌套盒子之间的margin　　　3.6.4　实验4——将 margin设置为负值　　3.7　CSS中的几何题　　3.8　本章小结　第4章　盒子的浮动与定位　4.1　盒子的浮动　　　4.1.1　准备代码　　　4.1.2　实验1——设置第1个浮动的div　　　4.1.3　实验2——设置第2个浮动的div　　　4.1.4　实验3——设置第3个浮动的div　　　4.1.5　实验4——改变浮动的方向　　　4.1.6　实验5——再次改变浮动的方向　　　4.1.7　实验6——全部向左浮动　　　4.1.8　实验7——使用clear属性清除浮动的影响　　　4.1.9　实验8——扩展盒子的高度　　4.2　盒子的定位　　　4.2.1　static（静态定位）　　　 4.2.2　relative（相对定位）　　　4.2.3　absolute（绝对定位）　　　4.2.4　fixed（固定定位）　　 4.3　z-index空间位置　　4.4　盒子的display属性　　4.5　本章小结　第5章　文字与图像　 …… 第 6章　链接与导航　第7章　竖直排列的导航菜单　第8章　水平导航菜单　第9章　下拉菜单　第10章　表格也精彩　第 11章　圆角设计　第12章　应用Spry制作高级网页组件　第13章　固定宽度布局剖析与制作　第14章　变宽度网页布局剖析与制作　第15章　“CSS禅意花园”作品研究　第16章　综合案例研究　第17章　从学习到创作　附录　CSS英文小字典

在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。和左方的 margin 负值使该元素向上和左方向移动。下和右方的 margin 负值使该元素下方、右方的元素被拉向该元素。 margin 属性可以应用于几乎所有的元素，除了表格显示类型...

在学习三栏布局的时候，很多地方都有用到margin的负值。但《css 权威指南》却没有提到有关浮动元素使用margin负值的内容，索性自己整理总结一下。若无特殊说明，本文的盒模型都是基于content-box模式下的，并且只针对宽度进行讨论。涉及的概念有点多，理解原理就好懂了，希望能对你有所帮助。预备知识盒模型一般来说，盒模型包括 margin、border、padding、content 四个部分，而《css权威指南》为了方便解释一些概念，它加上了内边界和外边界，分别指代上图内外..

margin负值的介绍以及一些简单的演示

深入理解CSS中的margin负值

HTML5

39,084

社区成员

5,548

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章