zoukankan      html  css  js  c++  java

  • 2017-6-6浮动的使用

    浮动

    浮动的性质

    • 浮动的性质:脱标,贴边,字围,收缩.

    • 收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素);
      enter description here

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head lang="en"> 
    4. <meta charset="UTF-8"> 
    5. <title>浮动收缩</title> 
    6. <style type="text/css"> 
    7. .box{ 
    8. background-color: yellow; 
    9. float: left; 
    10. height: 100px; 
    11. } 
    12. </style> 
    13. </head> 
    14. <body> 
    15. <div class="box"> 
    16. 武松打虎打虎打虎打虎打虎 
    17. </div> 
    18. </body> 
    19. </html> 

    这个div浮动了,且没有设置宽度,那么将自动缩紧为内容的宽度
    整个网页就是通过浮动来实现并排的;

    浮动的清除

    • 实验1:两个DIV不给任何属性,每个div中都有li,这些li都是浮动的

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head lang="en"> 
    4. <meta charset="UTF-8"> 
    5. <title>浮动的清除</title> 
    6. <style type="text/css"> 
    7. div ul li{ 
    8.  
    9. width: 90px; 
    10. height: 45px; 
    11. float: left; 
    12. text-align: center; 
    13. background-color: yellow; 
    14. } 
    15. </style> 
    16. </head> 
    17. <body> 
    18. <div> 
    19. <ul> 
    20. <li>HTML</li> 
    21. <li>CSS</li> 
    22. <li>JS</li> 
    23. <li>HTML5</li> 
    24. <li>设置模式</li> 
    25. </ul> 
    26. </div> 
    27. <div> 
    28. <ul> 
    29. <li>学习方法</li> 
    30. <li>英语水平</li> 
    31. <li>面试技巧</li> 
    32. </ul> 
    33. </div> 
    34. </body> 
    35. </html> 

    enter description here

    1496736435384.jpg

    • 现象:我们本以为第二个div中的li会另起一行,结果它却紧随第一个div中的最后一个li的边了;

    • 原因就是因为div没有高度,不能给自己浮动的孩子们,一个容器.

    清除浮动的方法1:给浮动的元素的祖先元素加高度.

    如果一个元素要浮动,那么它的祖先元素一定要有高度.有高度的盒子才能关住浮动
    enter description here
    只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素,所以就是清除浮动带来的影响了
    enter description here

    清除浮动的方法2:clear:both;

    • 网页制作中,高度height很少出现.为什么?因为他可以被内容给撑高!那也就是说方法1在工作中很少用到.

    • 思考:能不能不写height,也把浮动清除了呢?也让浮动之间互不影响呢?]

    • clear:both;属性就可以清楚浮动

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head lang="en"> 
    4. <meta charset="UTF-8"> 
    5. <title>浮动的清除</title> 
    6. <style type="text/css"> 
    7. /*div {*/ 
    8. /*height: 45px;*/ 
    9. /*}*/ 
    10. div ul li{ 
    11.  
    12. width: 90px; 
    13. height: 45px; 
    14. float: left; 
    15. text-align: center; 
    16. background-color: yellow; 
    17. } 
    18. .box2{ 
    19. clear: both; 
    20. margin-top: 10px; 
    21. } 
    22.  
    23. </style> 
    24. </head> 
    25. <body> 
    26. <div class="box1"> 
    27. <ul> 
    28. <li>HTML</li> 
    29. <li>CSS</li> 
    30. <li>JS</li> 
    31. <li>HTML5</li> 
    32. <li>设置模式</li> 
    33. </ul> 
    34. </div> 
    35. <div class="box2"> 
    36. <ul> 
    37. <li>学习方法</li> 
    38. <li>英语水平</li> 
    39. <li>面试技巧</li> 
    40. </ul> 
    41. </div> 
    42. </body> 
    43. </html> 

    enter description here

    1496745245005.jpg

    但是使用这个属性有一个很严重的问题:就是所有的margin属性都会失效

    • 清楚浮动的方法3:隔墙法
      enter description here

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head lang="en"> 
    4. <meta charset="UTF-8"> 
    5. <title>浮动的清除</title> 
    6. <style type="text/css"> 
    7. /*div {*/ 
    8. /*height: 45px;*/ 
    9. /*}*/ 
    10. div ul li{ 
    11.  
    12. width: 90px; 
    13. height: 45px; 
    14. float: left; 
    15. text-align: center; 
    16. background-color: yellow; 
    17. } 
    18. .bg{ 
    19. clear: both; 
    20.  
    21. } 
    22.  
    23. </style> 
    24. </head> 
    25. <body> 
    26. <div class="box1"> 
    27. <ul> 
    28. <li>HTML</li> 
    29. <li>CSS</li> 
    30. <li>JS</li> 
    31. <li>HTML5</li> 
    32. <li>设置模式</li> 
    33. </ul> 
    34. </div> 
    35. <div class="bg"></div> 
    36. <div class="box2"> 
    37. <ul> 
    38. <li>学习方法</li> 
    39. <li>英语水平</li> 
    40. <li>面试技巧</li> 
    41. </ul> 
    42. </div> 
    43. </body> 
    44. </html> 

    内墙法

    enter description here

    1496747003048.jpg

    • 内墙法的本质给没高的父亲撑出高度
      enter description here

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head lang="en"> 
    4. <meta charset="UTF-8"> 
    5. <title>内墙法</title> 
    6. <style type="text/css"> 
    7. * { 
    8. margin: 0 auto; 
    9. padding: 0; 
    10. } 
    11. div{ 
    12. background-color: blue; 
    13. } 
    14. p{ 
    15. width: 100px; 
    16. height: 100px; 
    17. background-color: green; 
    18. float: left; 
    19. } 
    20. .cl{ 
    21. clear: both; 
    22. } 
    23. </style> 
    24. </head> 
    25. <body> 
    26. <div> 
    27. <p></p> 
    28. <div class="cl"></div> 
    29. </div> 
    30. </body> 
    31. </html> 

    清除浮动的方法4 overflow:hidden

    • overflow就是"溢出"的意思,hidden就是"隐藏"的意思.

    • overflow:hidden;表示"溢出隐藏".所有溢出边框的内容,都要隐藏掉

    enter description here

    1496755641965.jpg

    • 本意就是清除溢出到盒子外面的文字.但是,前端开发工程师又发现了他能做偏方
      一个父亲不能被自己浮动的儿子,撑出高度.但是,只要给父亲加上overflow:hidden;那么父亲就能被儿子撑出高了,
      enter description here

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head lang="en"> 
    4. <meta charset="UTF-8"> 
    5. <title>overflow偏方</title> 
    6. <style type="text/css"> 
    7. *{ 
    8. margin: 0; 
    9. padding: 0; 
    10. } 
    11. .box{ 
    12. width: 600px; 
    13. border: 10px solid red; 
    14. overflow: hidden; 
    15. } 
    16. .p1{ 
    17. height: 160px; 
    18. width: 100px; 
    19. background-color: green; 
    20. float: left; 
    21. } 
    22. .p2{ 
    23. height: 200px; 
    24. width: 100px; 
    25. background-color: peru; 
    26. float: left; 
    27. } 
    28. .p3{ 
    29. height: 300px; 
    30. width: 100px; 
    31. background-color: yellow; 
    32. float: left; 
    33. } 
    34. </style> 
    35. </head> 
    36. <body> 
    37. <div class="box"> 
    38. <p class="p1"></p> 
    39. <p class="p2"></p> 
    40. <p class="p3"></p> 
    41. </div> 
    42. </body> 
    43. </html> 

    浮动的案例与总结

    总结一下：

    • 1） 加高法：
      浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

    1. 1<div> → 设置height 
    2. 2 <p></p> 
    3. 3 <p></p> 
    4. 4 <p></p> 
    5. 5</div> 
    6. 6 
    7. 7<div> → 设置height 
    8. 8 <p></p> 
    9. 9 <p></p> 
    10. 10 <p></p> 
    11. 11</div> 

      1. clear:both;法
        最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。

    1. 1<div> 
    2. 2 <p></p> 
    3. 3 <p></p> 
    4. 4 <p></p> 
    5. 5</div> 
    6. 6 
    7. 7<div> → clear:both; 
    8. 8 <p></p> 
    9. 9 <p></p> 
    10. 10 <p></p> 
    11. </div> 

    浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。

    • 3）隔墙法：
      在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
      墙用自己的身体当做了间隙。

    1. 1<div> 
    2. 2 <p></p> 
    3. 3 <p></p> 
    4. 4 <p></p> 
    5. 5</div> 
    6. 6 
    7. 7<div class="cl h10"></div> 
    8. 8 
    9. 9<div> 
    10. 10 <p></p> 
    11. 11 <p></p> 
    12. 12 <p></p> 
    13. </div> 

    我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动的根据自己的儿子，撑出高度，我们就要想一些“小伎俩”，“奇淫技巧”。

    • 内墙法：

    1. 1<div> 
    2. 2 <p></p> 
    3. 3 <p></p> 
    4. 4 <p></p> 
    5. 5 <div class="cl h10"></div> 
    6. 6</div> 
    7. 7 
    8. 8<div> 
    9. 9 <p></p> 
    10. 10 <p></p> 
    11. 11 <p></p> 
    12. </div> 

    内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。

    • 4）overflow:hidden;
      这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
      我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的小偏方。
      并且,overflow:hidden;能够让margin生效。

    • 清除浮动的案例：
      enter description here
      enter description here

    1. <style type="text/css"> 
    2. *{ 
    3. margin: 0; 
    4. padding: 0; 
    5. } 
    6. .news{ 
    7. width: 400px; 
    8. height: 100px; 
    9. border: 1px solid #000; 
    10. margin: 100px; 
    11. overflow: hidden; 
    12. } 
    13. .news ul{ 
    14. list-style: none; 
    15. } 
    16. .news ul li{ 
    17. overflow: hidden; 
    18. _zoom:1; 
    19. border-bottom: 1px dashed gray; 
    20. } 
    21. .news ul li span.title{ 
    22. float: left; 
    23. } 
    24. .news ul li span.date{ 
    25. float: right; 
    26. } 
    27. </style> 

    浏览器兼容问题

    上述知识点遇见的浏览器兼容问题
    第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
    解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

    1. height: 4px; 
    2. _font-size: 0px; 

    我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
    IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。
    比如：

    1. _background-color: green; 

    enter description here

    1496803214456.jpg

    解决微型盒子，正确写法：

    1. height: 10px; 
    2. _font-size:0; 

    第二，IE6不支持用overflow:hidden;来清除浮动的
    解决办法，以毒攻毒。追加一条

    1. _zoom:1; 

    完整写法：

    1. overflow: hidden; 
    2. _zoom:1; 

    实际上，_zoom:1;能够触发浏览器hasLayout机制。这个机制，不要深究了，因为就IE6有。我们只需要让IE6好用，具体的实现机制，有兴趣的同学，自行百度。

    强调一点， overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。

    我们刚才学习了两个IE6的兼容问题，这两个IE6的兼容问题，都是通过多写一条hack来解决的。
    这个我们称为伴生属性。

    1. height:6px; 
    2. _font-size:0; 
    3. overflow:hidden; 
    4. _zoom:1; 

    margin现象

    标准文档流中，竖直方向的margin不叠加，以较大的为准。
    enter description here
    enter description here
    如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：
    enter description here

    盒子居中margin:0 auto;

    margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：

    1. margin-left: auto; 
    2. margin-right: auto; 

    简写为

    1. margin:0 auto; 

    p 注意：
    1） 使用margin:0 auto; 的盒子，必须有width，有明确的width
    2） 只有标准流的盒子，才能使用margin:0 auto; 居中。
    也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
    3） margin:0 auto;是在居中盒子，不是居中文本。
    文本的居中，要使用

    1. text-align:center; 
    1. margin:0 auto; → 让这个div自己在大容器中居中。 
    2. text-align: center; → 让这个div内部的文本居中。 

    普及一下知识，text-align还有

    1. text-align:left; 没啥用，因为默认居左 
    2. text-align:right; 文本居右 

    善于使用父亲的padding,而不是儿子的margin

    如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了
    这个p有一个margin-top踹父亲，试图将自己下移

    1. 1 <div> 
    2. 2 <p></p> 
    3. 3 </div> 

    enter description here

    1496806507090.jpg

    enter description here
    margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。
    所以，我们一定要善于使用父亲的padding，而不是儿子的margin。

    关于margin的IE6兼容问题

    • IE6双倍margin bug
      当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。

    1. <ul> 
    2. <li></li> 
    3. <li></li> 
    4. <li></li> 
    5. </ul> 

    enter description here

    1496817691961.jpg

    • 解决方案：

    • 1）使浮动的方向和margin的方向，相反。
      所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。

    1. float: left; 
    2. margin-right: 40px; 

    *　2）使用hack（没必要，别惯着这个IE6）

    • 单独给队首的元素，写一个一半的margin

    1. <li class="no1"></li> 
    2. ul li.no1{ 
    3. _margin-left:20px; 
    4. } 

    • IE6的3px bug
      enter description here

    解决办法：
    不用管，因为根本就不允许用儿子踹父亲。所以，如果你出现了3px bug，说明你的代码不标准。

    每天叫醒的不是闹钟，而是梦想
  • 相关阅读:
    jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
    CSS实现限制字数功能
    实用CSS3属性之 :target伪类实现Tab切换效果
    CSS Transform让百分比宽高布局元素水平垂直居中
    纯CSS3编写的面包屑导航收集
    node（day6）之静态资源页面设计和命名
    node中其他成员（非模块成员）之dirname和filename
    node=day6
    path路径操作模块
    promise数据库操作案例
  • 原文地址：https://www.cnblogs.com/shuiyaodongwu310988929/p/6957013.html
Copyright © 2011-2022 走看看