div寬度設(shè)置width:100%后再設(shè)置padding或margin超出父元素的解決辦法
前言
本文介紹的是利用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">這個 div 占據(jù)左半部分。</div> </div> </body> </html>
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
欄 目:CSS/HTML
下一篇:標(biāo)簽欄的幾種實現(xiàn)方法(推薦)
本文標(biāo)題:div寬度設(shè)置width:100%后再設(shè)置padding或margin超出父元素的解決辦法
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/9547.html
您可能感興趣的文章
- 04-02css滾動條樣式,css滾動條的樣式
- 01-10通過html為FLASH加鏈接的實現(xiàn)代碼(div層)
- 01-10HTML元素設(shè)置焦點的方法
- 01-10如何讓Flash不遮擋HTML div元素的技巧
- 01-10詳解html中background-image屬性的設(shè)置
- 01-10Html如何設(shè)置橫向?qū)Ш浇Y(jié)構(gòu)
- 01-10有關(guān)HTML表格邊框的設(shè)置小技巧
- 01-10html css 控制div或者table等固定在指定位置的實現(xiàn)方法
- 01-10一些有用的meta設(shè)置方法(必看)
- 01-10向div元素添加圓角邊框的實現(xiàn)方法


閱讀排行
本欄相關(guān)
- 04-02表格樣式css樣式,css樣式表單
- 04-02好看的字體樣式css,好看的字體樣式圖
- 04-02分頁樣式css,分頁樣式j(luò)q
- 04-02分頁樣式css,分頁樣式欄里用來定義首
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css滾動條樣式,css滾動條的樣式
- 04-02css樣式引入方式有幾種,網(wǎng)頁引入css樣
- 04-02html中加入css樣式的簡單介紹
- 04-02vue中的css樣式布局,vue添加css樣式
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表
隨機(jī)閱讀
- 08-05dedecms織夢模板編輯文檔的同時自動更
- 01-10C++ 類訪問控制的條件總結(jié)
- 08-05dedecms織夢模板全站調(diào)用收藏數(shù)的方法
- 08-05DEDECMS點擊主欄目默認(rèn)顯示第一個子欄
- 01-10bat批處理徹底隱藏文件的方法(使用
- 01-10vue實現(xiàn)分頁加載效果
- 08-05織夢dedecms首頁調(diào)用縮略圖為背景
- 01-10C語言打印楊輝三角示例匯總
- 01-10C++實現(xiàn)將數(shù)組中的值反轉(zhuǎn)
- 01-11常用的HTML富文本編譯器UEditor、CKEdi