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. Ajax运用总结B

    Jquery重新学习之八[Ajax运用总结B]   上一篇简单介绍普通javascript以及Jquery的AJAX方法,其中Jquery.ajax()是功能比较强悍的底层方法,可以更多地关注实现过程 ...

  2. 实现Client Credentials Grant

    [OAuth]基于DotNetOpenAuth实现Client Credentials Grant   Client Credentials Grant是指直接由Client向Authorizatio ...

  3. 移动web知识

    1.像素知识 px: css pixels,逻辑像素,浏览器使用的抽象单位 dp,pt:device independent pixels ,设备无关像素 dpr:devicePixelRatio 设 ...

  4. 于快速创建 IEqualityComparer<T> 实例的类 Equality<T>

    于快速创建 IEqualityComparer<T> 实例的类 Equality<T> 原文中的 Equality<T> 实现如下: 1 2 3 4 5 6 7 8 ...

  5. ecshop下启用QQ在线服务，并能实时更新QQ在线状态

    按照 http://blog.csdn.net/zurich1979/article/details/9082201 可轻松实现在线客服, 但是使用后发现一个问题,那就是这种情况下在线客服不能根据QQ ...

  6. WCF 自承载

    WCF 自承载 提供源码 一.WCF 简单介绍 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,是一套通讯接口.现在比较流行的S ...

  7. String和StringBuilder的使用

    如果有理解错误的地方希望有朋友能指出,谢谢!   String是特殊的引用类型的,更像值类型,StringBuilder的是规规矩矩引用类型的.   首先看这样的对比图,Equals()方法是判断两个 ...

  8. RSA加密解密与签名验证

    关于RSACryption帮助类定义见RSACryption 一.加密与解密 //定义明文和密文变量 string plaintext = "天道酬勤,厚德载物!"; string ...

  9. linux 之 getopt_long()

    文件 #include <getopt.h> 函数原型 int getopt_long(int argc, char * const argv[], const char *optstri ...

  10. Weka开发［2］－分类器类

    这次介绍如何利用weka里的类对数据集进行分类,要对数据集进行分类,第一步要指定数据集中哪一列做为类别,如果这一步忘记了(事实上经常会忘记)会出现“Class index is negative (n ...