[css] 說(shuō)說(shuō)你對(duì)css盒子模型的理解

css盒模型由兩個(gè)盒子組成，外在的控制是否換行的盒子，以及內(nèi)在的控制元素內(nèi)容的盒子。比如：display: inline-block, 則它的外在的盒子就是inline也就是不占據(jù)一行，而block則表示內(nèi)部的元素具有塊狀特性。所以，display: inline其實(shí)就是display: inline-inline的縮寫(xiě)，display: block就是display: block-block的縮寫(xiě)。每一個(gè)內(nèi)在的盒子有: width/height, padding, border, margin這幾個(gè)控制盒子大小的屬性。其中 width/height控制元素內(nèi)容大小，padding則控制元素內(nèi)容到border線(xiàn)內(nèi)側(cè)距離，border則是元素外圍邊框大小，而margin則是控制與其他元素的間距，它的背景透明。對(duì)于早期，計(jì)算一個(gè)元素的占據(jù)大小，需要通過(guò)width +2* padding + 2*border來(lái)計(jì)算，css3中提出了box-sizing：border-box，通過(guò)這樣設(shè)置，就可以使元素最終的寬高就是設(shè)定的width/height, 瀏覽器會(huì)根據(jù)width/height, padding, border的大小來(lái)自動(dòng)調(diào)整內(nèi)部元素的大小。

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的[css] 说说你对css盒子模型的理解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。