前提是对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. C#夯实基础系列之字符串

    string作为我们在编程当中用的最多的数据类型,同时又由于它的特殊性,怎么强调它的重要性都不为过,理解string的一些类型和存储机制,有助于我们写出正确且高效的代码. 一.string类型 1.s ...

  2. Ext 修改Store初始化加载完后修改record属性。

    /** * Created by huangbaidong on 2016/9/18. * 产品组件通用Store, */ Ext.define('app.component.ebs.itemdata ...

  3. 精简的网站reset 和 css通用样式库

    参考链接:http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/ reset.css body{ line-height:1.4; c ...

  4. Outlook~设置

    outlook2013 中帐户设置无法直接更改邮件投递位置到本地的.pst文件,“更改文件夹”选项已经删除. Exchange 传递到 Outlook 数据文件 (.pst) 升级到 Outlook ...

  5. SQLServer2008设置 开启远程连接

    SQLServer2008设置 开启远程连接 前一段时间,学生分组做项目,使用SVN工具,要求功能使用存储过程,在数据库这块出现这么一个问题: A学生在他的数据库上添加了存储过程,需要其他的B,C,D ...

  6. C++ 基础知识复习(二)

    异常处理部分: 23. 在c++的异常处理中,除了提供异常的关键字语法支持以外,其标准库中支持异常处理而封装异常类也很好的为应用程序中异常处理判断使用提供直接的帮助.C++语言中针对异常处理提供了三个 ...

  7. jsf初学解决GlassFish Server 无法启动

    由于公司需要用JSF开发项目.公司同事都不熟悉,本人C# 转JSf.开发工具 netbeans GlassFish. 遇到GlassFish 非常 纠结的问题.搞了好一段时间,, 装好GlassFis ...

  8. 【leetcode】Find Minimum in Rotated Sorted Array I&&II

    题目概述: Suppose a sorted array is rotated at some pivot unknown to you beforehand.(i.e., 0 1 2 4 5 6 7 ...

  9. 第二十九篇:使用SOUI的SMCListView控件

    列表控件是客户端应用最常用的控件之一.列表控件通常只负责显示数据,最多通知一下APP列表行的选中状态变化. 现在的UI经常要求程序猿在列表控件里不光显示内容,还要能和用户交互,显示动画等等,传统的列表 ...

  10. android 无限循环的viewpager

    思路 例如存在 A -B -C 需要在viewpager滑动时无限循环 1.我们可以设计 C' A B C A'  C'与C相同,A'与A相同 2.滑动到A'时,则index回到1 3.滑动到C'时, ...