5分鐘搞定box-sizing

王晗發(fā)布于2019-08-29 14:04 / 601人閱讀

摘要：是什么一言以蔽之，用來控制元素的內(nèi)容區(qū)域的寬高與，之間的關(guān)系正常的盒模型元素的內(nèi)容區(qū)域?qū)挾仍氐膬?nèi)容區(qū)域高度元素實(shí)際占的寬度元素實(shí)際占的高度正常顯示從圖中可以看出元素實(shí)際占的寬度為。

box-sizing是什么

一言以蔽之，box-sizing用來控制元素的內(nèi)容區(qū)域的寬/高與padding，border之間的關(guān)系；
正常的盒模型：

元素的內(nèi)容區(qū)域?qū)挾?width；

元素的內(nèi)容區(qū)域高度=height；

元素實(shí)際占的寬度=width+padding+border；

元素實(shí)際占的高度=height+padding+border；

正常顯示

從圖中可以看出元素實(shí)際占的寬度為 420px（10px+50px+300px+50px+10px）。
當(dāng)我們?cè)谠揹iv上設(shè)置一個(gè) box-sizing:content-box;效果跟默認(rèn)的一致，也就是說默認(rèn)的盒子模型就是
box-sizing:content-box; 如下圖所示：

box-sizing:content-box

當(dāng)設(shè)置 box-sizing:border-box;時(shí)，元素的實(shí)際寬度就為 300px了，也就是實(shí)際寬度值就是 width的值，而該div的內(nèi)容區(qū)的寬度則為除去 padding 和border后的寬度；如下圖所示：

box-sizing:border-box;

GPU云服務(wù)器云服務(wù)器每隔5分鐘 5分鐘打造webrtc 每天5分鐘玩轉(zhuǎn)kubernetes 搞定

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112898.html

相關(guān)文章

兩招搞定三欄布局——圣杯布局、雙飛翼布局

摘要：如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局這是一道經(jīng)典的面試題，常用的方法是圣杯布局雙飛翼布局。相信看完這篇文章，你就能很清楚的知道什么是圣杯和雙飛翼了。在雙飛翼中避免左右盒子被覆蓋，是通過設(shè)置的左右來實(shí)現(xiàn)的。如何實(shí)現(xiàn)如下的這種中間自適應(yīng)寬度，左右兩欄固定寬度布局？ showImg(https://segmentfault.com/img/bVbe5Dq?w=1215&h...

Kaede 2019-08-29 16:19 評(píng)論0 收藏0
跨瀏覽器問題的五種解決方案

摘要：簡評(píng)瀏覽器兼容性問題常常讓人頭疼，以下是避免出現(xiàn)這些問題的五個(gè)技巧。使用您可以使用，下面是我用的，來自。要解決這個(gè)問題，可以添加這個(gè)清除如果沒有清除，很容易出問題。如果你讓這些東西成為一種習(xí)慣，大概可以搞定九成的瀏覽器問題。簡評(píng)：瀏覽器兼容性問題常常讓人頭疼，以下是避免出現(xiàn)這些問題的五個(gè)技巧。 1. 前綴 CSS3 樣式如果您正在使用任何類型的現(xiàn)代 CSS 片段，例如框尺寸（box...

mengbo 2019-08-19 10:15 評(píng)論0 收藏0
跨瀏覽器問題的五種解決方案

摘要：簡評(píng)瀏覽器兼容性問題常常讓人頭疼，以下是避免出現(xiàn)這些問題的五個(gè)技巧。使用您可以使用，下面是我用的，來自。要解決這個(gè)問題，可以添加這個(gè)清除如果沒有清除，很容易出問題。如果你讓這些東西成為一種習(xí)慣，大概可以搞定九成的瀏覽器問題。簡評(píng)：瀏覽器兼容性問題常常讓人頭疼，以下是避免出現(xiàn)這些問題的五個(gè)技巧。 1. 前綴 CSS3 樣式如果您正在使用任何類型的現(xiàn)代 CSS 片段，例如框尺寸（box...

jackwang 2019-08-30 15:44 評(píng)論0 收藏0
跨瀏覽器問題的五種解決方案

摘要：簡評(píng)瀏覽器兼容性問題常常讓人頭疼，以下是避免出現(xiàn)這些問題的五個(gè)技巧。使用您可以使用，下面是我用的，來自。要解決這個(gè)問題，可以添加這個(gè)清除如果沒有清除，很容易出問題。如果你讓這些東西成為一種習(xí)慣，大概可以搞定九成的瀏覽器問題。簡評(píng)：瀏覽器兼容性問題常常讓人頭疼，以下是避免出現(xiàn)這些問題的五個(gè)技巧。 1. 前綴 CSS3 樣式如果您正在使用任何類型的現(xiàn)代 CSS 片段，例如框尺寸（box...

CatalpaFlat 2019-08-26 10:28 評(píng)論0 收藏0
跨瀏覽器問題的五種解決方案

摘要：簡評(píng)瀏覽器兼容性問題常常讓人頭疼，以下是避免出現(xiàn)這些問題的五個(gè)技巧。使用您可以使用，下面是我用的，來自。要解決這個(gè)問題，可以添加這個(gè)清除如果沒有清除，很容易出問題。如果你讓這些東西成為一種習(xí)慣，大概可以搞定九成的瀏覽器問題。 showImg(https://segmentfault.com/img/remote/1460000019386712); 簡評(píng)：瀏覽器兼容性問題常常讓人頭...

JouyPub 2019-08-23 17:57 評(píng)論0 收藏0