• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 谈谈CSS的边距合并之我的理解

谈谈CSS的边距合并之我的理解

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含边距合并,CSS等相关知识,佚名 希望在学习及工作中可以帮助到您
今天通过和一些师弟的交流,发现他们对外边距合并不是很理解。

其实浅析CSS的外边距合并的话,是很容易明白是怎么一回事儿的。但是如果想要深入了解margin这个神奇的属性,那可得费一番功夫了。

我是一个菜鸟,在这里当然不会解释得太复杂,在这里我只是想谈谈我对外边距合并的理解。

其实要理解清楚什么是外边距合并,最简单的方法就是自己动手试试。我认为,理解外边距合并的关键就在于理解这句话:“只要接触,就合并”。

什么叫“只要接触,就合并”呢?其实理解起来就是:当两个元素的外边距相接触,它们就融合了。什么时候就能接触呢?就是当两个元素都没有边框属性和内边距属性。

还是听不懂?那就不是我所力所能及的范畴了。因为你没有理解什么是盒模型了。

其实CSS的外边距合并就是这么一点点东西。我拿出来讲是因为,看了好多人的代码,都喜欢把margin和padding混在一起。不管用的是padding还是margin,只要最终显示效果和自己想象的一致,他们觉得就达到目的了。有时候用margin,遇到了边距合并却不知道怎么回事,或者说不知道怎么解决,然后就想出各种法子“制造”自己想要的效果(例如加多一个空元素撑开留白)。但是其实我想说,这样使用margin和padding,根本就不是W3C制定padding和margin时候的本意。

好吧,小小地吐槽了一下,也不想说多什么东西,因为别人写的比我更深入更细致。这里给几篇文章的地址,有助于大家加深对margin和padding使用的理解。

http://www.jb51.net/w3school/css/css_margin_collapsing.htm
http://www.jb51.net/css/37633.html
http://www.jb51.net/css/55475.html

您可能想查找下面的文章:

  • 谈谈CSS的边距合并之我的理解

相关文章

  • 2017-08-06IE6下css设置容器高度的BUG不能小于某个值
  • 2017-08-06一款基于css3的列表toggle特效实例教程
  • 2017-08-06div vertical-align不起作用解决办法
  • 2017-08-06纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
  • 2017-08-06css3新增颜色表示方式分享
  • 2017-08-06基于css3仿造window7的开始菜单
  • 2017-08-06CSS的样式合并与模块化提高代码执行效率
  • 2017-08-06cellpadding=0 cellspacing=0的css替代写法
  • 2017-08-06CSS 字体单位em简介
  • 2017-08-06运用比较纯的CSS打造很Web2.0的按钮

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css3制作彩色边线3d立体按钮的示例(css3按钮)
    • 利用边框border属性做小符号
    • CSS伪类
    • CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)
    • css实现不再让内容把td撑开的常用解决方法
    • 让IE6/IE7/IE8支持CSS3属性的8种方法介绍
    • 浏览器如何判断css优先级
    • CSS3简单实现照片墙
    • 强制显示、隐藏(IE\Mozilla)浏览器的滚动条实现代码
    • CSS3感应鼠标的背景闪烁和图片缩放动画效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有