CSS基础
行内元素和块级元素的区别：
行内元素：
- 与其他行内元素并排；
- 不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
- 霸占一行，不能与其他任何元素并列；
- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
行内元素和块级元素的分类：
在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
从HTML的角度来讲，标签分为：
- 文本级标签：p、span、a、b、i、u、em。
- 容器级标签：div、h系列、li、dt、dd。
行内元素和块级元素的相互转换
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素：
一旦，给一个块级元素（比如div）设置：
display: inline;
那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
- 此时这个div不能设置宽度、高度；
- 此时这个div可以和别人并排了。
行内元素转换为块级元素：
同样的道理，一旦给一个行内元素（比如span）设置：
display: block;
那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
- 此时这个span能够设置宽度、高度
- 此时这个span必须霸占一行了，别人无法和他并排
- 如果不设置宽度，将撑满父亲
css中一共有三种手段，使一个元素脱离标准文档流：
- （1）浮动
- （2）绝对定位
- （3）固定定位
这便引出我们今天要讲的内容：浮动。
性质1：浮动的元素脱标
性质2：浮动的元素互相贴靠
性质3：浮动的元素有“字围”效果
总结：标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）
浮动的清除
1.加高法
给浮动元素的祖先元素设置高度，如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）。此方法不能适应页面的快速变化。
2.clear:both;
clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了，导致两个div之间，没有任何的间隙了
3.隔墙法
外墙：在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果
内墙：内墙法可以给它所在的div撑出宽度,让div的高度可以自适应内容。
<!--CSS 浮动 隔墙法-->
<div class="box1">
<p></p>
<p></p>
</div>
<!-- 为了防止两个div贴靠，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；
同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果这便是隔墙法 -->
<div style="clear: both; height: 10px;"></div>
<div class="box1">
<p></p>
<p></p>
</div>
<!--CSS 浮动 内墙法-->
<div class="box1">
<p></p>
<p></p>
<!-- 内墙法可以给它所在的div撑出宽度。即：box1的高度可以自适应内容 -->
<div style="clear: both; "></div>
</div>
<div class="box1">
<p></p>
<p></p>
</div>
4.overflow:hidden;
这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。 我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。 并且,overflow:hidden;能够让margin生效
margin相关
margin塌陷/margin重叠
标准文档流中，竖直方向的margin不叠加，取较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)
盒子居中margin:0 auto;
善于使用父亲的padding，而不是儿子的margin