人们慢慢的意识到传统的盒子模型不直接，所以他们新增了一个叫做 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. DMZ原理与应用

    DMZ是英文“demilitarized zone”的缩写,中文名称为“隔离区”,“非军事化区”.它是为了解决安装防火墙后外部网络不能访问内部网络服务器的问题,而设立的一个非安全系统与安全系统之间的缓 ...

  2. Android：webView加载h5网页视频，播放不了，以及横屏全屏的问题和实现自定义加载进度条的效果

    1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...

  3. 弹出PopupWindow背景变暗的实现

    弹出PopuoWindow后 代码里设置的是PopupWindow默认获取焦点 所以PopupWindow显示的时候其它控件点击是没有反应的 用到的方法是 pwMyPopWindow.setFocus ...

  4. html5的离线缓存

    一个离线网络应用程序就是一个URL的列表,html,css,js,图片,或者其他类型的资源. 把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的浏览器将自动切换并使用本地代替. ...

  5. spyder在编辑过程中被自己弄乱了，想要恢复成安装时默认的格式或者重置页面格式的解决办法

    打开spyder,tools-->Reset Spyder to factory defaults,按照如上操作即可恢复成安装时的默认格式.

  6. C# 一段通用的写log 日志的好程序

    public void Write(string text) { FileStream fs = new FileStream(Application.StartupPath+"/log.t ...

  7. kubadm创建k8s v1.10集群

    kubadm创建k8s集群 1:服务器信息以及节点介绍 主机名 ip 备注 k8s-master 192.168.0.104 master etcd keepalived k8s-client1 19 ...

  8. HTTP.ResponseCode

    HTTP响应码: http://blog.csdn.net/cutbug/article/details/4024818

  9. svg 配合cesium使用

    ---恢复内容开始--- 1.svg简介 在 2003 年一月,SVG 1.1 被确立为 W3C 标准. 参与定义 SVG 的组织有:太阳微系统.Adobe.苹果公司.IBM 以及柯达. 与其他图像格 ...

  10. [转] initrd详解

    转自:http://www.cnblogs.com/leaven/archive/2010/01/07/1641324.html 在Linux操作系统中,有一项特殊的功能——初始化内存盘INITRD( ...