• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • box-sizing

    版本:CSS3

    CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

    示例

    box-sizing: content-box;
    box-sizing: border-box;
    

    在CSS 盒子模型的默认定义里,你对一个元素所设置的widthheight只会应用到这个元素的内容区。如果这个元素有任何的borderpadding,绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时,这个特点尤其烦人。

    box-sizing 属性可以被用来调整这些表现:

    • content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    • border-box 告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的borderpadding,内容区的实际宽度是width减去(border+padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
    :对于新的web站点,你可能希望首先将box-sizing设置为border-box,如下所示:
    *{box-sizing: border-box;}
    这使得处理元素大小的工作变得容易得多,并且通常消除了在布局内容时可能遇到的许多陷阱。然而,在某些情况下,你应谨慎使用这个属性。例如:你正在编写一个将由其他人使用的共享组件库,如果他们网站的其余部分没有设置此值,他们可能会发现很难使用你的组件库。
    注:border-box不包含margin

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE8以上版本的浏览器支持box-sizing

    语法:

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

    尺寸计算公式:
    width=内容的宽度
    height=内容的高度
    宽度和高度的计算值都不包含内容的边框(border)和内边距(padding)。
    border-box
    widthheight属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内,例如,.box{width: 350px; border: 10px solid black;}导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。

    尺寸计算公式:
    width= border + padding +内容的宽度
    height= border + padding +内容的高度
    默认值content-box
    适用于所有接受widthheight的元素
    继承性
    动画性
    计算值指定值

    例子

    //HTML
    
    <div class="content-box">content box</div>
    <br>
    <div class="border-box">border box</div>
    
    //CSS
    
    div {
      width: 160px;
      height: 80px;
      padding: 20px;
      border: 8px solid red;
      background: yellow;
    }
    
    .content-box { 
      box-sizing: content-box; 
      /* total width: 160px + (2 * 20px) + (2 * 8px) = 216px
         total height: 80px + (2 * 20px) + (2 * 8px) = 136px
         content box width: 160px
         content box height: 80px */
    }
    
    .border-box { 
      box-sizing: border-box;
      /* total width: 160px
         total height: 80px
         content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
         content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
    }
    
    Content box

    Border box

    下篇:position