设置或检索对象的盒模型组成模式

a、box-sizing:content-box: padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding,但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
b、box-sizing:border-box: padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染,而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式;如果存在一个完整的`DOCTYPE`则浏览器将会采用标准模式,而如果它缺失则浏览器将会采用怪异模式。

强烈建议阅读加深理解:[怪异模式(Quirks Mode)对 HTML 页面的影响](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/),这里列下浏览器标准模式和怪异模式的区别:
(1)盒模型: 
在怪异模式下,盒模型为IE盒模型而非标准模式下的W3C 盒模型:在 IE 盒模型中,
box width = content width + padding left + padding right + border left + border right,
box height = content height + padding top + padding bottom + border top + border bottom。
而在 W3C 标准的盒模型中,box 的大小就是 content 的大小。
(2)图片元素的垂直对齐方式: 
对于`inline`元素和`table-cell`元素,在 IE Standards Mode 下 vertical-align 属性默认取值为`baseline`。而当`inline`元素的内容只有图片时,如`table`的单元格`table-cell`。在 IE Quirks Mode 下,`table`单元格中的图片的 `vertical-align` 属性默认为`bottom`,因此,在图片底部会有几像素的空间。
(3)`<table>`元素中的字体: 
CSS 中,描述`font`的属性有`font-family`,`font-size`,`font-style`,`font-weigh`,上述属性都是可以继承的。而在 IE Quirks Mode 下,对于`table` 元素,字体的某些属性将不会从`body`或其他封闭元素继承到`table`中,特别是 `font-size`属性。
(4) 内联元素的尺寸: 
在 IE Standards Mode 下,non-replaced inline 元素无法自定义大小,而在 IE Quirks Mode 下,定义这些元素的`width`和`height` 属性,能够影响该元素显示的大小尺寸。
(5) 元素的百分比高度: 
a、CSS 中对于元素的百分比高度规定如下,百分比为元素包含块的高度,不可为负值。如果包含块的高度没有显式给出,该值等同于“auto”(即取决于内容的高度)。所以百分比的高度必须在父元素有声明高度时使用。
b、当一个元素使用百分比高度时,在 IE Standards Mode 下,高度取决于内容的变化,而在 Quirks Mode 下,百分比高度则被正确应用。
(6) 元素溢出的处理: 
在 IE Standard Mode 下,`overflow`取默认值 `visible`,即溢出可见,这种情况下,溢出内容不会被裁剪,呈现在元素框外。而在 Quirks Mode 下,该溢出被当做扩展`box`来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。

转载于:https://www.cnblogs.com/aixiuxiu/p/6516813.html

box-sizing属性的的用法相关推荐

  1. html div box,CSS box-sizing属性的正确用法

    CSS box-sizing属性的正确用法 CSS自定义属性(变量) CSS box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框. 没有CSS box-sizing属性 默认情况下, ...

  2. html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)

    CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...

  3. CSS3 box-shadow属性设置阴影效果用法大全

    CSS3 box-shadow 属性用来向边框添加一个或多个阴影效果,该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值.可选的颜色值以及可选的 inset 关键词来规定,省略长度的值是 0. ...

  4. python定义一个类和子类_Python面向对象class类属性及子类用法分析

    本文实例讲述了Python面向对象class类属性及子类用法.分享给大家供大家参考,具体如下: class类属性 class Foo(object): x=1.5 foo=Foo() print fo ...

  5. listView无需适配器添加数据(写demo快速开发)entries属性的特殊用法

    先看下简单的布局代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...

  6. Position属性之relative用法

    Relative是position的一个属性,是相对定位,通过本篇文章给大家介绍Position属性之relative用法,对position属性relative相关知识感兴趣的朋友一起学习吧 Rel ...

  7. 给html5标签设置手机号码格式化,meta标签name=format-detection属性写法及用法

    meta标签中name="format-detection"属性作用是在手机端浏览html网页时,用于识别电话号码.电子邮箱和地图位置的格式! 用法格式: 将代码添加到网页的 和之 ...

  8. CSS3中的透明属性opacity的用法实例

    实例 设置 div 元素的不透明级别: div { opacity:0.5; } 完整例子: <!DOCTYPE html> <html> <head> <s ...

  9. Android属性动画进阶用法

    2019独角兽企业重金招聘Python工程师标准>>> 在上周二文章中介绍补间动画缺点的时候有提到过,补间动画是只能对View对象进行动画操作的.而属性动画就不再受这个限制,它可以对 ...

  10. html5 box sizing,CSS 盒模型与box-sizing

    一.盒模型 一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...

最新文章

  1. SkFlattenable /Registrar/
  2. php-nginx超时时间过短导致的post失败
  3. 如何根据字典中值的大小,对字典中的项排序
  4. class view里面的目录项_Eclipse里面出现一排open a terminal,怎么把消除它???
  5. synchronized 面试五连击
  6. Python面向对象-概念、类、实例
  7. Spicy Spring:动态创建自己的BeanDefinition
  8. 工作41:解决vuex刷新数据丢失
  9. 【转】谈谈c#中异步编程模型的变迁**
  10. iOS 中二维码扫描(zxingObjc和原生)
  11. 听说有了华为分布式技术,开发者能够一人顶三人?
  12. java模拟安卓get请求,Java模拟HTTP Get Post请求实现论坛自动回帖功能
  13. linux .deb后缀文件,tar.gz和bin,以及rpm,deb等linux后缀的文件的区别
  14. 信息安全-应用安全-SAST、DAST、IAST
  15. 微信突然限制,你的小程序链接还好吗?
  16. 将ppm格式转换为bmp格式的方式有哪些?
  17. 环保在线监控·水处理设备远程在线监控系统
  18. 在Google使用Borg进行大规模集群的管理
  19. 用tomcat在本地部署一个web服务器
  20. 毕博与中国大学mooc对比

热门文章

  1. 用java将excel导出成vcf文件
  2. 排列组合的写法_数学中,排列组合A C P分别代表什么?求详细。
  3. linux 保存bmp 图片
  4. 如何理解概率论中的“矩”?
  5. 《三国演义》人物出场实例详解
  6. 甘孜州2021高考 康定中学宴冬梅成绩查询,最新2021甘孜州高中排名
  7. 互联网营销,不同阶层的人脉关系,对你真的有用吗?
  8. 字节跳动变更集团LOGO 此前已正式更名为抖音集团
  9. A STRIP OF LAND POJ - 1156 (单调队列)
  10. 花了一年时间开发的YBC管型三维预览控件