box-sizing

属性

box-sizing 属性用来改变默认的 CSS盒模型 对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

box-sizing：content-box（default） | border-box ;

content-box

　　　　默认值，标准盒模型。 width与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。

　　　　注意: 内边距, 边框 & 外边距 都在这个盒子的外部。

　　　　比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

　　　　
　　　　尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。

border-box 

　　　　width 与 height 包括内边距（padding）与边框（border），不包括外边距（margin）。

　　　　这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候内边距和边框将会包括在盒子中。

　　　　比如  .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

　　　　如果计算后的最内部的内容宽度为负值，都会被计算成0，内容还在，所以不可能通过　border-box来隐藏元素。

　　　　　　
　　　　尺寸计算公式：width = border + padding + 内容的宽度，height = border + padding + 内容的高度。

　Demo

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            /*计算height，width时包含了padding border的值*/

            -webkit-box-sizing: border-box;

            -moz-box-sizing: border-box;

            box-sizing: border-box;

            /*计算height，width时没有包含padding border*/

            /*-webkit-box-sizing: content-box;*/

            /*-moz-box-sizing: content-box;*/

            /*box-sizing: content-box;*/

            /*计算height，width时包含了padding 的值*!/*/

            /*-webkit-box-sizing: padding-box;*/

            /*-moz-box-sizing: padding-box;*/

            /*box-sizing: padding-box;*/

            background-color: gray;

            border: 10px orange solid;

            width: 500px;

            height: 300px;

        }

    </style>

</head>

<script>

</script>

<body>

    <div>Demo</div>

</body>

</html>

Link...

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

CSS3中盒子的box-sizing属性的更多相关文章

  1. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  2. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  3. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  4. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  5. CSS3中的skew（）属性

    刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...

  6. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  7. css3中display和box小结

    display:table用处: 1.创建登高列 2.实现大小不确定元素的垂直居中 3.容器内子项目数目未知,子项目平均分配容器的水平空间 float必须指定其宽度才行,不确定的话就用display: ...

  8. js中盒子模型常用的属性你还记得几个？

    //clientWidth;//内容宽度Width+左右填充padding//clientHeight;//内容高度height+上下填充padding//clientLeft;//左边框的宽度相当于 ...

  9. css3中的box-sizing常用的属性有哪些？分别有什么作用？

    content-box:默认标准盒模型,总宽=width+padding+border+margin border-box:IE标准,怪异盒模型,总宽=width+margin inherit:从父元 ...

随机推荐

  1. css,js工具篇

    4. web前端开发分享-css,js工具篇   web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emm ...

  2. SCOPE_IDENTITY、IDENT_CURRENT 和 @@IDENTITY

    SCOPE_IDENTITY.IDENT_CURRENT 和 @@IDENTITY SQL Server 2000中,有三个比较类似的功能:他们分别是:SCOPE_IDENTITY.IDENT_CUR ...

  3. Changing the working directory of VIM

    Sometimes we want to open another file in the same folder with current editing file, what we can do ...

  4. node.js系列笔记之fs模块《二》

    一:感触 最近工作比较忙,感觉也比较多,因为工作上的不顺利,再加上加班比较多,所以最近心情不是很好,再加上英语能力差到不行,所以最近半个月学习进度也比较慢, 但还是告诉自己每天都坚持学一点,即使今天心 ...

  5. web register/validation/login system flowchart

    I spent several days on building a system about this. And make it work well with serveral thousand l ...

  6. javascript数组、对象和Null的typeof同为object，区分解决办法

    在JS里typeof 大家用的很多,可以使对于数组.对象和Null无法区分的问题,看了看犀牛书还是有解决办法的. document.writeln(typeof "abc"); / ...

  7. poj-3898 Software Industry Revolution DP

    题目链接: http://poj.org/problem?id=3898 题目意思: 有两个字符串,模式串和原串.每个字母有一个权值,a为1,b为2,...z为26 模式串中‘ ?’可以被一个字母代替 ...

  8. zoj1537- Playing with a Calculator

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=537 题意:给你一个k值,现在要你求一个最小的N 值,N每一个数位上的数值a均相 ...

  9. 64win7+64Oracle+32plsql

    1)安装Oracle 11g 64位   2)安装32位的Oracle客户端( instantclient-basic-win32-11.2.0.1.0) 下载instantclient-basic- ...

  10. listView 分页加载数据

    Android应用 开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页 的形式来展示数据,个人觉得这样会有 ...