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. SQLSERVER误删Windows登录用户

    SQLSERVER误删除了Windows登录用户验证方式使用Windows身份验证的解决方法   SQLSERVER误删Windows登录用户验证方式使用Windows身份验证的解决方法 今天看到这篇 ...

  2. [转]在 Mac OS X上编译 libimobiledevice 的方法

    link: http://blog.boceto.fr/2012/05/05/libimobiledevice-for-macosx/ The objective of the day: Compil ...

  3. JS树型菜单

    本树型菜单主要实现功能有:基本的树型菜单,可勾选进行多选项操作. 本树型菜单适合最初级的学者学习,涉及内容不难,下面看代码. 首先看View的代码,第一个<div>用来定义树显示的位置和i ...

  4. myeclipse 配置 resin-pro-4.0.34

    热部署: 在 resin.xml 文件下 增加 <host id="" root-directory="."> <!-- webapps ca ...

  5. 我的Emacs折腾经验谈(一) 一些给新人的建议

    这几天都没有动力写mongodb的东西,我果然还是太懒了么~ 主要是没有一个系统的东西整理出来,加上我令人拙计的语言表达能力,这个坑只能慢慢再补了. 最近在折腾emacs这个东西,首先说我曾经算是个极 ...

  6. JS左侧菜单-02

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns=" ...

  7. error:“Unexpected namespace prefix "xmlns" found for tag LinearLayout”

    错误“Unexpected namespace prefix "xmlns" found for tag LinearLayout”的解决方法 androidUnexpected ...

  8. javaScript 消除错误,并将错误记录在控制台,阻止浏览器错误警告

    当我们使用jquery,和其他各种框架时,有的时候会出现各种错误,  例如jquery文件报错,但又不影响功能,  又不能对jquery做出更改,怎么办呢? window.onerror=functi ...

  9. phpcms 2008 后台发文章chrome和firefox文章不能上传图片的问题

    /web/fckeditor/editor/dialog/fck_image.html /web/fckeditor/editor/dialog/fck_image/fck_image.js 这两个文 ...

  10. 简单使用URLConnection、HttpURLConnection和HttpClient访问网络资源

    URL的openConnection方法将返回一个URLConnection,该对象表示应用程序和URL之间的通信连接.程序可以通过它的实例向该URL发送请求,读取URL引用的资源. 下面通过一个简单 ...