zoukankan      html  css  js  c++  java
  • CSS中的百分比(%)如何使用???

    除了height以外垂直方向上的margin-top(bottom)或者padding-top(bottom)的百分比取值都是相对于父元素的宽度

    默认的content-box盒模型下元素的width就是指的content的宽度

    .box {
       200px;
      height: 400px;
    padding: 50px; border: 1px solid #000; } .child { 100px; height: 50%; padding-bottom: 50%; border: 1px solid #000; }
     
    当然这是border-box盒模型,width的百分比计算:
    height = 父height*50% = (400px*50%) = 200px
    padding-bottom = (父width200px - 父padding50px*2) *50%= 50px
    因为这个是border-box盒模型,所以计算时要加上padding宽度的;
     
    如果我们的盒子模型是content-box盒模型,就如下计算公式:
    padding-bottom = (父width200px)*50% = 100px
     
  • 相关阅读:
    SPA项目开发之登录
    使用vue-cli搭建SPA项目
    ElementUI入门和NodeJS环境搭建
    struts文件上传
    Struts增删改查
    struts
    Maven
    easyui三
    EasyUi权限
    自定义MVC三
  • 原文地址:https://www.cnblogs.com/feixiablog/p/9341423.html
Copyright © 2011-2022 走看看