Css问题 margin float 文档流 背景图底部充满

今天来整理一下做网页遇到的问题吧

1.插入背景图片并使图片居于div底部充满整个行。

属性：

background-position：背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select。

语法取值有两种：长度和关键字。

长度：设置水平方向数值（x轴）和垂直方向数值（y轴）如：background-position：10px 20px;

关键字：top left （左上）top center（上居中）等，第二个值不设默认为居中。

background-size：定义背景图片大小。

属性值1.length ：第一个值是宽度，第二个值是高度，如果只设置第一个值，那么第二个值会自动转换为 “auto”

2.percentage：以父元素的百分比来设置图片的宽度和高度，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”。

3.cover ：背景图扩展完全覆盖区域（不等比）

4.contain：背景图扩展完全覆盖区域（等比）

2.margin的问题

（1）margin：auto auto； 为什么不能垂直居中

不支持上下 auto 因为页面中 难以确定的是高度

（2）margin和padding的区别

margin：需要在border外侧添加空白时。需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

padding：需要在border内侧添加空白。需要等于两者之和。如15px + 20px的padding，将得到35px的空白。

（3）对内联元素上下边距没效果。

3.float的问题

（1）对后面div左漂流到上方div上面时，上方div内文字会环绕漂流的div

与文档流有关，详见4

4.文档流

是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，是将元素从普通的布局排版中拿走，块元素定位的时候当做漂流元素不存在。定位中的absolute和浮动float会脱离文档流。

部分无视：float脱离文档流，其他盒子会无视这个元素，但盒子内的内联元素会让出漂流的位置，而环绕它存在。

完全无视：absolute脱离文档流，其他盒子包括盒子内内联元素会完全无视定位的元素。

Margin和 float不能同时用  百度了一下说可以......还没发现为什么，再试试下次解释。