最近看身邊的學弟學妹們研究各種布局問題的時候，自己也將之前的知識拿過來繼續學習了一番，作此整理，方便查閱和複習。
行內元素：內聯元素無法直接放置在body中，它必須完全巢狀在區塊元素中。
塊級元素：擁有矩形結構，在預設情況下，這些元素會跨越父元素的整個寬度，因而不被允許任何其他元素佔據其相同水平空間，因為已被放置。區塊元素的矩形結構經常被稱之為盒模型，並由幾部分組成，接下來將會詳細講到。塊級元素獨佔一行（無法與其他元素顯示在同一行內，除非你顯示修改元素的display屬性為inline-block或者使用浮動等），而行內元素則都會在一行內顯示。
塊級元素可以設定width和height屬性，但是行內元素設定無效。
塊級元素的width預設為100%，而行內元素則是根據其自身內容或者子元素來決定其寬度。
常用塊級元素
常用行內元素
address - 位址
a - 錨點
blockquote - 塊引用
abbr - 縮寫
center - 舉中對齊塊
acronym - 首字
dir - 目錄列表
b - 粗體
div - 常用塊級定義
bdo - 可覆蓋預設的文字方向
dl - 定義列表
big - 大字型
fieldset - form控制組
br - 換行
form - 互動表單
cite - 引用
h1 - 大標題
code - 計算機**（在引用原始碼的時候需要）
h2 - 副標題
dfn - 定義字段
h3 - 3級標題
em - 強調
h4 - 4級標題
font - 字型設定
h5 - 5級標題
i - 斜體
h6 - 6級標題
img -
hr - 水平分隔線
input - 輸入框
isindex - input prompt
kbd - 定義鍵盤文字
menu - 選單列表
label - **標籤
noframes - frames可選內容（對於不支援frame的瀏覽器顯示此區塊內容）
q - 短引用
noscript - 可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
s - 中劃線
ol - 排序列表
samp - 定義範例計算機**
p - 段落
select - 專案選擇
pre - 格式化文字
small - 小字型文字
table - **
strike - 中劃線
ul - 非排序列表
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文字輸入框
tt - 電傳文字
u - 下劃線
var - 定義變數
可變元素
button - 按鈕
del - 定義文件中已被刪除的文字
iframe - 建立包含另外乙個文件的內聯框架（即行內框架）
ins - 標籤定義已經被插入文件中的文字
map - 客戶端影象對映（即熱區）
object - object物件
script - 客戶端指令碼
注：html **是順序執行的，乙份無任何 css 樣式的 html **最終呈現出的頁面是根據元素出現的順序和型別排列的。塊級元素就從上到下排列，遇到內聯元素則從左到右排列。這種無樣式的情況下，元素的分布叫普通流，元素出現的位置應該叫正常位置，同時所有元素會在頁面上佔據乙個空間，空間大小由其盒模型決定。
content -> padding -> border -> margin總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.box寬度 =width(200px) + padding(10px * 2) + border(1px * 2) + margin(20px * 2) = 262px;寬度 =width(200px) + margin(20px * 2) = 240px;*, *:before, *:after
position 值
如何定位
static
position的預設值。不會被特殊的定位（也就是 static 元素不會被「positioned」）。元素將定位到它的正常位置（上文提到過），其實也就相當於沒有定位。元素在頁面上佔據位置。不能使用 top right bottom left 移動元素位置。
relative
相對定位，相對於元素的正常位置來進行定位。元素在頁面佔據位置。可以使用 top right bottom left 移動元素位置。
absolute
絕對定位，相對於最近一級的不是 static 的父元素來進行定位（也就是相對於最近的「positioned」祖先元素。）。如果絕對定位（position屬性的值為absolute）的元素沒有「positioned」祖先元素，那麼它是相對於文件的 body 元素，並且它會隨著頁面滾動而移動。元素在頁面不佔據位置。 可以使用 top right bottom left 移動元素位置。
fixed
絕對定位，相對於瀏覽器視窗來進行定位。這意味著即便頁面滾動，它還是會停留在相同的位置。其餘和 absolute 一樣，相當於一種特殊的 absolute。
inherit
從父元素繼承 position 屬性的值。
每個網頁都可以看成是由一層一層頁面堆疊起來的，如下圖所示。
position 設定為 relative 的時候，元素依然在普通流中，位置是正常位置，你可以通過 left right 等移動元素。會影響其他元素的位置。
而當乙個元素的 position 值為 absolute 或 fixed 的時候，會發生三件事：
把該元素往 z 軸方向移了一層，元素脫離了普通流，所以不再佔據原來那層的空間，還會覆蓋下層的元素。
該元素將變為塊級元素，相當於給該元素設定了 display: block;（給乙個內聯元素，如設定 absolute 之後發現它可以設定寬高了）。
如果該元素是塊級元素，元素的寬度由原來的 width: 100%（佔據一行），變為了 auto。
[注]如果你不想覆蓋下層的元素，可以設定 z-index 值達到效果。[float浮動和清除浮動在這裡就不多說了，這放在以後來寫,或者可以參考這兩篇
css float浮動的深入研究、詳解及拓展(一)
css float浮動的深入研究、詳解及拓展(二)
]只有左右浮動，沒有上下浮動。
元素設定 float 之後，它會脫離普通流（和 position: absolute; 一樣），不再佔據原來那層的空間，還會覆蓋下一層的元素。
浮動不會對該元素的上乙個兄弟元素有任何影響。
浮動之後，該元素的下乙個兄弟元素會緊貼到該元素之前沒有設定 float 的元素之後（很好理解，因為該元素脫離普通流了，或者說不在這一層了，所以它的下乙個元素當然要補上它的位置）。
下乙個兄弟元素如果也設定了同一方向的 float，則會緊隨該元素之後顯示。
該元素將變為塊級元素，相當於給該元素設定了 display: block;（和position: absolute; 一樣）。
基礎再回顧
標籤是沒有語義 的，它的作用就是為了 設定單獨的樣式用 的。這裡有幾句話這樣寫法瀏覽器會為文字自動新增雙引號，但是其實際意義在於引用別人說的話，而不是為了代替雙引號。table標籤，認識網頁上的 標題，肯定在最上面，也不能跑到表外面吧。所以在下一行的位置寫就行。備註，是這個表的備註，所以，緊跟著ta...
深淺拷貝再回顧
print 如果是改變物件的第一層 import copy a1 1,2,3,4,5 b1 a1.copy c1 copy.deepcopy a1 print a1 a1 1,2,3,4,5 6 print b1 b1 1,2,3,4,5 print c1 c1 1,2,3,4,5 print 如果...
CSS核心概念 containing block
在 css2.1 中，很多框的定位和尺寸的計算，都取決於乙個矩形的邊界，這個矩形，被稱作是包含塊 containing block hi 以上 為例，div 和 table 都是包含塊。div 是 table 的包含塊，同時 table 又是 td 的包含塊，不是絕對的。乙個框的包含塊 指的是 該框...