精通CSS與HTML設計模式 第十一章（分割內容）

       一、 分割

              leftter-spacing         為字母間添加空格

                 word-spacing           為單詞件添加空格（中文單詞不識別，因為中文沒有單詞的概念）

                text-indent                縮排終端塊狀元素的首行

                text-align:                 justify 實現左右對齊的效果

              註：margin-top ,margini-bottom,text-indent,text-align 只適用於塊狀元素

        二、塊狀化

                簡而言之，塊狀化是指將內嵌元素顯示為塊狀元素，使內嵌元素也可以使用margin,padding,text-align,width,height,border  等許多塊狀元素的樣式

              例：            

       

這是一個顯示為塊狀的內嵌元素。 它的第一行是縮排的，並且它有抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。

 

 

三、非包裹

        wite-space:  nowrap的規則阻止文本被包裹，可以將wite-space:nowarp應用到任何你不像被包裹的內嵌元素

       

值	描述
normal	預設。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤為止。
pre-wrap	保留空白符序列，但是正常地進行換行。
pre-line	合并空白符序列，但是保留分行符號。
inherit	規定應該從父元素繼承 white-space 屬性的值。

  

四、填充內容

         內嵌元素：padding-left和padding-right填充左右兩側空白，line-height來改變每一行的高度。不可以padding-top和padding-bottom來填充

         塊狀元素：display:block   使用padding-left,padding-right,padding-top,padding-bottom來填充上下左右的空白

五、內聯空白

         使用一個空的<span></span>  讓其margin-left:2em  使其具有一個可控的空白

六、  斷行

             指的是行與行之間的距離，<br/>將內容移至新的一行，換行後的高度，由行中內容決定，

            雙重換行 ：<br/><br style="line-height:15px"/>   第一個控制換行，第二換行賦值樣式來控制額外的空格數量

           斷行：   可以插入一個空的<span>  並使其為diplay:block顯示為塊狀元素，通過margin-top:value 來控制換行高度

 七、內聯水平線

        通過border,backgound來設定水平線

        註：background-position  控制背景映像從元素的X，Y的起始位置，這樣其實可以結合JS讓一個映像動起來