box-sizing是CSS3的box属性之一，box-sizing 属性允许你以特定的方式定义匹配某个区域的特定元素。

一.box-sizing属性包括content-box（default），border-box，inherit。

  1. content-box：border和padding不计算入width之内，即width直接就是内容区的宽度
  2. inherit：从父级元素中继承该属性
  3. border-box：border和padding计算入width之内，即内容区实际宽度是width去除padding和border之后的宽度

二.示例如下：

  1. <div class="parent">
  2.     <div class="content-box">content-box</div>
  3.     <div class="box">默认属性</div> 
  4.     <div class="border-box">border-box</div>
  5. </div>
  1. .content-box{
  2.         box-sizing:content-box;
  3.         -moz-box-sizing:content-box;
  4.         width: 100px;
  5.         height: 100px;
  6.         padding: 20px;
  7.         border: 5px solid #E6A43F;
  8.         background: blue;
  9.     }
  10. .box{
  11.         width: 100px;
  12.         height: 100px;
  13.         padding: 20px;
  14.         border: 5px solid #3DA3EF;
  15.         background: red;
  16.     }
  17. .border-box{
  18.         box-sizing:border-box;
  19.         -moz-box-sizing:border-box;
  20.         width: 100px;
  21.         height: 100px;
  22.         padding: 20px;
  23.         border: 5px solid #3DA3EF;
  24.         background: yellow;
  25.     }

更多相关文章

  1. flex容器常用的四个属性
  2. flex的属性描述
  3. css之flex项目属性与商城首页布局实战
  4. flex项目属性，实战案例。
  5. 移动商城首页的页眉和页脚的布局和flex项目三个属性
  6. 【案例】学习flex项目上的三个属性并尝试制作移动端京东首页
  7. flex容器中的四个属性的功能，参数，以及作用
  8. flex项目上的三个属性
  9. HTML小白入门2：html常用的标签

随机推荐

  1. php全称是什么
  2. php 的生命周期
  3. PHP保留类及特殊类
  4. php header是什么意思
  5. php隐藏后缀(.PHP)的方法过程
  6. PHP 引用详解 - 踩坑与妙用
  7. php如何理解面向对象
  8. PHP 源码 — is_array 函数源码分析
  9. php和前端的区别
  10. 三分钟了解PHP 7.4新特性