1、行內(nèi)元素 4個重要特性 詳解,1.1 行內(nèi)元素和width 1.2 行內(nèi)元素和height 1.3 行內(nèi)元素和padding 1.4 行內(nèi)元素和marging,行內(nèi)元素和width W3C CSS2 標準規(guī)定行內(nèi)元素不會應用width屬性。 以下例子中，對行內(nèi)元素應用了width:200px,你可以看到，根本就沒有什么效果。,行內(nèi)元素和height W3C CSS2 標準規(guī)定行內(nèi)元素不會應用height屬性，但是盒子高度可以通過line-height來指定。 以下例子，對行內(nèi)元素應用了height:50px,你可以看到什么效果都沒。,行內(nèi)元素和padding 你可以給行內(nèi)元素設置padding

2、，但只有padding-left和padding-right生效。 以下例子，行內(nèi)元素應用了padding:50px。你可以看到對左右的內(nèi)容有影響，但是對上下沒影響。,行內(nèi)元素和marging margin屬性也是和padding屬性一樣，對行內(nèi)元素左右有效，上下無效。 下面的例子,對應用了margin:50px，你可以看到左右邊緣是生效了但是內(nèi)容上下卻沒有。,記住對行內(nèi)元素： 設置寬度width 無效。 設置高度height 無效，可以通過line-height來設置。 設置margin 只有左右margin有效，上下無效。 設置padding 只有左右padding有效，上下則無效。注意元

3、素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的，看圖上效果就知道了,2.text-align屬性是兩者表現(xiàn)的又以不同之處 在W3C CSS2.1對text-align 有詳細地描述：-值： left | right | center | justify | inherit初始值：匿名值，由direction的值而定，如果direction為ltr則為left，如果direction為rtl則為right。應用于: 塊級元素，表格單元格，行內(nèi)塊元素繼承性: 是計算后的值：初始值或指定值,這個特性描述了如何使一個塊元素的行內(nèi)內(nèi)容對齊。 注意一點，標準里說這個屬性是用來對齊行內(nèi)內(nèi)容的，所以，不應該對

4、塊級內(nèi)容起作用。 解釋一下，行內(nèi)內(nèi)容是說由行內(nèi)元素組成的內(nèi)容，行內(nèi)元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素樣式的display : inline 的都是行內(nèi)元素；塊級內(nèi)容跟則是由塊級元素構成，DIV 是最常用的塊級元素。塊級元素和行內(nèi)元素的區(qū)別是，塊級元素會占一行顯示，而行內(nèi)元素可以在一行并排顯示。 這樣，我們對這個特性的認識應該就清楚了。但是，問題來了，雖然標準里這么規(guī)定，那么是不是所有瀏覽器都遵守呢？答案是否定的。猜猜是哪個瀏覽器這么特立獨行?。?IE！IE6/7及IE8混雜模式中，text- align:center可以使塊級元素也居中對齊。其他瀏覽器中，text-align:center僅作用于行內(nèi)內(nèi)容上。 解決這個問題比較好的方式，就是為所有需要相對父容器居中對齊的塊級元素設置“margin-left:auto; margin-right:auto”。但這個方式 IE6/IE7/IE8的混雜模式中不支持，所以還要設置父容器的