精通CSS-读书记录 ch7-ch9

7.1 对数据表格应用样式

7.1.1 表格特有的元素

1.summary和caption

summary总结表格内容，caption表格标题

2.thead、tbody、tfoot

这三个元素可以将表格划分为几个逻辑部分。例如，可以将所有列标题放在thead中，就可以对这个特殊区域单独地应用样式。如果选择thead或tfoot元素，那么至少使用一个tbody元素。在一个表格中只能使用一个thead和tfoot元素，但是可以使用多个body元素将复杂的表格划分为更容易管理的几部分。

行标题和列标题应该使用th而不是td标记，但是如果某些内容既是标题又是数据，那么它仍然应该使用td，表格标题可以设置为row或col的scope属性，定义它们是行标题还是列标题。它们还可以设置rowgroup或colgroup的值，表示它们与多行或多列相关。虽然tr元素能对整行应用样式，但是很难对整列应用样式。可以使用colgroup和col，colgroup能使用col元素对一个或多个列定义和分组。

7.1.2 数据表格标记

7.1.3 对表格应用样式

CSS规范有两个表格边盒模型：单独的和叠加的。在单独模型中，在各个单元格周围有边框，而在叠加模型中，单元格共享边框。但是个人认为叠加模型更有用，因此需要用到border-collapse:collapse。还有一个属性值是separate。border-spacing可以控制单元格之间的距离。

7.1.4 添加视觉样式

“为了给这些链接设置样式，我决定使用属性选择器来选择rel属性。”

“如果希望显示日期被按下的外观，那么修改单元格的边框颜色”

7.2 简单的表单布局

7.2.1 有用的表单元素

fieldset：用来对相关的信息块进行分组。

legend:识别每个fieldset的用途，就像是fieldset的标题。但是难在legend上应用样式，因为各种浏览器处理它们的方式不一致。

textarea：文本区域

表单标签

label：用来在每个表单元素中添加有意义的描述性标签。在许多浏览器中，单击标签元素将导致相关联的表单元素获得焦点。

关联标签和表单控件的方法有隐式和显式：

隐式：<label>email<input name="email" type="text"/></label>

显式：<label for="email">email</label>    <input name="email" id="email" type="text"/>

(id和name不必相同。在表单输入控件和标签之间创建关联需要id属性，而将表单数据发送回服务器需要name属性）

7.2.2 基本布局

让标签定位在表单元素上方直接使用display:block;

文本区域的尺寸在不同的浏览器中也不一样，所以也应该显式地设置它们的高度和宽度。（但即使设置了之后仍然是可以有用户自由延伸的）

textarea中的col和row什么意思

width:auto什么意思

<label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>

密码字段：[type="password"]

必填：<label for="author">Name:<em class="required">(required)</em></label>

卧槽，又丢了

如果表单标签可能跨多行，还应该清理容器div浮动，以避免它们干扰下一组标签以及弄乱布局。

将标签的display属性设置为none会阻止标签显示，但是也会阻止许多屏幕阅读器访问它们。所以额不这样做，而是通过值较大的负文本缩进将标签定位到屏幕之外。

我刚刚给label设置text-indent，发现完全不起作用，才知道text-indent是给块状元素用的。

（行内元素能设置高度和宽度吗？应该不能吧，哎我呀）

7.3.2 多列复选框

为了创建列效果，每组放在一个div中各有一个col类，然后将这两个div元素一起放在一个具有描述性ID的fieldset中。 

提交按钮：type值设置为submit的input元素，但是不如用Buttont,type值为submit的。按钮有一些默认样式，我们希望关闭它们
button{
border:none;
background:none;
cursor:pointer;}
button元素的主要限制是IE6处理提交的方式。其它浏览器提交value属性的内容，但是IE6提交元素本身的内容。
7.3.3 表单反馈
表单需要某种形式的反馈从而突出显示那些忘了填写或填写得不正确的域。方法是：在适当的域旁边添加一个错误消息。可以将反馈文本放在一个em中，将这个em放在源代码中文本输入元素的后面。


第八章 布局
所有CSS布局技术的根本都是3个基本概念：定位、浮动和外边距操纵。这些CSS布局技术其实没有本质区别。实际上，布局是CSS最容易的部分，只需花些时间掌握它。
8.1 计划布局
先把页面划分为大的结构性区域，比如容器、页眉、内容区域和页脚。
然后，开始关注内容区域本身，开始建立网络结构。设计有多少不同的内容区域，他们有什么差异？大多数设计只有几个独特的内容区域，所以应该寻找共同的特征而不是视觉表现。
最后，在各个内容区域中寻找不同的布局结构。
结构设计完之后，可以开始关注不同类型的内容。给每个内容块起一个有意义的名称，然后分析它们的关系。
查看每个内容块的结构，看看不同的类型中是否有共同的模式。应该尽量采用一般的类名，然后根据上下文应用样式。
找出模式并确定命名约定之后，最好马上开始定义将使用的元素。
8.2 设置基本结构
使用外边距让设计居中。
IE将text-align误解为让所有东西居中而不只是文本。（其实不止IE吧...）
8.3 基于浮动的布局
“用CSS进行布局有几种不同的方式，包括绝对定位和使用负的外边距值。我发现基于浮动的布局是最容易使用的，也是最可靠的”
非常常见的做法不是连续的浮动和清理元素，而是浮动几乎所有东西。然后在整个文档的“战略点”上进行一次或两次清理，还可以使用溢出方法清理某些元素的内容。“这是我目前最喜欢的方法”
两栏布局中：一个向左浮动一个向右浮动，如果一个元素增宽了几个像素，那么不会出现下坠，而只是扩展到视觉隔离带中。“我还在所有浮动元素中添加了display:inline”这个预防措施用来防止IE中的双外边距浮动产生的bug。不论这个方法是不是过时的，学习一种思想总是好的。
8.3.2 三列的浮动布局
主次分成两栏，主中再主次分成两栏
8.4 固定宽度、流式和弹性布局
流式布局：尺寸是用百分比设置。min-&max-
8.4.2 弹性布局
可以作为流式布局在极端情况下过长或过窄的情况。
弹性布局相对于字号来设置元素的宽度，以em为单位设置宽度，可以确保在【字号增加时整个布局随之扩大】。这可以将行长保持在可阅读的范围。
缺点：不能充分利用可用空间。弹性布局会变得比浏览器窗口宽导致水平滚动出现。
技巧是要设置基字号，让1em大致相当于10像素。
大多数浏览器的默认字号是16px，10像素是它的62.5%，所以在主体上将字号设置为62.5%就可以了。（font-size:62.5%）
【更灵活更易维护的解决方案：内部宽度仍然使用百分数，只以em为单位设置容器的宽度。这样的话，内部宽度仍然是相对于字号的。这样就可以方便地修改布局的总尺寸，不必修改每个元素的宽度。】
8.4.3 流式和弹性图像
对于需要跨大区域的图像，比如站点页眉或品牌区域中的图像，可以考虑使用背景图像而不是图像元素。
如果图像需要用作页面上的图像元素，那么将容器元素的宽度设置为100%并且将overflow属性设置为hidden。这样的话，图像右边会被截短，使它不会随着布局伸缩。
对于常规内容图像，你可能希望它们垂直和水平伸缩以避免被剪切。为此，可以将图像元素添加到没有设置任何尺寸的页面上。然后设置图像的百分数宽度，并且添加与图像宽度相同的max-width以避免失真。
8.5 faux列
理想情况下，背景应该拉长到整个布局的最大高度，从而形成列的高度。但是，因为导航元素和次要元素区域没有扩展到最大高度，所以它们的背景也不会拉长。故需要创建一个伪列。方法是在一个占据布局最大高度的元素上应用重复的背景图像。
8.6 等高布局
这个技术的关键是“给每个框设置大的底内边距，然后用数值相似的负外边距消除这个高度。这会导致每个列溢出容器元素。如果把容器的overflow属性设置为hidden，列就在最高点（即最长处）被裁切”
刚刚想半天没想明白这个margin又突然想到margin的真正意义是与其它元素之间的距离（一种亲近尺度），它不像padding有视觉上的展示。
之后再回顾一下记录的其它等高栏技巧。
8.7 CSS3列
这个也可以创建等高文本行，要通过column-count、colum-width和column-gap属性实现。比如把一个文本段设置以上属性，可以自动分栏blahblah
8.8 CSS框架和CSS系统
框架的目标是简化CSS的使用，帮助用户方便地创建各种常用的布局，而不需要编辑底层CSS。


第九章 bug和修复Bug
9.1 捕捉bug
浏览器bug并没有一般人认为的那么常见。
通过CSS validator（http://jigsaw.w3.org/css-validator/）等服务运行代码可以突出显示所有语法错误。还有web developer（我安装了的那个）
！查阅规范！
1.特殊性和分类次序的问题
除了语法错误之外，比较常见的问题与特殊性和分类次序有关。
原来F12里面样式的删除线是表示被覆盖的意思啊。
2.外边距叠加。
如果元素没有垂直边框或内边距，那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。因此，包含的子元素的顶部和底部外边距就突出到容器元素的外边，有一个简单的解决方案：通过添加一个垂直边框或内边距，外边距就不再叠加了，而且元素的高度就是它包含的子元素的顶部和底部外边距边缘之间的距离。（我忘了，外边距叠加必须要没有内边距吗？？？）
外边距叠加的问题大多数可以通过添加一点内边距或与元素背景颜色相同的小边框来修复。
9.2 捕捉bug的基本知识
跟踪bug的第一步
9.2.1 尽量在一开始就避免bug
9.2.2 隔离问题
隔离问题的一种方式是在相关的元素上应用边框或轮廓。
9.2.3 创建基本测试案例
9.2.4 修复问题而不是修复症状
9.2.5 请求帮助
9.3 拥有布局
9.3.1 什么是布局
9.5 常见bug及修复方法
9.5.1 双外边距浮动bug
设置display:inline