请在火狐浏览器测试，其他浏览器不一定有效

<!DOCTYPE html > <html > <head> <meta charset="utf-8"> <title>标题</title> <script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<style type="text/css">
textarea{display: block; width:500px;height:500px; margin:100px auto; }
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
-webkit-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}

</style><script type="text/javascript">
</script>
</head> <body>
<div class="content-box">content-box </div>
<div class="padding-box">padding-box</div>
<div class="border-box">border-box </div>

<textarea style="">

浏览器的原因，我在谷歌浏览器上就是你这样的效果，但是火狐就是正常的
ie8+浏览器支持content-box和border-box；ff则支持全部三个值。

css3 box-sizing属性
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内，其实就是怪异模式了~

</textarea>
</body>
</html>

CSS3 box-sizing的更多相关文章

  1. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  2. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

  3. css3 Box model 与 Box-sizing

    1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...

  4. CSS3 用户界面

    CSS3用户界面 在CSS3中,新的用户界面特性包括重设元素尺寸,盒尺寸以及轮廓等. 用户界面属性: resize box-sizing outline-offset 浏览器支持 属性 浏览器支持 r ...

  5. css3常用方法以及css3选择器

    最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面   CSS3 边框   CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加 ...

  6. CSS3总结学习（一）：CSS3用户界面

    在CSS3中,新的用户界面属性有很多,本文重点介绍resize,box-sizing,offset. 浏览器支持,如下图,图片源于W3school 1.CSS Resizing 在css3,resiz ...

  7. CSS3中的新特性

    一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...

  8. Css 进阶篇

    一.Css2 高阶知识(常用) 1. css 优先权 优先权(从低到高) 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) 因此, ...

  9. HTML5 拖放：在相册中对照片进行排序

    1. [代码]index.html     <div class="albums">    <div class="album" id=&qu ...

  10. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

随机推荐

  1. ios使用jspatch中需要注意的事项

    第一份代码,为了纠正原代码不显示29号的bug,先上代码 require('NSString','MCDatePickType','NSMutableArray','UIButton'); defin ...

  2. C/C++:提升_指针的指针和指针的引用

    C/C++:提升_指针的指针和指针的引用 写在前面 今天在使用指针的时候我发现了一个自己的错误.

  3. 5分钟学会使用Less预编译器

    5分钟学会使用Less预编译器 Less是什么? LESS CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法为CSS赋予了动态语言的特性,如变量.继承.运算.函数等,更方便 ...

  4. 常用查找数据结构及算法（Python实现）

    目录 一.基本概念 二.无序表查找 三.有序表查找 3.1 二分查找(Binary Search) 3.2 插值查找 3.3 斐波那契查找 四.线性索引查找 4.1 稠密索引 4.2 分块索引 4.3 ...

  5. 多步骤多分步的组件StepJump

    最近的工作在做一个多步骤多分步的表单页面,这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的,每个步骤可能又分多个小步骤来处理,大步骤之间,以及小步骤之间都是一种顺序发生的业务关系.起初以为这 ...

  6. jQuery页面滚动右侧浮动导航切换

    体验效果:http://hovertree.com/texiao/jquery/49/ 效果图: 代码如下: <!DOCTYPE html> <html> <head&g ...

  7. javaScript系列：js中获取时间new Date()详细介绍

    var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)m ...

  8. ASP.Net Core MVC6 RC2 启动过程分析[偏源码分析]

    入口程序 如果做过Web之外开发的人,应该记得这个是标准的Console或者Winform的入口.为什么会这样呢? .NET Web Development and Tools Blog ASP.NE ...

  9. C#中实现excel文件批量导入access数据表中

    一 .界面简单设计如下: 二 .代码如下: using System; using System.Collections.Generic; using System.ComponentModel; u ...

  10. Java中的字符串

    Java语言中,把字符串作为对象来处理,类String就可以用来表示字符串(类名首字母都是大写的). 1．字符串常量 字符串常量是用双引号括住的一串字符. 例如:"Hello World&q ...