CSS3 box-sizing 属性
2015-12-16 16:08
465 查看
实例
规定两个并排的带边框的框:div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; float:left; }
亲自试一试
页面底部有更多实例。
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
Firefox 支持替代的 -moz-box-sizing 属性。
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
默认值: | content-box |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.boxSizing="border-box" |
语法
box-sizing: content-box|border-box|inherit;
值 | 描述 |
---|---|
content-box | 这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
border-box | 为元素设定的宽度和高度决定了元素的边框盒。 就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
inherit | 规定应从父元素继承 box-sizing 属性的值。 |
相关文章推荐
- iOS---防支付宝密码输入样式
- 自己总结前端web知识学习——太多太多(html/css/js/php)
- 一步一图剖析CSS中的position定位
- ActionBar样式解析
- CSS实现鼠标滑过按钮更改按钮样式
- CSS实现按钮或文本框圆角效果
- css3 使用SVG做0.5px 的边框细线
- 理解CSS3 transform中的Matrix(矩阵)
- 根据模板提示,加入元素,修改CSS
- transform animation transition css3动画
- CSS-如何引入-格式
- css常见问题
- input输入框清除样式
- HTML/CSS中有序<ol&g bfb7 t;、无序<ul>、定义列表用法详解
- 【转】html使用css让文字超出部分用省略号三个点显示的方法案例
- css控制文字显示长度
- css3d动画学习心得2:一个小游戏实践
- IE8中伪元素动态作用样式不重绘bug记录
- css设置div圆角
- css3属性集合