“Layout”是一个 IE/Win 的私有概念,它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等。
这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有“layout”。
微软的开发者们认为元素都应该可以拥有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 hasLayout,这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。
术语
转载请注明出处:drupal花园
本文永久链接地址:http://drupalgarden.cn/node/249
假如你是所有的标签都使用<div>,这篇文章正适合你。本文重点讲述如何利用语义化标签和尽可能少地使用<div>标签来书写简洁的HTML代码。你是否编辑过某些人的模板,而被那些杂乱标记逼疯呢?书写简洁的模板将对你和你的团队共同获益。这将节约你调试和编辑的时间(尤其是大型的项目)。
我看到很多人在<form>和<ul>菜单列表外面包着<div>。为什么要加个你不需要的<div>标签呢?你可以使用CSS的选择器规则去实现同样的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>解决IE6下a:hover后面选择器样式无效的问题</title> <style type="text/css"> ul{ float:left; width:400px; height:50px; line-height:50px; background:#bce9e3; } ul li{ float:left; } a { display:block; padding:0 0 0 18px; font-size:12px; color:#333; text-align:center; text-decoration:none; } a span{ display:block;
要写一个空间代码,实现的效果之一就是背景图片固定在页面上,不随浏览器滚动而滚动,但是却遇到了一个问题,就是IE6下背景图片固定不起作用了(IE7,firefox火狐浏览器等都可实现背景固定)。
这是很奇怪的,以前用同样的代码是一点问题都没有的,这次为何不行呢?
待我慢慢叙来……
使背景图片固定代码如下:
body{background:url(xx.jpg) fixed 50% 50%;}
在各个浏览器下的表现都是背景固定,您有兴趣可以随便找一张图试试。
但是,今天同样的针对body的代码却没有用,问什么呢?
/*以下为废话,建议忽略不看*/
由于我这个页面很复杂,十几个模块,多多js,还有多多其他css链接,所以我说不准到底哪儿出问题。
找问题最好的方法就是删除排除法。删掉一段代码,看显示有没有变化,如果,老样子,显示bug,则与此段代码无关;如果代码删掉后,显示正常了,则表明刚删除的代码就是问题代码,再细化排除即可找到问题症结所在了。
比如今天遇到的情况。
做为一个专职的页面重构者,我们从事的工作简单的说就是“将设计稿转换成WEB页面”,这一过程可以很简单到直接把PSD从PS里导出成网页;也可复杂到需要考虑页面中每个标签的使用,考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来,但随着工种的细分,加上页面重构本身的专业性,独立为一个职业也不是不可能,至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿,可以不理会下面的内容。
唧唧歪歪:概述
最近在D4得到一本(美) Penny Mcintire写的《Visual Design for the Modern Web》.突然觉得可用性交互设计中也应该融合点情感设计元素,其中一个表现方式就是WEB视觉设计.渐渐地我开始重新审视自己所走过的交互设计之路.从方正软件到现在的阿里巴巴中国站,每一次所经历的项目都给予我新的启示.秉承”大胆设想,小心求证”的思想,探索交互设计与其他WEB设计元素之间的关系,让我从中得到了不少乐趣,现与UED设计师们一同分享探讨一番.
Penny Mcintire提出交互设计位于技术,内容,网站架构和视觉设计交集部分,而且技术,内容,网站架构和视觉设计彼此都有交集互相依赖。

图1 Web设计中5个相互依赖的要素
在web开发当中,越来越多地使用CSS来定义网页的文字颜色、背景、图片等等,而在我们的书写过程中或许忽略了一些小的细节,那就是CSS的正确书写顺序,养成良好的顺序书写习惯,让代码更容易查看,也便于以后更改。
整理了一下自己写CSS时的顺序,跟大家分享下。
下表顺序为从上到下,从左到右:
========================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float
最近发现好多用margin-top实现的,上边距效果一直没有,一直都不知道什么原因,今天偶然看到了,特分享给大家
为什么要翻译这篇说明?css2本有人已翻译过,但看一下,很粗糙(不是说自己就怎么怎么样啊,翻译者真的是很值得敬佩的!),近来跟css与xhtml接触得越来越多,但接触得越多,迷惑却总不见少。
现在我觉得很多问题根本不能称之为问题,原因就在于我们的草率理解,比如杀鸡用牛刀,不是不可以,是不合理、不恰当,根源错了,表象也就会错了,如果解决问题从表象入手,难免总会摸不着头脑,还是那句话,要脚踏实地,切莫浮躁。
在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容、padding区域、border边框或使用清除分离方法)结合表示为一个单独的margin。
在css2.1中,水平的margin不会被折叠。
垂直margin可能在一些盒模型中被折叠:
1、在常规文档流中,2个或以上的块级盒模型相邻的垂直margin会被折叠。
最终的margin值计算方法如下:
a、全部都为正值,取最大者;