首页 > 代码库 > 2017-6-4CSS三天之权重和浮动

2017-6-4CSS三天之权重和浮动

2024-10-01 17:36:02   216人阅读

CSS三天之第一天

  • CSS三天之第一天
      • CSS比权重
      • css中的盒模型
      • 标准文档流
      • 块级元素和行内元素的相互转换
    • 标准流
      • 浮动
        • 性质一:浮动的元素脱标
        • 性质二:浮动的元素互相贴靠
        • 浮动的元素有字围效果

CSS比权重

技术分享

1496583239359.jpg

  • !important的属性,! important做站的时候，不允许使用。因为会让css写的很乱。

css中的盒模型

技术分享

1496584875476.jpg

  • 案列1: 技术分享

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>盒模型</title> 
  6. <style type="text/css"> 
  7. div.box { 
  8.  
  9. height:300px; 
  10. width:300px; 
  11. border:1px solid red; 
  12. padding:10px 20px; 
  13. margin:50px 60px; 
  14. } 
  15. </style> 
  16. </head> 
  17. <body> 
  18. <div class="box">我是一个盒子</div> 
  19. </body> 
  20. </html> 

技术分享

1496585833304.jpg

技术分享
*　说明盒子的实际大小（border+padding+width,border+padding+height）
技术分享

标准文档流

web页面的制作是按照严格的"流"操作,像织毛衣一样从上而下

  • 行内元素和块级元素
    *　块级元素
    * 霸占一行,不能与其他任何元素并列;
    * 能接受宽,高;
    * 如果不设置宽度,那么宽度将默认变为父亲的100%

    • 行内元素

      • 与其他行内元素并排

      • 不能设置宽,高.默认的宽度,就是文字的宽度.

    • 在HTML中,将标签分为:文本级,容器级

      • 文本级: P,span,a,b,i,u,em

      • 容器级:div,h系列,li,dt,dd;

    • CSS中的分类和上面的很像,就是P不一样:

      • 所有的文本级标签,都是行内元素,除了p,p是一个文本级,但是是个块级元素.

      • 所有的容器级标签都是块级元素
        技术分享

块级元素和行内元素的相互转换

  • 块级元素可以设置为行内元素
    display:block;//是"显示模式"的意思,用来改变元素的行内,块级性质

  • 行内元素可以设置为块级元素
    display:inline;//是"行内",一旦给了这个标签设置,这个标签就立即变为行内元素,此时他和一个span元素一样
    技术分享

  1.  
  2. <!DOCTYPE html> 
  3. <html> 
  4. <head lang="en"> 
  5. <meta charset="UTF-8"> 
  6. <title>块级元素和行内元素</title> 
  7. <style type="text/css"> 
  8. .class1{ 
  9. width:200px; 
  10. height:100px; 
  11. border:1px solid red; 
  12. } 
  13. .class2{ 
  14. display: inline;/*去掉了盒子的属性,具有行内元素的特性*/ 
  15. width:300px; 
  16. height: 100px; 
  17. line-height: 300px; 
  18. border: 1px solid slateblue; 
  19. } 
  20. .class3{ 
  21. color:yellow; 
  22. border:1px solid blanchedalmond; 
  23. } 
  24. .class4{ 
  25. display: block; 
  26. height: 100px; 
  27. width: 300px; 
  28. border: 1px solid greenyellow; 
  29. } 
  30. </style> 
  31. </head> 
  32. <body> 
  33. <div class="class1"> 
  34. 我是块级元素 
  35. </div> 
  36. <div class="class2"> 
  37. 我是行内元素,因为display:inline; 
  38. </div> 
  39. <span class="class3"> 
  40. 我是行内元素,以为我本身就是行内元素; 
  41. </span> 
  42. <span class="class4"> 
  43. 我是块级元素,以为display:block; 
  44. </span> 
  45. </body> 
  46. </html> 

标准流

  • 标准流里面限制非常多.比如说我们现在就要并排,并且就要设置宽高.就要移民,脱离标准流!

    • CSS 中一共有三种手段,使一个元素脱离标准文档流:

      • 浮动;

      • 绝对定位;

      • 固定定位;

浮动

浮动是CSS里面布局用的最多的属性
技术分享

  1. .class1{ 
  2. float:left; 
  3. width:300px; 
  4. height:100px; 
  5. background: red; 
  6. } 
  7. .class2{ 
  8. float: left; 
  9. width:300px; 
  10. height: 100px; 
  11. background: skyblue; 
  12. } 

  • 两个元素并排了,并且两个元素都能够设置宽度,高度了(这个在刚才的标准流中,不能实现).浮动想学好,一定要知道3个性质

性质一:浮动的元素脱标

  • 1.脱标元素和标准流元素
    技术分享

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>浮动的元素脱标</title> 
  6. <style type="text/css"> 
  7. .class1{ 
  8. float: left; 
  9. width:100px; 
  10. height: 100px; 
  11. background-color: deepskyblue; 
  12. } 
  13. .class2 { 
  14.  
  15. width: 200px; 
  16. height: 400px; 
  17. background-color: palevioletred; 
  18.  
  19. } 
  20. </style> 
  21. </head> 
  22. <body> 
  23. <div class="class1"> 
  24. 我是一个浮动的元素; 
  25. </div> 
  26. <div class="class2"> 
  27. 我是标准流; 
  28. </div> 
  29. </body> 
  30. </html> 

  • 2.浮动的元素不分块级和行内
    技术分享

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  4. <meta charset="UTF-8"> 
  5. <title>浮动的元素不分块级和行内</title> 
  6. <style type="text/css"> 
  7. .class1{ 
  8. width: 200px; 
  9. height: 200px; 
  10. float: left; 
  11. background-color: yellow; 
  12.  
  13. } 
  14. .class2{ 
  15. width: 300px; 
  16. height: 300px; 
  17. float: left; 
  18. background-color: orangered; 
  19. } 
  20. </style> 
  21. </head> 
  22. <body> 
  23. <div class="class1"> 
  24. 我在标准流中是一个块级元素div; 
  25. </div> 
  26. <span class="class2"> 
  27. 我在标准流中是一个行内元素span; 
  28. </span> 
  29.  
  30. </body> 
  31. </html> 

性质二:浮动的元素互相贴靠

  • 1.如果有足够的空间那么元素就会互相贴靠;
    技术分享

  • 2.如果没有足够的空间那么元素就会自己寻找并排的空间;
    技术分享

  • 3.如果并排没有足够的空间,那么元素会自己向左浮动;
    技术分享

  • 右浮动,右浮动float:left的效果和左浮动的效果类似
    技术分享

浮动的元素有字围效果

技术分享

1496720523301.jpg

  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. float:left; 
  9. } 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="box"> 
  14. <img src="imgs/bg.jpg" alt="我是一张图片"/> 
  15.  
  16. </div> 
  17. <p>一位留守村庄的德清阿婆，如何成为会用英语招揽游客的民宿主人？一个贫困落后的小村落怎样成了外国人争相涌来的国际村？还是那座山，还是那片林，还是那条播撒着竹叶光斑的羊肠小路，“绿水青山就是金山银山”，一个发人深省的理念，改变了阿婆和更多人的命运，不一样的故事就在这里悄然发生了。。。。。。浙北大地发生了凤凰涅槃式的蜕变。一条涵盖绿色发展方式和绿色生活方式的中国生态文明之路就这样呈现在世人面前。敬请观看微视频《在这里提出“绿水青山就是金山银山”》。</p> 
  18. </body> 
  19. </html> 

浮动我们要强调一点,浮动这个东西,我们初期一定要遵循一个原则:永远不是一个东西单独在浮动,浮动都是一起浮动的.

2017-6-4CSS三天之权重和浮动


联系
我们