zoukankan      html  css  js  c++  java
  • 没有被广泛采用的box-sizing属性

    在标准盒模型下设置的width和height只是内容的宽和高,但在设置了宽和高的情况下若还要设置border、margin、padding等时,会发生溢出的现象,因此需要将盒模型更改。

    box-sizing 属性用来改变默认的 CSS 盒模型对元素宽高的计算方式。这个属性可以用于模拟那些非正确支持标准盒模型的浏览器的表现。

    1、值

    • content-box

      默认值,标准盒模型。 width 与 height 只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box { 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;

      尺寸计算公式:width = 内容的宽度,height = 内容的高度。宽度和高度都不包含内容的边框(border)和内边距(padding)。

    • border-box (其实box-sizing:border-box就是采用怪异模式下的盒模型来计算宽和高的)。

      width 与 height 包括内边距(padding)与边框(border),不包括外边距(margin)。这是IE 怪异模式(Quirks mode)使用的 盒模型 。注意:这个时候外边距和边框将会包括在盒子中。比如  .box { 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px. 如果计算后的最内部的内容宽度为负值,都会被计算成0,内容还在,所以不可能通过border-box来隐藏元素。

      尺寸计算公式:width = border + padding + 内容的宽度,height = border + padding + 内容的高度。

    2、浏览器支持情况

      支持目前的所有Firefox, Chrome, Safari, Opera版本的浏览器以及 IE8+以上的IE浏览器

  • 相关阅读:
    PCB电路板元器件布局的一般原则*(转)
    PCB Layout初学者必会知识总结(转)
    数字器件和模拟器件?
    同一原理图中怎么区分数字电路和模拟电路
    oracle 11g R2执行INSERT语句,数据库把一个汉字看做3个汉字
    SQL存储过程与函数的区别
    用户自定义函数——Oracle 11g R2
    提高使用SQL Developer进行PL/SQL编程的效率——Oracle 11g R2
    Oracle查看用户使用的表
    JAVA-Eclipse快捷键
  • 原文地址:https://www.cnblogs.com/zhaoyingli/p/5401317.html
Copyright © 2011-2022 走看看