css属性width默认值width: auto与width: 100%区别

width: auto

子元素(包括content+padding+border+margin)撑满整个父元素的content区域。
子元素有margin、border、padding时,会减去子元素content区域相对应的width值
父元素的content = 子元素(content + padding + border + margin )

 


width: 100%

强制将子元素的content区域 撑满 父元素的content区域
子元素有margin、border、padding时,不改变子元素content区域的width,而是溢出父盒子,保持原有值
父元素的content = 子元素的content

例如



   
       
       
   
   
       


           

1


       

       

           

1


       

   

css属性width默认值width: auto与width: 100%区别_第1张图片

如上图所示,width为100%,但是自身有padding值,所以会溢出(父div内容content宽度+padding),从而有了一个滚动条.

width为auto,总体宽度为父容器的content,自身有padding值,父容器的content会减去padding值之后才会给子div宽度.

你可能感兴趣的:(html,css,CSS,width,auto,100%)