阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    CSS3 box-sizing

    CSS3 box-sizing

    指定两个boxes接壤:

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

    浏览器支持

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

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

    属性 IE Chrome FF safari Open
    box-sizing 10.0
    4.0 -webkit-
    8.0 29.0
    2.0 -moz-
    5.1
    3.2 -webkit-
    9.5

    属性定义及使用说明

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

    相关文章

    CSS3 教程: CSS3 用户界面

    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录