给了两个并排带边框的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. Sass入门：第一章

    1.什么是预处理器? CSS预处理器是用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用.CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题. ...

  2. 关于 plsql连接oracle数据库的问题

    因电脑没有 安装oracle服务器端,所以安装plsql后还是不能连接oracle数据库,网上下载一个oracle客户端工具,是绿色免安装的,解压就好.我放我云盘了. instantclient_11 ...

  3. 1.MyBaits无代理全套增删改

    一.mybatis使用的准备工作 1.找到mybatis所需要的jar文件: mybatis-3.2.3.jar mybatis-spring-1.2.1.jar 2.解压mybatis-3.2.3. ...

  4. Linux启动kettle及linux和windows中kettle往hdfs中写数据(3)

    在xmanager中的xshell运行进入图形化界面 sh spoon.sh 新建一个job

  5. css样式的部分拓展, NuMber对象、 BoM、 DoM对象的模型的间述,ing...

    css部分代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  6. ListCtrl中垂直滚动条自动滚动

    在用ListCtrl控件时,当向该控件中添加数据时,怎么样可以把滚动条时时滚动到最后一行,这样便可看到添加的新数据内容 1 加完数据后执行 EnsureVisible(最后一行索引) 可以保证滚动到最 ...

  7. mysql灵活分页存储过程

    ), -- 表名 ), -- 排序字段(必须!支持多字段不用加order by) IN _PageIndex int, -- 指定当前为第几页 IN _PageSize int, -- 每页多少条记录 ...

  8. 将json文件转换为字符串

    //从给定位置读取Json文件    public   String readJson(String path){        //从给定位置获取文件        File file = new ...

  9. C++侵入式链表

    C++标准模板库中的list是非侵入式的链表,当我们通过对象来删除容器中的对象时,需要从头到尾查找一次得到iterator,最后通过iterator来删除对象.这样删除容器中的对象时比较缓慢,所以就实 ...

  10. NodeJS 学习笔记一

    他创造NodeJS的目的是为了实现高性能Web服务器,他首先看重的是事件机制和异步IO模型的优越性,而不是JS.但是他需要选择一种编程语言实现他的想法,这种编程语言不能自带IO功能,并且需要能良好支持 ...