人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 box-sizing 的CSS属性。

box-sizing: 盒大小,盒模型.

我们经常遇到左右模块宽度为50%，加个边框会掉下去，加一个这个样式就能解决，看下栗子：

<!DOCTYPE html>

<html>

<head>

<style>

div.container

{

width:300px;

border:10px solid blue;

}

div.box

{

box-sizing:border-box;

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

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

width:50%;

height:80px;

padding:10px;

border:10px solid red;

float:left;

}

</style>

</head>

<body>

<div class="container">

<div class="box">这个 div 占据左半部分。</div>

<div class="box">这个 div 占据右半部分。</div>

<div style="clear:both;"></div>

</div>

</body>

</html>

aaarticlea/png;base64,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" alt="" />

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了。

梨子：

<style type="text/css">

    .content-box{

        box-sizing:content-box;

        -moz-box-sizing:content-box;

        width: 100px;

        height: 100px;

        padding: 20px;

        border: 5px solid #E6A43F;

        background: blue;

    }

    .padding-box{

        box-sizing:padding-box;

        -moz-box-sizing:padding-box;

        width: 100px;

        height: 100px;

        padding: 20px;

        border: 5px solid #186645;

        background: red;

    }

    .border-box{

        box-sizing:border-box;

        -moz-box-sizing:border-box;

        width: 100px;

        height: 100px;

        padding: 20px;

        border: 5px solid #3DA3EF;

        background: yellow;

    }

</style>

aaarticlea/png;base64,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" alt="" />

css3 box-sizing详解。的更多相关文章

  1. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  2. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  3. 第94天：CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  4. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  5. CSS3 中border-image详解

    CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...

  6. Windows渗透利器之Pentest BOX使用详解（一）

    内容概览:                                     知识科普                                    优缺点总结 功能参数详解翻译: 控制 ...

  7. 第93天：CSS3 中边框详解

    CSS3 边框详解 其中边框圆角.边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握. 一.边框圆角  border-radius    每个角可以设置两个值 ...

  8. css3系列之详解perspective

    perspective 简单来说,就是设置这个属性后,那么,就可以模拟出像我们人看电脑上的显示的元素一样.比如说, perspective:800px   意思就是,我在离屏幕800px 的地方观看这 ...

  9. css3径向渐变详解-遁地龙卷风

    (-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...

  10. css3系列之详解border-image

     border-image border-image呢,是给 边框加上背景图片的.没错,就是平常那一小小条的边框,也能加图片. 参数: border-image-source border-image ...

随机推荐

  1. （八） .launch文件 ---编写简单的启动脚本文件

    下面我们将介绍,如何编写一个启动脚本程序:(.launch文件) 还记得我们在 创建ROS软件包教程 中创建的第一个程序包(beginner_tutorials)吗,现在我们要使用它. 在 begin ...

  2. 安装doxygen（一个自动文档生成工具）+Graphviz图形可视化软件

    参考文章: http://www.fmddlmyy.cn/text21.html http://www.cnblogs.com/duguguiyu/archive/2008/06/29/1231852 ...

  3. ES6中的Promise使用方法与总结

    在javascript中,代码是单线程执行的,对于一些比较耗时的IO操作,都是通过异步回调函数来实现的. 但是这样会存在一个问题,当下一个的操作需要上一个操作的结果时,我们只能把代码嵌到上一个操作的回 ...

  4. excel数据复制到html表格<textarea>中

    方案一 多行文本框接收到复制的excel值后,在文本框的chage事件中,将excel内容分割到二维数组中,然后填充到html的表格的input或textarea中. 数据格式: 单元格复制后的数据格 ...

  5. 产品密钥无法激活成功，最后使用visio2013激活软件激活成功。

    装了visio2013,使用网上搜索的产品密钥,没有一个能够激活成功.最后发现了visio的一个激活软件KMSpico,成功激活. 破解工具 KMSpico_setup.exe 下载地址: http: ...

  6. const修饰符用法

    1. 将一个对象设置为不可修改 const int a = 100; 2. 指向const对象的指针 const int* p = 3;可以通过指针来修改指针所指向的值,但是不能通过指针*p修改对像的 ...

  7. Liunx clear

    linux  clear命令  清空终端屏幕命令,另外,按Ctrl+L也可以达到同样的效果. init 0   关闭Liunx init 4   安全模式 init 6   重启Liunx

  8. hdu 1429 (bfs+状态压缩) 胜利大逃亡续

    http://acm.hdu.edu.cn/showproblem.php?pid=1429 典型的状压搜索,在普通的搜索基础上,利用二进制的特性记录钥匙与门, 二进制的每一位代表一把钥匙,比如说拿到 ...

  9. iOS.AutomatePackageBuild.0-Resource-List

    1. xcodebuild xcodebuild: 构建Xcode project和workspace. 2. TN2339: Building from the Command Lline with ...

  10. Android.InstallAntOnMacOSX

    在Mac OS X上安装ant http://blog.csdn.net/crazybigfish/article/details/18215439