[CSS] 使用box-sizing可以方便的对齐表单的文本区域、文本框、下拉框等的大小。

即使使用CSS指定了表单各部分的宽度，如文本区域、文本框、下拉框等，根据浏览器的不同显示也不会正确对齐，无法显示适当地...

我终于解决了我的感受，所以这里是一个备忘录。

仅宽度是不够的

现在，这是一个示例。

<style type="text/css"> .sample1_1{ width:250px; margin:10px 0px 10px 0px; } .sample1_2{ width:250px; height:100px; resize:none; margin:10px 0px 10px 0px; } </style><form><select name="" class="sample1_1"><option value="" selected>海德</option><option value="">肯</option><option value="">哲也</option><option value="">幸弘</option></select><br><input type="text" name="" class="sample1_1"><br><textarea name="" class="sample1_2"></textarea></form>

即使为每个元素指定相同的尺寸，根据浏览器的不同，显示也可能不会对齐。
我特别关心宽度的差异。

写入 box-sizing:border-box 以及宽度和高度；

在这种情况下，连同每个元素的宽度和高度，

框大小：边框框；

如果您指定它工作正常。

<style type="text/css"> .sample2_1{ width:250px; box-sizing:border-box; margin:10px 0px 10px 0px; } .sample2_2{ width:250px; height:100px; box-sizing:border-box; resize:none; margin:10px 0px 10px 0px; } </style><form><select name="" class="sample2_1"><option value="" selected>海德</option><option value="">肯</option><option value="">哲也</option><option value="">幸弘</option></select><br><input type="text" name="" class="sample2_1"><br><textarea name="" class="sample2_2"></textarea></form>

什么是盒子大小属性？

box-sizing属性是用于指定如何计算盒子尺寸（宽度、高度）的属性。

可能的值为：

• content-box：元素宽度和高度中不包括内边距和边框宽度。默认值。
• border-box：将内边距和边框宽度包含在元素的宽度和高度中。

就是这样。

后记

使用后发现非常方便。

您可以考虑使用 box-sizing: border-box; 作为默认值。