margin

margin_第1张图片
1实线 可视尺寸 clientWidth(标准)
2虚线 占据尺寸 outerWidth(jquery)

margin 影响可视尺寸
条件
1、适用于没有设定width/height的普通block水平元素
float元素absolute/fixed元素 inline元素 table-cell元素排除
2、只适用于水平方向
案例
一侧定宽的自适应布局

百分比margin的计算规则
普通元素的百分比margin都是相对于容器的宽度计算

绝对定位元素的百分比margin相对于第一个定位祖先元素的宽度计算的。
案例
自适应矩形

margin 重叠通常特性
父子 margin重叠的条件
一、margin-top
1父元素非块状格式化上下文元素
2父元素没有border-top
3父元素没有padding-top
4父元素与第一个子元素之间没有inline元素分隔
二、margin-bottom
1父元素非块状格式化上下文元素
2父元素没有border-bottom
3父元素没有padding-bottom
4父元素与最后一个子元素之间没有inline元素分隔
5父元素没有height ,min-height,max-height限制

空block元素发生margin重叠的条件
1元素没有border设置
2元没有padding设置
3里面没有inline元素设置
4没有height ,min-height

margin-auto
如果一侧定值一侧为auto ,auto为剩余空间的大小,如果两侧均为auto 则平分剩余空间

为什么给图片设置margin:0 auto 不水平居中
因为图片是inline-block元素 ,不会填充 剩余空间

解决 加display:block

writling-mode垂直居中
writling-mode:vertical-lr 更改流为垂直方向。
margin_第2张图片
margin_第3张图片
margin无效情况
1内联元素垂直方向margin无效
2margin重叠
3display: table-cell/display:table-row无效
margin_第4张图片
在谷歌浏览器下botton永远是是inline-block元素

你可能感兴趣的:(html,css,margin)