box-sizing：值为 border-box时，其含义为：表示元素的宽度与高度包括内部补白区域(指border和padding)与边框的宽度与高度；值为content-box时，其含义正其前者相反，表示不包括                  内部补白区域与边框的宽度与高度；

看下面示图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            border:25px solid red;

            width:300px;

            height:150px;

            padding:30px;

            margin:20px;

        }

        .div1{

            box-sizing: border-box;

      }

        .div2 {

            box-sizing: content-box;

        }

    </style>

</head>

<body>

<div class="div1">芬阿斯生苛花样百出塔顶 阿斯蒂芬阿斯蒂芬模压阿</div>

<div class="div2">花样百出塔顶 阿斯蒂芬阿斯阿斯蒂芬阿斯蒂芬模压阿</div>

</body>

</html>

 这是div1的样子，其结构图如示：

div2样子，其结构图如示：

还有一个属性值为padding-box,不过这值兼容性不好，基本不用，只有Firefox浏览器兼容；

box-sizing的不同属性值间的区别的更多相关文章

  1. java中两个对象间的属性值复制，比较，转为map方法实现

    package com.franson.study.util; import java.lang.reflect.InvocationTargetException; import java.lang ...

  2. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  3. Android布局文件layout.xml的一些属性值

        第一类:属性值 true或者 false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 andr ...

  4. 利用getComputedStyle方法获取元素css的属性值

    在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...

  5. display的属性值测试

    由于在学习CSS的display的属性值只针对block.inline.inline-block和flex进行过了解,并且自己观察得知列表中li的display属性是list-item,而想要触发BF ...

  6. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

  7. 行盒(line box)垂直方向的属性详解：从font-size、line-height到vertical-align

    视觉格式化模型 在一个文档中,每个元素都被表示为0.1或多个矩形的盒子.确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标.① 在CSS中,使用标准盒模型描 ...

  8. 【Android】Android布局文件的一些属性值

    第一类:属性值 true或者 false   android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 androi ...

  9. html中设置data-*属性值 并在js中进行获取属性值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. c：翻转一个长句中的每个单词

    问题: 输入:“how are    you     baby--   " 输出:”woh era    uoy     --ybab   " #include<stdio. ...

  2. Oracle JDBC存入图片Blob

    创建测试表 create table test_img( id integer primary key, name ), image blob ); 存储图片 import java.io.FileI ...

  3. ASP.NET Web API的核心对象：HttpController

    ASP.NET Web API的核心对象:HttpController 对于ASP.NET Web API来说,所谓的Web API定义在继承自ApiController的类中,可能ApiContro ...

  4. 启动mysql错误解决方案，学会查看错误日志：mysql.sock丢失，mysqld_safe启动报错

    本人还是个菜鸟,下面是我的经验之谈,能解决一些问题,有不对的地方,敬请斧正. 我的是CentOS6.3+MySQL5.1.57. 重启了一次服务器后,使用> mysql -u root -p登陆 ...

  5. 解决MSSQL 2008不能用IP登录的问题

        解决MSSQL 2008不能用IP登录的问题   前提准备:mssql 2008已安装好了一个实例(我按默认情况下安装的实例是:SQLEXPRESS),并安装了SQL Server Manag ...

  6. DNS：域名系统

    DNS:域名系统 1.DNS      DNS 是计算机域名系统(Domain Name System 或Domain Name Service) 的缩写,它是由解析器以及域名服务器组成的.域名服务器 ...

  7. 纯Python综合图像处理小工具（3）10种滤镜算法

    <背景>  滤镜处理是图像处理中一种非常常见的方法.比如photoshop中的滤镜效果,除了自带的滤镜,还扩展了很多第三方的滤镜效果插件,可以对图像做丰富多样的变换:很多手机app实现了实 ...

  8. 三种工厂模式的分析以及C++实现

    三种工厂模式的分析以及C++实现 以下是我自己学习设计模式的思考总结. 简单工厂模式 简单工厂模式是工厂模式中最简单的一种,他可以用比较简单的方式隐藏创建对象的细节,一般只需要告诉工厂类所需要的类型, ...

  9. jsp传值乱码解决办法

    在jsp中,我们经常从数据库读取数据返回客户端,但我们常常在制作时出现乱码现象,所以我们可以用<%request.setCharacterEncoding("UTF-8"); ...

  10. Coursera Machine Leaning 课程总结

    最近机器学习比较火热,身边很多同学都有兴趣,恰好Coursera上面有这门课.讲授这门课的Andrew教授任职斯坦福大学,是coursera的联合创建者,在机器学习领域颇有成就,身边的同学也有几位上这 ...