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的不同属性值间的区别的更多相关文章
-
java中两个对象间的属性值复制，比较，转为map方法实现
package com.franson.study.util; import java.lang.reflect.InvocationTargetException; import java.lang ...
-
tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
-
Android布局文件layout.xml的一些属性值
第一类:属性值 true或者 false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 andr ...
-
利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...
-
display的属性值测试
由于在学习CSS的display的属性值只针对block.inline.inline-block和flex进行过了解,并且自己观察得知列表中li的display属性是list-item,而想要触发BF ...
-
js获取元素属性值为空的原因和解决办法
问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...
-
行盒(line box)垂直方向的属性详解：从font-size、line-height到vertical-align
视觉格式化模型 在一个文档中,每个元素都被表示为0.1或多个矩形的盒子.确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标.① 在CSS中,使用标准盒模型描 ...
-
【Android】Android布局文件的一些属性值
第一类:属性值 true或者 false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 androi ...
-
html中设置data-*属性值 并在js中进行获取属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
-
架构师养成记--12.Concurrent工具类CyclicBarrier和CountDownLatch
java.util.concurrent.CyclicBarrier 一组线程共同等待,直到达到一个公共屏障点. 举个栗子,百米赛跑中,所有运动员都要等其他运动员都准备好后才能一起跑(假如没有发令员) ...
-
my_strcat()
char* my_strcat(char* S1,const char* S2){ //严格符合strcat()的接口形式,需要的S1空间是两个字符串空间总和-1. int i=0,j=0; whil ...
-
nodejs系列（一）安装和介绍
一.安装nodejs http://www.nodejs.org/download/.进入release/选择想要安装的文件,win下安装选择mis和exe的比较方便,安装完毕重新打开cmd命令行,p ...
-
IE6下的bug
一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解 ...
-
第一章：Druid简介
第一章:Druid简介 声明 公司的项目中用到了Druid(不是阿里的连接池),由于网上没有中文的文档,所以只好阅读官方文档.本人第一次阅读英文的文档,非常吃力,借助翻译工具和自己的理解阅读了Duri ...
-
线程间操作无效: 从不是创建控件“button2”的线程访问它
在项目中经常遇到类似的问题,如何解决呢,报错的方法中添加 Control.CheckForIllegalCrossThreadCalls = false; 就可以解决了.
-
fmt标签如何计算两个日期之间相隔的天数
<h2>start -- ${start}</h2><h2>end -- ${end}</h2><fmt:formatDate var=" ...
-
JSONHelp json解析成类，类解析成string
using System; using System.Collections.Generic; using System.IO; using System.Runtime.Serialization. ...
-
java socket - 传递对象
Person类: package com.zhyea.olproxy.socket; import java.io.Serializable; public class Person implemen ...
-
【洛谷P1063】NOIP2006能量项链
能量项链 https://www.luogu.org/problemnew/show/P1063 好像比合并石子更水.. 区间动规,f[l][r]表示合并区间l~r的最大能量 按区间长度dp 枚举中间 ...