CSS margin与容器的尺寸

                                     margin与容器的尺寸

设置块级元素的margin可以实现留白

利用margin影响可视尺寸的特性可以实现左侧定宽的自适应布局

没有设定width/height的普通block水平元素其可视尺寸会由margin影响

可视尺寸表示实际占尺寸，占据尺寸表示包括margin之后的尺寸

一侧定宽自适应布局

mark。。

margin会修改占据尺寸

margin可以修改可视尺寸

1. margin与可视尺寸：

   1.1 适用于没有设定width/height的普通block水平元素

   1.2 只适用于水平方向尺寸，改变左右margin，容器的宽度会发生变化；改变上下margin,容器的高不会发生变化，但位置会发生变化。

2. margin与占据尺寸

   2.1 block/inline-block水平元素均适用

   2.2 与有没有设定width/height值无关

   2.3 适用于水平方向和垂直方向

   
   

margin只改变水平方向的盒模型

元素尺寸：可视尺寸clientWidth(标准) 占据尺寸-outerWidth(YY)

margin-left:-50px;

能让面积突破父元素区域。

width固定，就无法用margin改变尺寸了。

只有width不设置或者width:100%; 才能合理用margin布局

margin与占据尺寸

侧定宽的自适应布局

margin与可视尺寸

margin 适用于没有设定宽高的block元素  只适用于水平方向尺寸