2024年9月margin的值（css样式margin）

　　⑴margin的值（css样式margin

　　⑵css样式margin

　　⑶margin外边距（标签与标签之间的距离margin的四个方向margin-top上边距margin-right右边距margin-bottom下边距margin-left左边距margin的复合样式一个值四个方向的margin值都一样两个值第一个值代表上边和下边的margin值，第二个值代表右边与左边的margin值三个值第一个值代表上边的margin值，第二值代表右边与左边的margin值，第三个值代表下边的margin值四个值第一个值代表上边的margin值，第二个值代表右边的margin值，第三个值代表下边的margin值，第四个值代表左边的margin值margin的问题margin的问题、margin的传递（只会上下传递不会左右传递子级会把自己的margin-top与margin-bottom传递给父级解决办法：给父级加上一个边框（其中一个办法、margin上下叠压（只有上下会叠压，左右不会叠压上边元素的margin-bottom与下边元素的margin-top叠压在了一起（他会取大的值解决办法只给上边的元素设置margin-bottom或只给下边的元素设置margin-top就可以了auto自动margin-left：auto；元素居右显示margin-right：auto；元素居左显示元素水平居中显示margin：auto；

　　⑷css?reset以及哪些元素有默认margin?padding值

　　⑸常用元素的padding、margin值如下：、body水平垂直方向默认有px的margin值；、p,ul,ol,dl标签垂直方向默认有px的margin值，且这几个标签之间px间距不重复；、dd标签在水平方向默认有px的margin值；、ul,ol标签水平方向默认有px的padding值(ie/下无)。

　　⑹marginpx里的代表啥

　　⑺水平居中。所代表的的意思是水平居中，其中的margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right，再因为上下边界为，左右则根据宽度自适应相同值，所以表达的意思是水平居中。margin的默认值为，并且margin支持负值，而且margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

　　⑻padding和margin的数值设置方式

　　⑼padding也是复合属性padding:px上右下左都是px??顺序是按照上右下左的顺序来设置的（padding:pxpxpxpx;??分开设置：padding-top:px;??????????padding-right:px;??????????padding-bottom:px;??????????padding-left:px;?下面的会把上面的属性值覆盖：padding:px;??????????????????????????padding-top:px;??padding:pxpxpx：（?上px?左右px下px???上下px左右px：（?padding:pxpx;上右下左的外边距都是px：margin:px上边距左右下：（?margin:pxpxpx;上下左右：（?margin:pxpx;?也可以分开写：margin-top:px;?????????????margin-right:px;?????????????margin-bottom:px;?margin可以给负值，会超出边界：?margin-left:-px;下面的会把上面相同属性的值覆盖：margin:px;??????????????????????????????margin-left:-px;

　　⑽经济学中的边际margin是什么概念

　　⑾边际（margin，就是指边缘、额外、追加之意。它被人们用来揭示两个具有因果或相关关系的经济变量之间的动态函数关系。当某一经济函数中的自变量发生一个微小单位的数量变化时，因变量因此而发生的相应的数量变化值，被称为该因变量的边际值。

　　⑿经济学家把所研究的各种变量分为自变量和因变量，自变量是最初变动的量，因变量是由于自变量变动而引起变动的量。边际分析就是分析自变量变动与因变量变动的关系。自变量变动所引起的因变量变动量称为边际量。在考虑一个决策时，重要的是考虑边际量，因此，要运用边际分析法。

　　⒀边际产量（Marginalproduct

　　⒁是指增加一单位生产要素所增加的产量，边际成本是指增加一单位产量所增加的总成本。假设商品x的生产要素有两种：A和B，当B保持不变，增加一单位的生产要素A，可以带来产量增加，（比如A是劳力，B是机器设备此时的边际成本是市场上一单位生产要素A的价格。

　　⒂假如增加A带来的是产量是增加，则相应的边际成本是/生产要素A的价格。

　　⒃边际产量当增加一个单位产量所增加的收入（单位产量售价高于边际成本时，是合算的；反之，就是不合算的。所以，任何增加一个单位产量的收入不能低于边际成本，否则必然会出现亏损；只要增加一个产量的收入能高于边际成本，即使低于总的平均单位成本，也会增加利润或减少亏损。

　　⒄因此计算边际成本对制订产品决策具有重要的作用。微观经济学理论认为，当产量增至边际成本等于边际收入时，为企业获得其最大利润的产量。

　　⒅CSS理解之margin

　　⒆margin重叠通常特性：

　　⒇margin重叠三种情况：

　　⒈demo:.相邻兄弟元素margin重叠

　　⒉兄弟元素的上下margin发生了重叠

　　⒊父级和第一个/最后一个子元素

　　⒋inline元素（内联元素，像图片、文字这样的东西块状格式化上下文元素（BFC元素

　　⒌同样可以利用父子margin重叠条件来去除margin重叠：

　　⒍去掉margin-bottom重叠与上面类似。

　　⒎空的block元素margin重叠：

　　⒏空的block元素发生margin重叠，也需要一些条件限制：

　　⒐去掉空的block元素的margin重叠也是利用上面的条件：

　　⒑margin重叠的计算规则：

　　⒒负负最负值（取绝对值大的：

　　⒓首先理解marginatuo的作用机制，先看一些事实例子：

　　⒔元素有时候，就算没有设置width或height，也会自动填充外部容器

　　⒕以上两个例子是比较常见的，没有设置宽高也会自动填充所在容器。

　　⒖若刚才的两个例子，如果设置了width或heigth，自动填充特性就会被覆盖。

　　⒗总之一句话，auto就是用来分配。

　　⒘通过以上的例子，很多事情就很好理解了，比方说：

　　⒙为什么图片设置了margin：auto不水平居中？

　　⒚如上图，设置了marginauto，图片为什么还是不居中呢？因为图片是inline水平的，它占据的空间并没有撑满整个容器，如果没有设置宽度值。所以它就不满足marginauto用来填充剩余空间的条件，因为他根本就没有剩余空间。要想让它居中也很简单：

　　⒛为什么明明容器定高，子元素也定高了，marginauto无法垂直居中?

　　上图水平方向剧中了，但是垂直方向不剧中，父级元素高度有了，子元素高度也有了，为什么还是不垂直居中呢？

　　因为他不满足占满整个容器这个条件，想一下，如果，没有为.son设置高度值，它之前满足占满整个容器这个条件吗？很显然不满足，也就没有剩余空间，所以设置height:pxmarginauto不会垂直居中。

　　还需要注意一点：用margin:auto来实现居中，它计算后的值必须是正直，比如说你的父容器宽度px，子元素宽度px，这时设置margin：auto它是不居中的。

　　那么如何实现垂直方向上的剧中呢，方法很多不止一种：

　　writing-mode与垂直居中：

　　更改流为垂直居中之后，内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器，所以宽度的水平居中就失效了。

　　绝对定位元素实现垂直居中：

　　子元素设置了top:;right:;bottom:;left:;之后，没有设置宽高，absolute元素也自动填满了容器。

　　margin负值下的两端对齐（主要利用了margin可以改变元素尺寸这一特性：正直变小，负值变大

　　由于《divclass=“ul“》《/div》没有设置宽度，所以设置了margin-right:-px;后，改变了它的宽度，增大了px，变为px。这时我们再把li的宽度设置为计算好的.px，就可以实现没有间隙的两端对齐。主要利用了margin负值增加它的空间。

　　可以看出它的垂直方向是没有margin的，是无效的。

　　第二种常见的无效是margin重叠，比如你设置了margin-top当发现没有效果，这就是margin重叠带来的影响。

　　display:table-cell与margin

　　可以看出设置的margin是无效的。

　　但是对替换元素设置table-cell是可以发生作用的，但平时我们不会给替换元素设置table-cell，这是没有任何意义的，所以记住这点就行。

　　position：absolute与margin，绝对定位元素非定位方向的margin值“无效”，定位方向的margin值是有效的。

　　深入理解margin属性

　　盒子尺寸:borderbox。从boder往里算原生api是offsetWidth.盒子内部尺寸：paddingbox。从padding往里算。原生domapi是clientWidth.盒子外部尺寸:marginbox。从margin往里算.没有原生的domapi.如果元素有宽度，并且是块级元素.此时添加margin:元素的宽度不会发生改变.父元素宽度不变，如果元素是块级，并且宽度没有给，那么margin的宽度会发生变化.元素margin在垂直方向上无法改变自身的内部尺寸，往往需要父元素作为载体.图片右侧定位的时候，只需要把图片的左浮动改成右浮动.上面这样处理的结果就是最右边一个会有px的空格,虽然有其他不同的解决方法，但是这里用margin的写法.给ui加px的宽度，对冲掉最后一个的px的宽度..但是他这里说的都是float下的问题，不是不推荐使用float布局了么。。.只要元素是块状元素，无论有没有设置宽高，无论是水平还是垂直方向，即使发生了margin合并，margin对外部尺寸都实实在在的发生了变化.内联元素，完全无影响，不论是垂直方向，还是左右方向，不论是外部还是内部尺寸。但是加了margin还是会有间距显示的.使用padding-bottom实现留白有兼容性问题，因为不同的浏览器实现滚动的逻辑是不一样的，chrome以contentbox为基准算是否触发滚动条，ie和firefox则是超过paddingbox尺寸触发滚动条。.所以这种情况下直接使用margin-bottom，完全没有兼容问题.两个的宽度以最多的一个为基准，算高的。但是这个css也太狰狞了吧。flex直接实现，天然支持.实现原理:margin-bottom：-px先给外部尺寸在垂直方向减小px。padding-bottom：px又增加了元素高度，抵消了刚才的，对布局没有影响，但是带来了多的的px的可使用背景色.多了这个多的可使用背景色，于是父元素overflow:hidden；消除了多余的颜色。这谁想出来的。。最关键的是这种方法兼容性超级强，ie,ie.和padding一样，也是相对于元素的宽度计算的..还是不要使用百分比算了，随便一调一个属性就是一个新的表现。完全解释不了啊.一定要走宽阔的大路.必须知道的知识.填充规则：如果一侧是固定值，一侧是auto，则auto为剩余空间大小可以看到，没有margin-left的时候，虽然有了margin-right。但是是不生效的，因为流式布局先从左边走.填充规则：两侧都是auto，平分固定值。这不是规则的特殊情况么。。.首先发现设置margin:auto;左右方向会自动居中，但是上下是无效的.容器定高，容器定高为啥不行呢。.甚至发现如果单独给他添加margin-top：还会发生边距折叠，给父元素加上了.margin实现元素居中.display:inline计算值的非替换元素的垂直margin是无效的,虽然规范提到有渲染，但是浏览器表现的无迹可寻可以看到，有margin值，但是效果表现是无效的.表格中的tr，td元素或者设置display:table-cell,table-row的margin都是无效的.绝对定位的非定位方位的margin值无效.高度确定父元素下子元素的margin-bottom。或者宽度确定的父元素下子元素的matgin-right失效。本质是，如果想要margin改变自己的位置，那么必须是当前元素定位一样的方向才可以，否则就只会影响到其他兄弟元素，所以看图下一个的元素是明确可以看到被影响到了.鞭长莫及的margin无效.内联特性导致的margin无效确实会在只剩一个屁股的时候不在上移动，不论负值多么变大，但是这个是父元素没有任何属性，加了一个absolute之后就不是这样了，没有这个限制了.内联替换元素,垂直margin是有效的，比如照片是一定是可以的，并且不会发生margin合并.如果计算值是table-caption,table或者inline-table则没有此问题.block元素，可以使用四个方向的margin值.inline元素，只可以使用左右方向的margin值.inline-block匀速，使用上下方向的值看起来是无效的，其实是和vertial-align的值有关系.两个block元素重叠时，后面元素可以覆盖前面元素的背景。但是无法覆盖内容，也就是内容是一起显示的.两个inline,两个inline-block，inline和inline-block元素重叠时，后面元素会覆盖前面元素可以看到后面的覆盖了前面的.inline元素和block元素，inline覆盖block的背景，内容的话，是后面的覆盖前面的内容.最后，在浏览器不居中，浏览器将页面布局分为内容和背景，内容的层叠始终高于背景，block元素分为内容和背景，而inline元素或inline-block元素，本身就是内容

　　margin的默认值是多少什么时候需要加上margin：px；

　　margin只是一个CSS的属性，可以说本身不存在默认值的！但你可以认为默认值是，这种说法不受官方支持的！说一个不恰当的例子吧，你能说体重的默认值是吗？只能说一个成年男子的默认体重是，而不是体重默认为。这样，你就可以理解了。body是视浏览器的不同而有不同的margin默认值。也就是说在IE中body默认margin是px,这就是为什么body在不设置margin时，总有内补白的，宽度是px左右。而table除用padding之外还有一个特别的属性是cellpadding，除了margin还有一个cellspacing属性一样，但两个属性可以同时设置。其实是没有冲突的，一般的table的cellpadding与cellspacing都是px,如果你设置了这个属性后margin变为了，这时你可以说table的margin默认是，但事实上在CSS格式中是没有cellpadding与cellspacing这两个属性的。它们用其他和来代替了，比如对一个table进行margin约束时，如果设置了margin为的话，内白也是的。这时你可以说margin的默认值不为，或者干脆说table不太支持margin。事实上，不同的浏览器对table的确有不支持margin的现象。但对于div等，其实内补白也是不为的。但不会说margin的默认值为多少的。也就是说不同的HTML区块元素有不同的margin默认值的。显然不说margin有默认值，只有说是区块元素有默认的margin值。如果使用了标签提供的样式时，不需要对margin进行定义的，也就是说这是一个隐式的定义。如果所使用的标签内补白不合你的要求时，可以对也是必须对margin进行一个显式的定义。所以使用与否对你的浏览器解析时不会浪费空间代价的。也就是说不管是显式或是隐式的定义，浏览器都是要按要求找出了margin的值而进行重现的！所以，你不必太关心什么时候使用。如果你觉得麻烦，可以对每一个区块元素进行margin的合适赋值的！至于什么时间使用margin:，那就更好答了，只有要求不要内补白时才有可能要加的！因为《img》等元的margin默认值是的，这时可以不加！怕出现意外时，只管加上就可以了！

　　html中,css盒子模型语法:margin:值,这代表盒子模型是什么