盒子模型淺析

番茄西紅柿發布于2019-04-23 13:38 / 3185人閱讀

摘要：上篇文章總結了塊級元素和行內元素這篇文章總結了有關盒子模型的知識，助于梳理知識首先，什么是盒子模型我們知道，文檔中，基本上每個元素都可以看作一個盒子，我們稱之為盒子模型。在盒子模型中我們設置的指的是盒子真實占有寬高即如的寬高。

上篇文章總結了塊級元素和行內元素

這篇文章總結了有關盒子模型的知識，助于梳理知識

首先，什么是盒子模型
我們知道，html文檔中，基本上每個元素都可以看作一個盒子，我們稱之為盒子模型。

盒子模型的組成
盒子模型包含四個重要的部分：
content(width、height):盒子內容寬高
padding:內邊距(填充)
border:邊框
margin:外邊距

重點：對于盒子來說，設置的寬高和真實占有寬高是不一樣的
如圖（一般我們以標準盒子模型為主學習）

在標準盒子模型中,我們用css屬性中的設置width,height其實是內容content的寬高，如果增加邊距和邊框將會增加盒子的寬度（也就是說,如果padding,margin,border都為0的話，盒子真實占有寬度和內容寬度是一樣的）。
在IE盒子模型中,我們設置的width、height指的是盒子真實占有寬高,即如content+border+padding的寬高。

PS：
在瀏覽器，有一些元素有著默認的設置margin,padding,border,這也是我們寫css時一般加入*{margin:0;padding:0}重置樣式的原因。

注意,盒子模型是立體的，即組成盒子的每個部分有著各自的層次
border----->content+padding----->background-image----->background-color----->margin 如下圖：

即：
第1層：盒子的邊框(border)，
第2層：元素的內容(content)、內邊距(padding)
第3層：背景圖(background-image)
第4層：背景色(background-color)
第5層：盒子的外邊距(margin)

那么這些層級有什么用呢？
通過這些層級顯示，我們可以知道優先級的問題：
比如同時設置背景圖和背景色時，背景圖將會在背景色上方顯示

原情況（有背景圖無背景色）：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型title>
    <style>
        .box {
            width:400px;
            height: 200px;
            margin:100px auto;
            background-image: url(1.jpg);
            /*background-color: gray;*/
        }
    style>
head>
<body>
    <div class="box">

    div>
body>
html>

效果圖：

沒有背景圖只有背景色時：

有背景圖有背景色時：

背景色被背景圖直接覆蓋了。

如何查看網頁中的元素的盒子具體情況？？
此處以chrome瀏覽器為例，其他瀏覽器大同小異：
使用F12查看網頁源代碼，選擇一個元素，點擊右邊界面的Computed選項卡即可：

參考文章：

CSS盒模型詳解（圖文教程）

深入理解css盒子模型

CSS學習筆記——盒模型，塊級元素和行內元素的區別和特性

GPU云服務器云服務器盒子模型源碼淺析 cdn淺析 jdbc連接mysql數據庫的方法淺析

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

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

淺析BFC布局的概念以及作用

摘要：的概念以及作用的概念以及作用的定義的定義直譯為塊級格式化上下文。是的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何布局，以及和其他元素之間的關系和作用。BFC的概念以及作用 BFC的定義： (Block formatting context)直譯為塊級格式化上下文。它是一個獨立的渲染區域，只有Block-level box參與，它規定了內...

荊兆峰 2019-04-23 13:29 評論0 收藏0
淺析BFC

摘要：原文鏈接說起其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是 BFC。之所以會想了解下什么...

voyagelab 2019-08-29 15:06 評論0 收藏0
淺析BFC

摘要：原文鏈接說起其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是 BFC。之所以會想了解下什么...

My_Oh_My 2019-08-02 10:14 評論0 收藏0
拓端數據tecdat:DT模型打好用戶流失預防針——電信客戶流失淺析

摘要：基于以上背景，研究人員對年至今的電信用戶流失數據進行分析，并建立預測模型，識別出流失概率很高的客戶群體，同時找出哪些用戶特征對用戶流失會有重大影響。 showImg(https://segmentfault.com/img/bVUMPC?w=747&h=384); 原文鏈接消費者今天會訂閱多個電信服務（電視、付費節目、游戲等）。然而電信供應商提供的服務的差異化程度不高，客戶忠誠度成為...

wushuiyong 2019-08-01 17:35 評論0 收藏0
拓端數據tecdat:DT模型打好用戶流失預防針——電信客戶流失淺析

摘要：基于以上背景，研究人員對年至今的電信用戶流失數據進行分析，并建立預測模型，識別出流失概率很高的客戶群體，同時找出哪些用戶特征對用戶流失會有重大影響。 showImg(https://segmentfault.com/img/bVUMPC?w=747&h=384); 原文鏈接消費者今天會訂閱多個電信服務（電視、付費節目、游戲等）。然而電信供應商提供的服務的差異化程度不高，客戶忠誠度成為...

wawor4827 2019-06-28 13:44 評論0 收藏0