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. Eclipse项目上红叉

    整个项目可以编译通过并且运行都没问题,但是项目上有个红叉,这个问题一般是有两个原因: 1.查看项目是不是有的引用包报错 解决办法:在项目的build path 中删除不可用引用或者修正 2.项目的编译 ...

  2. AnjularJS小项目,小案例,练手,猜数字

    之前自己就学了点AnjularJS,都是在菜鸟教程里面将基础的只是大致过了一遍,没怎么自己动手做什么东西练练手,但还是觉得纸上得来终觉浅,得知此事要躬行啊,今天就做了个猜数字的小游戏,觉得效果还不错, ...

  3. mysql中的时间类型datetime,date,time,year,timestamp小知识点

    1.datetime,date,time,year四个类型的值,可以手动输入,也可以调用函数获得值 ① 手动输入,格式如下: datetime "2016-6-22 14:09:30&quo ...

  4. eclipse项目 乱码

  5. C# 遍历Dictionary并修改其中的Value

    C#的Dictionary类型的值,知道key后,value可以修改吗?答案是肯定能修改的.我在遍历的过程中可以修改Value吗?答案是也是肯定能修改的,但是不能用For each循环.否则会报以下的 ...

  6. socket.io(转载)

    socket.io 中文手册,socket.io 中文文档转载于:http://www.cnblogs.com/xiezhengcai/p/3956401.html 服务端 io.on(‘connec ...

  7. Rabbitmq消息队列(六) 主题交换机

    1.简介 前面学习了有选择性的接收消息,但是却没有办法基于多个标准来接收消息.为了实现这个目的,接下来我们学习如何使用另一种更复杂的交换机 —— 主题交换机. 2.主题交换机 发送到主题交换机(top ...

  8. mysql 常用功能

    一.备份 mysqldump [OPTIONS] database [tables] http://www.blogjava.net/Alpha/archive/2007/08/10/135694.h ...

  9. MVC页面跳转,路径重复的问题

    window.location.replace("../Home/xxx") 这是js路径跳转的示范,如果普通超链接也一样 前面加一个../

  10. structs2 获得表单数据

    http://blog.csdn.net/crazy_java1234/article/details/52766307