前端面试题:width:100%和width:auto的区别

width属性100%和auto的区别

1、width:100%

表示子元素的宽度和父元素的宽度相等,不包括子元素设置的内外边距和边框的值,即子元素的宽度等于父元素content的宽度

代码如下:

    


    
box1
box2

运行结果:

前端面试题:width:100%和width:auto的区别_第1张图片

2、width:auto

表示子元素的宽度+内外边距+边框 等于 父元素的宽度

代码如下:

    


    
box1
box2

运行结果:

前端面试题:width:100%和width:auto的区别_第2张图片

总结

无论是 width: 100% 还是 width: auto,都是相对于父元素的 content 宽度来计算的,区别就在于:

width:100% 的元素, width 与父元素的 content 宽度相等
width:auto 的元素,总宽度(加边框+内外边距)与父元素的 content 宽度相等

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