CSS - box-sizing

简介: CSS - box-sizing

content-box:是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box:告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

转自:https://blog.csdn.net/qq_37453240/article/details/79216205

目录
相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
3月前
|
前端开发 开发者 容器
CSS3:flex&box-sizing
本文介绍了CSS中的Flex布局及其相关属性,如`flex-direction`、`flex-wrap`、`justify-content`等,并通过代码示例展示了如何使用这些属性来控制容器内的项目排列方式。同时,还讲解了`align-items`属性用于定义子元素在交叉轴上的对齐方式,以及`box-sizing`属性的不同取值对元素尺寸计算的影响。
|
6月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
41 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
7月前
|
前端开发 开发者 容器
CSS进阶-盒模型调整:box-sizing
【6月更文挑战第14天】`box-sizing`属性在CSS中调整盒模型行为,让元素宽度和高度包含内容、内边距和边框。默认是`content-box`,仅计算内容区,而`border-box`则包含所有。不一致的布局、预期尺寸不符和复杂计算错误是常见问题。使用`* { box-sizing: border-box; }`可简化布局,确保元素尺寸直观一致。了解和正确使用`box-sizing`能提升布局效率和准确性。
151 0
CSS3 box-sizing 简单案例
CSS3 box-sizing 简单案例
43 1
|
前端开发
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
121 0
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
|
Android开发 前端开发
css3 box-sizing属性
个人总结: 如果需要兼容IE6 IE7,使用content-box。现在流行bootstrap3,需注意它使用的是border-box。   box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
883 0