L6.盒模型學習總結

時間 2019-12-12

標籤 l6 模型學習總結简体版

原文原文鏈接

html元素能夠分別歸爲頂級(top-level)元素,塊級(block-level)元素和內聯(inline)元素.^[3]css

Block-level element: 指可以獨立存在, 通常的塊級元素之間以換行(如一個段落結束後另起一行)分隔. 經常使用的塊級元素包括: p, h1~h6, div, ul等;
Inline element: 指依附其餘塊級元素存在, 緊接於被聯元素之間顯示, 而不換行. 經常使用的內聯元素包括: img, span, li, br等;
Top-level element: 包括html, body, frameset, 表現如Block-level element, 屬於高級塊級元素.

Box model：由content(內容), padding, border(邊框), margin組成. 典型的盒模型以下圖所示:html

平面圖以下：css3

一、盒類型

盒類型取決於display的屬性in combination with ‘float’ and ‘position’。瀏覽器

1.1 display屬性的說明值：app

（1）display常見屬性值：ide

inline 建立inline boxui

block 建立block boxthis

none 不建立box,有別於visibility:hidden。visibility:hidden會建立box,只是不顯示。spa

inline-block

建立的box自己是inline box,而內部的由block box組成。

（2）display不常見屬性值：

list-item

One or more block boxes and one marker box. Marker boxes are defined in the Lists module [CSS3LIST]. If the Lists module is not ready, define the position of the marker and the list-style property here? Or refer to CSS 2.1 instead?

run-in

Either block or inline boxes, depending on context (see Run-in boxes). Properties apply to run-in boxes based on their final status (inline-level or block-level).

compact

Either block boxes or a marker box, depending on context (see Compact boxes). Properties apply to compact boxes based on their final status.

table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption

See the Tables module [CSS3TBL].

ruby, ruby-base, ruby-text, ruby-base-group, ruby-text-group

See the Ruby module [CSS3RUBY].

<template>

See the Advanced Layout module [CSS3LAYOUT].

1.2 計算值

Specified value	Computed value
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

1.3 完整規則：

If ‘display’ is ‘none’, then ‘float’ and ‘position’ do not apply.
此外，若 ‘position’值不爲 ‘static’ ‘relative’（此時，float 不起做用）, ‘display’ 根據（1.2）的表格計算.
此外，若float 不爲 ‘none’, ‘display’ 根據（1.2）的表格計算.
此外，若元素爲根元素, ‘display’ 根據（1.2）的表格計算.
此外, ‘display’ 的計算值與說明值（1.1）一致.

二、塊級box、包含塊、流、匿名box Block-level boxes, containing blocks, flows and anonymous boxes

（1）A block-level box

（2）An inline-level box

（3）An anonymous box

（4）The containing block of a box

包含塊（containing block）的定義：元素盒子的位置和大小一般須要經過一個肯定的矩形來計算，這個矩形就是包含塊。

這個矩形除了size和positon外還有‘direction’ 和 ‘block-progression’屬性。

包含塊定義以下：

1）根元素的包含塊是一個被稱爲原始包含塊（initial containing block）的矩形。它由視口肯定，對於分頁媒體來講就是頁區域。它的direction屬性時和根元素的同樣
2）對於其餘元素，若是元素的position是relative或static，包含塊由其最近的塊級祖先的內邊距（content edge）來肯定
若是元素時position:fixed，那麼包含塊就是連續媒體的視口或是分頁媒體的頁區域
若是元素的position屬性時absolute，包含那塊將根據最近的position屬性爲非static的祖先元素來肯定，有以下規則 - 當那個祖先元素是一個內聯元素時，包含塊須要根據祖先元素的direction屬性來肯定 - 若是direction是ltr，那麼包含塊的左上頂點將是祖先元素的第一個盒子的左上頂點，而包含塊的右下頂點將是祖先元素最後一個盒子的右下頂點 - 若是direction是rtl，那麼包含塊的右上頂點將是祖先元素的第一個盒子的右上頂點，而包含塊的左下頂點將是祖先元素最後一個盒子的左下頂點
若是祖先元素是塊狀元素，那麼它的包含塊將是這個祖先元素的padding edge
若是沒有這麼一個祖先元素，則包含塊就是原始包含塊

（4）A flow root

是一個知足如下條件的盒子:

The value of ‘float’ is not ‘none’.
The used value of ‘overflow’ is not ‘visible’.
The value of ‘display’ is ‘table-cell’, ‘table-caption’ (see [CSS3TBL]), ‘inline-block’ or ‘inline-table’.
The value of ‘position’ is neither ‘static’ nor ‘relative’ (see [CSS3POS]).
The value of ‘block-progression’ is ‘lr’ or ‘rl’ and the value of ‘block-progression’ of its parent box is ‘tb’
The value of ‘block-progression’ is ‘tb’ and the value of ‘block-progression’ of its parent box is ‘lr’ or ‘rl’.

‘display: inline’ 的元素不會是flow root。可是 flow root不必定是塊級元素，它能夠是‘inline-block’ 。（即：它可能自己是inline level box,它的子元素是塊級block level box）

css2中的定義與此處（css3）不同：A flow root is called 「an element that establishes a new formatting context.」格式化上下文（formatting context）

（5）The flow (a.k.a. normal flow) 普通流

給定的flow root的普通流是一系列的盒子。

A box belongs to the flow if:

The used value of its ‘display’ is ‘block’, ‘list-item’, ‘table’ or <template>.
The used value of its ‘float’ is ‘none’.
The used value of its ‘position’ is ‘static’ or ‘relative’.
It is either a child of the flow root or a child of a box that belong to the flow.

文檔流中的盒子，會在flow root元素中按照文檔順序和‘block-progression’ 定義的方向一個接一個排布。它們的位置由margins決定。margins可能和它們的包含塊的邊界發生Collapsing 。 More precisely: Each box's left and right margin edges coincide with the left and right content edges of its containing block (if the flow root is ‘tb’), or its top and bottom margin edges coincide with the top and bottom content edges of its containing block (if the flow root is ‘rl’ or ‘lr’).

For example, the fragment
<div class=sidebar>
 <p>Text in a sidebar.
 <p>Here is quote:
 <blockquote lang=ja>
  <p>...
 </blockquote>
 <p>Etc. etc.
</div> 
with the style
　　div.sidebar { block-progression: tb; float: left }
　　blockquote[lang|=ja] { block-progression: rl; height: 10em }
defines two flows:
　　The div is a flow root, because it floats. Its flow consist of the 1st, 2nd and 4th p and the blockquote.
　　The blockquote is vertical, while its parent is horizontal and it is thus a flow root. Its flow is formed by the 3rd p.

3. padding

[ <length> | <percentage> ] padding值不能爲負

padding-top , padding-right, padding-bottom, padding-left 的縮寫

注意： ‘padding-top’ and ‘padding-bottom’ 的百分值是相對於包含塊的寬度的（ width of the containing block), 不是高度 (至少在horizontal flow中;在 vertical flow 中它們是相對於高度的)。

4. margin

[ <length> | <percentage> ] margin值可能爲負

margin-top , margin-right, margin-bottom, margin-left 的縮寫

5. Collapsing margins （http://www.cnblogs.com/guozhiguoli/p/3791466.html）

6. 寬度、高度的計算 (對應標準第9節 Calculating widths, heights and margins)

<length> | <percentage> | auto

不一樣的瀏覽器實現有差異。標準裏面說當咱們在css中設計一個塊級元素的width和height屬性時好比.box{width ：100px; height:100px}時，其中的width 和height僅僅是對content部分設置的，而不是內容，內邊距，邊框的總和（但在IE的早期版本包括IE6中，盒子模型的width和height卻偏偏是這樣定義的，儘管符合人們思考的邏輯，可是不符合規範）

計算寬度和高度：相關屬性min-width,max-width,width; min-height,max-height,height。先無論min與max，按規則計算出width或height的值tentative used width(/height)。而後使tentative used width界於min和max之間。

加入寬高比後的計算規則：

總的來講，就是不超過最大最小值的限制，先肯定width/height，同時儘可能保持ratio，保持不了的取按最大最小值。

Constraint violation	Resolved width	Resolved height
none	w	h
w > max-width （沒列出來，默認h<max-height，因此計算後不用考慮是高度是否超過最大值）	max-width	max(max-width h/w, min-height)*
w < min-width	min-width	min(min-width h/w, max-height)*
h > max-height	max(max-height w/h, min-width)*	max-height
h < min-height	min(min-height w/h, max-width)*	min-height
(w > max-width) and (h > max-height), where (max-width/w ≤ max-height/h)	max-width	max(min-height, max-width h/w)*
(w > max-width) and (h > max-height), where (max-width/w > max-height/h)	max(min-width, max-height w/h)*	max-height
(w < min-width) and (h < min-height), where (min-width/w ≤ min-height/h)	min(max-width, min-height w/h)*	min-height
(w < min-width) and (h < min-height), where (min-width/w > min-height/h)	min-width	min(max-height, min-width h/w)*
(w < min-width) and (h > max-height)	min-width	max-height
(w > max-width) and (h < min-height)	max-width	min-height

接下來，分類陳述不一樣狀況下的width和height: （不知道這一大堆都用在什麼地方……）

9.1. Inline, non-replaced elements

The ‘width’ and ‘height’ properties do not apply.

9.2. Inline or floating, replaced elements

‘margin-left’, ‘margin-right’, ‘margin-top’ and ‘margin-bottom’爲計算值。寬高參考ratio進行計算，若都是auto且都沒有intrinsic值(固有寬度、固有高度)，根據9.4的計算公式計算寬度，再根據ration計算高度。

9.3. Block-level, non-replaced elements in normal flow when ‘overflow’ computes to ‘`visible`’

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ + scrollbar width (if any) = width of containing block

If ‘width’ is not ‘auto’ and ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + scrollbar width (if any) (plus any of ‘margin-left’ or ‘margin-right’ that are not ‘auto’) is larger than the width of the containing block, then any ‘auto’ values for ‘margin-left’ or ‘margin-right’ are, for the following rules, treated as zero. We should drop this paragraph. It causes blocks that are wider than their parent not to be centered (unlike blocks that are narrower), which looks strange.

「over-constrained」的時候會有一個屬性與它的計算值不同。若‘direction’='ltr'，則margin-right值被忽略。反之亦然。