购物车
登陆 / 注册
微信扫码登陆

推荐手册

box-sizing

box-sizing
box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。
编辑:前端控 前端控 更新时间:2019-03-23 15:11:27

CSS3 box-sizing 属性

属性定义及使用说明

box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

默认值: content-box
继承: no
版本:CSS3
JavaScript 语法: object.style.boxSizing="border-box"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性1.gif2.gif3.gif4.gif5.gif
box-sizing

10.0

4.0 -webkit-

8.0

29.0

2.0 -moz- 

5.1

3.2 -webkit-

9.5

语法

box-sizing: content-box|border-box|inherit:
说明
content-box这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box 指定宽度和高度(最小/最大属性)确定元素边框box。也就是说,对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算
inherit 指定box-sizing属性的值,应该从父元素继承

指定两个boxes接壤:

实例

div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    width:50%;
    float:left;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号