前提是对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. ubuntu16.04 NVIDIA显卡驱动安装

    安装环境:Ubuntu16.04 1.打开终端,先删除旧的驱动: sudo apt-get purge nvidia* 2禁用自带的 nouveau nvidia驱动 (important!) 创建一 ...

  2. 【HNOI2008】Cards BZOJ 1004

    Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目 前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案.进一步,小春要求染出Sr张 ...

  3. 调用webservice 总结

    最近做一个项目,由于是在别人框架里开发app,导致了很多限制,其中一个就是不能直接引用webservice . 我们都知道,调用webserivice 最简单的方法就是在 "引用" ...

  4. loadrunner11录制无法打开IE浏览器

    安装loadrunner折腾了很久,后来发现是ghost系统问题.重装了系统,再重装了自己需要用的工具~ 接着学习loadrunner,一边看帮助文档一遍学.可是为嘛按照帮助文档的步骤来,就是会碰到一 ...

  5. C#动态创建和动态使用程序集、类、方法、字段等

    C#动态创建和动态使用程序集.类.方法.字段等 分类:技术交流 (3204)  (3)   首先需要知道动态创建这些类型是使用的一些什么技术呢?其实只要相关动态加载程序集呀,类呀,都是使用反射,那么动 ...

  6. LVS集群之NAT模式实现

    LVS集群之NAT模式实现 一.集群的种类 集群系统主要分为 1.HA:高可用集群,又叫双机热备.   (a)原理      2台机器A,B,正常是A提供服务,B待命闲置,当A宕机或服务宕掉,会切换至 ...

  7. (转)EClipse插件推荐

    http://www.importnew.com/4707.html 来自非营利性Eclipse基金会的Eclipse IDE以其插件生态系统著称.Eclipse市场拥有海量插件可供下载,你可以通过插 ...

  8. 关于 iOS 加密的一些详谈

    iOS 加密算法有那么几种,如 md5,sha1,AES,base64 和 rsa 等. 1. md5: MD5即Message-Digest Algorithm 5(信息-摘要算法5),用于确保信息 ...

  9. Socket通信原理探讨(C++为例)

    一.网络中进程之间如何通信? 本地的进程间通信(IPC)有很多种方式,但可以总结为下面4类: 1.消息传递(管道.FIFO.消息队列) 2.同步(互斥量.条件变量.读写锁.文件和写记录锁.信号量) 3 ...

  10. 为何Redis要比Memcached好用(转)

    转载链接:http://blog.csdn.net/renfufei/article/details/40598889 GitHub版本地址: https://github.com/cncounter ...