zoukankan      html  css  js  c++  java
  • box-sizing属性的的用法

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

    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`来对待,即元素的大小由其内容决定,溢出不会被裁剪,元素框自动调整,包含溢出内容。

  • 相关阅读:
    查看mysql版本的四种方法及常用命令
    newInstance和new的区别(good)
    Citrix 服务器虚拟化之六 Xenserver虚拟机创建与快照
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 排序
    Java实现 蓝桥杯 算法训练 2的次幂表示
    Java实现 蓝桥杯 算法训练 2的次幂表示
    Java实现 蓝桥杯 算法训练 前缀表达式
    Java实现 蓝桥杯 算法训练 前缀表达式
  • 原文地址:https://www.cnblogs.com/aixiuxiu/p/6516813.html
Copyright © 2011-2022 走看看