【CSS】禅意花园--心得分享

⭐️ 本文首发自 前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

---

禅意花园

禅意花园的36件作品无疑给读者带来了不同、奇妙的视觉感受。每一件作品都在打磨中产生，无微不至。以下是《禅意花园》给出的思考，与你分享。

当我们走入一间房间时，立刻就会注意到其中最明显的陈设：墙壁、窗子、家具等。但，这些东西的质地又是怎样的呢？木板上是否有裂纹？油漆是否已经斑驳？墙面的石灰是否有些脱落？玻璃窗是否有损坏或好久没有擦拭过？类似地，你是否注意到光影效果呢？房间的整体感觉又是如何呢？沉重？轻柔？开阔？还是狭小？所有这些问题的答案都不是那么显而易见，都需要我们的仔细观察才能够回答。但若你想让作品有足够的真实感，那么这些细节却都是必不可少的。——What Lies Beneath

表现真实感

1. 特别注意图形边缘的效果；边缘来自线条、光影、正负空间之间的交汇融合；
2. 注意形状：大多数物体都是由若干形状组合而来的。不能简单的说某个茶壶是圆形的。
3. 图像的材质能够为物体带来真实感；
4. 深度——能够表现出额外维度的感觉，Z轴是第三维度，深度与此密切相关。在二维作品中，深度是通过边缘的光影体现出来的。
5. 重力的模拟：在二维作品中，通过不同的视觉重量体现；
6. 封闭区域是由颜色和材质组成的；
7. 物体的体积是由长宽高组成的；

如果字体设置了bold、italic或者oblique等属性，浏览器一般都会首先尝试选择真实存在的衍生字体。若衍生字体不存在，浏览器就会调整常规字体，让它显示为bold、italic、或者oblique等样式。真实字体和自动调整形成的字体在视觉上有 明显的区别，有经验的设计师能很快区分它们。

字体格式

italic:一般带有手写风格；
Oblique:常规字体由浏览器作倾斜处理后的版本。

字体色深，指文字的深浅程度。字体色深不完全依赖于字体本身，其他因素如字距调整、字间距、行间距等也会影响人们对字深的视觉效果。

字体

如body{font:11px "trebuchet ms",arial,helvetica,sans-serif;}
//表示所有html文字都使用了trebuchet字体，而备用字体也使用了如sans-serif等几种字体；
trebuchet也是sans serif字体的一种，并且是Microsoft核心的web字体的一员。多数系统都能支持。

字色

褐色作为正文字体，可以使页面显得更加柔和清晰。
蓝色用于链接则提高作品整体的对比，增加视觉冲击力。

字号

使用不同大小的字体，可以增加文字区块间的对比。

绝对单位与相对单位

绝对单位指预先可以确定单位长度的度量单位，包括cm（厘米）、in(英寸)、pt（磅）等。
相对单位：包括% 、em、larger、smaller等，这是一种可变的尺寸。
要注意的是：每个相对单位都和一个初始长度相关！

像素

在css中，px实际上是一个相对单位。
举个例子：1280x960分辨率的15寸显示器上得1px比800x600分辨率的21寸显示器上得1px要小得多。10px在前者显示的很大，在后者显示的很小。

浏览器有个默认16像素字。所以，在使用相对字体值的时候要注意。例如：font-size:75%表示的是12像素字。

合理设置字体大小

使用em:在对body元素应用了百分比单位后，我们可以为其余元素使用em值。使用这种方式，字体的一致性相对不错：
例如：

body{
	font-size:76%
}
p{
	font-size:1em;//不建议将文字大小设置为1em以下。
}

###使用样式切换方法

要精确控制屏幕上文字的大小，px是最为可靠的单位。可是因为ie的缘故，我们不能依赖px，但可通过另行制作显示打好文字的样式表来解决IE中的这个问题。

标题问题

1. 标题中使用的颜色必须是整个设计中较为强势的色彩。
2. 标题的色彩必须鲜明。在标题中亮色所带来的影响不如暗色。越是接近黑色的标题，越是能对浏览者产生强的冲击力。
3. 越是重要的标题，越是需要带有强烈冲击力的色彩。
4. 略为紧缩的字体更能凸现标题。设计师建立使用正常字体70%-90%宽的标题文字。
5. 字体对比可以帮组增强标题效果。
6. 标题长度应该有所限制。过长的标题在视觉和理解上都容易让读者迷惑。

正文布局

1. 保持一行在60个字符以内。过长的一行文字不但会让读者难以理解，甚至会使其根本不愿阅读下去。
2. 避免每行字数过少。如果将段落分布于20字的短行中，将导致行数激增，而过长的段落往往同样是人们无法忍受的。因而最好只在需要强调的文字中使用短行。
3. 如果确实需要发布长篇文字，就得尽力让段落保持小巧，并且将长段分割为节并加以标题。
4. 段落之间的距离不宜过大。
5. 避免在正文种使用鲜艳的色彩。应该只在重点文字和链接上使用鲜艳色彩。

重要文字

1. 一般来说，重点文字指的是侧栏、引用和说明部分的文字。
2. 在对重点文字应用色彩时，应该注意保证所有重要文字的色彩保持统一。
3. 重点文字应当使用短行，且只能有很少的行数。
4. 重点文字不应该阻断正文，而应增强正文的效果。
5. 读者都希望插图附有相应的说明。说明文字能为插图提供上下文，起到帮助读者阅读的作用。

文本样式

font-variant:唯一作用是将文字用略小的大写字母表示。原先为大写的字母将仍保持原样，而原先小写的字母将由稍小的大写字母来显示。

合法值：normal和small-caps.

text-transform：提供更精确的字符大小写控制。可选值：capitalize\uppercase\lowercase\none

text-decoration:（推荐用法：none——默认值，在没有理由使用其他选项时，none就是最好的选择。underline——仅在链接中使用underline。

间距

line-height:不需要单位，1.2和1.2em或者120%是同义的。未加单位的值表示基于当前文字大小的相对值。

letter-spacing:在屏幕的分辨率较低的情况下，我们不该为大段的文字设置字符间距，否则文字将显得很长。因此，最好只在标题和小段文字中使用letter-spacing。

word-spacing：文字对齐（text-align）和white-space等设定均会影响到浏览器对word-spacing的处理。

text-align:由于浏览器的不精确控制，我们更建议使用传统的right-align和left-align方式。
居中对齐只适合标题、引用等小块文字，不要将其应用到长段文字中。

级联

”CSS级联为每个样式规则都指派了权重，若元素应用了多个样式规则，那么将优先使用最高权重的样式。“这段定义包含了2个相互关联的概念——特殊性和继承。

继承：是指只定义一次就能将同一样式赋予多个元素的能力。

特殊性：是指让最后一个规则比第一条规则有更高的优先权。应用中，应该避免特殊化！

分层

z-index属性能够有效地控制绝对定位元素的层叠顺序。

由于绝对定位元素不属于页面的常规文档流，所以默认的控制层叠方法已经不能满足需要。

注释：

绝对定位的本质：一个绝对定位元素会参照它的定位容器元素来定位，如果没有定位容器元素，则会以html根元素为参照。但是如果祖先元素设置了相对定位，绝对定位的子孙元素就会定位在祖先元素内。

若是没有了z-index，绝对定位元素将自下而上层叠，因而在html中先出现的元素会被堆叠于底部，而后出现的元素会被堆叠于上部。

z-index的合法值是从0开始的任意整数。

通过强化CSS支持而改善页面设计的想法

首先发掘出浏览器对特定CSS选择器支持的缺陷，然后基于这些CSS选择器分别为每种支持它的浏览器编写不同的CSS代码，以实现不同的设计。

IE不能支持的选择器：

子选择器（div#content>p{}）;
邻接选择器（div#warning p + p{ }）;

属性选择器及匹配模式 id=“waning”{}

CSS签名

主要思想是为页面的body元素明确指定id,这样即可用这个额外的样式来统一站点风格，定义用户样式表，以及实现多CSS样式文件。

css签名的益处在于，它允许一些资深的用户能够自行调整站点的风格。

例如，用户在浏览器中添加一张自定义的样式表，并在其中自行更改字体配置即可达到修改网站样式的目的。

background

许多设计师会同时定义背景色和背景图片。背景色由浏览器直接控制，会和CSS中的其他定义一起快速显示于页面上，而背景图片需要相对较长的时间加载。因此，同时定义二者有助于让页面的加载过程变得更为平滑。

background-position:

该属性定义了背景图片在父元素中得相对位置，它可以接受2个百分比、长度或关键字值，分别用来表示2个坐标值中的一个。如果同时设置了2个，那么第一个值表示水平位置，第二个值表示垂直位置。

如果只设定一个值，那么它将表示水平位置，而垂直位置将取默认的50%或者居中。

设置水平位置为“负值”在背景定位中是合法的。它的效果和设定正值相反。

固定、可变布局

在响应式布局还未出现之前，有2种最基本的布局方式：定宽布局（受限、冰块布局）与变宽布局（全屏布局、流式布局）。

• 定宽布局：给内容区域设置固定的像素宽度，把页面限制在这个宽度以内； 在需要精确控制图片这类宽度大小不会变动的元素时，该方法特别有效。

• 变宽布局：让内容区域不受限制地（在任何分辨率的屏幕下）填满整个浏览器的显示区域；但是，流式布局在处理比例时存在更大的问题，在宽度发生变化时这种方法甚至变得不可靠！

弹性设计

基于固定布局与变宽布局的优缺点，延伸出“弹性设计”。在宽度、内边距、外边距以及其他的度量单位都使用了em而非px,那么这些元素能够随字体大小的变化而相应改变。

但是，要知道并非各种宽度和长度属性都能够应用同样的方法。例如：图像，因为图像的尺寸是固定的，它们不会随着字符大小的改变而改变。所以，要彻底应用弹性设计还需要更多的考虑。

可变裁减技术

在页面空白的大小变化时自动调整图像显示出来部分的尺寸。
例如：创建弹性图片元素：

1. 给承载这个图像的可变长元素应用overflow:hidden属性；
2. 为背景元素添加可变长度；

<div class="wrapper">
<img src="skyline.jpg" width="600" height="200" />
</div>

<style>
#wrapper { 
width:10en;
overflow:hidden;
}
或者：
#wrapper { 
 width:10em;
background:url(skyline.jpg) no-repeat;
}
</style>

几点建议

(1)创建并测试CSS时，首先在最高级、最先进的浏览器中进行，然后再考虑其他浏览器。
如果一开始就是基于老版本的浏览器测试，那么代码将无法避免地依赖于这些浏览器中落后、错误的呈现规则。
首先基于先进浏览器编写，然后再为那些非标准浏览器调整的话，代码将从一开始就非常标准。

（2）若用浮动实现布局，请确保正确地清除浮动。
（3）为元素应用内边距或边框来避免外边距重叠。
有时候元素之间留出了一条并不希望看到的缝隙，而另一些时候却无法让元素之间保持一段距离。若效果是由外边距实现的话，那么罪魁祸首十有八九是外边距重叠现象。

（4）避免同时为元素指定明确的内边距/边框值与宽度/高度值
（5）不要依靠min-width或min-height属性
（6）尝试减少百分比值
（7）牢记“LoVe/HAte”（爱/恨）链接规则
为链接元素指定伪类时，牢记以下顺序：link\visited\hover\active
（8）测试时使用嵌入样式，发布时再改为外部输入
此举可避免许多因浏览器缓存导致的不正常现象。对于较老的浏览器而言，这一点至关重要。
（9）用明显的边框辅助调式布局
div{ border:solid 1px #f00;}之类的全局规则可以帮助检查出很多细微的布局差错。
（10）指定图片路径时，不要使用单引号
（11）若使用了锚点（anchor）,那么在为超链接应用样式时要格外小心
如果代码使用了传统的锚点（如：< a name="anchor">）,将发现:hover和:active伪类的样式也会应用于其上。我们可以使用独一无二的id(如<id="anchor">),或是一种鲜为人知的奇怪语法" :link:hover "和 " :line:active "来避免这种情况。

总结

理解问题才是修复问题的关键。想要了解CSS布局中常见问题别无他法，唯有用时间为代价换来经验。

站点与图书推荐

1. www.css-discuss.org 关注CSS新闻并提供CSS的帮助。

2. css.maxdesign.com.au 专注于列表、浮动等问题。

3. www.andybudd.com/links/cssweb_standards andybudd的CSS相关文章、技术以及缺陷修复列表

4. www.dezwozhere.com/links.html CSS相关资源列表、集合

5. www.alistapart.com web设计师的首先杂志

图书

• Eric Meyer on CSS :Mastering the language of web design

• Web Standards Solutions:The Markuo and Style Handbook

• Special Edition:Using XHTML and HTML