问题:
父元素宽度为500px,给了padding,但是子元素的宽度100%会导致宽度超长
分析问题:
其实input框的真实宽度,元素本身宽度+元素本身padding+边框,即500+20+4 = 524,超出了父元素的长度
解决办法:
使用盒子模型box-sizing:border-box,把包括边框内边距以及子元素本身的长度作为整体为100%
效果如下:
问题:
父元素宽度为500px,给了padding,但是子元素的宽度100%会导致宽度超长
分析问题:
其实input框的真实宽度,元素本身宽度+元素本身padding+边框,即500+20+4 = 524,超出了父元素的长度
解决办法:
使用盒子模型box-sizing:border-box,把包括边框内边距以及子元素本身的长度作为整体为100%
效果如下: