一.margin的塌陷解决：

BFC （block format context）块级格式化上下文格式

display:inline-block

float:left / right

overflow: hidden

position: absolute

二.float

1.浮动元素产生了浮动流

2.所有产生了浮动流的元素，块级元素看不到他们，产生了BFC的元素和文本类属性（inline）的元素以及文本都能看到浮动元素,有点类似于叠层

3.清除浮动流

1.div{clear:both}

2.伪元素辅助（三件套解决浮动问题）

.wrapper::after{

　　content:\'\';

　　clear:both;（只有块级元素才能设置clear）

　　display:block;

}

。。。

<span>无聊</span>

伪元素（天生就存在，行级元素，可以当元素来操作，但是没有元素结构）：span::before ,    span::after{content:\'\'}

如果想设置宽高，必须设置成Inline-block。

。。。

3.BFC帮助

position:absolute; float:left / right;打内部把元素转换成inline - block;意思就是你的内容有多少，边框就有多大，会紧紧局限

三.文字溢出处理（三件套）

white-space: nowrap  (没有换行)

overflow:hidden （超出DIV就隐藏）

overtext:ellipsis（超出文本变成小圆）

 

四.加载问题

图片宽高

<div>淘宝网</div>

div{

　　display: inline - block;

　　background-image:url(#);

　　background-size:200px 80px;

　　width:200px;

　　height:80px}

要在图片没加载出来的时候，即删了CSS也能显示出东西

两个解决办法：

1.white-space: nowrap

overflow:hidden

text - indent :200px (文本缩进)

2.height:0px

overflow:hidden

padding-top:80px(通过padding-top来撑开)

五.行级元素只能嵌套行级元素

块级元素能嵌套任何元素

但是<p><div></div></p>是不可以的，p标签里不能套块级元素

还有<a><a></a></a>是不可以的，a标签里不能套a标签

六.解决图片间隔（因为inline和inline-block都是文本类属性，中间有文字分隔符）

1.margin-left:-6px，压缩后会重叠部分

2.但是上面的方法不太好，更好就是把<img><img>之间的空格去掉，然后显示的文本分隔符就会消失。

 

 

 

！调对齐方式，vertical-align