css中width:100%与width:auto的区别
在布局中，width:100%和width：auto都會(huì)經(jīng)常用到，那么，二者究竟有何區(qū)別呢？下面就來探討下。
先上代碼
可以看到，元素在不設(shè)置padidng和margin的情況下，width:100%和width:auto表現(xiàn)一樣，都是繼承自父級(jí)的寬度。元素的默認(rèn)寬度是 width:auto。
但是，設(shè)置了padding和margin后，表現(xiàn)則大不相同：
可以看出child2溢出父元素，child3則沒有。原因是什么呢？
因?yàn)槎叩膶挾仁怯?jì)算方式不同：
width: auto= 'width' + 'padding-left/right' +'border-left/right' + (margin-left/right) ;
所以就不用擔(dān)心當(dāng)元素自身有margin、padding 、border 時(shí)，寬度會(huì)超過父節(jié)點(diǎn)。
?
width:100%='父元素width' + 'padding-left/right' + 'border-left/right' + (margin-left/right);
這樣就會(huì)發(fā)生內(nèi)容溢出父節(jié)點(diǎn)的情況，會(huì)產(chǎn)生不良的影響。
總結(jié)：這就是二者的區(qū)別，要分情況使用。謝謝。
?
總結(jié)
以上是生活随笔為你收集整理的css中width:100%与width:auto的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql和mongodb替换字段中某字
- 下一篇： 前端实现mac笔记本停靠栏效果