標籤：list 漢字 簡單 psi 排版 字母 define fine 有一個
由於漢字的特殊性，在css網頁布局中，中文排版有別於英文排版。排版是一個麻煩的問題，小編認為，作為一個優秀的網頁設計師和網頁製作人員，掌握一些簡單的中文排版技巧是不可或缺的，所以今天特意總結了幾個簡單實用的技巧，希望對大家有所協助。
一、如何設定文字字型、顏色、大小等
font-style設定斜體，比如font-style:italic
font-weight設定文字粗細，比如font-weight:bold
font-size設定文字大小，比如font-size:12px
line-height設定行距，比如line-height:150%
color設定文字顏色，注意不是font-color喔，比如color:red
font-family設定字型，比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif
二、使用margin，text-align 控制段落
中文段落使用p標籤，左右、段前段後的空白，都可以通過margin來控制。
比如
p{
margin:18px 6px 6px 18px;/*分別是上、右、下、左，十二點開始的順時針方向*/
}
而text-align則用於文字的對齊。
比如
p{
text-align:center;/*置中對齊*/
}
除了置中對齊之外,對齊還有靠左對齊、靠右對齊和左右對齊，對應的屬性值分別為left、right、justify。
提示：由於預設的margin值會導致頁面排版出現問題，特別是ul、ol、p、dt、dd等標籤。小編的解決之道就是把所有標籤的margin值定義為0。
三、豎排文字—使用writing-mode
writing-mode屬性有兩個值lr-tb和tb-rl，前者是預設的左-右、上-下，後者是上-下、右-左。
寫法如
p{
writing-mode:tb-rl;
}
四、使用list-style美化列表
如果我們的排版涉及到列表，不妨考慮為它添加些項目符號進行美化。
在CSS裡，項目符號包括disc（實心圓點）、circle（空心圓圈）、square（實心方塊）、decimal（阿拉伯數字）、lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。
嘿嘿！我們可用的項目符號數量不少喔，但美中不足的是我們不能為它們設定大小，也不能設定垂直方向上的對齊。
如果我們想設定一個列表的項目符號為方塊，可以這樣寫：
li{
list-style:square;
}
小編在這裡提醒大家一下：當一個項目列表的左外邊距設為零的時候，list-style-position:outside的項目符號不會顯示。
五、使用text-overflow 實現固定寬度漢字截斷
用後台語言可以對從資料庫裡的欄位內容做截斷處理，如果想對列表應用該樣式，我們可以這樣寫：
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
六、首字下沉
如果你想製作首字下沉效果，不妨考慮偽對象:first-letter並配合font-size、float屬性。
p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}
七、首行縮排—使用text-indent
text-indent可以使得容器內首行縮排一定單位。比如中文段落一般每段前空兩個漢字。
可以這麼寫
p{
text-indent:2em;/*em是相對單位，2em即現在一個字大小的兩倍*/
}
注意：如果font-size是12px的話，那麼text-indent:2em則代表縮排24px。
八、固定寬度漢字（詞）折行—使用word-break
在排版的時候，你是否為一個片語，其中一個字出現在上面而另一個字折斷到下一行去而發愁呢？不用愁，這時使用word-break就可以輕鬆解決問題了。
九、關於假名註解—使用ruby標籤和ruby-align屬性
最後小編向大家介紹一下ruby標籤和ruby-align屬性 。這是一個比較冷門的技巧，可能平時使用不多，但小編覺得不妨提供給大家預防不時之需。
如果我們想為假名註解就可以這樣寫
<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然後通過ruby-align設定其對齊。
其他的一些屬性
column-width : 用於指定列的寬度，一旦指定一個值，瀏覽器會根據當前瀏覽器的寬度，動態決定將內容分為多少列。column-rule : 這個屬性是一種簡寫，其實它包含了三個不同的屬性，分別是 column-rule-width, column-rule-style, column-rule-color，反正實現的就是在列之間加上一個分割線，和 border 屬性的設定是相同的。column-gap : 用於設定分欄的空隙屬性，這個值由分欄兩側平攤。如果想要實現分欄，我們可以利用 column-width ，也可以使用 column-count 屬性，但是我們通常不這麼做，因為這意味著必須要將內容分成三列，而不考慮當前瀏覽器的寬度，這是非常不友好的設計。
利用 column-width 的優點是，我們的列數跟隨瀏覽器視窗的變化而變化（響應式），即列數 = 瀏覽器寬度 / columnWidth, 不過這麼做也有一個顯而易見的問題，那就是我們很難把握 column-width 數值大小，如果過大，那對於中等螢幕可能都仍然是一列，如果過小，那麼在大螢幕上又會分成過多的列。
利用 column-count 的優點是，我們可以隨心所欲的設定列數，保證布局達到我們想要的結果，這麼做的缺點就是列數是固定的無法跟隨瀏覽器寬度的變化而發生改變，這就導致了很嚴重的問題，比如對於一個 480px 寬的裝置，我們設定為兩列，那麼可能只顯示兩三個單詞就要換行，非常的不友好。
實際上，我們可以同時採用 column-width和 column-count，什麼意思呢？比如說我們設定 column-width=480px; column-count=2的時候，這兩個屬性就會相互制約，也就是說對於相當大的螢幕，比如說 2100px寬的螢幕，它也只會顯示兩列，因為我們設定了 column-count = 2，但是對於小螢幕，比如 640px 寬的螢幕，由於 column-width=480px，這就意味著放不下兩列，這時就會變成一列。
可見，同時利用這兩個屬性就可以克服二者的缺點而集中二者的優點。
知道了以上屬性之後，相信你可以很快的將我們示圖中的效果實現出來，這裡我們不在粘貼原始碼，你可以 點此下載 。這裡需要將一下，我們在頁面中引用了一些好看的字型，如果你也想使用，你住需要將下面這一行代碼粘貼到你的 <head> 標籤下即可。
<link href=‘http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis‘ rel=‘stylesheet‘ type=‘text/css‘>display : 如果想要使用 Flexbox 布局，那麼我們首先要將這個屬性的值設定為 flex。flex-flow : 這個屬性其實是兩個屬性的縮寫，其中一個是 flex-direction 用於設定主軸的方向，如果設定為 row 則是一水平方向為主軸，如果為 column 垂直方向為主軸。還有一個屬性是 flex-wrap， 用於設定元素換行，當元素超出父元素寬度時就自動換行，這就可以實現自適應螢幕的效果。flex : 這個屬性一般在設定 display 為 flex 的子項目中設定，有三個參數，在這裡不在詳細解釋，因為我也不太能組織語言解釋它，可以百度查看一下該屬性的使用方法。簡單實用的CSS網頁布局中文排版技巧
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
