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

DIV設(shè)置width后超出父元素應(yīng)該如何處理

發(fā)表時(shí)間：2023-09-23 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

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

前言

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

語法

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


值一、content-box

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

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

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

值二、border-box

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

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

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

值三、inherit

規(guī)定應(yīng)從父元素繼承 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">這個(gè) div 占據(jù)左半部分。</div>
</div>
 
</body>
</html>

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

相關(guān)閱讀：

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

H5的本地存儲和本地?cái)?shù)據(jù)庫詳細(xì)介紹

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

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


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