首页 > Web开发 > 详细

CSS3 box-sizing属性

时间:2017-12-15 13:58:04      阅读:252      评论:0      收藏:0      [点我收藏+]

参照: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属性

原文:http://www.cnblogs.com/huolongguo/p/8042674.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!