@寒冬winter 大神的css作業問題

標籤：style   blog   http   tar   ext   color   

區塊層級元素

 

①總是在新行上開始；
②高度，行高以及外邊距和內邊距都可控制；
③寬度預設是它的容器的100%，除非設定一個寬度。
④它可以容納內嵌元素和其他塊元素

行內級元素

 

①和其他元素都在一行上；
②高，行高及外邊距和內邊距不可改變；
③寬度就是它的文字或圖片的寬度，不可改變
④內嵌元素只能容納文本或者其他內嵌元素

替換元素

替換元素是瀏覽器根據其標籤的元素與屬性來判斷顯示具體的內容。

比如：<input /> type="text" 的是，這是一個文本輸入框，換一個其他的時候，瀏覽器顯示就不一樣

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素，這些元素都沒有實際的內容。

非替換元素

(X)HTML 的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。

比如<p>wanmei.com</p>

瀏覽器將把這段內容直接顯示出來。

塊容器

 

沒到找資料 求資料

 

 

包含塊

根項目
預設條件下，html元素為包含塊，一些瀏覽器把body設為包含塊。

非根項目分為兩種情況：

1、對於沒有設定position:absolute的非根項目如position:relative position:static
這種情況下包含塊設定為最近的區塊層級元素內容區的邊緣，注意是內容區的邊緣，而不是margin和padding邊緣。

2、使用了position:absolute絕對位置的元素，
這種情況下包含塊設定在最近的postion不是static的祖先元素(這裡的祖先元素可以是區塊層級元素，也可是內嵌元素)
a、如果祖先元素是區塊層級元素，包含塊設為該區塊層級元素的padding邊
沿
b、如果祖先元素是內嵌元素則包含塊設為該內嵌元素的內容邊沿

定位：
“相對於”是相對於元素在文檔流中的初始位置。
“絕對”是相對於最近的已定位的祖先元素。

絕對位置會覆蓋頁面上的其他元素，可以通過z-index屬性來控制堆放順序。

流動布局中的相對定位：
流動布局是預設的布局，自然的從左至右，從上到下。
如果元素position:relative並且設定了座標，該元素則會以原位置為座標進行位移

塊級上下文

http://lllt.iteye.com/blog/1440532 這裡有示範執行個體

Block Formatting Context （塊格式化上下文）是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。

在建立了 Block Formatting Context 的元素中，其子項目會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin‘ 特性。在 Block Formatting Context 中相鄰的區塊層級元素的垂直邊距會摺疊（collapse）。

以上是關於BFC的相關概念和一點解釋，引自：w3help

BFC的用處：

非 BFC 元素，會忽略其添加 float 的子項目的高度值；其上下邊距會與子項目的邊距產生摺疊；其內、外部的float元素會對自身以及其子項目布局產生影響。

觸發 BFC 是解決這三個問題的有效方式。這也就是為何可用overflow:hidden來清除浮動等問題的原因。

觸發BFC的條件：

1. "float"的值不是"none"
2. "overflow"的值不是"visible"
3. "display"的值是"table-cell"
4. "table-caption",或"inline-block"
5. "position"的值既不是"static"也不是"relative"

以上是網路上普遍的答案，但並未給出具體觸發後相關元素的特點，以及該如何使用

行內上下文

http://www.w3help.org/zh-cn/kb/010/

行框( line boxes )

相對於塊格式化上下文，在行內格式化上下文中，框( boxes )一個接一個地水平排列，起點是包含塊的頂部。 水平方向上的 margin，border 和 padding 在框之間得到保留。 框在垂直方向上可以以不同的方式對齊：它們的頂部或底部對齊，或根據其中文字的基準對齊。 包含那些框的長方形地區，會形成一行，叫做行框。

範例程式碼：

<p style="background-color:silver; font-size:30px;">TEXT1<span style="border:3px solid blue;">text in span</span>great1<em style="border:3px solid red;">thx a lot</em>bee<strong style="border:3px solid green;">give me 5!</strong>Aloha!</p>

以上代碼中，無分行符號及空格，共形成了 7 個行內框。

：

行框的寬度由它的包含塊1和其中的浮動元素決定。高度的確定由行高度計算規則決定。

html中的換行造成空格問題的探討

對於html內建的內聯級標籤以及表單元素標籤，原始碼中連續幾個內聯級標籤中的換行在瀏覽器中會被解釋為一個空格。
包括ie和ff。而這個空格是會被當作一個空白節點（nodeType等於3的節點，就是文位元組點）。
對於html內建的塊級標籤使用了display:inline;則沒上述問題。
對於html內建的塊級標籤之間的換行，ff會當作一個空白節點（用js可以擷取到），ie則會忽略掉這個換行。
這個換行在ie和ff的頁面上並無任何影響，不會出現空格。