css的页面布局
页面布局，一些块的布局，文字写在块的里面
元素的浮动
默认的div是一个块级元素，一个div就占据了一行，可恶的很！！！
.item{ background: red } <div class="item">1</div> <div class="item">2</div> <div class="item">3</div>
看看效果，大家不要嫌弃麻烦，说这么简单的问题，也好意思截个图吗？不要小看这些，扎实的基础才能编程更快，少走弯路 
图片占据了一整行，因为这个块级元素，他的宽度继承父元素额（自己没有定义宽度的情况下），在这个场景下，这个父元素就是body元素，也就是浏览器的宽度
.item{ background: red; width:200px; } <div class="item">1</div> <div class="item">2</div> <div class="item">3</div>
而且，即使你定义了宽度，又如何，这个盒子虽然有了宽度，但是他还是占据了整个宽度，旁边留白的宽度，照样不能使用，是不是很恶心！！！
在早期的网页布局当中，很常见那种文字环绕着图片的效果，这个该怎么实现呢？聪明的程序员想到了浮动的法子
.box { border: 2px solid red } <div class="box"> <div class="item">
<img src="images/input_password.png">
</div> <p>我是文字<p> </div>
效果这样子的 
文字跑去了图片的下一行，这怎么可以呢
.box { border: 2px solid red } .item{ float: left; } <div class="box"> <div class="item">
<img src="images/input_password.png">
</div> <p>我是文字。。。。。<p> </div>
这个时候是不是可以实现环绕了，来说说为什么
.box { border: 2px solid red } .item{ float: left; } <div class="box"> <div class="item"> <img src="images/input_password.png"> </div> </div>
我们把文字去掉之后发现，我晕死啊，这个父元素的宽度居然没有了，父元素宽度没了，但我再次写入p元素的时候，p元素就按照原来的规则排列
所以这就是浮动带来了问题，破坏了父元素的高度，父元素的高度崩塌了，浮动的元素跑了，其他的元素，在父元素剩下的空间里面，继续按照原来的规则显示着
浮动还有第二个性质-------包裹性
破坏性是指浮动对父元素的影响，这个包裹性是自己的变化
.box { border: 2px solid red } .item{ /*float: left;*/ background: yellow } <div class="box"> <div class="item">11111111</div> </div>
不出所料，这个class为item的元素，占据了整个父元素box的大小，父元素box又占据了body的大小
.box { border: 2px solid red } .item{ float: left; background: yellow } <div class="box"> <div class="item">11111111</div> </div>
再来看看，出现了什么变化
可以看到，父元素box的高度已经塌陷了，本来父元素的高度，是由item撑开的，（我们没有给父元素设置高度），但是父元素高度没了，这说明，这个浮动的元素，已经不再是父容器box的子元素了，父子关系已经over了
在来看看这个item元素，自己的宽度也变了，包裹起来了，以前占了那么大的一块地儿，现在就是内容撑开的宽度（我们也没有给item元素设置宽度）
其实想一想，要是item不包裹起来，还是占据那么宽的地方，那还文字环绕个毛啊，自己把所有的位置都占据了，别人压根都挤不进来好么？
要是父容器不塌陷，那也别想文字环绕，这就好像韩剧《天国的阶梯》，后妈要搬进来，是不是做爸爸的先打开门欢迎，然后后妈想法子把继女赶走
浮动把父元素给搞的半死不活了，就出现了拯救父元素的方法--------清除浮动
这个清除浮动，不是说不设置浮动了，而是不要残害父容器了，不能坑爹！！这个会涉及到新的知识，先放一放，先来看看position属性
position
定位：元素的定位方式，一共有四种，static/absolute/relative/fixed
static，就是position的默认值，相当于我们没有设置position一样，没啥好说的
absolute：绝对定位，相对于某一个元素绝对的定位，查找他的父容器，找到第一个拥有position属性为absolute/relative/fixed的元素，相对这个元素定位
relative：相对定位，可能会成为某个绝对定位元素的参照点，
fixed：和绝对定位一样，但是始终相对于浏览器定位的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
*{
margin: 0;
padding: 0
}
.item1{ background: #DA4040; } .item2{ background: #F3DB1E; } .item3{ background: #2CEF11; } .item4{ background: #2077EE; } </style> </head> <body> <div class="box"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> </div> </body> </html>
先来看看相对定位，我们随便在某个item上面设置一个
.item3{
background: #2CEF11;
position: relative;
}
加入这一行代码，发现没什么变化啊，给他设置magrin，padding看看，会不会发生什么变化
.item3{
background: #2CEF11;
position: relative;
margin: 20px;
}
可以看到这个item3的上下左右分别有了20px的外边距，是相对于自己原来定位的位置发生的变化的，而且，父元素的高度也发生了变化，这4个item还是在box元素的下面的
绝对定位absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0 } .box{ border: 5px solid #ccc } .item1{ background: #DA4040; } .item2{ background: #F3DB1E; } .item3{ background: #2CEF11; } .item4{ background: #2077EE; position: absolute; top: 20px; left: 20px } </style> </head> <body> <div class="box"> <div class="item item1">1</div> <div class="item item2">2</div> <div class="item item3">3</div> <div class="item item4">4</div> </div> </body> </html>
item4覆盖了别的元素，直接跑到别的上面了，这这里，是相对于body定位的，就是页面的左上角
而且！！这个item4收缩了，变小了，和他的兄弟姐妹不一样了，他的宽度是内容撑开的，而不再是占据一行了
给这个元素设置了position之后，他脱离了文档流，覆盖在了别人的上面，而且，自己也具有了包裹的属性
fixed布局，这个比较的简单，就是永远相对于浏览器的最左上角定位的 下一个章节，我会好好的弄一弄关于bfc以及清除浮动
