zoukankan      html  css  js  c++  java
  • vertical-align负值和margin-bottom负值的区别

    先看一下vertical-align在W3C当中的值有哪一些:

    可是它有数值这一说确实很少提起,我们来看这么一段代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        .test_box {
           45%;
          float: left;
          margin-right: 1%;
          background-color: #f0f3f9;
        }
        .mb-200 {
          margin-bottom: -200px;
        }
        .va-200 {
          vertical-align: -200px;
        }
      </style>
    </head>
    <body>
    <div class="test_box">
      <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="mb-200" />张含韵
    </div>
    <div class="test_box">
      <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="va-200" />张含韵
    </div>
    </body>
    </html>
    

      这里我写了两个div。里面都是包含了同样的img,box是完全脱离文本流的,大小全靠子元素来撑开,那显示的效果是怎样的呢?

    vertical-align会增加容器的高度,而margin-bottom负值则是减小!

  • 相关阅读:
    [每日短篇] 1C
    项目Alpha冲刺 Day12
    项目Alpha冲刺 Day12
    [转载]MVC中单用户登录
    GitLab
    Git 版本控制
    Jenkins持续集成
    Jenkins安装
    Docker 网络基础原理
    java中内存的使用
  • 原文地址:https://www.cnblogs.com/mmykdbc/p/8461262.html
Copyright © 2011-2022 走看看