這篇文章主要介紹css中box-sizing屬性的方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設、網(wǎng)絡營銷策劃、小程序開發(fā)、電子商務建設、網(wǎng)絡推廣、移動互聯(lián)開發(fā)、研究、服務為一體的技術型公司。公司成立十余年以來,已經(jīng)為數(shù)千家陽光房各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務?,F(xiàn)在,服務的數(shù)千家客戶與我們一路同行,見證我們的成長;未來,我們一起分享成功的喜悅。
css box-sizing屬性用于以特定的方式定義匹配某個區(qū)域的特定元素,其語法是box-sizing: content-box|border-box|inherit。
css box-sizing屬性怎么用?
作用:box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。例如,假如您需要并排放置兩個帶邊框的框,可通過將 box-sizing 設置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框,并把邊框和內邊距放入框中。
語法:
box-sizing: content-box|border-box|inherit
說明:
content-box 這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。
border-box 為元素設定的寬度和高度決定了元素的邊框盒。就是說,為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit 規(guī)定應從父元素繼承 box-sizing 屬性的值。
注釋:Internet Explorer、Opera 以及 Chrome 支持 box-sizing 屬性。Firefox 支持替代的 -moz-box-sizing 屬性。
css box-sizing屬性 示例
<!DOCTYPE html> <html> <head> <style> div.container { width:30em; border:1em solid; } div.box { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ width:50%; border:1em solid red; float:left; } </style> </head> <body> <div class="container"> <div class="box">這個 div 占據(jù)左半部分。</div> <div class="box">這個 div 占據(jù)右半部分。</div> </div> </body> </html>
效果輸出:
以上是css中box-sizing屬性的方法的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文名稱:css中box-sizing屬性的方法
路徑分享:http://sd-ha.com/article22/jgihjc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設、域名注冊、動態(tài)網(wǎng)站、網(wǎng)站設計公司、響應式網(wǎng)站、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)