margin-bottom(marginbottom0)

深入理解margin属性

1 .盒子尺寸:border box。从boder 往里算原生api 是offsetWidth

2 .盒子内部尺寸：padding box。从padding往里算。原生dom api是clientWidth

3 .盒子外部尺寸:margin box。从margin往里算.没有原生的dom api

1 .如果元素有宽度，并且是块级元素.此时添加margin:元素的宽度不会发生改变

2 .父元素宽度不变，如果元素是块级，并且宽度没有给，那么margin的宽度会发生变化

3 .元素margin在垂直方向上无法改变自身的内部尺寸，往往需要父元素作为载体

1 .图片右侧定位的时候，只需要把图片的左浮动改成右浮动

1 .上面这样处理的结果就是最右边一个会有20px的空格,虽然有其他不同的解决方法，但是这里用margin的写法

2 .给ui加20px的宽度，对冲掉最后一个的20px的宽度.

3 .但是他这里说的都是float下的问题，不是不推荐使用float布局了么。。

1 .只要元素是块状元素，无论有没有设置宽高，无论是水平还是垂直方向，即使发生了margin合并，margin对外部尺寸都实实在在的发生了变化

2 .内联元素，完全无影响，不论是垂直方向，还是左右方向，不论是外部还是内部尺寸。但是加了margin还是会有间距显示的

1 .使用padding-bottom实现留白有兼容性问题，因为不同的浏览器实现滚动的逻辑是不一样的，chrome以content box为基准算是否触发滚动条，ie和firefox则是超过padding box尺寸触发滚动条。

2 .所以这种情况下直接使用margin-bottom，完全没有兼容问题

1 .两个的宽度以最多的一个为基准，算高的。但是这个css也太狰狞了吧。flex直接实现，天然支持

2 .实现原理:margin-bottom：-9999px先给外部尺寸在垂直方向减小9999px。padding-bottom：9999px又增加了元素高度，抵消了刚才的，对布局没有影响，但是带来了多的的9999px的可使用背景色.多了这个多的可使用背景色，于是父元素overflow:hidden；消除了多余的颜色。这谁想出来的。。最关键的是这种方法兼容性超级强，ie6,ie7

1 .和padding一样，也是相对于元素的宽度计算的.

2 .还是不要使用百分比算了，随便一调一个属性就是一个新的表现。完全解释不了啊.一定要走宽阔的大路

1 .必须知道的知识

2 .填充规则1：如果一侧是固定值，一侧是auto，则auto为剩余空间大小

可以看到，没有margin-left的时候，虽然有了margin-right。但是是不生效的，因为流式布局先从左边走

3 .填充规则2 ：两侧都是auto，平分固定值。这不是规则1 的特殊情况么。。

1 .首先发现设置margin:auto;左右方向会自动居中，但是上下是无效的.容器定高，容器定高为啥不行呢。

2 .甚至发现如果单独给他添加margin-top：还会发生边距折叠，给父元素加上了

3 .margin实现元素居中

1 .display:inline计算值的非替换元素的垂直margin是无效的,虽然规范提到有渲染，但是浏览器表现的无迹可寻

可以看到，有margin值，但是效果表现是无效的

2 .表格中的tr，td元素或者设置display:table-cell,table-row的margin都是无效的

3 .绝对定位的非定位方位的margin值无效

4 .高度确定父元素下子元素的margin-bottom。或者宽度确定的父元素下子元素的matgin-right失效。

本质是，如果想要margin改变自己的位置，那么必须是当前元素定位一样的方向才可以，否则就只会影响到其他兄弟元素，所以看图下一个的元素是明确可以看到被影响到了

5 .鞭长莫及的margin无效

6 .内联特性导致的margin无效

确实会在只剩一个屁股的时候不在上移动，不论负值多么变大，但是这个是父元素没有任何属性，加了一个absolute之后就不是这样了，没有这个限制了

1 .内联替换元素,垂直margin是有效的，比如照片是一定是可以的，并且不会发生margin合并

2 .如果计算值是table-caption,table或者inline-table则没有此问题

1 .block元素，可以使用四个方向的margin值

2 .inline元素，只可以使用左右方向的margin值

3 .inline-block匀速，使用上下方向的值看起来是无效的，其实是和vertial-align的值有关系

1 .两个block元素重叠时，后面元素可以覆盖前面元素的背景。但是无法覆盖内容，也就是内容是一起显示的

2 .两个inline,两个inline-block，inline和inline-block元素重叠时，后面元素会覆盖前面元素

可以看到后面的覆盖了前面的

3 .inline元素和block元素，inline覆盖block的背景，内容的话，是后面的覆盖前面的内容

4 .最后，在浏览器不居中，浏览器将页面布局分为内容和背景，内容的层叠始终高于背景，block元素分为内容和背景，而inline元素或inline-block元素，本身就是内容

css中 *margin-bottom:20px!important;解释下这里的*及!important的作用

*是区分浏览器兼容性的，写在一条样式里可以区分IE6、IE7和别的浏览器的不同，如：

.bor { border:20px solid green; *border:20px solid red ; padding: 30px;width : 300px;}

绿色边框的样式写在前面，这时候所有浏览器都是绿色边框，红色边框的样式用了*，IE6和IE7能识别，其他浏览器不能识别，所以覆盖了前面的绿色边框，所以IE6和IE7显示红色边框，其他浏览器显示绿色边框

!important的作用是提高指定样式规则的应用优先权。写在定义的最后面，例如：box{color:red !important;} 最重要的一点是：IE 6.0一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别 比如：

.bor{ border:20px solid red !important; border:20px solid green;padding: 30px;width : 300px;}

因为ie6不认识!important，后面的绿色边框样式就会覆盖前面那句红色边框样式，而如ie7、火狐等浏览器认识!important，知道这一条样式的优先级要比后面那句高，就只会执行这句红色边框的样式。

CCS里，margin-bottom无效是什么情况？

因为网页时从上向下排，所以margin-bottom是指的距下面的元素的距离，而这里字和黑框是父子div关系，是没有作用的。

要想要把字显示在最下面，给字加

position:absolute;

bottom:0;

给黑框加： position: relative;

为什么设置浮动后 margin-bottom失效

style

.logo?{

height:?50px;

width:?50px;

background-color:?red;

float:?left;

margin-bottom:?10px;

}

/style

div?class="logo"/div

div?style="clear:both;"/div

div?class="logo"?style="float:none;width:100px;"/div

给你修改后的代码，自己感受一下吧，margin-bottom不是失效了，而是你div用了浮动，你必须用clear：both清除浮动之后才能正常

margin-bottom:不起作用,怎么办呀，急！！

因为你这个标签外面又有附标签，所以说有时候是不起作用的，你直接把这个改成padding-bottom就可以了。

学习，是指通过阅读、听讲、思考、研究、实践等途径获得知识和技能的过程。学习分为狭义与广义两种:

狭义:通过阅读、听讲、研究、观察、理解、探索、实验、实践等手段获得知识或技能的过程，是一种使个体可以得到持续变化(知识和技能，方法与过程，情感与价值的改善和升华)的行为方式。例如通过学校教育获得知识的过程。

广义:是人在生活过程中，通过获得经验而产生的行为或行为潜能的相对持久为方式。

社会上总会出现一种很奇怪的现象，一些人嘴上埋怨着老板对他不好，工资待遇太低什么的，却忽略了自己本身就是懒懒散散，毫无价值。

自古以来，人们就会说着“因果循环”，这话真不假，你种什么因，就会得到什么果。这就是不好好学习酿成的后果，那么学习有什么重要性呢？

物以类聚人以群分，什么样水平的人，就会处在什么样的环境中。更会渐渐明白自己是什么样的能力。了解自己的能力，交到同水平的朋友，自己个人能力越高，自然朋友质量也越高。

在大多数情况下，学习越好，自身修养也会随着其提升。同样都是有钱人，暴发户摆弄钱财只会让人觉得俗，而真正有知识的人，气质就会很不一样。

高端大气的公司以及产品是万万离不了知识的，只有在知识上不输给别人，才可以在别的地方不输别人。

孩子的教育要从小抓起，家长什么样孩子很大几率会变成什么样。只有将自己的水平提升，才会教育出更好的孩子。而不是一个目光短浅的人。

因为有文化的父母会给孩子带去更多的在成长方面的的帮助，而如果孩子有一个有文化的父母，通常会在未来的道路上，生活得更好，更顺畅。

学习是非常的重要，学习的好坏最终决定朋友的质量、自身修养和后代教育等方面，所以平时在学习中要努力。

margin bottom是什么意思

名称：margin-bottom

分类：外边距

简述：设置对象下方外边距属性

概述：margin-bottom是设置对象下方外边距属性的样式(Style)。