zoukankan      html  css  js  c++  java
  • css3整理--box-sizing

    box-sizing语法:

      box-sizing : content-box || border-box || inherit

      参数取值:

      content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+content width/height。

      border-box:此值让元素维持IE传统的Box Model(IE6以下版本),也就是说元素的宽度/高度等于元素内容的宽度/高度。这里的content width/height包含了元素的border,padding,内容的width/height。即此处的内容宽度/高度=width /height-border-padding。

      

    在实际应用中,该属性有个非常有用的地方,即根据百分比为元素设置宽度时。此时,如果元素有padding或者border,将box-sizing设置为border-box会非常有用。

    例如:

    <ul>
        <li style="box-sizing:border-box; padding:0 10px; 25%; float:left;"></li>
        <li style="box-sizing:border-box; padding:0 10px; 25%; float:left;"></li>
        <li style="box-sizing:border-box; padding:0 10px; 25%; float:left;"></li>
        <li style="box-sizing:border-box; padding:0 10px; 25%; float:left;"></li>
    </ul>

    该例子中,默认情况下,li一定不能保持在同一行内。但是设置了box-sizing:border-box之后,就可以保证li在同一行内。(IE8+和高级浏览器支持)

  • 相关阅读:
    梦断代码阅读笔记一
    进度一
    LOJ#6031. 「雅礼集训 2017 Day1」字符串
    cf700E. Cool Slogans
    BZOJ1014: [JSOI2008]火星人prefix
    BZOJ2716: [Violet 3]天使玩偶
    cf1080F. Katya and Segments Sets
    BZOJ1354: [Baltic2005]Bus Trip
    灭绝树题集
    How Many Substrings?
  • 原文地址:https://www.cnblogs.com/charling/p/3635031.html
Copyright © 2011-2022 走看看