二margin用法

标准文档流：margin:调整兄弟之间的距离padding:调整父子标签之间的位置，注意盒模型的计算坑1：margin垂直方向塌陷问题：当设置第一个盒子为margin-bottom:50px;第二个盒子为margin-top:100px;那么小的margin会掉到大的magin中，这就是margin塌陷水平方向上不会出现塌陷问题。

非标准文档流（脱标）：

标准流下的标签,兄弟之间使用margin调整位置，父子之间使用padding调整子标签的位置（小心盒模型的计算）脱标的元素，margin和padding可以任意使用浮动的盒子：margin:0auto;不起任何作用使用margin：0auto;注意点：

1.使用margin:0auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align:center;

2.只有标准流下的盒子才能使用margin:0auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0auto;不能用了

3.margin：0auto;居中盒子。而不是居中文本，文字水平居中使用text-align:center;

例子一：标准文档流：

12345632333435漂洋过海来看你363738394041看就看就看42大幅度发434445ViewCode例子二：脱标情况下：

1234562728293031132333423536373839ViewCode

三浮动float

1浮动

（1）脱标：脱标的元素不在标准文档流下占位置浏览器认为第一个盒子不是标准文档流的盒子，认为第二个盒子为标准文档流下的盒子（2）浮动的元素互相贴靠（3）浮动元素有字围效果第一个元素浮动，第二个元素不浮动，那么第二个元素的文字会围绕着第一个浮动元素显示（4）凡是脱标（浮动、绝对定位、固定定位）的元素，不区分行内标签还是块标签，宽高可以任意设置浮动永远不是一个盒子在浮动，要浮动一起浮动

例子：

1234563132333413536372383940341424344ViewCode2浮动的字围效果（文字围绕图片）

1234567222324

父盒子撑不起来了

解决办法：四种方法任选其一都可以

（1）给父盒子设置固定高度百年不变导航栏（2）内墙法：这个方法不常用给最后一个浮动的元素添加一个块级标签，并且该标签设置属性clear：both;（3）伪元素清除法：********.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both}（4）overflow:hidden

visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承overflow属性的值。

123456181920

background-image:url(./1.jpg)background-repeat:repeat|no-repeat|repeat-x|repeat-ybackground-position:xy;x和y如果是正值，意味着调整当前图片的位置信息，相对于原来的位置进行调整x和y如果是负值，切背景图，注意：一定要有明确的width和height

12345619202122232425ViewCode六文字属性和文本属性

（11）line-height(1)针对单行文本垂直居中

公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。

(2)针对多行文本垂直居中

行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。

第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px;那么就知道行高*5=150px

第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

12345635363738文字文字文字文字文字文字文字文字文字文字文字394041你好啊424344哈哈哈45464748