给了两个并排带边框的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. 关于Webapp的注意事项

    meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, user- ...

  2. Storm源码分析--Nimbus-data

    nimbus-datastorm-core/backtype/storm/nimbus.clj (defn nimbus-data [conf inimbus] (let [forced-schedu ...

  3. LeetCode OJ 31. Next Permutation

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...

  4. BestCoder Round #85 A B C

    本来没有写博客的打算,可是看完了题解感觉这三道题这么水,我却只做出来一道,实在不应该,还是写点东西吧…… A.sum 问题描述 给定一个数列,求是否存在连续子列和为m的倍数,存在输出YES,否则输出N ...

  5. html5 读写sqlite数据库

    var db = openDatabase('MyData','','My Database',102400); //首先它创建一个数据库表,里面有3个字段 db.transaction(functi ...

  6. chapter11_1 Lua数组、列表

    Lua中的table可以表示其他语言提供的数据结构:数组.记录.线性表.队列.集合等. 在Lua中很少编写搜索算法,因为table本身就提供了直接访问任意类型的功能. 数组 使用整数来索引table即 ...

  7. ECOS- 技术问题答疑[转]

    http://bbs.ec-os.net/read.php?tid=37 1.为什么我购买的是源码版,但是我的base/ego.php(或者base/ego/目录下文件)却是加密的?  答:ego 源 ...

  8. KVM 虚拟化基本搭建

    KVM虚拟化技术 KVM是基于x86架构上Linux操作系统的全虚拟化解决方案 ,在Centos6.3系统中,kvm已经被集成到内核中,相当于使用内核来做虚拟机管理程序.由于KVM本身就工作于内核环境 ...

  9. 运行指定路径下的exe

    public void StartProcess(string name) { string exeFileName = "DataControl.exe"; string sta ...

  10. input时间输入框小解

    date    年月日 month 年月 week   年周(ios上不可用,android部分会显示当前是第几周) time   时分(ios不显示时/分的字样) datetime 为一输入框,基本 ...