CSS之box-sizing的用处简单介绍

简介:

前几天才发现有 box-sizing 这么个样式属性,研究了一番感觉很有意思,

通过指定容器的盒子模型类型,达到不同的展示效果

例如:当一个容器宽度定义为 width:100%;  之后,如果再增加 padding 或者 border 则会溢出父容器,是向外扩张的




如果使用该样式,指定为 box-sizing: border-box; 则 padding 和 border 就不会再溢出,而是向内收缩的,这个效果感觉非常实用,





特别是 input 和 textarea 等 现在设置 100% 再直接增加内边距和边框也不用再进行复杂的计算和适配了



目录
相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
2月前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
23 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
3月前
|
前端开发 开发者 容器
CSS进阶-盒模型调整:box-sizing
【6月更文挑战第14天】`box-sizing`属性在CSS中调整盒模型行为,让元素宽度和高度包含内容、内边距和边框。默认是`content-box`,仅计算内容区,而`border-box`则包含所有。不一致的布局、预期尺寸不符和复杂计算错误是常见问题。使用`* { box-sizing: border-box; }`可简化布局,确保元素尺寸直观一致。了解和正确使用`box-sizing`能提升布局效率和准确性。
77 0
|
10月前
|
前端开发 开发者
css3中有哪些新属性都有什么用处
css3中有哪些新属性都有什么用处
75 0
CSS3 box-sizing 简单案例
CSS3 box-sizing 简单案例
31 1
|
前端开发
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
105 0
css:box-sizing告诉浏览器如何计算一个元素的总宽度和总高度
|
前端开发
CSS - box-sizing
CSS - box-sizing
91 0
|
Android开发 前端开发
css3 box-sizing属性
个人总结: 如果需要兼容IE6 IE7,使用content-box。现在流行bootstrap3,需注意它使用的是border-box。   box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
864 0
|
20天前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果