zoukankan      html  css  js  c++  java
  • box-sizing的学习和认识

    先上自己写的DEMO代码

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8" />
    		<title>box-sizing的学习</title>
    	</head>
    	<style>
    		.one {
    			 50px;
    			height: 50px;
    			background-color: blue;
    		}
    		
    		.two {
    			 50px;
    			height: 50px;
    			background-color: red;
    			padding: 10px;
    		}
    		
    		.three {
    			 50px;
    			height: 50px;
    			background-color: yellow;
    			padding: 10px;
    			-webkit-box-sizing: border-box;
    			-moz-box-sizing: border-box;
    			box-sizing: border-box;
    		}
    	</style>
    
    	<body>
    		<!--
            	作者:43352901@qq.com
            	时间:2016-03-22
            	描述:针对DIV 的 box-sizing的学习
            	结论:设置box-sizing时,使用的padding,不会增加DIV的整体宽高
            -->
    
    		<div class="one">1
    		</div>
    		<div class="two">2
    		</div>
    		<div class="three">3
    		</div>
    	</body>
    
    </html>
    

      

    结论:

    设置box-sizing时,使用的padding,不会增加DIV的整体宽高


  • 相关阅读:
    HOWTO re
    数据类型
    字符串
    最大公约数
    this
    tip 2:找最小公倍数之Boost
    tip 1:一个简单的将int型转换成char的方法
    Item47
    成员函数模板
    item44:将与参数无关的代码抽离template
  • 原文地址:https://www.cnblogs.com/Mwsoft/p/5306185.html
Copyright © 2011-2022 走看看