box-sizing :  content-box || border-box || inherit

1、content-box:此值为其默认值。元素的宽度/高度（width/height）等于元素边框宽度（border）加上元素内边距（padding）加上元素内容宽度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

2、border-box:元素的宽度/高度等于元素内容的宽度/高度。（从上面Box Model介绍可知，我们这里的content width/height包含了元素的border,padding,内容的width/height。此处的内容宽度/高度=width/height-border-padding）。

.innerWidth(); .outerWidth(); .width(); .css(width)  ||  .innerHeight(); .outerHeight(); .height(); .css(height)

1、.innerWidth()/.innerHeight()为匹配的元素集合中获取第一个元素的当前计算宽度/高度值,包括padding，但是不包括border。这个方法不适用于window 和 document对象，可以使用.width() 代替。

2、.outerWidth([includeMargin])/.outerHeight([includeMargin])获取元素集合中第一个元素的当前计算宽度/高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。如果 includeMargin 省略或者false，padding 和 border会被包含在计算中；如果true，margin也会被包含在计算中 。这个方法不适用于window 和 document对象，可以使用.width()代替。

3、.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。.css(height) 和 .height()之间的区别同理。

4、.width( value )/.height( value )给每个匹配的元素设置CSS宽度/高度。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>盒模型</title>

 <style>

 *{padding:0;margin:0;}

 div{

     width:500px;height:200px;

     margin:20px;padding:10px;border:2px solid #666;

     box-sizing:border-box;

 }

 </style>

 <script src="jquery.min.js"></script>

 </head>

 <body>

 <div id="box">

     box-sizing:border-box；以上结论适用于Ie8+,Firefox,Chrome

 </div>

 <script>

 var $box = $('#box');

 console.log('box-innerWidth:' + $box.innerWidth());     //box-innerWidth:496

 console.log('box-width:' + $box.width());               //box-width:476

 console.log('box-outerWidth:' + $box.outerWidth());     //box-outerWidth:500

 console.log('box-cssWidth:' + $box.css('width'));       //box-cssWidth:500px

 console.log('box-innerHeight:' + $box.innerHeight());   //box-innerHeight:196

 console.log('box-height:' + $box.height());             //box-height:176

 console.log('box-outerHeight:' + $box.outerHeight());   //box-outerHeight:200

 console.log('box-cssHeight:' + $box.css('height'));     //box-cssHeight:200px

 </script>

 </body>

 </html>
 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>盒模型</title>

 <style>

 *{padding:0;margin:0;}

 div{

     width:500px;height:200px;

     margin:20px;padding:10px;border:2px solid #666;

     box-sizing:content-box;

 }

 </style>

 <script src="jquery.min.js"></script>

 </head>

 <body>

 <div id="box">

     box-sizing:content-box；以上结论适用于Ie8+,Firefox,Chrome

 </div>

 <script>

 var $box = $('#box');

 console.log('box-innerWidth:' + $box.innerWidth());     //box-innerWidth:520

 console.log('box-width:' + $box.width());               //box-width:500

 console.log('box-outerWidth:' + $box.outerWidth());     //box-outerWidth:524

 console.log('box-cssWidth:' + $box.css('width'));       //box-cssWidth:500px

 console.log('box-innerHeight:' + $box.innerHeight());   //box-innerHeight:220

 console.log('box-height:' + $box.height());             //box-height:200

 console.log('box-outerHeight:' + $box.outerHeight());   //box-outerHeight:224

 console.log('box-cssHeight:' + $box.css('height'));     //box-cssHeight:200px

 </script>

 </body>

 </html>

网上类似博客：

box-sizing(CSS3的box属性)：http://blog.csdn.net/looksun/article/details/8755610

css3盒模型display:box详解：http://www.css119.com/archives/1605

display属性详解：http://www.divcss5.com/css3book/properties/layout/display.htm

Javascript/Jquery获取浏览器和屏幕各种高度宽度：http://www.cnblogs.com/EricaMIN1987_IT/p/3593431.html

尖刀出鞘的display常用属性及css盒模型深入研究：http://www.cnblogs.com/tugenhua0707/p/4161716.html

IE9不支持compact | box | inline-box属性值

[k]css盒模型的更多相关文章

  1. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  2. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  3. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  4. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  5. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...

  6. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...

  7. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  8. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  9. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

随机推荐

  1. java 运行指定类的main函数

    运行jar文件的方法是: java -jar xxx.jar 但是有时,我们希望运行里面的具体某个类,这时可以通过: java -cp xxx.jar xxx.com.xxxx  它会找到这个类的ma ...

  2. php打印数组 --- 打印出漂亮格式的数组

    htm的<pre>标签,能非常标准的显示数组格式 echo "<pre>";print_r($arr);echo "<pre>&quo ...

  3. Hibernate SQL优化技巧dynamic-insert="true" dynamic-update="true"

    最近正在拜读Hibernate之父大作<Java Persistence with Hibernate>,颇有收获.在我们熟悉的Hibernate映射文件中也大有乾坤,很多值得我注意的地方 ...

  4. PHP如何实现页面静态化

    1.file_put_contents()函数 2.fwrite()函数 3.使用PHP内置缓存机制实现页面静态化-output_buffering

  5. Nginx-tomcat-redis------负载均衡以及session共享

    测试环境 Nginx 1.10.1 tomcat 7.0.70 Redis-x64-3.2.100 说明 tomcat 8 和 redis 实现session共享 有问题. 寻找源码 发现tomcat ...

  6. C# Winform 脱离 Framework (一)

    Linker是一个命令行工具,它以将我们的.net程序生成可脱离.net framework环境运行的程序 . Linker不支持中文的路径,在程序中也不能有中文的标识符. Linker 有2种部署方 ...

  7. 用jinja做了个E-Letter小项目

    做了一个html E-Letter项目. 邮件模板采用jinja2, html 邮件内容生成简直太爽了. 整个项目开发只用了2个小时, 调试却花了大半天时间, 生成的邮件总是发不出去. 于是, 打开 ...

  8. ASP.NET中gridview获取当前行的索引值

    在用GridView控件时,我们经常会碰到获取当前行的索引,通过索引进行许多操作.例如,可以获得当前行某一个控件元素:设置某一元素的值等等.下面结合实例介绍几种获得GridView当前行索引值的方法. ...

  9. 2015年11月26日 Java基础系列（四）class的定义，继承和实现interface

    序,类的设计是JAVA操作的核心,面对对象思想中一切皆对象. 一.类定义中的变量 静态成员变量,为类所有,称为类变量:只有一份,编译时即分配值,使用关键字static声明. 非静态成员变量,每个实例一 ...

  10. WP8.1下 Cortana语音命令 VCD文件 设计

    Windows Phone8.1下的Cortana,可以通过语音的方式,打开.设置应用,进行页面跳转.执行任务. 我们先要创建VCD(VoiceCommand.xml)文件 <?xml vers ...