日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) >

css中width:100%与width:auto的区别

發(fā)布時(shí)間：2025/3/20 33 豆豆
生活随笔 收集整理的這篇文章主要介紹了 css中width:100%与width:auto的区别 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在布局中，width:100%和width：auto都會(huì)經(jīng)常用到，那么，二者究竟有何區(qū)別呢？下面就來(lái)探討下。
先上代碼

<style>* {margin: 0;padding: 0;}.parent {width: 800px;margin: 50px auto;border: 2px solid red;}.child1 {background: orange;}.child2 {width: 100%;background: blue;}.child3 {width: auto;background: green;} </style> <body><div class="parent"><div class="child1">看看我的寬度</div><div class="child2">看看我的寬度</div><div class="child3">看看我的寬度</div></div> </body>

可以看到，元素在不設(shè)置padidng和margin的情況下，width:100%和width:auto表現(xiàn)一樣，都是繼承自父級(jí)的寬度。元素的默認(rèn)寬度是 width:auto。
但是，設(shè)置了padding和margin后，表現(xiàn)則大不相同：

.child2 {width: 100%;margin-left: 100px;padding-left: 100px;background: blue;}.child3 {width: auto;margin-left: 100px;padding-left: 100px;background: green;}

可以看出child2溢出父元素，child3則沒(méi)有。原因是什么呢？
因?yàn)槎叩膶挾仁怯?jì)算方式不同：
width: auto= 'width' + 'padding-left/right' +'border-left/right' + (margin-left/right) ;
所以就不用擔(dān)心當(dāng)元素自身有margin、padding 、border 時(shí)，寬度會(huì)超過(guò)父節(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)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。