5分鐘搞定box-sizing

王晗發布于2019-08-29 14:04 / 570人閱讀

摘要：是什么一言以蔽之，用來控制元素的內容區域的寬高與，之間的關系正常的盒模型元素的內容區域寬度元素的內容區域高度元素實際占的寬度元素實際占的高度正常顯示從圖中可以看出元素實際占的寬度為。

box-sizing是什么

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

元素的內容區域寬度=width；

元素的內容區域高度=height；

元素實際占的寬度=width+padding+border；

元素實際占的高度=height+padding+border；

正常顯示

從圖中可以看出元素實際占的寬度為 420px（10px+50px+300px+50px+10px）。
當我們在該div上設置一個 box-sizing:content-box;效果跟默認的一致，也就是說默認的盒子模型就是
box-sizing:content-box; 如下圖所示：

box-sizing:content-box

當設置 box-sizing:border-box;時，元素的實際寬度就為 300px了，也就是實際寬度值就是 width的值，而該div的內容區的寬度則為除去 padding 和border后的寬度；如下圖所示：

box-sizing:border-box;

云服務器 GPU云服務器每隔5分鐘 5分鐘打造webrtc 每天5分鐘玩轉kubernetes 搞定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112898.html

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

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

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

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

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

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

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

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

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

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

JouyPub 2019-08-23 17:57 評論0 收藏0