给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。用box-sizing：border-box,可以去除边框的占位。

浏览器支持IE9以上及火狐、谷歌、Opera等等。

<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>

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

css3的box-sizing的更多相关文章

  1. CSS3 Flex Box（弹性盒子）

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

  2. 转: css3: display:box详解

    示例见:  css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...

  3. CSS3 Flex Box 弹性盒子、弹性布局

    目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...

  4. css3 display:box

    想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome ...

  5. css3 display:box 属性

    先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...

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

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

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

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

  8. 一个简单的CSS3+js 实现3D BOX

    <!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...

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

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

  10. CSS3学习基本记录

    CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow: ...

随机推荐

  1. 高效PHP程序必知的53个技巧

    用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中说 ...

  2. Java 反射 Array动态创建数组

    Java 反射 Array动态创建数组 @author ixenos 注:java.lang.reflect.Array 是个反射工具包,全是静态方法,创建数组以多维数组为基准,一维数组只是特殊实现 ...

  3. 朱丽叶—Cuda+OSG

    #include <cuda_runtime.h> #include <osg/Image> ; typedef struct cuComplex { float r; flo ...

  4. Hibernate配置文件的hbm2ddl.auto属性

    今天遇到一个有意思的问题,我目前做的一个网站采用Spring MVC + Spring + Hibernate的架构,我通过页面插入了一些数据到数据库,可是每次重启tomcat之后,数据都莫名其妙地丢 ...

  5. python学习入门第一天总结

    虽然之前自己也看过许多关于python的视频,但一直没有动力与勇气,所以未能坚持且也没有学得这么深刻,这次希望通过python自动化培训,能够彻底改变自己,通过第一天的python学习,自己学到了许多 ...

  6. velocity 高亮显示

    velocity模板在eclipse中高亮显示的链接 http://download.eclipse.org/eclipse/updates/4.4http://veloeclipse.googlec ...

  7. Python安装httplib2 0.9.2

    1.首先下载httplib2 0.9.2,下载地址: https://pypi.python.org/pypi/httplib2/#downloads 2.然后解压到Python27的安装目录下,将下 ...

  8. ubuntu12.10下OpenFoam的编译

    最近在ubuntu12.10下编译OpenFoam,遇到一些问题,小记一下. 首先到官网下载源码包(我这里下载的是OpenFOAM-2.3.0.tgz,ThirdParty-2.3.0.tgz). 1 ...

  9. ssl证书验证

    当我们在访问https网站时,浏览器就会自动下载该网站的SSL证书,并对证书的安全性进行检查. 其他概念不说了,有效期之类的验证也不说了.只说数字证书的真实性和可信性验证. 1.CA下发给网站的证书是 ...

  10. HDU 2732 Leapin' Lizards

    网络最大流+拆点.输出有坑!!! #include<cstdio> #include<cstring> #include<string> #include<c ...