CSS的基本排版技术(笔记摘录于《精通CSS高级Web标准解决方案》)

1、字型大小与行高

几乎所有的浏览器中font-size的默认大小都是16像素,除非手动去设置,字体建议使用以em为单位去调整

h3 {
  font-size: 1.314em;
 }

em的单位用于font-size属性时,实际上是一个相应元素继承的font-size缩放因子,比如:h3元素,虽然可以直接设置为21px,但是em更加灵活,多数浏览器都允许缩放整个页面,即使像素单位也可以缩放,而使用em之后,如果用户使用了偏好的font-size浏览器默认的大小进行了修改,那么相应的元素的大小也会相应的进行调整。因为em单位继承的大小缩放,所以可以通过缩放父元素的font-size来修改页面局部的继承大小,但是这样做也有问题(也是使用em经常出错误的地方):如果我们不想因为调整了某个元素在标记中的位置而意外改变其字型大小

p {
  font-size:1.314em;
}
article {
  font-size:1.314em;
}

这意味着p和article元素默认情况下的font-size为21像素,但是article中的p元素标签则会变成1.314em*1.314em,这样就不符合设计稿了,因此,在使用相对长度值的时候,必须留意最终计算得到的值,当使用em用于计算模型盒子的时候,它不是基于继承font-size,而是基于元素自身计算的font-size,因此,不同级别的元素标签对应的font-size是不同的。

2、行间距、对齐以及盒子的构造

这部分主要剖析了CSS行内格式化模型,针对于行内格式化,每行文本都会生成一个行盒子,行盒子还可以进一步分成行内元素的行内盒子,如<p><strong>测试</strong></p>中的strong标签,行内盒子的内容区用于显示文本,内容区的高度由font-size决定,每个行内盒子的底边都默认对齐于靠近底部的共同水平线,这条线也被称为基线。行高指的是行盒子的总高度,也叫做行间距。
设置行高:
一般来说,行高取值于1.2~1.5范围内,关键是行与行之间不能太密,这里给 line-height设置了1.5,指的是设置为了当前font-size的1.5倍。
垂直对齐:
除了line-height,行内盒子也会受到vertical-align属性的影响,它的默认值是baseline,即子元素的基线与父元素的基线对齐。

<time datetime="2016-02-23">
  <span class="ordinal">
    rd
  </span>
</time>

.ordinal {
  vertical-align: super;
  font-size:smaller;
}

vertical-align还有其他的关键字sup,bottom,text-top,text-bottom,middle。text-top和text-bottom会让当前元素的内容区与父行盒子的内容区顶部或底部对齐,但只有在行内盒子的font-size或line-height与其父元素不同时才会有影响,
文本粗细:
font-weight属性来设置标题的文本的粗细,有些字体的变形很多,也可以通过100~900之间的100的整数倍数字去设置。
字体样式:
font-style会从字型中选择斜体显示,前提是存在这个变体,如果不存在,浏览器会通过倾斜字体来模拟,但是结果会不太理想。
大小写变换和小型大写变体:
css可以控制英文字母的大小写,属性为text-transform,存在三个属性值,capitalize把每个词的首字母大写,uppercase和lowercase是把所有字母全部变成大写或者小写。
控制字母和词间距:
word-spacing主要控制词间距,很少用,设置为0.1em就指的是在默认词间距的基础上加了0.1em。
letter-spacing主要控制字符的间距。

3、版心宽度、律动和毛边

文本缩进:
默认情况下,文本是左对齐的,使用text-indent:1.25em设置了段首缩进,段落右边参差不齐的样式也被称为毛边。text-align属性可以接受下列鸡哥关键值,left,right,center和justify,如果给父元素设置了dir='rtl'属性,即从右往左显示,浏览器会自动反转默认的文本方向。
给text-align设置justify值时,可以在单词间平均分布间距,结果就是左右两端对齐,消除毛边。但是如果让文字使用两端对齐,可能会引起串流,即文本中间会有断断续续的空白部分,IE会支持另一个非标准值newspaper,它会同时的调整字母间距和单词的间距。
解决串流的做法二:
如果让文本两端对齐,那么连字符会有助于减轻串流的问题,插入一个表示连字符的实体(也就是软连字符&shy),要想使用自动连字符的功能。

  • 1、首先,需要在html元素中设置语言代码
<html lang="en">
  • 2、通过css设置hyphens属性值设为auto
p {
  hyphens:auto;  
}

要关闭连字符,只需要将hyphens属性值设为manual,即手动模式,在手动模式下,软连字符会起作用。

4、多栏文本

对于大屏幕而言,使用版心宽度会造成大片的空白区域,如果想要有效的利用宽屏,可以把文本分成多栏,并对每栏宽度加以限制。如果想要在最大宽度为70em下分成3栏,可以通过如下设置:

article {
  max-width: 70em;
  columns: 20em;
  columns-gap:1.5em;
  margin: 0 auto;
}

columns属性是clolumns-count和columns-width属性的简写,如果只设置columns-count属性,浏览器会严格生成指定数量的栏,不管宽度如何,如果同时设置了columns-width和columns-count,则前者会作为最大栏数,后者会作为最小栏数。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,122评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,070评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,491评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,636评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,676评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,541评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,292评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,211评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,655评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,846评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,965评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,684评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,295评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,894评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,012评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,126评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,914评论 2 355

推荐阅读更多精彩内容