1，Syntax:

/* Keyword values */

box-sizing: content-box;

box-sizing: border-box;

/* Global values */

box-sizing: inherit;

box-sizing: initial;

box-sizing: unset;

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

2，兼容：

div

{

box-sizing:border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

}

3,什么时候用？

1，设置内边距

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>border-box</title>

     <style>

         .box {

             width: 100px;

             height:100px;

             border: 20px solid #000;

             -webkit-box-sizing: border-box;

             -moz-box-sizing: border-box;

             box-sizing: border-box;

         }

     </style>

 </head>

 <body>

 <div class="box">默认border是外边距，设置外边距的话，可以用border-box</div>

 </body>

 </html>

border-box.html

二，calc();

一般在流体布局上

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         .demo {

             background: black;

             font-size:0;

         }

         .box {

             display:inline-block;

             margin:20px;

             background: #f60;

             height: 50px;

             width:calc(25% - 20px*2);

         }

         .box:nth-child(4n){

             /*margin-right:0;*/

             /*width:calc(25% - 30px);*/

         }

     </style>

 </head>

 <body>

 <div class="demo">

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

     <div class="box"></div>

 </div>

 </body>

 </html>

calc.html

1,这里用的是magin

2，如果用margin-right:20px,则右边就多出20px:

可以选择在父级窗口margin-right:-30px;就显示均匀了

这里注意，在使用calc的时候， width:calc(25% - 30px);这里的减号一定要用空格隔开。

三，flex布局的话，这里就讲的多了，是主流布局，在布局类下有详细的说过，可以翻看。

box-sizing与calc()与flex的更多相关文章

  1. 三栏布局之 css3 calc和 flex

    圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...

  2. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  3. Flex Box 简单弹性布局

    弹性盒子模型有两种规范:早起的display:box 和后期的display:flex.它可以轻易的实现均分.浮动.居中等灵活布局,在移动端只考虑webkit内核时很实用. 一.display:box ...

  4. CSS3-弹性盒布局(Flex Box)

    弹性盒布局(Flex Box) 一.概念 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型 ...

  5. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  7. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. less 基础+ flex

    1.less 中的变量 @ 符号 引入 /*普通变量*/ @color:pinker; .styles{ color:@color; } /*选择器变量*/ @I:img; @{I}{ width: ...

  9. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

随机推荐

  1. Aptana插件在eclipse中安装

  2. SSH框架：同一个工程之前可以正常运行，现在不能

    一个问题是:有一个CRIMS的项目,之前是可以运行成功的.(这个工作空间就只有这一个项目).但是不知道怎么了,现在运行起来就会出现错误. 配置什么的都没有去修改过,(工程坏了??) 不过有一个奇怪的问 ...

  3. 十五套专为开发人员打造的PHP资源库

    转载自:http://developer.51cto.com/art/201508/488143.htm 1)Mink Mink是一套PHP 5.3库,用于在测试当中模拟Web应用程序与浏览器之间的交 ...

  4. C# 反射只获取自己定义的属性，不获取父类的属性

    PropertyInfo[] p = user.GetType().GetProperties(BindingFlags.DeclaredOnly | BindingFlags.Public | Bi ...

  5. Django中使用haystack进行全文检索时需要注意的坑

    对于haystack的配置什么的我在这里就不必说什么了,毕竟一搜一大把. 直接说重点 1 当你通过继承haystack的views来自定义django 应用的views 时,你要注意heystack ...

  6. GTD实用指南（转载）

    时间管理第一层:记录每日时间开支,认识自己的时间黑洞.你会惊讶地发现,每天的无意义时间很可能在70%以上. [避开时间黑洞的小策略:1.彻底关闭聊天工具:2.关掉邮件的到达提醒功能:3.保持办公环境的 ...

  7. Lintcode---区间求和 I

    给定一个整数数组(下标由 0 到 n-1,其中 n 表示数组的规模),以及一个查询列表.每一个查询列表有两个整数 [start, end] . 对于每个查询,计算出数组中从下标 start 到 end ...

  8. mysql产生随机数并连接字符串

    concat('a','b','c');//连接字符串 rand();//产生随机数 floor();//取整数 UPDATE user set reg_ip= concat(floor(RAND() ...

  9. Javaweb开发中关于不同地方出现的绝对路径和相对路径

    1.转发和包含路径 a)以“/”开头:相对当前项目路径,即默认为http://localhost:8080/项目名/ b)不以“/”开头:相对当前Servlet路径. eg:在Aservlet中写“B ...

  10. 使用SWT技术的跨平台移动应用开发库Tabris

    1. http://developer.eclipsesource.com/tabris/ 2. 多平台.原生程序级别的性能 3. 开源/教育性的项目免费,意思就是商业项目收费 4. 目标,让懂jav ...