前提是对display:block元素

1 margin对没有width属性的元素，能影响其宽度，对于有width的则不起作用；
高度方面不受影响
此特性可用来排版
2 margin 与百分比
普通的没有带absolute fixed 的元素 ，无论横竖 百分比，都相对横向数值
但是带有absolute,fixed 的，则相对第一个有相对定位的百分数值
3 margin 重叠问题
　　margin-top 重叠的条件
　　元素条件：1）父元素与第一个子元素或者最后一个元素 2）相邻的兄弟元素 3） 空的block元素
　　其它条件：margin top
　　父元素与第一个子元素之间
　　a 父元素为没有overflow的非块状格式化上下文元素
　　b 父元素没有border-top:1px solid green等，只有border-top:1px并没有效果
　　c 父元素没有padding-top
　　d 父元素与第一个子元素之间没有inline元素分隔
　　margin bottom
　　父元素与第一个子元素之间
　　a 父元素为没有overflow的非块状格式化上下文元素
　　b 父元素没有border-bottom:1px solid green等，只有border-bottom:1px并没有效果
　　c 父元素没有padding-bottom
　　d 父元素与第一个子元素之间没有inline元素分隔
　　e 父元素没有 height ，min-height , max-height限制
通过上述方法，能干掉margin-top，margin-bottom

空的block元素 条件：
　　元素没有border
　　元素没有padding
　　元素没有inline元素
　　元素没有height min-height

margin :auto的理解

对于没有设置width ，假如设置width能占满空间的block元素，设置水平的margin 的auto值起作用

对于position:absolute top:0 right:0 bottom:0 left:0 的设置width height margin：auto起作用（能利用来垂直水平的居中）

理解css margin的更多相关文章

  1. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  2. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

  3. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  4. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  5. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  6. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  7. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  8. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  9. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

随机推荐

  1. 清理系统 cmd

    echo 正在清除系统垃圾文件,请稍等......del /f /s /q %systemdrive%*.tmpdel /f /s /q %systemdrive%*._mpdel /f /s /q ...

  2. 【JSOI2007】麻将 bzoj 1028

    Description 麻 将是中国传统的娱乐工具之一.麻将牌的牌可以分为字牌(共有东.南.西.北.中.发.白七种)和序数牌(分为条子.饼子.万子三种花色,每种花色各有一到 九的九种牌),每种牌各四张 ...

  3. 一个简单的servlet的demo

    javaweb  的应用我们需要参考javaee  api 查找servlet接口 javax.servletInterface Servlet All Known Subinterfaces: Ht ...

  4. ecplise 常用快捷键

    /* * alt+/ * * A:main * main+alt+/ * B:输出语句 * syso+alt+/ * C:提示作用 * * */ /* * 常用快捷键 * 1.格式化:ctrl+shi ...

  5. 使用jvisualvm.exe 的Btrace插件介绍/使用教程

    一.背景        在生产环境中可能经常遇到各种问题,定位问题需要获取程序运行时的数据信息,如方法参数.返回值.全局变量.堆栈信息等.为了获取这些数据信息,我们可以 通过改写代码,增加日志信息的打 ...

  6. MariaDB 多主一从 搭建测试

    背景: 目前MySQL依然只支持一个Slave从一个Master复制数据,虽然也可以做到一主多备(M->S),双主复制(M<->M)等架构,但是局限性依然很大.由于项目的要求,需要各 ...

  7. 此地址使用了一个通常用于网络浏览以外的端口。出于安全原因，Firefox 取消了该请求

    FirFox打开80以外的端口,会弹出以下提示: “此地址使用了一个通常用于网络浏览以外的端口.出于安全原因,Firefox 取消了该请求.”. 解决方法如下: 在Firefox地址栏输入about: ...

  8. objccn-图片格式

    图像格式存储:位图和矢量图像.位图把值存在阵列中,矢量格式存储的是绘图图像的指令.还有混合格式PostScript能够排布字母甚至位图,使其成为了一个非常灵活的方式.衍生格式pdf. xcdoe6已经 ...

  9. ASP.NET知识总结（2.对比Get和Post提交方式）

    2.对比Get和Post提交方式 get:<1>在地址栏中通过?key1=value1&key2=value2...的方式传值 <2>传递的数据用户可以直接在url中看 ...

  10. PHP中删除数组空值的方法

    array_filter函数的功能是利用回调函数来对数组进行过滤,如果没有回调函数,那么默认就是删除数组中值为false的项目. 例如 $entry = array(                0 ...