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. .Net 异步随手记（一）

    今天要记录的内容摘要是: 什么时候异步代码能“等”在那里,什么时候不会“等” 这两天Coding的时候碰到一个事儿,就是想让异步等在那里结果却直接执行过去了,比如这样: async static vo ...

  2. 关于 HttpModule配置问题

    在经典模式下,配置到System.web节点 在IIS7以上的集成模式下,要配置到<system.webServer>节点 否则会出现类似一下的错误: 具体配置如下: <config ...

  3. Android开发过程中git、repo、adb、grep等指令的使用

    chown 是一条在Unix系统中用于设置文件所有者和文件关联组的命令. 需要超级用户的权限才能执行此命令.只有超级用户和属于组的文件所有者才能变更文件关联组.非特权用户(非超级用户)如需要设置关联组 ...

  4. 关于code reivew

    关于code reivew 先谈谈三个code review的关键因素: 一.创建review要简单 code reivew是一个程序员日常工作中经常做的一件事,理论上来讲,任何一个将要submit到 ...

  5. 如何发布一个自定义Node.js模块到NPM（详细步骤）

    咱们闲话不多说,直接开始! 由于我从没有使用过MAC,所以我不保证本文中介绍的操作与MAC一致. 文章开始我先假定各位已经在window全局安装了Node.js,下面开始进行详细步骤介绍: 本文本着, ...

  6. MyEclipse导入Maven项目pom文件第一行报错，运行Tomcat报Log4j错误--解决方法

    问题描述: 前一段时间电脑第一次导入Maven项目,又是pom文件错,改好后又是运行Tomcat报Log4j错误,一直倒腾了近一个月程序才成功跑起来,太不容易. 也上网查了很长时间,没一个方法能解决我 ...

  7. 办理阿尔伯塔大学(本科)学历认证『微信171922772』Alberta学位证成绩单使馆认证University of Alberta

    办理阿尔伯塔大学(本科)学历认证『微信171922772』Alberta学位证成绩单使馆认证University of Alberta Q.微信:171922772办理教育部国外学历学位认证海外大学毕 ...

  8. list、dict、tuple的一些小操作总结

    一.list 1.赋值(append) list.append(data) 2.去重 list(set(list)) list_gpcode = list(set(list(dfQuery.index ...

  9. Java实践 — SSH远程执行Shell脚本（转）

    原文地址:http://www.open-open.com/lib/view/open1384351384024.html 1. SSH简介         SSH是Secure Shell的缩写,一 ...

  10. iOS设置UITableView中Cell被默认选中后怎么触发didselect事件

    //默认选中某个cell [self.searchResultTV selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] a ...