CSS 中那些大大小小的坑
· 30 min read
中国读者不是不善于交流,而是对基础知识掌握不够牢固,不敢交流。就如同有人提到用英文写作时所说的,最难的不是怎么写,而是写什么。英文语法错误其实是别人最容易纠正的,但你到底想要表达什么则是别人无法知道的。具体到CSS,虽然不难学,但真正彻底把原理和基本概念全搞通也不是一件容易的事。 —— 李松峰
最近读完了Charles Wyke-Smith的《CSS设计指南》,上面那段话是节选的译者李松峰的序(在这多说一句,觉得李松峰翻译的书质量都很高,现在的我基本在遍历)。越来越觉得只读书不思考是毫无用处的,于是把笔记整理出来,并加上了自己思考过的感悟。
CHAPTER 1 HTML标记与文档结构
用HTML标记内容的目的是为了赋予网页语义(semantic)。换句话说,就是要给你的网页内容赋予某些用户代理(user agent)能够理解的含义。 浏览器、屏幕阅读器,以及搜索引擎放出的web爬虫都是用户代理,它们需要显示、朗读和分析网页。
-
文本用闭合标签,引用内容用自闭合标签。
- 闭合标签与自闭合标签的区别在于,闭合标签包含的是会显示的实际内容,而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML页面加载时候,额外向服务器发送请求,以取得自闭合标签引用的内容。
- 属性alt(alternative),定义的是在图片因故未能加载成功时候在屏幕上显示的文本。视障用户的屏幕阅读器会大声读出alt属性的内容,因此一定要给
<img>
标签的alt
属性添加让人一听(或一看)就能明白的内容。 <h1>
被搜索引擎视为仅次于<tittle>
标签的另一个搜索关键词重要来源。- 只要有不适合放在其他文本标签中的文本,都可以把它放在一个段落里。
- 某些标签,如
<ol>
要求其他标签,如<li>
与之共同出现。 <!DOCTYPE html>
是DTD(文档类型定义),声明:“以下是一个HTML文档。”<html>
只有两个直接的子标签:<head>
和<body>
。帮助浏览器理解页面的信息都包含在<head>
标签中。- 块级标签:标题、段落、列表、独立引用等,如文档流一般上下堆叠显示;行内标签:链接、图片、字体样式、简写
<abbr>
、引证<cite>
、文本内引用<q>
相互并列显示,只有在空间不足以并列的情况下才会折到下一行。 - 块级元素盒子会拓展到与父元素同宽。
- 行内元素盒子会“收缩包裹”其内容,并且会尽可能包紧。
- DOM(文档对象模型)是从浏览器的视角来观察页面中的元素及每个元素的属性,由此得出这些元素的一个家族树。通过DOM,可以确定元素之间的相互关系。在CSS中引用DOM中特定的位置,就可以选中相应的HTML元素,并修改其样式属性。CSS修改了元素后,这些变化会立即在DOM中发生,并体现在页面上。