前端佈局---盒子模型

      因爲公司運營後臺頁面不是前端人員作的，當初搭建頁面結構時考慮的太少，致使如今問題愈來愈多，因而決定重構，讓咱們幾個前端提出建議，讓我從給幾個同事（前端+後端+設計）普及佈局知識😂。想一想仍是寫篇文章的好

　　佈局能夠大概理解爲規劃，在初始搭建頁面時，就要根據需求去考慮未來可能出現的問題，從而選擇最優的佈局方式。佈局要聽從從外到內，從總體到局部，搭建完外部架子，指定到部分呢添加內容，內部元素少用固定寬高，儘可能使用padding和內容撐開父級元素，保證頁面可維護性。

　　經常使用的佈局方式大概有幾種，盒模型(經常使用)、flex彈性佈局、Grid網格佈局、聖盃佈局 等等

　　首先從最多見等盒模型提及，

　　盒子模型：每一個元素，都會造成一個矩形塊，主要包括四部分：content(內容)+margin(外邊距)+border(邊框)+padding(內邊距)

　　(一).盒模型根據 box-sizing 屬性分爲兩種模式：

　　當 box-sizing: content-box 時爲標準模式，此時一個塊的總寬度 = width + margin(左右) + pading(左右) + border(左右)，也就是說在給width賦值時，不包括padding 、margin 、border。

　　　　　　　　　　　　　　　

　　當box-sizing: border-box 時爲怪異模式，此時一個塊的總寬度 = width + margin(左右) ，給width賦值時，包含了padding 、border

   　　　　　　　　　　　　　　

　　(二).瞭解了這兩種模式以後，還要知道float、position，由於是基礎的東西，這裏不過多描述

　　(三).在佈局時須要注意BFC

　　　　關於bfc須要瞭解

　　　　　　規則一：BFC是一塊獨立規則的區域，不受外部影響，而內部元素也不會影響到外部。
　　　　　　規則二：清楚浮動。觸發BFC後能感知獲得浮動元素的存在。
　　　　　　規則三：BFC感知獲得浮動元素的高度。

　　如何觸發BFC

1. 根元素
2. float屬性不爲none
3. position爲absolute或fixed
4. display爲inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不爲visible（經常使用）

　　可能會出現的問題

　　1.外邊距摺疊，（處在同一bfc下）

　　2.不清除浮動時，子元素不會撐開父元素的高度爲0的高度

　　3.浮動出現文字環繞，可經過建立不一樣bfc解決(給環繞文字節點添加 overflow:hidden 屬性)

　　具體可訪問 https://www.jianshu.com/p/bf927bc1bed4 BFC詳解

 

　　接下來的文章瞭解其餘佈局