CSS3 box-sizing属性
来源:互联网 发布:windows系统运维书籍 编辑:程序博客网 时间:2024/06/02 07:12
CSS3 box-sizing属性
参照:1. W3cplus 2.MDN
box model
CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型。涉及到width, height, padding, border和margin。
1、W3C的标准Box Model:
/*外盒尺寸计算(元素空间尺寸)*/ Element空间高度 = content height + padding + border + margin Element 空间宽度 = content width + padding + border + margin /*内盒尺寸计算(元素大小)*/ Element Height = content height + padding + border (Height为内容高度) Element Width = content width + padding + border (Width为内容宽度)
2、IE)传统下Box Model(IE6以下,不含IE6版本或“QuirksMode下IE5.5+”):
/*外盒尺寸计算(元素空间尺寸)*/ Element空间高度 = content Height + margin (Height包含了元素内容宽度,边框宽度,内距宽度) Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度) /*内盒尺寸计算(元素大小)*/ Element Height = content Height(Height包含了元素内容宽度,边框宽度,内距宽度) Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)
box-sizing
语法
box-sizing: box-content
| box-border
| inherit
值
content-box
默认值,标准盒子模型。 width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。
注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式:width = 内容的宽度,height =内容的高度。
宽度和高度都不包含内容的边框(border)和内边距(padding)。
border-box
这是当文档处于 Quirks模式时InternetExplorer使用的盒模型(IE6以下版本)。
width 和 height 属性包括内容,内边距和边框,但不包括外边距。
注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
这里的维度计算为:
width = border + padding + 内容的 width,
height = border + padding + 内容的 height。
- CSS3 box-sizing 属性
- css3:box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing 属性
- CSS3 box-sizing 属性
- CSS3 Box-sizing属性
- 【CSS3】box-sizing 属性
- CSS3 box-sizing属性
- 【CSS3】Box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- css3 box-sizing属性
- CSS3 box-sizing 属性
- css3 box-sizing属性
- C语言16位拆成高低八位,和高低八位合成16位数据(1)
- [操作系统] 分段
- 【Scikit-Learn 中文文档】无监督降维
- 迷茫是短暂的,人生是漫长的
- angularjs事件同级传播
- CSS3 box-sizing属性
- matlab对图像进行批量裁剪并保存到特定文件夹
- PB自动注册OCX控件
- #####好####Kafka基本操作命令
- 在 Win10 下使用 VS2017 对 emWin 模拟器编译不成功的解决办法
- 大数据之Hbase
- Atcoder Regular contest 085F NRE 线段树+DP
- sequelize-基本用法
- python pandas dataframe 多个变量的筛选