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

<!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. 关于多字节、宽字节、WideCharToMultiByte和MultiByteToWideChar函数的详解

    所谓的短字符,就是用8bit来表示的字符,典型的应用是ASCII码. 而宽字符,顾名思义,就是用16bit表示的字符,典型的有UNICODE. **************************** ...

  2. 1Z0-053 争议题目解析706

    1Z0-053 争议题目解析706 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 706.You execute the following command to set the ...

  3. Windows下程序启动时出现0xc000007b错误的解决方案

    一.背景介绍 不久前用Qt开发了一款小工具在公司使用,Debug运行时一切正常.可是当Release编译发布打包之后,运行时弹出这样的提示框: 略一思考,首先排除了DLL缺失的可能性.我知道Qt应用程 ...

  4. Windows 10 内置管理员无法打开Metro应用方法

    前言 在windows 10中,由于权限原因,使用了内置管理员账户.虽然这样权限获取了,但是不能打开Metro应用,Microsoft Edge浏览器等,有点不太好.那有没有方法可以修改呢?这是本文要 ...

  5. ASP.NET开源CMS

    CMS这里指 内容管理系统.是Content Management System的缩写. 产生 随着网络应用的丰富和发展,很多网站往往不能迅速跟进大量信息衍生及业务模式变革的脚步,常常需要花费许多时间 ...

  6. 初入网络系列笔记（4）HTTP请求和响应

    一.借鉴说明,本博文借鉴以下博文 1.starok,HTTP必知必会,http://www.cnblogs.com/starstone/p/4890409.html 2.CareySon,HTTP协议 ...

  7. Solr3.6.1 在Tomcat6下的环境搭建

    Solr3.6.1 在Tomcat6下的环境搭建 Tomcat路径:D:\prg\apache-tomcat-6-solr 简写为tomcat_home Solr文件下载保存路径为:F:\softwa ...

  8. 安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2出现0x80072f8a未指定的错误

    本文转载自: http://www.cnblogs.com/JiaoWoWeiZai/p/5892255.html 最近DotNetCore更新到了1.0.1,Azure tools也更新到了2.9. ...

  9. 神奇的CSS3按钮特效

    点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...

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

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