扯點：Box Modal - 盒模型

Tony 發布于2019-08-29 12:17 / 2154人閱讀

摘要：在文檔中，元素被表示為一個矩形的盒子。在中，使用盒模型描述這些矩形盒子中的每一個。規定以具體單位計的內邊距值，比如像素厘米等。但不允許使用負值。實際測試的百分比，測試結果并不是等于，而是近似等于。

在文檔中，元素被表示為一個矩形的盒子。

在CSS中，使用盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊(margin), 邊框邊(border), 內填充邊(padding)與內容邊(content)。

計算元素寬高

box-sizing 決定元素寬度和高度如何計算

box-sizing支持的屬性

content-box | border-box

值	描述
content-box	寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框。
border-box	為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制

padding

值	描述
auto	瀏覽器計算內邊距。
length	規定以具體單位計的內邊距值，比如像素、厘米等。默認值是 0px。但不允許使用負值。
%	規定基于父元素的寬度的百分比的內邊距。

實際測試padding的百分比，測試結果并不是等于，而是近似等于。瀏覽器計算會存在偏差，

border

border繪制在“元素的背景之上”,換句話來說，元素的背景是內容、內邊距和邊框區的背景。

border默認樣式border-style:none;

默認顏色border-color: 元素文本顏色。利用這個特性，解決邊框和文本顏色需要保持的設計要求。

實現透明邊框 border-color:transparent;

margin

值	描述
auto	瀏覽器計算外邊距。
length	規定以具體單位計的外邊距值，比如像素、厘米等。
%	規定基于父元素的寬度的百分比的外邊距

margin: auto計算規則

設置margin: auto后，

行內元素，行內塊級元素margin取值0；

塊級元素，在文檔流中

margin-bottom和margin-top取值0；

margin-left和margin-right取值相同，按照下面公式計算

"margin-left" + "border" + "padding" + "width" + "margin-right" = width of containing block

塊級元素，不在文檔流中

margin-left和margin-right取值相同，按照下面公式計算

"margin-left" + "border" + "padding" + "width" + "margin-right" = width of containing block

margin-top和margin-bottom取值相同，按照下面公式計算

"margin-top" + "border" + "padding" + "height" + "margin-bottom" = height of containing block

margin collapsing(外邊距塌陷、外邊距合并)

在同一個文檔流中，同一個BFC內，兩個相鄰塊級元素的垂直方向上外邊距（margin-top/margin-bottom）會合并

當兩個元素屬于不同的BFC時，這兩個元素的外邊距不會合并。

發生外邊距塌陷的三種基本情況

相鄰的兄弟姐妹元素

塊級父元素與其第一個/最后一個子元素

空塊塊級元素

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型來扯點

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

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

扯點：FC - Formatting Context

摘要：指頁面中一個渲染區域，并且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關系和作用。兩個同胞盒間的垂直距離取決于屬性。同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將折疊。 FC（Formatting Context）指頁面中一個渲染區域，并且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關系和作用。常見的FC有BFC、IFC，GFC和FFC。 BF...

notebin 2019-08-29 14:11 評論0 收藏0
編碼規范系列：css規范

摘要：只有在必須將樣式限制在父元素內也就是后代選擇器，并且存在多個需要嵌套的元素時才使用嵌套。制定一致的注釋規范。設置文件編碼為。語法用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。為選擇器分組時，將單獨的選擇器單獨放在一行。為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。聲明塊的右花括號應當單獨成行。每條聲明語句的 : 后應該插入...

fnngj 2019-08-30 15:53 評論0 收藏0
你不知道的CSS（二）

摘要：用來控制表格單元格寬度你也許遇到過給表格設置了寬度，但是不起作用的問題。這是因為單元格的寬度是根據其內容進行調整的。顯而易見的，默認情況下，單元格寬度受其內容約束。而設置了后，其單元格寬度變得可控了。本文首發于我的博客在上文《你不知道的CSS（一）》中，介紹了兄弟選擇器美化表單，font-size:0消除間隙，overflow清除浮動，border繪制三角形等7個實用技巧。由于文章長...

sewerganger 2019-08-29 13:22 評論0 收藏0
基于狀態機模型的斗地主游戲（NodeJs&SocketIO）

摘要：系統結構系統考慮使用和實現服務器端邏輯，前端使用。邏輯流程主要邏輯包括用戶進入游戲等待對家進入游戲游戲過程結束統計這個過程。 1. 系統結構系統考慮使用Nodejs和SocketIo實現服務器端邏輯，前端使用HTML5。showImg(https://segmentfault.com/img/remote/1460000007643089); 2. 邏輯流程 1 . 主要邏輯包括用戶...

NoraXie 2019-08-30 13:10 評論0 收藏0
基于狀態機模型的斗地主游戲（NodeJs&SocketIO）

摘要：系統結構系統考慮使用和實現服務器端邏輯，前端使用。邏輯流程主要邏輯包括用戶進入游戲等待對家進入游戲游戲過程結束統計這個過程。 1. 系統結構系統考慮使用Nodejs和SocketIo實現服務器端邏輯，前端使用HTML5。showImg(https://segmentfault.com/img/remote/1460000007643089); 2. 邏輯流程 1 . 主要邏輯包括用戶...

xcold 2019-08-22 10:44 評論0 收藏0