浏览器支持

IE Firefox Chrome Safari Opera
 支持  支持  支持  支持  支持

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

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 属性的值。

css border-sizing 用法与理解的更多相关文章

  1. jquery之 css()方法。用法类似的有attr(),prop(),val()

    [注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...

  2. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  3. CSS魔法堂:深入理解line-height和vertical-align

    前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...

  4. 格式与布局 CSS阴影效果(Box-shadow)用法

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...

  5. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  6. css变量的用法——(--cssName)

    CSS变量,又称——CSS自定义属性,现在很多CSS预处理/后处理程序已作了相关快捷的编译处理, 基本用法有哪些呢,我们先看一个简单的栗子:——要求,创建一个五个块元素居中的分栏样式,奇数和偶数同高不 ...

  7. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  8. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  9. css cursor url用法格式详解

    css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码:html{cursor: url("h ...

  10. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

随机推荐

  1. “无法识别的配置节system.webServer”解决办法

    在Winsows 2008 Server 上安装asp.net 1.1 的应用程序,在启用默认文档或者浏览目录时会向 web.config 文件添加 <system.webServer> ...

  2. Nginx设置默认目录

    server { listen ; server_name basic.com; index index.html index.htm index.php; root /www/wwwroot/bas ...

  3. AC日记——国王游戏 洛谷 P1080

    国王游戏 思路: 贪心+高精: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 1005 struct Dat ...

  4. NET应用——你的数据安全有必要升级

    最近又被[现场破解共享单车系统]刷了一脸,不得不开始后怕:如何防止类似的情况发生? 想来想去,始终觉得将程序加密是最简单的做法.但是摩拜.ofo也有加密,为什么仍然被破解?那是因为请求在传输过程中被篡 ...

  5. 【剑指offer】面试题 5. 替换空格

    面试题 5. 替换空格 题目:请实现一个函数,将一个字符串中的空格替换成"%20".例如,当字符串为We Are Happy. 则经过替换之后的字符串为We%20Are%20Hap ...

  6. 洛谷——P3909 异或之积

    P3909 异或之积 题目描述 对于A_1,A_2,A_3,\cdots,A_NA1​,A2​,A3​,⋯,AN​,求 (6\times \sum_{i=1}^N\sum_{j=i+1}^N\sum_ ...

  7. Mac下配置PHP支持GD库FreeType

    一句话脚本 curl -s http://php-osx.liip.ch/install.sh | bash -s 5.6 记得要FQ哦. 或者下面代码保存成.sh ,代码从http://php-os ...

  8. 【2-SAT(最小字典序/暴力染色)】HDU1814-Peaceful Commission

    [题目大意] 和平委员会每个党派有2个人,只能派出其中1个,其中有一些人之间互相讨厌不能同时派出.求出派遣方案,如果有多种方案输出字典序最小的方案. [思路] 最小字典序只能用暴力染色.初始时均没有染 ...

  9. 【tarjan+缩点】POJ1236[IOI1996]-Network of Schools

    [题意] 见:http://blog.csdn.net/ascii991/article/details/7466278 [思路] 缩点+tarjan,思路也可以到上面的博客去看.(吐槽:这道题其实我 ...

  10. 课堂作业-Bag类的实现

    课堂作业-Bag类的实现 要求: 代码运行在命令行中,路径要体现学号信息,IDEA中,伪代码要体现个人学号信息 参见Bag的UML图,用Java继承BagInterface实现泛型类Bag,并对方法进 ...