css中width:100%与width:auto的区别
生活随笔
收集整理的這篇文章主要介紹了
css中width:100%与width:auto的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在布局中，width:100%和width：auto都會經常用到，那么，二者究竟有何區別呢？下面就來探討下。
先上代碼
可以看到，元素在不設置padidng和margin的情況下，width:100%和width:auto表現一樣，都是繼承自父級的寬度。元素的默認寬度是 width:auto。
但是，設置了padding和margin后，表現則大不相同：
可以看出child2溢出父元素，child3則沒有。原因是什么呢？
因為二者的寬度是計算方式不同：
width: auto= 'width' + 'padding-left/right' +'border-left/right' + (margin-left/right) ;
所以就不用擔心當元素自身有margin、padding 、border 時，寬度會超過父節點。
?
width:100%='父元素width' + 'padding-left/right' + 'border-left/right' + (margin-left/right);
這樣就會發生內容溢出父節點的情況，會產生不良的影響。
總結：這就是二者的區別，要分情況使用。謝謝。
?
總結
以上是生活随笔為你收集整理的css中width:100%与width:auto的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql和mongodb替换字段中某字
- 下一篇： 前端实现mac笔记本停靠栏效果