给了两个并排带边框的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. iOS毛玻璃擦除效果

    思路:首先我的思路放两个imageView在Controller里把高清的图片放在下面,带有毛玻璃效果的图片放在上面. //在Controller的view上加一个手势代码如下(温馨提示,开启imae ...

  2. 后台gird表单按钮操作

    1.$this->_removeButton('reset');#########################################删除重置这个按钮.2.$this->_ad ...

  3. 《JS权威指南学习总结--第十一章子集和扩展》

    js子集和扩展:http://www.cnblogs.com/ahthw/p/4298449.html ES6新增let和const关键字:http://www.cnblogs.com/telnetz ...

  4. POJ 3070 矩阵快速幂解决fib问题

    矩阵快速幂:http://www.cnblogs.com/atmacmer/p/5184736.html 题目链接 #include<iostream> #include<cstdi ...

  5. 点（.)运算符和箭头（->）运算符的区别

    本机中,char类型数据占用1byte, unsigned int, int, long int, float类型的数据占用4 bytes, double类型的数据占用8bytes. 至于指向所有基本 ...

  6. 原生态 php连接mysql

    <?php$host = 'localhost';$user = 'root';$pass = '';$dbname = 'test';$con = mysql_connect($host,$u ...

  7. HDU 2102 A计划(DFS)

    题目链接 Problem Description 可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主 ...

  8. Gentoo启动菜单设置：使用官方LiveDVD Grub主题

    设置Gentoo Grub启动主题 拷贝官方LiveDVD grub主题: 下载官方DVD,找到 /boot/grub/themes/GenGrub目录,并拷贝出来. 安装GenGrub主题: 将Ge ...

  9. NOIP2010-普及组复赛-第二题-接水问题

    题目描述 Description 学校里有一个水房,水房里一共装有 m 个龙头可供同学们打开水,每个龙头每秒钟的供水量相等,均为 1.  现在有 n 名同学准备接水,他们的初始接水顺序已经确定.将这些 ...

  10. CentOS中文件夹基本操作命令

    摘自:http://www.centoscn.com/CentOS/help/2013/1024/1967.html 文件(夹)查看类命令 ls--显示指定目录下内容 说明:ls 显示结果以不同的颜色 ...