CSS中的标准文档流以及脱标(脱离标准文档流)(六)
标准文档流
一.标准流中的微观现象:
1>空白折叠现象
//CSS:
<style type="text/css">
span{
background-color: greenyellow;
font-size: 20px;
}
</style>
//HTML
<span class="box1">怎么么怎么怎么啦</span>
<span class="box2">怎么么怎么怎么啦</span>
<span class="box3">怎么么怎么怎么啦</span>
空白折叠
紧奏型则不会出现折叠
2>高矮不齐,底边对齐
如果又有图片且图片参差不齐的,又有文字。则会出现高矮不齐,底边对齐的情况。
3>自动换行，一行不满，换行写
二. 块级元素和行内元素
2.1 块级元素
- 独占一行
- 能设置宽高度，如果不设置宽度，则默认会变为父亲的100%
2.2 行内元素
- 与其他行内元素并排
- 不能设置宽高度，默认就是文字的宽度
在HTML，分为文本级、容器级。
文本级:p、span、a、b、i、u、em
容器级: div、h系列、li、dt、dd
在CSS，与HTML很像，p是特殊。
所有的文本级标签，都是行内元素，除p外，p在HTML是文本级，但是在CSS中是个块级元素
所有的容器级标签都是块级元素
标签分类
三.块级元素和行内元素相互转换
div{
display:inline;
background-color:red;
width:200px;
height:200px;
}
span{
display:block;
background-color:red;
width:200px;
height:200px;
}
只要设置display:就可以改变行内或者是块级的性质
1）设置为inline之后，这个标签将变为行业元素，则此时的div不能设置宽高度了，但是可以与别人并排了。
2）设置为block之后，这个标签将变为块级元素，则此时的span就能设置宽高度了，此时的span是独占一行的，无法并排，如果不设置高度，将撑满父亲。
脱离标准文档流
标准文档流里面的限制很多，比如要实现既要并排，又要设置宽高，此刻就要脱离标准流。
CSS中有三种手段，使一个元素脱离标准文档流：
1>浮动(注:右浮动跟左浮动是一样的原理)
此时两个元素并排了，且都设置了宽度和高度。（标准流中是不能这样的既要并排，又要设置宽高的）
浮动
-
浮动元素互相贴靠
如果有足够的空间，老三会靠着老二，如果没有足够的空间老三就会靠着老大，如果没有足够的空间，那么就会去贴左墙。
Snip20161111_45.png
- 浮动元素有“自围”效果
HTML
<div class="box1">
老大</div>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈</p>
让div浮动，p不浮动。div挡住了p,但是p中的字不会被挡住，形成自围效果。
浮动清除(四种方法)
现在有两个div,div没有任何属性，li中所有元素都是浮动的
//HTML:
<div>
<ul><li>语文</li>
<li>数学</li>
<li>英语</li>
<li>生物</li>
<li>地理</li>
</ul>
</div>
<div>
<ul>
<li>iOS</li>
<li>java</li>
<li>安卓</li>
</ul>
</div>
//CSS:
li{
float: left;
margin-left: 10px;
width: 50px;
background-color: fuchsia;
}
以为这些li会分成两排，然而并不是那样的，第二组中第一个去贴第一组中的最后一个li了。理由：因为div没有高度，不能给浮动的元素一个容器。故看到的便是下面的这种状态。
不是想象中的模样
-
浮动的元素的祖先元素加高度
如果一个元素要浮动，那么其祖先元素一定要有高度，有高度的盒子，才能管住浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素，这样消除浮动了。
浮动的元素的祖先元素加高度
-
clear:both;
both指的是左右浮动都清除。
clear:both;
设置clear:both; margin失效
-
隔墙法
隔墙法
隔墙法最终显示效果
内墙法：
内墙法
内墙法最终显示效果
- overflow:hidden;
overflow:hidden：溢出隐藏，所有溢出边框的内容，都要隐藏掉。
本意就是清除溢出到盒子外面的文字。但是却发现它能做偏方。
一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。
overflow:hidden
清除浮动总结
1）加高法
浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度。因为麻烦，并且不能适应页面的快速变化。
<div> → 设置height
<p></p>
<p></p>
<p></p>
</div>
<div> → 设置height
<p></p>
<p></p>
<p></p>
</div>
- clear:both;法
最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。 浮动确实被清除了，不会互相影响了。但是存在bug就是margin失效。两个div之间，没有任何的间隙了。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div> → clear:both;
<p></p>
<p></p>
<p></p>
</div>
3）隔墙法：
在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。 墙用自己的身体当做了间隙。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl h16"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，这时候推出内墙法。
<div>
<p></p>
<p></p>
<p></p>
<div class="cl h16"></div>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
4）overflow:hidden;
这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。 并且,overflow:hidden;能够让margin生效。
额外补充
浏览器兼容问题
1.IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解决办法:就是将盒子的字号，设置小（小于盒子的高），比如0px。
height: 4px;
_font-size: 0px;
我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。
比如：_background-color: green;
2.IE6不支持用overflow:hidden;来清除浮动的
解决办法:_zoom:1;
完整写法：
overflow: hidden;
_zoom:1;
实际上，_zoom:1能够触发浏览器hasLayout机制。
强调一点， overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。这两个IE6的兼容问题，都是通过多写一条hack来解决的。这个我们称为伴生属性。
//IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
height:6px;
_font-size:0;
//IE6不支持用overflow:hidden;来清除浮动的
overflow:hidden;
_zoom:1;
margin
1.margin的塌陷现象
标准文档流中，竖直方向的margin不叠加，以较大的为准
标流中竖直方向的margin不叠加，以较大的为准
如果是在脱离标准文档流中，竖直方向的margin叠加
脱标中竖直方向的margin叠加
2.盒子居中margin:0 auto;
注意：
1）使用margin:0 auto;的盒子，必须有width，有明确的width
2） 只有标准流的盒子，才能使用margin:0 auto;居中。 也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。文本的居中，要使用text-align:center;
3.善用父亲的padding,而不是儿子的margin
margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。 所以，我们一定要善于使用父亲的padding，而不是儿子的margin.
善用父亲的padding,而不是儿子的margin
4.关于margin的IE6兼容问题
IE6双倍margin bug当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
解决方案：
1）只需要将浮动的方向和margin的方向相反。
float: left;
margin-right: 40px;
2）使用hack（没必要，别惯着这个IE6）
单独给队首的元素，写一个一半的margin
<li class="no1"></li>
ul li.no1{
_margin-left:20px;
}
