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

谈谈对css属性margin的理解

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

本文主要包含css,margin等相关知识,佚名 希望在学习及工作中可以帮助到您
1.margin是什么?
margin用于控制元素周围空间的间隔,从视觉上达到空间间隔的目的。相对于前一个元素有相应的外边距。用于隔开元素与元素的。始终是透明的。

2.外边距的合并问题(参见w3school)---前提:元素出于文档流中
2.1 两个垂直外边距相遇时,在垂直方向上会发生外边距的叠加,最终的外边距等于二者的较大值;
2.2 当一个元素(没有边框和内边距)包含另外一个元素时,将在垂直方向上发生叠加;
2.3 当一个元素为空元素时(且没有外边距和),自身会发生外边距的叠加

3.margin在块元素和行内元素中的区别
margin在块元素中会影响块元素的上下左右,可以随意控制;而在内联元素中则只会对水平方向上的元素起到左右。
备注:可置换的内联元素,例如img、input、textarea、select、button、label等,可以控制其width、height,变现为display:inline-block。所以margin也可以实现上下左右的控制。

4.跟margin有关的常见bug
4.1 IE6 双边距问题
问题描述:当父元素中包含的第一个元素为浮动元素,会出现双边距的问题;
解决办法: display:inline
4.2 iIE6浮动元素3px间隔
问题描述:一个浮动元素,另外一个为非浮动元素,则非浮动元素与浮动元素之间存在3px的间隔

5.padding与margin的区别
padding位于边框的内部,具有背景的颜色,主要用于隔开内容与元素;而margin位于边框的外部,不具有背景颜色,主要用于区分元素与元素,起到隔离的作用。

6.margin的负边距问题(待续)
使用margin的负边距可以解决很多问题。

参考资料
http://www.hicss.net/do-not-tell-me-you-understand-margin/
http://www.planabc.net/2007/03/18/css_attribute_margin/

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

  • html、css基础注意点(前端必看篇)
  • 关于CSS absolute与relative不得不说的话
  • 响应式设计你需要了解的知识点
  • CSS3的几个标签速记(推荐)
  • CSS样式表与格式布局详解
  • 那些你所不知的CSS ::before 和::after 伪元素用法
  • css前端知识点总结(必看篇)
  • CSS3实用方法总结(推荐)
  • 分享15个最佳的HTML/CSS设计和开发框架
  • Bootstrap3.0学习笔记之CSS相关补充

相关文章

  • 2018-08-23UX专家如何做设计评审?来看这份深度总结!
  • 2018-08-23功能大于形式!揭秘UI设计中“性冷淡”风格的真相
  • 2017-08-06Web前端开发者必知的9个实用CSS属性
  • 2018-08-23熟知用户行为的这7个层面,你的设计才会走进人心
  • 2017-08-06超大字体排版的40个网页设计欣赏
  • 2018-08-23简而不减:极简主义设计的 KISS 原则与案例
  • 2017-08-06响应式WEB设计学习(3)—如何改善移动设备网页的性能
  • 2018-08-23学会这4大Sketch 高阶技巧,让你的效率猛翻10倍!
  • 2018-08-23复盘实战案例:引导用户开通唯品金融五部曲
  • 2017-08-06使IE6正常显示PNG-24格式图片的两种方法

文章分类

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

最近更新的内容

    • 9款很棒的网页绘制图表JavaScript框架脚本
    • firefox浏览器中播放背景音乐的终极解决方案(chrome多浏览器兼容)
    • 新手建站入门教程③ 别名(CNAME)记录和URL转发
    • 自适应网页设计是怎么做到的的相关知识点总结
    • 从零开始设计一款APP之Android设计规范篇
    • 语音交互设计中,如何创建角色画像?
    • 学会自然语言设计法,提前触摸人工智能设计
    • 平面作品太单调?三招提升设计层次感!
    • css浮动(float,clear)通俗讲解经验分享
    • 入门好文!电商首屏页的基础知识科普+技巧总结

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

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