CSS内联学习总结
HTML CSS
通過使用 HTML4.0，所有的格式化代碼均可移出 HTML 文檔，然后移入一個獨立的樣式表。
實例
HTML中的樣式
本例演示如何使用添加到 <head> 部分的樣式信息對 HTML 進行格式化。
沒有下劃線的鏈接
本例演示如何使用樣式屬性做一個沒有下劃線的鏈接。
鏈接到一個外部樣式表
本例演示如何 <link> 標簽鏈接到一個外部樣式表。
如何使用樣式
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：
外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
訪問我們的 CSS 教程，學習更多有關樣式的知識。
標簽 描述
<style> 定義樣式定義。
<link> 定義資源引用。
<div> 定義文檔中的節或區域（塊級）。
<span> 定義文檔中的行內的小塊或區域。
<font> 規定文本的字體、字體尺寸、字體顏色。不贊成使用。請使用樣式。
<basefont> 定義基準字體。不贊成使用。請使用樣式。
<center> 對文本進行水平居中。不贊成使用。請使用樣式。
========
CSS的三種樣式：內聯式，嵌入式，外部式以及他們的優先級
http://blog.csdn.net/u012110719/article/details/41145223從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。
1：內聯式css樣式表就是把css代碼直接寫在現有的HTML標簽中，如下面代碼：
<p style="color:red";font-size:12px>這里文字是紅色。</p>
2:嵌入式，嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css">XXX</style>標簽之間。
[html] view plain copy
<head> ?
? <style type="text/css"> ?
? ?span{ ?
? ? ?color:red; ?
? ? } ?
? </style> ?
??
</head> ?
3:外部式css樣式，寫在單獨的一個文件中.
外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標簽位置一般寫在<head>標簽之內。
這三種樣式是有優先級的，記住他們的優先級：內聯式 > 嵌入式 > 外部式，但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面。
其實總結來說，就是--就近原則（離被設置元素越近優先級別越高）。
但注意上面所總結的優先級是有一個前提：內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下。
========
CSS 塊狀元素和內聯元素
http://www.cnblogs.com/xiepeixing/p/4334501.html在用CSS布局頁面的時候，我們會將HTML標簽分成兩種，塊狀元素和內聯元素（我們平常用到的div和p就是塊狀元素，鏈接標簽a就是內聯元素）
塊狀元素
一般是其他元素的容器，可容納內聯元素和其他塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)高度(height)起作用。常見塊狀元素為div和p。
內聯元素
內聯元素只能容納文本或者其他內聯元素，它允許其他內聯元素與其位于同一行，但寬度(width)高度(height)不起作用。常見內聯元素為“a”
? 塊狀元素 內聯元素
是否允許其他元素同處一行 no yes
width和height是否起作用 yes no
塊元素(block element)包括：
address - 地址
blockquote - 塊引用
center - 舉中對齊塊
dir - 目錄列表
div - 常用塊級容易，也是CSS layout的主要標簽
dl - 定義列表
fieldset - form控制組
form - 交互表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
hr - 水平分隔線
isindex - input prompt
menu - 菜單列表
noframes - frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容
noscript - 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol - 排序表單
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
內聯元素(inline element)包括
a - 錨點
abbr - 縮寫
acronym - 首字
b - 粗體(不推薦)
bdo - bidi override
big - 大字體
br - 換行
cite - 引用
code - 計算機代碼(在引用源碼的時候需要)
dfn - 定義字段
em - 強調
font - 字體設定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文本
label - 表格標簽
q - 短引用
s - 中劃線(不推薦)
samp - 定義范例計算機代碼
select - 項目選擇
small - 小字體文本
span - 常用內聯容器，定義文本內區塊
strike - 中劃線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
tt - 電傳文本
u - 下劃線
var - 定義變量
* 塊狀元素 和 內聯元素 相互轉化
塊狀元素轉化為內聯元素：css設置display:inline ;
內聯元素轉化為塊狀元素：css設置display:block ;
例子：
block inline : 在線演示查看源碼
HTML :
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
? ? ? ? <title>RunJS</title>
? ? </head>
? ? <body>
? ? ? ? <div id="div1">
? ? ? ? ? ? <div id="div2"></div>
? ? ? ? ? ? <div id="div3"></div>
? ? ? ? ? ? <a href="#">可容納內聯元素和其他塊狀元素</a>
? ? ? ? </div>
? ? </body>
</html>
CSS :
#div1{width:300px; height:300px; background:#999999;}
#div2{width:100px; height:100px; background:#993366;}
#div3{width:100px; height:100px; background:#6666FF;}
a{color:#fff; background:#669999;width:100px;height:100px; display:block;
========
CSS3--塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素
http://blog.csdn.net/xuan0107/article/details/46360827元素分類
在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內聯塊狀元素有：
<img>、<input>
元素分類--塊級元素
什么是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼就是將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點。
a{display:block;}
塊級元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
元素分類--內聯元素
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。如下代碼就是將塊狀元素div轉換為內聯元素，從頁使用div元素具有內聯元素特點。
內聯元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
元素分類--內聯塊狀元素
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯塊狀元素。(css2.1新增)，<img>、<input>標簽就是這種內聯塊狀標簽。
inline-block元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
========
CSS塊級元素、內聯元素概念
http://www.nowamagic.net/librarys/veda/detail/1190CSS塊級元素、內聯元素概念 理解了它，CSS布局的理論都變得容易了 在 2011年03月06日 那天寫的 ? ? 已經有 48030 次閱讀了 感謝 參考或原文
服務器君一共花費了397.334 ms進行了5次數據庫查詢，努力地為您提供了這個頁面。
?
試試閱讀模式？希望聽取您的建議 閱讀模式 普通模式
CSS文檔流與塊級元素（block）、內聯元素（inline），之前翻閱不少書籍，看過不少文章， 看到所多的是零碎的CSS布局基本知識，比較表面。看過O'Reilly的《CSS權威指南》，發現里面提到的文檔流概念讓我很敏感。 可惡的是書中并沒有解釋文檔流是什么東西，或許作者覺得這個太簡單了以至于不值一提。但我覺得，這個概念實在太重要了。理解了它，一堆CSS布局的理論都變得易于理解，并且體會到CSS這套設計的合理性所在。
文檔流
將窗體自上而下分成一行行， 并在每行中按從左至右的順序排放元素，即為文檔流。
每個非浮動塊級元素都獨占一行， 浮動元素則按規定浮在行的一端。 若當前行容不下， 則另起新行再浮動。
內聯元素也不會獨占一行。 幾乎所有元素(包括塊級，內聯和列表元素）均可生成子行， 用于擺放子元素。
有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位， 固定定位。 但是在IE中浮動元素也存在于文檔流中（還讓我覺得這樣很合理><）。
浮動元素不占任何正常文檔流空間，而浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間。
浮動概念讓人迷惑根源在于瀏覽器對理論的解讀造成的。只能說很多人以IE做標準，其實它不是。
基于文檔流， 我們可以很容易理解以下的定位模式：
相對定位， 即相對于元素在文檔流中位置進行偏移。 但保留原占位。
絕對定位， 即完全脫離文檔流， 相對于position屬性非static值的最近父級元素進行偏移。
固定定位， 即完全脫離文檔流， 相對于視區進行偏移。
幾個問題
作為三大基本元素之一的內聯元素。 它跟塊級元素的主要區別在哪？
Clear屬性取right值時怎么理解？ 貌似實驗情況總跟理論不符.
內聯元素是什么意思呢？什么是塊級別元素？
《CSS權威指南》中文字顯示：任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“行布局”形式，這里的“行布局”的意思就是說其表現形式始終以行進行顯示。比如，我們設定一個內聯元素border-bottom:1px solid #000;時其表現是以每行進行重復，每一行下方都會有一條黑色的細線。如果是塊級元素那么所顯示的的黑線只會在塊的下方出現。
p、h1、或div等元素常常稱為塊級元素，這些元素顯示為一塊內容；Strong。span等元素稱為行內元素，它們的內容顯示在行中，即“行內框”。（可以使用display=block將行內元素轉換成塊元素，display=none表示生成的元素根本沒有框，也既不顯示元素，不占用文檔中的空間）
行內就是在一行內的元素，只能放在行內；塊級元素，就是一個四方塊，可以放在頁面上任何地方。
說白了，行內元素就好像一個單詞；塊級元素就好像一個段落，如果不另加定義的話，它將獨立一行出現。
一般的 塊級元素諸如段落<p>、標 題<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內聯元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> ........
塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其后的無素也需另起一行進行顯示。
<span>在CSS定義中屬于一個行內元素，而<div>是塊級元素。
對于學過CSS的人來說一聽就能明白。可對于新手來說不易理解，我主要對新手說通熟點吧!
用容器這一詞會更容易形象理解它們的存在與用途，行內元素相當一個小容器，而<div>相當于一個大容器，大容器當然可以放一個小容器了。<span>就是小容器，這樣一說你也許會在腦海中有一個初步的印象了吧，如果我們想在大容器中裝一些清水。但我也想在里裝一些墨水怎么 辦？很簡單，我們把小容器拿出來裝上墨水然后放入大容器里的清水中不就成了嗎。
塊元素（block element）一般是其他元素的容器元素
塊元素一般都從新行開始，它可以容納內聯元素和其他塊元素。常見塊元素是段落標簽'P"。“form"這個塊元素比較特殊，它只能用來容納其他塊元素。
如果沒有css的作用，塊元素會順序以每次另起一行的方式一直往下排。而有了css以后，我們可以改變這種html的默認布局模式，把塊元素擺放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table標簽也是塊元素的一種，table based layout和css based layout從一般使用者（不包括視力障礙者、盲人等）的角度來看這兩種布局，除了頁面載入速度的差別外，沒有其他的差別。但是如果普通使用者不經意點了 查看頁面源代碼按鈕后，兩者所表現出來的差異就非常大了。基于良好重構理念設計的css布局頁面源碼，至少也能讓沒有web開發經驗的普通使用者把內容快速的讀懂。從這個角度來說，css layout code應該有更好的美學體驗吧。
你能夠把塊容器元素div想象成一個個box，或者如果你玩過剪貼文載的話，那就更加容易理解了。我們先把需要的文章從各種報紙、雜志總剪 下來。每塊剪下來的內容就是一個block。然后我們把這些紙塊按照自己的排版意圖，用膠水重新貼到一張空白的新紙上。這樣就形成了你自己獨特的文摘快報了。作為一種技術的延伸，網頁布局設計也遵循了同樣的模式。
內聯元素（inline element）一般都是基于語義級（semantic）的基本元素。內聯元素只能容納文本或者其他內聯元素，常見內聯元素 “a”。
塊元素（block element）和內聯元素（inline element）都是html規范中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始。而當加入了css控制以后，塊元素和內聯元素的這種屬 性差異就不成為差異了。比如，我們完全可以把內聯元素cite加上display:block這樣的屬性，讓他也有每次都從新行開始的屬性。
可變元素的基本概念就是他需要根據上下文關系確定該元素是塊元素或者內聯元素。可變元素還是屬于上述兩種元素類別，一旦上下文關系確定了他的類別，他就要遵循塊元素或者內聯元素的規則限制。大致的元素分類見全文。
關于inline element的中文叫法，有多種內聯元素、內嵌元素、行內元素、直進式元素。基本上沒有統一的翻譯，愛怎么叫怎么叫吧。另外提到內聯元素，我們會想到有個display的屬性是display:inline;這個屬性能夠修復著名的IE雙倍浮動邊界問題。
塊元素（block element）
address - 地址
blockquote - 塊引用
center - 舉中對齊塊
dir - 目錄列表
div - 常用塊級容易，也是css layout的主要標簽
dl - 定義列表
fieldset - form控制組
form - 交互表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
hr - 水平分隔線
isindex - input prompt
menu - 菜單列表
noframes - frames可選內容（對于不支持frame的瀏覽器顯示此區塊內容）
noscript - 可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol - 排序列表
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
內聯元素（inline element）
a - 錨點
abbr - 縮寫
acronym - 首字
b - 粗體（不推薦）
bdo - bidi override
big - 大字體
br - 換行
cite - 引用
code - 計算機代碼（在引用源碼的時候需要）
dfn - 定義字段
em - 強調
font - 字體設定（不推薦）
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文本
label - 表格標簽
q - 短引用
s - 中劃線（不推薦）
samp - 定義范例計算機代碼
select - 項目選擇
small - 小字體文本
span - 常用內聯容器，定義文本內區塊
strike - 中劃線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
tt - 電傳文本
u - 下劃線
var - 定義變量
可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
applet - java applet
button - 按鈕
del - 刪除文本
iframe - inline frame
ins - 插入的文本
map - 圖片區塊（map）
object - object對象
script - 客戶端腳本
========
CSS 中的內聯元素、塊級元素以及display的各個屬性的特點
http://www.cnblogs.com/heshan1992/p/5475599.htmlCSS的內聯元素和塊級元素
塊級元素<h1>-<h6>、p、dt是不可以內聯塊級元素的
1、block和inline這兩個概念是簡略的說法，完整確切的說應該是 block-level elements (塊級元素) 和 inline elements (內聯元素)。block元素通常被現實為獨立的一塊，會單獨換一行；inline元素則前后不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。
? ? 2、大體來說HTML元素各有其自身的布局級別（block元素還是inline元素）：
3、常見的塊級元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
?4、常見的內聯元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是這個是個大概的說法，每個特定的元素能包含的元素也是特定的，所以具體到個別元素上，這條規律是不適用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般來說，可以通過display:inline和display:block的設置，改變元素的布局級別。
Display屬性中幾種常見的屬性值
Display:none 是元素隱藏不顯示
display:block
1、block元素會獨占一行，多個block元素會各自新起一行。默認情況下，block元素寬度自動填滿其父元素寬度。
2、block元素可以設置width,height屬性。塊級元素即使設置了寬度,仍然是獨占一行。
block元素可以設置margin和padding屬性。
display:inline
1、inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行里，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
2、nline元素設置width,height屬性無效。/3、inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
display:inline-block
1 、簡單來說就是將對象呈現為inline對象，但是對象的內容作為block對象呈現。之后的內聯對象會被排列在同一行內。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
2、在當兩個元素標簽之間有換行符時，如果用inline-blockde 的方式將元素并排顯示時，如果父容器的寬度正好為并排顯示子元素的寬度之和，則有可能不能并排顯示，原因是inline-block會將換行渲染成空格占用一定的空間，所以為了讓子元素并排顯示則可以再父容器上設置font-size：0，這樣空格就不會占用空間，如果子元素中又要顯示的文本內容，則再在子容器上設置font-size就好。
========
總結
- 上一篇： DebugView调试C#程序 学习总结
- 下一篇： VS调试查看寄存器学习总结