明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

DIV設置width后超出父元素應該如何處理

發(fā)表時間：2024-05-08 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)鞤IV設置width后超出父元素應該如何解決，解決DIV設置width后超出父元素的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。前言本文介紹的是利用CSS3的新屬性box-sizing，解決div寬度設置width:100%后再設置padding或margin超出父元素的問題，有...
這次給大家?guī)鞤IV設置width后超出父元素應該如何解決，解決DIV設置width后超出父元素的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

前言

本文介紹的是利用CSS3的新屬性box-sizing，解決div寬度設置width:100%后再設置padding或margin超出父元素的問題，有需要的朋友們可以參考借鑒。

語法

box-sizing: content-box border-box inherit;


值一、content-box

這是由 CSS2.1 規(guī)定的寬度高度行為。

寬度和高度分別應用到元素的內(nèi)容框。

在寬度和高度之外繪制元素的內(nèi)邊距和邊框。

值二、border-box

為元素設定的寬度和高度決定了元素的邊框盒。

就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設定的寬度和高度內(nèi)進行繪制。

通過從已設定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

值三、inherit

規(guī)定應從父元素繼承 box-sizing 屬性的值。

<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>
 
<div class="container">
<div class="box">這個 div 占據(jù)左半部分。</div>
</div>
 
</body>
</html>

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

怎樣用h5的sse服務器發(fā)送EventSource事件

H5的本地存儲和本地數(shù)據(jù)庫詳細介紹

h5怎樣通過canvas來實現(xiàn)滾動彈幕功能

以上就是DIV設置width后超出父元素應該如何解決的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。