《CSS设计指南(第3版)》笔记

图书信息:《CSS设计指南(第3版)》(豆瓣)
原作名: Stylin’with CSS:a designer’s guide

这本书比较基础,适合初学者。自己已经很久没有专门读CSS方面的书了,就把这本买了半年多却一直未读的书拿出来翻了一翻。顺便查漏补缺。

##第1章 HTML标记与文档结构

目前,HTML一共有114个标签,但按照80/20原则,使用其中25个左右的标签就可以满足80%的标记需要。

超链接元素a的属性href的英文短语是:hyperlink reference。意为“超链接引用”。

####1.2.2 块级元素和行内元素

几乎所有HTML元素的display属性值要么为block,要么为inline。最明显的一个例外是table元素,它又自己特殊的display属性值。

##第2章 CSS工作原理

###2.3 特殊的上下文选择符

通用选择符*:

这个选择符有一个非常有意思的用法,即用它来构成非子选择符,比如:

1
section * a{font-size: 1.3em;}

###2.4 ID和类选择符

可以给idclass属性设定任何值,但不能以数字或特殊符号开头。

####2.9.3 计算特指度

这本书给的计算方法为“ICE”公式。这是个无穷大进制的三位数。依次代表id-class-element。

##第3章 定位元素
这里再次强调CSS的核心技术乃是定位:

要掌握CSS技术,核心就是要掌握元素定位,只有这样才能用CSS创造出专业水准的页面布局。

定位主要靠三个属性:position | display | float

###3.1 理解盒模型
简写样式:
盒模型边距或边框的属性值简写模式按照上右下左来写。如果只写了3个,那么漏写的那个(一般也就是最后那个,左边)将使用对边的值。

####3.1.4 叠加外边距

垂直方向上的外边距会叠加。水平外边距不会叠加。

难怪在某本书上看到说,在布局控制方面,padding要比margin更好,就是因为前者定位明确。

###3.2 盒子有多大

盒模型结论一:没有(就是没有设置width的)宽度的块级元素始终会扩展到天猫其父元素的宽度为止。添加水平边框、内边距和外边距,会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和。

盒模型结论二:为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。实际上,盒子的width属性设定的只是盒子内容区的宽度,而非盒子要占据的水平宽度。

###3.3 浮动与清除

浮动非图片元素时,必须给它指定宽度,否则后果难以预料。图片无所谓,因为它本身有默认的宽度。

####3.3.2 围住浮动元素的三种方法

方法1:为父元素添加overflow: hidden
方法2:同时浮动父元素
方法3:在父元素内容的末尾添加非浮动元素,可以直接在标记中添加,也可以通过给父元素添加clearfix类来添加(当然,样式表中得需要相应的clearfix规则)

###3.6 背景
背景图片是叠加在背景颜色之上的。

渐变是CSS帮我们生成的背景图片。添加渐变可以使用background-image属性,也可以使用简写的background属性。

##第4章 字体和文本
这一章的4.4.2节 借助网格排版,给出了一个水平网格线背景下的文字排版,网格间隔18像素,仔细排版后确实很好看。

##第5章 页面布局

很多网站为了在第一屏极可能多的显示信息,都采用了多栏布局。这里所说的“第一屏”就是用户无需滚动就能看到的页面区域,相当于传统报纸行业所说的“折痕之上”的版面。

##第6章 界面组件

###6.1 导航菜单

:hover事件会沿着元素的结构层次“向上冒泡”。

下面是一个导航条+菜单示例。

###6.3 弹出层

如果要使用figcaption,必须确保它在figure中是唯一的。而且,它要么是第一个子元素,要么是最后一个子元素。

在一个包含多个同辈元素的容器内,这些同辈元素都会构造一个 堆叠上下文
z-index只对那些position值为static之外的元素有效。换句话说,涉及的两个元素必须是absoluterelativefixed才行。

使用::after伪元素制作的三角形
Share