博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
box-sizing属性的的用法
阅读量:6853 次
发布时间:2019-06-26

本文共 2125 字,大约阅读时间需要 7 分钟。

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

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

你可能感兴趣的文章
可变参数列表
查看>>
BouncyCastle.Crypto的RSA算法调用源码
查看>>
vs2017 + Python3.6 +Django1.11 连接mysql数据库
查看>>
一张思维导图带你梳理HashMap相关知识
查看>>
MVC 从Excel导入到DataTable
查看>>
Symbol
查看>>
Selenium WebDriver + IE11 问题汇总
查看>>
Oracle数据库设置Scott登录
查看>>
IOS开发之UIScrollVIew运用
查看>>
iOS 基础-----关于UIView 的 frame 与 bounds
查看>>
ISO GPS定位,坐标转换以及如何显示
查看>>
深入理解Java:类加载机制及反射
查看>>
Use a PowerShell Module to Easily Export Excel Data to CSV
查看>>
Redis清理
查看>>
读书笔记—CLR via C#章节8-10
查看>>
洛谷 3804 【模板】后缀自动机
查看>>
LOJ 2736 「JOISC 2016 Day 3」回转寿司 ——堆+分块思路
查看>>
IE8爆出0day,影响所有版本Windows
查看>>
php: Cannot send session cache limiter
查看>>
子类复制父类的值
查看>>