1.margin与可视化尺寸
适用于没有设定固定的width和height普通block元素,
float,absolute,/fixed inline元素,table cell元素则不可以
经过设置margin值可以改变div的大小
应用
实现图片文字并排列的时候文字对齐
**同理当父元素容器没有设置width和height,利用图片的margin
可以改变容器的大小,用来元素的留白!其他元素则看似不行不会撑开元素其实是margin与父元素进行了重叠**如果父元素设置了宽高,则无法撑开元素,margin过大的话就会溢出!
margin的百分比
普通元素的margin百分比都是通过容器的margin来计算的与父容器的width无关!
绝对定位的margin百分比
margin重叠
解决方法
加入inline元素可以是空格 
一一对应来看:
非块状格式化:设置overflow:hidden
设置padding
设置border
设置inline元素在中间比如空元素
设置height(干掉margin-bottom)
1.外层padding
2.透明边框border:1pxsolidtransparent;
3.绝对定位postion:absolute根据定义他们不产生margin重叠:
4.外层DIVoverflow:hidden;
5.内层DIV 加float:left;display:inline;
6.外层DIV有时会用到zoom:1;
margin重叠的计算方式
margin auto
margin实现垂直居中
此时宽度不会自动填充,水平方向不会居中
margin 失效问题
- 1.内联元素(不包括img等替换元素)水平方向有效垂直方向无效
- 2.margin重叠导致无效
- 3.display:table-cell 和 table-row时无效果
- 但是例外的是替换元素比如img,即使设置了table-cell也有效果
- button为inline-block模式
- 4.相邻元素为float时margin无效,那是因为margin不够大;
- 5.当有内联元素和img(等替换元素在一起)img要和文本(内联元素)对齐所以有所限制!