border-sizing属性详解和应用

Batkid 发布于2019-04-23 13:30 / 477人阅读

摘要：用于更改用于计算元素宽度和高度的默认的盒子模型。它有和三种取值。和属性包括内容，内边距和边框，但不包括外边距。所以，的解释很符合常理。使用建议使用建议根据项目中的使用经验和的建议，推荐将属性设置为。个人网站原文链接属性详解和应用

box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘。

1. 属性讲解

`content-box`

默认值，也是css2.1中的盒子模型。在计算width和height时候，不计算border、padding和margin。高度、宽度都只是内容高度。

`border-box`

css3新增。 width和height属性包括内容，内边距和边框，但不包括外边距。

计算公式：

width = width = border + padding + 内容宽度
height = border + padding + 内容高度

2. 考虑盒子模型的`margin`

从上面可以知道，即时是border-box也是不计算margin，只是多余计算了border和padding。因为border和padding都是盒子模型的一部分，但是margin标记的是盒子和盒子的间距。所以，border-box的解释很符合常理。

问题来了，如果有时候一定要设置margin，怎么做到自由控制来保证兼容？例如，我们下面要设置一个撑满页面的盒子元素，而且有外边距干扰，怎么做？

实现如下效果图：

代码：源码下载




  
  
  
  yuanxin.me

所以，当需要计算外边距(margin)，可以配合css3中的四则运算（calc）来使用。

3. 使用建议

根据项目中的使用经验和w3c的建议，推荐将box-sizing属性设置为border-box。

* {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}

4. 关于

欢迎技术交流，引用请注明出处。
个人网站：godbmw.com
原文链接：border-sizing属性详解和应用

服务器托管超融合服务器属性详解属性选择器详解 Mask属性详解 Qt属性系统详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1977.html

我理解的css盒模型以及使用场景

摘要：在中我们可以通过设置的属性来完成标准或者怪异模式之间的切换。设为之后，和的厚度可以随意调，并不会溢出父元素。 - css盒模型是什么网页设计中css技术所使用的一种思维模型 - 盒模型的组成 showImg(https://segmentfault.com/img/bVboot5?w=736&h=388); - 盒模型的两种标准（在不考虑css3的情况下） showImg(https:...

icyfire 2019-08-30 15:55 评论0 收藏0
CSS 搞事技巧：border+transparent

摘要：默认盒模型的正方形在上方已经说明了，正方形的被挤压为时就会得到三角形的效果。这里选择一种较为取巧的形式，因为这边使用的是行内样式，所以可以直接在它的上获取。面试前还是要为面试刷下题目的，不然真的容易懵介绍出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会：面试官：巴拉巴拉吧…… 我：嗯，啊，这个，...

nifhlheimr 2019-08-29 18:37 评论0 收藏0
DOM盒模型

摘要：中的盒模型传统盒模型在传统盒子模型中我们说的宽度和高度是指该块元素内容的宽度和高度。在这个基础上我们在修改或者块元素的宽度讲不会发生变化。 showImg(https://segmentfault.com/img/bVbnygm?w=320&h=292); CSS中的盒模型传统盒模型在传统盒子模型中我们说的宽度和高度是指该块元素内容的宽度和高度。而一个块元素的宽度是 ...

djfml 2019-08-23 14:52 评论0 收藏0
刷前端面经笔记（一）

摘要：协商缓存从缓存数据库中取出缓存的标识，然后向浏览器发送请求验证请求的数据是否已经更新，如果已更新则返回新的数据，若未更新则使用缓存数据库中的缓存数据。 1.CSS的盒子模型包含元素内容content、内边距padding、边框border、外边距marginbox-sizing:border-box;content-box;inherit;1) content-box:总宽度=mar...

刘德刚 2019-08-23 15:07 评论0 收藏0
css的结构与布局

摘要：实际上表示视口宽度的，而不是。同样，表示视口高度的当视口宽度小于高度时，等于，否则等于。基于的方法这种应该算是最佳的解决办法实现方法当使用布局时，使用在水平和垂直方向都会居中。 1.自适应内部元素在css中，不给元素一个height值时，元素会自适应其内部的元素高度，有时我们想让元素的宽度也达到此效果，应用场景如下。如下当前的这种布局，想要改成最外层的div的宽度由当前的图片撑开的...

GeekQiaQia 2019-08-29 12:25 评论0 收藏0