简单实用的CSS网页布局中文排版技巧
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单实用的CSS网页布局中文排版技巧相关的知识，希望对你有一定的参考价值。
由于汉字的特殊性，在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网页布局中文排版技巧的主要内容，如果未能解决你的问题，请参考以下文章