续
上篇。
第2章
box model译作“框模型”,我是始作俑者(大约在2003年,在opendl.com的w3c翻译讨论区中提出)。绝大多数是译作“盒模型”。当然据说之前就有人译为“框模型”,但是至少本书的译者估计或多或少受到了我的影响。因为
刘江说译者认为“盒”有3D的意思,而这是我在opendl论坛提出的论点。当然不能排除译者与当时的我正好有相同想法的可能。
不过我后来觉得“框模型”也有点问题。在Zen of CSS Design(也已购买,等待读完本书后继续)的译者的论坛上,我
留言到:
引用
“方框模型”或“框模型”很久以前提过,只是因为感到“盒模型”不够好(有三维意思),但是“方框模型”也未必见得就好。不知有什么更好的译名。……为什么“框模型”更贴切?
虽然我也是最早将其列为候选的(之一),但是我还真没有觉得“框模型”就更贴切也。。。“框模型”的主要问题是强调了框,加上border(边框),就有点乱了。“盒模型”的主要问题就是盒子是3d的。。。
不过好玩的是,Zen的译者认为“框模型”比“盒模型”好,但是实际上用了“盒模型”。
要问我现在我觉得怎么翻译box model好?我也说不上。
首先把box译作“框”是ok的,例如TextBox文本框,radiobox单选框,checkbox复选框,MsgBox消息框。但是“框模型”,容易与“边框”混淆,而且给人感觉重点在框(边界)上。
“盒模型”主要是有三维空间的感觉,但是“盒”有容器的意味,可以表达
“方块套方块”的境界。
其实有时候我想,是不是大白话的“方块模型”才是最好的?
关于IE/Win的box问题,本章给出的建议是“回避”,等待到第9章。但是这里没有说明,回避其实是有坏处的,因为将padding和margin加到父元素或子元素,很有可能会引入额外的无意义标签,或者破坏样式本身的自明性。
记录IE的bug:相对定位元素内若向右下进行绝对定位,需要设定相对定位元素的高宽。
在IE中模拟fixed定位,本书举了Jonathan Snook的网站作为例子,遗憾的是,他的网站已经改过版了,找不到fixed了。我原来以为首页上方的黑边是fixed的,但是一看,原来是border而已。
IE对于fixed定位有个很大的错误,我不是说不支持fixed就不对,但是既然其接受fixed作为合法参数,就不应把其当成static来处理,至少应当作absolute处理,这样可以graceful degradation。
模拟fixed的一个办法是使用脚本改变元素的绝对定位坐标,但是通常会导致抖动。实际上有两个小技巧可以模拟出不抖动的fixed。一个是使用css expression配合background-attachment:fixed。另一个(偶自行发现的)方法是使用ie的standard mode,然后html元素overflow:hidden,而body元素overflow:auto,这样body上绝对定位的元素在外层没有定位元素的情况下,会始终相对于html元素定位,从而达到和fixed定位一样的效果。这一方法是我在试图解决standard mode下scrollbar抢夺焦点的Bug(IE7似乎仍有这个bug)时偶然发现的。
关于containing block如何包围float元素(似乎有很多人以为这是FF的bug),需要额外的空元素来clear。为了避免引入无意义的标签,使用::after是个好方法,类似的,也许也可以用:last-child伪类,不过这两种方法无法用在IE上。但是IE可以用Holly hack,实际上就是让containing block获得hasLayout。
待
续...
分享到:
相关推荐
这份笔记包含了从基础概念到高级技术的详细讲解,涵盖了HTML+CSS笔记和PHP课程两大部分,共计149讲,为学习者提供了一个扎实的起点。 在PHP的入门阶段,首先会介绍PHP的基础知识,包括PHP的安装和配置环境,如何...
《HTML5 CSS3 JavaScript从入门到精通微课》读书笔记模板.pptx
【PHP从入门到精通_html+CSS笔记.rar_8V4_PHP从入门到精通 学习文档_php 学习】 这份压缩包文件包含了两份重要的学习资料,旨在帮助初学者掌握PHP编程语言及其与HTML和CSS的结合应用。PHP是一种广泛使用的服务器端...
HTML5和CSS3是现代网页开发的基石,它们极大地提升了网页设计的灵活性和表现力。在JavaWeb前端开发中,熟练掌握这两项技术...通过阅读"HTML5+CSS3从入门到精通1.pdf"这份文档,你可以系统地学习并掌握这些关键知识点。
### 《跟我学SEO从入门到精通-张新星》精华读书笔记第十一章 #### 11.2 做网站的准备工作和建设内容 - **选择熟悉领域**:选择自己熟悉的行业来创建网站,这有助于更好地理解目标受众的需求,并能够提供更高质量的...
在本篇【读书笔记: JavaWeb从入门到精通 第13章: Ajax 技术】中,我们将深入探讨Ajax(Asynchronous JavaScript and XML)技术,它是现代Web开发中不可或缺的一部分,用于实现页面的异步更新,提升用户体验。...
### AJAX从入门到精通知识点详解 #### 一、AJAX概述 - **定义**:Asynchronous JavaScript and XML(异步JavaScript与XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 - **发展历程**:...
JavaScript是一种广泛应用于网页和网络应用的脚本语言,它在浏览器端...通过阅读"JavaScript从入门到精通学习笔记.docx"文档和解压"Chapter2.rar",你将深入探索以上各个知识点,逐步成为一名熟练的JavaScript开发者。
【标题】"reading-notes:班级读书笔记" 涉及的知识点主要集中在软件开发的初级到高级阶段,其中包含了对编程基础知识的理解、软件开发流程的介绍以及可能涉及到的高级技术。这个标题暗示了这是一个关于软件工程学习...
5. **做笔记和提问**:在第二次阅读时,开始做学习笔记,记录重要概念和疑问。如果遇到难题,不要害怕寻求帮助,可以在论坛上发帖提问。学会如何清晰地表达问题也是学习的一部分。 6. **动手实践**:阅读教程的同时...
推荐的学习资源包括CSDN、博客园等专业论坛,以及相关的技术书籍,如《精通CSS:高级Web标准解决方案》和《ASP.NET 3.5从入门到精通》等。 课程内容主要包括HTML和HTML5的基础与进阶,XHTML的结构规范,CSS用于页面...
2. 精通CSS3,尤其是动画和变换相关的特性。 3. 对HTML5的canvas有深入理解,知道如何在画布上绘制和操作图形。 4. 一定的物理知识,特别是基础力学原理。 5. 良好的视觉设计感,能创造出引人入胜的动画效果。 总的...
3. **观看尚硅谷React教程**:尚硅谷提供的React教程涵盖了从入门到精通的全过程,包括React的基本概念、常用API的使用方法、项目实战等内容。跟随教程逐步学习,可以帮助你系统地掌握React。 4. **动手实践**:理论...
- **《HTML+CSS网页设计与布局从入门到精通》** 和 **HTML 教程** 提供了关于 HTML 和 CSS 的基础知识,是前端开发者必读的经典之作。 - **《JavaScriptDOM编程艺术第2版》** 介绍了 JavaScript 与 DOM 的交互方式...
总之,计算机专业的学习是一个持续的过程,需要结合个人特点,设定明确目标,养成良好习惯,精通核心知识,并有效管理时间。通过这样的学习计划,不仅可以提升专业技能,也为未来职业生涯打下坚实基础。
总之,这个压缩包提供了一个实践性的JavaScript学习资源,通过查看图像和阅读文本文件,你可以深化对JavaScript语言的理解,并提升实际编程技能。记住,理论知识和实践经验相结合,是成为精通JavaScript开发者的...
"程序人生.chm"文件可能是一个程序员个人的记录,其中包含了他这七年来的心得体会、技术笔记、项目案例,甚至可能包括他在解决特定问题时的解决方案。阅读这样的资料,对其他程序员来说是一份宝贵的资源,可以借鉴他...
你好there我是Anindya 我是最后一年的本科生,从印度的一家公共工程机构攻读信息技术的BTech。 我今年22岁。 我是一名技术爱好者,并积极关注新技术产品。 我喜欢学习事物的工作方式,... 我精通HTML , CSS和JavaScr
因此,除了精通一两种主流编程语言之外,还可以尝试学习其他语言和技术栈,比如前端开发技术(HTML/CSS/JavaScript)、后端框架(如Spring Boot、Django)、数据库技术以及云计算平台等。这样不仅可以拓宽你的视野,...
QSS,全称Qt StyleSheet,是Qt框架中用于定义用户界面外观的一种样式表语言,类似于网页设计中的CSS。本文将对QSS进行详细的中文总结,旨在帮助开发者更好地理解和应用QSS来美化他们的Qt应用。 QSS的基本概念: 1. ...