http://www.survivalescaperooms.com/w3school/htmldom/prop_style_verticalalign.htm(W3C標準,概念不清的看手冊很重要哦)
——————————————————————————–
首先,依舊是概念。介紹一下行內元素和塊級元素,這個很重要,因為有的屬性只能用于塊元素,而有的正好相反,在一定的情況下,它們也可以相互轉換,比如用display來進行設置。
行內元素(又叫內聯元素inline element):
①不占據一整行,隨內容而定,有以下特點:
②不可以設置寬高,也不可以設置行高,其寬度隨著內容增加,高度隨字體大小而改變。
③內聯元素可以設置外邊界,但是外邊界不對上下起作用,只能對左右起作用。
④也可以設置內邊界,但是內邊界在ie6中不對上下起作用,只能對左右起作用。
常用的內聯元素有:
a – 錨點,b – 粗體(不推薦),br – 換行,em – 強調,font – 字體設定(不推薦),i – 斜體,img – 圖片,input – 輸入框,label – 表格標簽,select – 項目選擇,small – 小字體文本,span – 常用內聯容器,定義文本內區塊,strike – 中劃線,strong – 粗體強調
塊級元素block element:
①總是在新行上開始,占據一整行;
②高度,行高以及外邊距和內邊距都可控制;
③寬帶始終是與瀏覽器寬度一樣,與內容無關;
④它可以容納內聯元素和其他塊元素。
常用的塊級元素有:
div -最常用的塊級元素,dl – 和dt dd搭配使用的塊級元素,form – 交互表單,h1 – 大標題,hr – 水平分隔線,ol – 排序表單,p – 段落,ul – 非排序列表
互相轉換:使用display設置可以使得行內元素擁有塊級元素的特性,反之也可以。
如:
<p style="display:inline; text-align:center">我是被設置了內聯的塊元素p,我現在的表現形式和內聯元素一樣啦</p>
<span style="display:block; text-align:center">我是被設置了塊級元素的span,我現在可以獨占一行并且可以設置寬高</span>
display: table-cell ,能把元素當作表格單元來顯示,這個非常實用,顯示效果也很好,只可惜某些瀏覽器不夠兼容。要注意,和一個合法的<td>元素必須在<table>里一樣,
display: table-cell 元素必須作為 display: table 的元素的子元素出現。
——————————————————————————–
現在開始說一下簡單的幾種基礎的居中方式
新聞熱點
疑難解答