css3的box-sizing
给了两个并排带边框的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的更多相关文章
- CSS3 Flex Box(弹性盒子)
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- 转: css3: display:box详解
示例见: css3: flexbox (BTW: blog不能包含iframe script真不方便啊~~) display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决 ...
- CSS3 Flex Box 弹性盒子、弹性布局
目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5. align-content 属性 6. 居中 7. align- ...
- css3 display:box
想做自适应的流体布局 box很有用 . 还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).opera(-o-).chrome ...
- css3 display:box 属性
先看例子: .ub{ display: -webkit-box !important; display: box !important; position:relative;}.ub-f1{ posi ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS3与页面布局学习笔记(二)——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 一个简单的CSS3+js 实现3D BOX
<!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...
- CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset
目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...
- CSS3学习基本记录
CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow: ...
随机推荐
- MVC运行机制
一,第一次程序运行时 1,第一次请求的时候 会获取配置文件,然后有个应用启动事件到global.asax.2,在Global.asax文件中,网站第一次运行会创建RouteTable对象,实现URL到 ...
- Spring Security(03)——核心类简介
目录 1.1 Authentication 1.2 SecurityContextHolder 1.3 AuthenticationManager和Authentication ...
- IIS7部署MVC站点后,打开无法正常跳转到首页
产品拿到安装包后想在本地安装测试一下,但是管理工具里没有IIS. 后来在windows功能里添加iis服务. 添加后成功安装. 但是第一次打开时,页面提示要“启用目录浏览”. 启用后,打开的却是站点目 ...
- boost 编译依赖库
正则表达式 icu-devel python python-devel bzip2-devel ./b2 variant=release link=shared threading=multi run ...
- 获取android源码中遇到的问题
最近项目相当紧张,回家之后还需要继续研究android源码. 从网上找了一些资料,下载过程中还是遇到了很多问题.这里罗列一下: 1. 下载Repo过程中提示证书问题: curl https://dl- ...
- Python 学习笔记7
今天很残酷,明天很残酷,后天很美好.但绝大多数人会死在明天的路上.只有真正的勇士才能看到后天的太阳! Python学习是枯燥的.但是一定要坚持! 昨天学习了数据结构和模块. 今天学习输入和输出.错误与 ...
- GO对象和指针初始化
转自http://www.cnblogs.com/tianyajuanke/p/5234205.html
- lua: Learning Official Doc notes
dynamically typed vars: basic types: nil, boolean, number, string, function, userdata, thread & ...
- LR错误整理
1.LoadRunner超时错误: 在录制Web服务器端,如果超过120秒服务器协议脚本回放时超时情况经常出现,产生错误的原因也有很多,解决的方法也不同. 错误现象1:Action.c(16): Er ...
- cocos2d-x 获得系统语言繁体
IosLocalUtil.h #ifndef __IOS_LOCALUTIL_H__ #define __IOS_LOCALUTIL_H__ class IosLocalUtil{ public: s ...