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. Memcached快递上手之C#

    Memcached快递上手之C# Memcached是开源高性能分布式缓存组件,目前已经广泛应用各类互联网领域. 具有多种语言的客户端开发包,包括:Perl/PHP/JAVA/C/Python/Rub ...

  2. IP数据报是如何在网络中转发的？

    首先发送方抽取目的站的网络前缀,来判断是否目的站是否位于同一网络上,如果在二者有相同的网络前缀,则,直接使用直接交付的方式, 否则,使用由路由器互连的间接交付,这要借助IP路由表,采用表驱动法,路由表 ...

  3. [转]Libev教程

    libev Table of Contents 1 libev 1.1 About The Code 1.2 EventLoop 1.3 Watcher 1.4 How it works 1.4.1 ...

  4. 微信JS-SDK分享接口示例中jsapi_ticket.php和access_token.php说明

    关于如何使用微信JS-SDK,可以查看官方介绍说明:查看链接 在使用分享接口的过程中,查看了示例代码,其中包含两个文件jsapi_ticket.php和access_token.php,记录一下这两个 ...

  5. Hook SSDT中NtCreateProcessEx

    #ifdef __cplusplus extern "C" { #endif #include <ntddk.h> #ifdef __cplusplus } #endi ...

  6. iOS多线程的初步研究1

    iOS多线程的初步研究(一) 对于多线程的开发,iOS系统提供了多种不同的接口,先谈谈iOS多线程最基础方面的使用.产生线程的方式姑且分两类,一类是显式调用,另一类是隐式调用. 一.显示调用的类为NS ...

  7. easyui 通用的datagrid中如何带有查询条件分页

    html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. PostgreSQL数据的导出导入 save your data!

    PostgreSQL数据的导出导入 导出PostgreSQL数据库中的数据: $ pg_dump -U postgres  -f mydatabase.sql  mydatabase 导入数据时首先创 ...

  9. hibernate4 spring3.2 事务不提交分析

    最近在做微信项目,我搭建了一个基于servlet,spring3.2,hibernate4.1的框架.因为基于消息的servlet和基于业务层是分开做的,也就是先把业务层做了,再去将所有的请求转到业务 ...

  10. 【转】简单十步让你全面理解SQL

    简单十步让你全面理解SQL 很多程序员认为SQL是一头难以驯服的野兽.它是为数不多的声明性语言之一,也因为这样,其展示了完全不同于其他的表现形式.命令式语言. 面向对象语言甚至函数式编程语言(虽然有些 ...