盒子模型有两种 一种是 内容盒子模型(content-box)一种是边框盒子模型(border-box)。 

content-box:设置的尺寸,只设置内容区域,

      左外边距+左边框+左内边距+内容区域宽度+右内内边距+右边框+右外边距

border-box:设置的尺寸,设置的是包含边框在内,边框内部的尺寸.

      元素实际占地宽度:左外边距+width+右外边距  

      元素实际占地高度: 上外边距+height+下外边距

网上搜索了两张配图不错 很直观。

边框盒子模型(IE6 的盒子模型)起源于IE的怪异模式中的一个bug。对元素指定的width和height 包括了内边距和边框的高度。

  在CSS3中引进了 box-sizing属性,默认值为content-box(标准盒子模型)如果替换为border-box 浏览器会给该元素应用IE盒子模型。即width属性将包含边框的宽度以及内边距。当想以百分比形式设置元素的总体尺寸,又想以像素的单位制定边框和内边距时候,边框模型特别有用。

比如:我要为外部元素设置padding元素留白、添加一个内部元素设置border宽度为3px;padding:4px;使其填满外部元素的空间,于是设置内部元素的尺寸为100%

<div class="outdiv"></div>
<div class="innerdiv"></div>
 .outdiv{
position:relative;
left:40px;
top:40px;
width:200px;
height:200px;
padding:10px;
background:red
}
.innerdiv{
border:3px solid blue;
padding:4px;
width:100%;
height:100%;
background:green;
}

结果如下

这种结果是非常糟糕,元素的大小比与想要的结果要大了。于是给内部的div增加一个box-sizing:border-box属性,结果如下

边框模型在CSS3中的另一个可选方案可以使用calc来计算尺寸。width设置为100%-2*border-2*padding比如把CSS 设置为如下,也可以达到上述的效果Demo

.innerdiv{
border:3px solid blue;
padding:4px;
width:calc(100% - 2 * 3px - 2 * 4px);
height:calc(100% - 2 * 3px - 2 * 4px);
background:green;
}

(注意运算符用空格隔开)

原文链接:https://www.cnblogs.com/dubaokun/p/3493733.html

框模型中设置内容区域元素占地尺寸box-sizing属性的更多相关文章

  1. CSS3中设置字体的抗锯齿或光滑度的属性

    刚刚接触前端开发,对于-webkit-font-smoothing: antialiased; 这个属性不了解.上网查找了一些资料. 总结一下: -webkit-font-smoothing  :  ...

  2. 关于在Editplus中设置内容提示比如syso的快捷输出的方法

    在Editplus中默认的内容提示是很少的,比如我们最常用的syso快捷输出就没有,那么怎么来设置呢? 首先打开工具-首选项: 然后打开文件类型及语法-在文件类型中打开Java,如图: 然后打开 我们 ...

  3. 更改IOS于UISearchBar撤消button底、搜索输入文本框背景中的内容和UISearchBar底

    转载请标明出处:http://blog.csdn.net/android_ls/article/details/39993433 測试的手机IOS系统版本为:6.1.3,实现过程例如以下: 1.加入U ...

  4. CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  5. KB006: CSS 框模型( Box module )

    框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...

  6. CSS框模型:一切皆为框 — 从行框说起

    一 行框 看图说话 css 行框 各部分详解 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最 ...

  7. CSS学习笔记之框模型

    1.概述 为了更好的处理 元素内容.内边距.边框 和 外边距 之间的关系,CSS 定义了框模型如下: 内边距.边框 和 外边距 的默认值都是零,可以通过设置元素的 padding.border 和 m ...

  8. jquery设置元素的readonly与diabled属性方法

    cppy from : http://www.cnblogs.com/RascallySnake/archive/2010/08/03/1791365.html Jquery的api中提供了对元素应用 ...

  9. jQuery设置元素的readonly和disabled属性

    jQuery的api中提供了对元素应用disabled和readonly属性的方法,如下: 1.readonly    $('input').attr("readonly",&qu ...

随机推荐

  1. Django中的Ajax详解

    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...

  2. Ribbon整合Eureka,出现 No instances available for XXX 异常

    请观察这里的片段有没有问题? @Bean @LoadBalanced public RestTemplate restTemplate() { return new RestTemplate(); } ...

  3. MySQL `explicit_defaults_for_timestamp` 与 TIMESTAMP

    考察下面的 SQL 脚本: CREATE TABLE test1( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, data VARCHAR(20), ts1 ...

  4. YCOJ单向公路

    题目: 描述 某地区有许多城镇,但并不是每个城镇都跟其他城镇有公路连接,并且有的公路并不能双向行驶.现在我们把这些城镇间的公路分布及允许的行驶方向告诉你,你需要编程解决通过公路是否可以从一个城镇到达另 ...

  5. springcloud(二) 负载均衡器 ribbon

    代码地址:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo ribbon是一个负载均衡客户端 类似nginx反向代理,可 ...

  6. python中用代码实现99乘法表

    第一种:使用for遍历循环嵌套 ,): ,x+): print("%s*%s=%s" % (y,x,x*y),end=" ") print("&quo ...

  7. (数位DP)51NOD 1042 数字0-9的数量

    给出一段区间a-b,统计这个区间内0-9出现的次数. 比如 10-19,1出现11次(10,11,12,13,14,15,16,17,18,19,其中11包括2个1),其余数字各出现1次.   输入 ...

  8. AtCoder Grand Contest 012 B

    B - Splatter Painting Time limit : 2sec / Memory limit : 256MB Score : 700 points Problem Statement ...

  9. GCD Counting Codeforces - 990G

    https://www.luogu.org/problemnew/show/CF990G 耶,又一道好题被我浪费掉了,不会做.. 显然可以反演,在这之前只需对于每个i,统计出有多少(x,y),满足x到 ...

  10. SpringMVC之基于注解的Controller

    参考博客:https://www.cnblogs.com/qq78292959/p/3760560.html Controller注解: 传统风格的Controller需要实现Controller接口 ...