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

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 { 
  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元素一样

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

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

时间： 2024-10-05 03:28:29

2017-6-4CSS三天之权重和浮动的相关文章

分布式技术追踪 2017年第三十七期

分布式系统实践 1. 微信开源PhxQueue:高可用.高可靠.高性能的分布式队列 https://mp.weixin.qq.com/s/Hr4TUg8o1AQkowQpSDIhYA 摘要: PhxQueue 是微信开源的一款基于 Paxos 协议实现的高可用.高吞吐和高可靠的分布式队列,保证At-Least-Once Delivery,在微信内部广泛支持微信支付.公众平台等多个重要业务. 2. 链家大数据多维分析引擎实践 https://mp.weixin.qq.com/s/nal1vKBcs

solr特点三: defType(查询权重排序)

Solr的defType有dismax/edismax两种,这两种的区别,可参见:http://blog.csdn.net/duck_genuine/article/details/8060026 下面示例用于演示如下场景: 有一网站,在用户查询的结果中,需要按这样排序: VIP的付费信息需要排在免费信息的前头 点击率越高越靠前 发布时间越晚的越靠前 这样的查询排序使用普通的查询结果的Order by是做不到的,必需使用solr的defType. 做法: 1.先看schema.xml的定义: <

分布式技术追踪 2017年第三十四期

分布式系统实践 1. Linearizability 一致性验证 http://dwz.cn/6pPYpb 摘要: 一致性是分布式系统很常见的特性, Jepsen是验证分布式系统一致性的有力工具. 这篇文件中介绍了Jepsen的原理, 文章有点深奥, 不太容易懂. 2. 深入浅出阿里云新一代关系型数据库 PolarDB http://dwz.cn/6pqPIC 摘要: 本文通过描述关系型数据库发展的背景以及云计算的时代特征,分享了数据库计算力的螺旋式上升的进化理念.并且结合阿里云 RDS 产品的

分布式技术追踪 2017年第三十二期

分布式系统实践 1. 数据一致性-分区可用性-性能--多副本强同步数据库系统实现之我见 http://hedengcheng.com/?p=892 摘要: 这篇文章非常深入的解释了数据一致性的问题和解决方案, 强烈推荐阅读. 2. 阿里10年分布式数据库技术沉淀,AliSQL X-Cluster的应用实战 http://dwz.cn/6mYO2E 摘要: 上期分享了阿里x-paxos的设计思路, 这篇文章介绍了基于x-paxos阿里实现的x-cluster技术细节, 受益匪浅, 推荐大家阅读.

分布式技术追踪 2017年第三十三期

分布式系统实践 1. 生活中的Paxos,原来你我都在使用--对Paxos生活化的解读 http://hedengcheng.com/?p=970 摘要: 很通俗的介绍Paxos的文章, 推荐大家看看. 2. 一文读懂Apache Kudu http://dwz.cn/6o5asK 摘要: 关于Kudu的文章之前也分享过, 这篇文章帮助大家回顾Kudu的设计思路和理念. 微服务技术 1. 为什么Google上十亿行代码都放在同一个仓库里? http://dwz.cn/6oy3SK 摘要: 相对于

文本分类学习（三） 特征权重（TF/IDF）和特征提取

上一篇中,主要说的就是词袋模型.回顾一下,在进行文本分类之前,我们需要把待分类文本先用词袋模型进行文本表示.首先是将训练集中的所有单词经过去停用词之后组合成一个词袋,或者叫做字典,实际上一个维度很大的向量.这样每个文本在分词之后,就可以根据我们之前得到的词袋,构造成一个向量,词袋中有多少个词,那这个向量就是多少维度的了.然后就把这些向量交给计算机去计算,而不再需要文本啦.而向量中的数字表示的是每个词所代表的权重.代表这个词对文本类型的影响程度. 在这个过程中我们需要解决两个问题:1.如何计算出适

分布式技术追踪 2017年第三十六期

分布式系统实践 1. 当LSM遇上SSD https://mp.weixin.qq.com/s/HAaTVtg4SlaGLcn1QZpw9A 摘要: 以LevelDB为代表的LSM-tree存储引擎几乎一统天下, 然而代价是几十到上百倍的写放大. 随着SSD在随机IO上的突破, 这么高的写放大就显得不那么经济了, 这篇文章介绍了论文WiscKey: Separating Keys from Valuesin SSD-conscious Storage的思路, 阐述了一种对SSD友好的基于LSM的

正睿提高组2017模拟题三T1

听了很久又看了很久别人的程序才听懂,于是乎记录一下防止以后忘记. 好啦,假设当前 l-1=5,r=7;那如果学习过树状数组的话就知道题目中的操作如果转换为二进制的话 对于l-1来说他的二进制是101,所以会被加上-1的位置是101和100,r的二进制是111,所以会被加上1的位置是111,110,100 所以可以发现最后更新的位置是l-1的二进制的1的个数+r的二进制的1的个数-2*l-1和r都会更新的位置. 而l-1和r减1都会更新的位置的个数是它们两个二进制的最长公共前缀的1的个数(当然,前

三个div向左浮动不在同一行，向右浮动在同一行的解决办法

前几天在写代码的时候发现了一个问题,问题的大致描述如下: 在一个大的div中,同一行有三个小的div,当三个小的div均向左浮动时,会出现换行问题,均向右浮动时却在同一行. 解决这个问题的方法是在:在三个div的头和尾分别清除浮动.如    <div style="clear:both;"></div> <div class="copyright"> <div style="clear:both;">