1. 程式人生 > >5.11隨筆

5.11隨筆

href 腳本 下標 style dex set 字體 細節 查看

標簽嵌套(span、p、div可以嵌套什麽)
1.塊級元素(block)與內聯元素(inline)的區別:

簡單地說,塊級元素用來搭建網站架構、布局、承載內容,負責整體的大的方面。塊級元素總是會另起一行開始,其高度、行高和邊距都是可控的。內聯元素負責局部和細節,在同一行顯示,其高度、行高和邊距不可控。

通過display:block;或者display:inline兩者可以相互轉化。

至於可變元素是可以根據上下文語境決定是塊級元素還是內聯元素,好吧,它最靈活了=。=

2.分類明細:(照搬來的)

塊元素(block element) HTML標簽分類明細
* 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) 一般都是基於語義級(semantic)的基本元素,只能容納文本或者其它內聯元素。
* 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 - 客戶端腳本

3.塊級元素和內聯元素的嵌套規則:

最基本:內聯不能嵌套塊級,塊級可以嵌套內聯元素
<div><h1></h1><p></p></div> 正確(塊級並列)

    <a href="#"><span></span></a> 正確(內聯嵌套內聯)

    <span><div></div></span> 錯誤(內聯嵌套塊級)

有幾個特殊的塊級元素只能包含內嵌元素,不能再包含塊級元素,這幾個特殊的標簽是:h1、h2、h3、h4、h5、h6、p、dt。所以說p裏面不能嵌套div,就是我犯的錯誤。

<p><ol><li></li></ol></p> —— 錯

<p><div></div></p> —— 錯

特殊的<li>裏面可以嵌套div(<li>可以但<p>不行)
塊級元素與塊級元素並列、內聯元素與內聯元素並列
<div><h2></h2><p></p></div>  正確

<div><a href="#"></a><span></span></div>  正確

<div><h2></h2><span></span></div>  錯誤(塊級和內聯並列了) 

再跳出來看,p標簽內嵌div的結果是p標簽被div切成兩個標簽了~估計腦補的過程是這樣的:
<p>sample</p><div>inline</div><p></P>
div#div1 p>span em


<div id="div1">
<p><span><em>這個可以</em></span></p>
<div><p><span><em>這個也可</em></span></p></div>
<p><em>這個不可以</em></p>
<p><a href="#"><span><em>這個也不可以</em></span></a></p>
</div>
">" 是子元素選擇符
"+"是相鄰兄弟選擇符
實際上,是不建議這麽寫選擇器的,太復雜而且會占用資源
span標簽裏面都可以嵌套其他標簽的,這個要看你怎麽用了,一般span都作為二級標簽
例如:
<div>我是<span>初學者</span></div>
一般沒什麽特殊要求的話,都不在嵌套標簽的了!span裏面一般不再鑲嵌標簽,當然你非得鑲嵌的話,常見的一些標簽比如<a>什麽的是可以的。
span裏面一般不再鑲嵌標簽,當然你非得鑲嵌的話,常見的一些標簽比如<a>什麽的是可以的。

ps中選中文字時怎麽怎麽查看文字的高度

1.使用PS自帶的標尺,快捷鍵Ctrrl+R,將鼠標移動到標尺上方

2.PS較高的版本,在移動的時候都會出現移動距離顯示。選擇”矩形選框“工具框選文字,然後移動選框就可以顯示文字大小了。

行高怎麽計算

頂線、中線、基線、底線 從上到下四條線分別是頂線、中線、基線、底線,很像才學英語字母時的四線三格,我們知道vertical-align屬性中有top、middle、baseline、bottom,就是和這四條線相關。 尤其記得基線不是最下面的線,最下面的是底線。 行高是指上下文本行的基線間的垂直距離

5.11隨筆