框模型中设置内容区域元素占地尺寸box-sizing属性
盒子模型有两种 一种是 内容盒子模型(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属性的更多相关文章
- CSS3中设置字体的抗锯齿或光滑度的属性
刚刚接触前端开发,对于-webkit-font-smoothing: antialiased; 这个属性不了解.上网查找了一些资料. 总结一下: -webkit-font-smoothing : ...
- 关于在Editplus中设置内容提示比如syso的快捷输出的方法
在Editplus中默认的内容提示是很少的,比如我们最常用的syso快捷输出就没有,那么怎么来设置呢? 首先打开工具-首选项: 然后打开文件类型及语法-在文件类型中打开Java,如图: 然后打开 我们 ...
- 更改IOS于UISearchBar撤消button底、搜索输入文本框背景中的内容和UISearchBar底
转载请标明出处:http://blog.csdn.net/android_ls/article/details/39993433 測试的手机IOS系统版本为:6.1.3,实现过程例如以下: 1.加入U ...
- CSS 框模型( Box module )
框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
- KB006: CSS 框模型( Box module )
框和布局 在 KB005: CSS 层叠 中已经介绍了 CSS 的重要之处.CSS 可以说是页面表现的基础, CSS 可以控制布局,控制元素的渲染. 布局是讲在电影画面构图中,对环境的布置.人物地位的 ...
- CSS框模型:一切皆为框 — 从行框说起
一 行框 看图说话 css 行框 各部分详解 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最 ...
- CSS学习笔记之框模型
1.概述 为了更好的处理 元素内容.内边距.边框 和 外边距 之间的关系,CSS 定义了框模型如下: 内边距.边框 和 外边距 的默认值都是零,可以通过设置元素的 padding.border 和 m ...
- jquery设置元素的readonly与diabled属性方法
cppy from : http://www.cnblogs.com/RascallySnake/archive/2010/08/03/1791365.html Jquery的api中提供了对元素应用 ...
- jQuery设置元素的readonly和disabled属性
jQuery的api中提供了对元素应用disabled和readonly属性的方法,如下: 1.readonly $('input').attr("readonly",&qu ...
随机推荐
- Django中的Ajax详解
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...
- Ribbon整合Eureka,出现 No instances available for XXX 异常
请观察这里的片段有没有问题? @Bean @LoadBalanced public RestTemplate restTemplate() { return new RestTemplate(); } ...
- MySQL `explicit_defaults_for_timestamp` 与 TIMESTAMP
考察下面的 SQL 脚本: CREATE TABLE test1( id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, data VARCHAR(20), ts1 ...
- YCOJ单向公路
题目: 描述 某地区有许多城镇,但并不是每个城镇都跟其他城镇有公路连接,并且有的公路并不能双向行驶.现在我们把这些城镇间的公路分布及允许的行驶方向告诉你,你需要编程解决通过公路是否可以从一个城镇到达另 ...
- springcloud(二) 负载均衡器 ribbon
代码地址:https://github.com/showkawa/springBoot_2017/tree/master/spb-demo ribbon是一个负载均衡客户端 类似nginx反向代理,可 ...
- python中用代码实现99乘法表
第一种:使用for遍历循环嵌套 ,): ,x+): print("%s*%s=%s" % (y,x,x*y),end=" ") print("&quo ...
- (数位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次. 输入 ...
- AtCoder Grand Contest 012 B
B - Splatter Painting Time limit : 2sec / Memory limit : 256MB Score : 700 points Problem Statement ...
- GCD Counting Codeforces - 990G
https://www.luogu.org/problemnew/show/CF990G 耶,又一道好题被我浪费掉了,不会做.. 显然可以反演,在这之前只需对于每个i,统计出有多少(x,y),满足x到 ...
- SpringMVC之基于注解的Controller
参考博客:https://www.cnblogs.com/qq78292959/p/3760560.html Controller注解: 传统风格的Controller需要实现Controller接口 ...