子元素宽度100%,但是父元素加了Padding,子元素宽度超出问题

问题:

子元素宽度100%,但是父元素加了Padding,子元素宽度超出问题_第1张图片

子元素宽度100%,但是父元素加了Padding,子元素宽度超出问题_第2张图片

父元素宽度为500px,给了padding,但是子元素的宽度100%会导致宽度超长

分析问题:

子元素宽度100%,但是父元素加了Padding,子元素宽度超出问题_第3张图片

其实input框的真实宽度,元素本身宽度+元素本身padding+边框,即500+20+4 = 524,超出了父元素的长度

 

 

解决办法:

使用盒子模型box-sizing:border-box,把包括边框内边距以及子元素本身的长度作为整体为100%

效果如下:

子元素宽度100%,但是父元素加了Padding,子元素宽度超出问题_第4张图片

子元素宽度100%,但是父元素加了Padding,子元素宽度超出问题_第5张图片

 

 

 

你可能感兴趣的:(CSS,css3,前端,css)