zoukankan      html  css  js  c++  java
  • CSS笔记——padding,margin为百分比计算时的参照对象

    div的padding为百分比的两种情况


    padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的

    1. 当子div的宽度是百分比时

    html代码

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta chaset="utf-8">
    <title>无标题</title>
    <style type="text/css">
    html,body{
    margin:0;
    padding:0;
    height:100%;
    }

    .container{
    100%;
    }
    .row{
    100%;
    }
    .row:before ,
    .row:after{
      display: block;
      content:'';
      height: 0;
      clear:both;
    }
    .col-md-4{
      float: left;
      33.33%;
    }
    .blue-bg,
    .red-bg,
    .yellow-bg{
      padding-top:33.333%;
    }
    .blue-bg{ background-color: #428bca; } .red-bg{ background-color: red; } .yellow-bg{ background-color: yellow; }
    </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 blue-bg"></div> <div class="col-md-4 red-bg"></div> <div class="col-md-4 yellow-bg"></div> </div> </div> </body> </html>

    效果图

    2. 当子div的宽度是具体像素时

    html

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width , initial-scale=1">
    <meta chaset="utf-8">
    	<title>无标题</title>
    	<style type="text/css">
    		html,body{
    			margin:0;
    			padding:0;
    			height:100%;
    		}
               .row{ 100%; } .row:before , .row:after{ display: block; content:''; height: 0; clear:both; } .col-md-4{ float: left; 100px; } .blue-bg{ padding-top: 100%; background-color: #428bca; } .red-bg{ padding-top: 100%; background-color: red; } .yellow-bg{ padding-top: 100%; background-color: yellow; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 blue-bg"></div> <div class="col-md-4 red-bg"></div> <div class="col-md-4 yellow-bg"></div> </div> </div> </body> </html>

    效果图

     

  • 相关阅读:
    多机部署之定时任务完整方案
    老项目多机部署初步解决方案
    java多线程与线程池
    HotSpot项目结构
    调试HotSpot源代码
    在Ubuntu 16.04上编译OpenJDK8的源代码
    研究Java语言的编译器和虚拟机可参阅的资料
    我的书籍《深入解析Java编译器:源码剖析与实例详解》就要出版了
    hotspot编译
    研究小技巧及专业术语
  • 原文地址:https://www.cnblogs.com/MonaSong/p/5314336.html
Copyright © 2011-2022 走看看