2007-08-27
《精通CSS》读书笔记（三）
续上篇。
第3章
这一章里展示了众多的trick。下面总结和补充一下方案实现和限制条件。
首先是针对永恒的话题：圆角框。
1. 固定宽度圆角框
实现：在外层元素（容器）上设定背景色和底部圆角图，在标题（内部第一个元素）上设定顶部圆角图。
限制：
* 宽度是定值像素的。
* 必须有内外两层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。
2. 固定宽度圆角框的变形
实现：在外层元素（容器）上设定纵向重复（repeat-y）的背景图，在内部第一个元素上设定顶部圆角图，在内部最后一个元素上设定底部圆角图。
限制：
* 宽度是定值像素的。
* 必须有内外两层block元素，内层至少有两个元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。
注：固定背景色的限制可以通过增加位移来解决，例如：
注意，由于使用了margin，需要注意垂直合并的情况，增加了样式的复杂度。
3. sliding doors 技巧
实现：添加若干层额外的container，在每层上分别应用左下、右下、左上、右上的圆角图。
限制：
* 必须有四层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。
本质上，sliding doors技巧和前两个方式是一致的，都是通过多层block元素上的背景重叠来模拟总体效果。区别就是前面只需要两层——多数情况下，语义结构可以有两层元素，而几乎不可能出现语义结构需要四层元素的情况。
本书作者对此的看法是，如果只要少数地方，那忍受一下无意义标签也可以，但是如果有很多地方，那就需要考虑其方案。
我对此的看法有些不同。实际上，书中示例在容器宽度高度增大到超出图片宽高时，就会出现空白。如果要适应任意大小的容器，要么增大图片尺寸到一个很大的数值，要么增加更多层次，使用多达九层元素（相当于切分成井字形的九份）！
因此同样是忍受无语义元素，我宁可使用table构造一个井字布局来模拟border，这个方式比多层嵌套无语义div更清晰。
当然，最好的方案是使用CSS3的border-image和border-radius。在没有CSS3支持前，则是使用脚本自动插入辅助元素来实现。书中给出的是http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/。
4. mountaintop corner 技巧
实现：添加若干层额外的container，在每层上分别应用左下、右下、左上、右上的圆角蒙板图。
限制：
* 必须有四层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色）。
此技巧的本意是允许容器背景色（图）灵活变换，但是由于其外部背景确必须是固定单色的（不像前面的技巧是有可能克服的），所以在我看来，这个trick局限性非常之大，不值得推广。
待续...
第3章
这一章里展示了众多的trick。下面总结和补充一下方案实现和限制条件。
首先是针对永恒的话题：圆角框。
1. 固定宽度圆角框
实现：在外层元素（容器）上设定背景色和底部圆角图，在标题（内部第一个元素）上设定顶部圆角图。
限制：
* 宽度是定值像素的。
* 必须有内外两层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。
2. 固定宽度圆角框的变形
实现：在外层元素（容器）上设定纵向重复（repeat-y）的背景图，在内部第一个元素上设定顶部圆角图，在内部最后一个元素上设定底部圆角图。
限制：
* 宽度是定值像素的。
* 必须有内外两层block元素，内层至少有两个元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。
注：固定背景色的限制可以通过增加位移来解决，例如：
<div class="box"> <div class="top">Heading</div> <div>Content...</div> <div class="bottom">Content...</div> </div>
.box {
background:url(border-middle.png) repeat-y; width:120px;
margin:12px 0;
}
.box .top {
background:url(border-top.png) top no-repeat;
margin:0;
position:relative; top:-12px; padding-top:12px; margin-bottom:-12px;
}
.box .bottom {
background:url(border-bottom.png) bottom no-repeat;
margin:0;
position:relative; top:12px; padding-bottom:12px; margin-top:-12px;
}
注意，由于使用了margin，需要注意垂直合并的情况，增加了样式的复杂度。
3. sliding doors 技巧
实现：添加若干层额外的container，在每层上分别应用左下、右下、左上、右上的圆角图。
限制：
* 必须有四层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色），不能是透明的。
本质上，sliding doors技巧和前两个方式是一致的，都是通过多层block元素上的背景重叠来模拟总体效果。区别就是前面只需要两层——多数情况下，语义结构可以有两层元素，而几乎不可能出现语义结构需要四层元素的情况。
本书作者对此的看法是，如果只要少数地方，那忍受一下无意义标签也可以，但是如果有很多地方，那就需要考虑其方案。
我对此的看法有些不同。实际上，书中示例在容器宽度高度增大到超出图片宽高时，就会出现空白。如果要适应任意大小的容器，要么增大图片尺寸到一个很大的数值，要么增加更多层次，使用多达九层元素（相当于切分成井字形的九份）！
因此同样是忍受无语义元素，我宁可使用table构造一个井字布局来模拟border，这个方式比多层嵌套无语义div更清晰。
当然，最好的方案是使用CSS3的border-image和border-radius。在没有CSS3支持前，则是使用脚本自动插入辅助元素来实现。书中给出的是http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/。
4. mountaintop corner 技巧
实现：添加若干层额外的container，在每层上分别应用左下、右下、左上、右上的圆角蒙板图。
限制：
* 必须有四层block元素，内外层要紧贴（即外层不能有padding，内层不能有margin和border）。
* 圆角背景色是固定的（如白色）。
此技巧的本意是允许容器背景色（图）灵活变换，但是由于其外部背景确必须是固定单色的（不像前面的技巧是有可能克服的），所以在我看来，这个trick局限性非常之大，不值得推广。
待续...
评论
tiger.passion
2007-10-19
box在制作中最常打交道的元素之一,hax,你写的这中box结构非常常见,很长一段时间,也是这样,不过我后来发现一种结构更简单,更实用的.
<!-- folder -->
<div class="folder-top"><h3>head</h3></div>
<div class="folder-bottom">Content...</div>
<!-- end folder -->
发表评论
提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则
hax
- 浏览: 139403 次
- 性别:
- 来自: 上海
- 详细资料
搜索本博客
最近加入圈子
最新评论
-
一个嵌入式HTML引擎
这个引擎的源码在什么地方可以下阿
-- by lizhaosuper -
注册Facebook的一点点用户 ...
注册验证码确实有点变态。好在只是一次性的。我经常看到一些网站每次留言都要验证码， ...
-- by hax -
注册Facebook的一点点用户 ...
那个注册验证码太强了点
-- by jinhao7773 -
注册Facebook的一点点用户 ...
第一次使用facebook也发现了这点。他的工作很细致。
-- by wutao8818 -
向左转？向右转？
这个论坛有人发过了
-- by lonelyblue
评论排行榜