溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用css實(shí)現(xiàn)盒尺寸重置、均勻分布的子元素、截?cái)辔谋?/h1>
發(fā)布時(shí)間：2021-08-07 20:55:26 來(lái)源：億速云 閱讀：121 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“怎么用css實(shí)現(xiàn)盒尺寸重置、均勻分布的子元素、截?cái)辔谋尽钡挠嘘P(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

盒尺寸重置

重置盒子模型，以便width s和height s并沒(méi)有受到border 還是padding他們的影響 。

代碼實(shí)現(xiàn)：

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

效果如下：

怎么用css實(shí)現(xiàn)盒尺寸重置、均勻分布的子元素、截?cái)辔谋?><br/></p><p>說(shuō)明</p><p><code>box-sizing: border-box</code> 添加<code>padding</code> 或者<code>border</code> 不影響元素的<code>width</code> 或者<code>height</code> 。<br/><code>box-sizing: inherit</code> 使元素尊重其父元素<code>box-sizing</code> 規(guī)則。<br/>瀏覽器支持98.4 %，沒(méi)有警告。</p><p>均勻分布的子元素</p><p>在父元素中均勻分布子元素。</p><p>代碼實(shí)現(xiàn)：</p><pre><div class="evenly-distributed-children">   <p>Item1</p>   <p>Item2</p>   <p>Item3</p> </div> <style> .evenly-distributed-children {   display: flex;   justify-content: space-between; } <style></pre><p>效果如下：</p><p><img src=“怎么用css實(shí)現(xiàn)盒尺寸重置、均勻分布的子元素、截?cái)辔谋尽钡膬?nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)
AI
助
手