IT博客网-asfman-文章分类-divandcss

IT博客网-asfman-文章分类-divandcsshttp://www.cnitblog.com/asfman/category/3887.html有些人注定要生活在彼岸可以亲近可以爱怜甚至可以穷尽一生去思念只是无法触及有些距离注定不能跨越只能俩俩相望就像有些爱只能养在心里长在眼中不要捧在手里放在身边注定只能邂逅无法遭遇zh-cnWed, 14 May 2008 14:26:41 GMTWed, 14 May 2008 14:26:41 GMT60关于hasLayout的好文章http://www.cnitblog.com/asfman/articles/43721.html汪杰汪杰Wed, 14 May 2008 13:58:00 GMThttp://www.cnitblog.com/asfman/articles/43721.htmlhttp://www.cnitblog.com/asfman/comments/43721.htmlhttp://www.cnitblog.com/asfman/articles/43721.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/43721.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/43721.html

http://www.satzansatz.de/cssd/onhavinglayout.html

翻译：http://forest.blogbus.com/logs/2006/04/2340409.html

以下元素自动具备layout:

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

以下属性会触发layout=true:

position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal'
writing-mode: tb-rl

在IE7 中 overflow 也会使得layout=true:

overflow: hidden|scroll|auto
overflow-x|-y: hidden|scroll|auto

1. 浮动元素会被layout元素自动包含。正常情况下，浮动元素会按照left和top的设置偏离原来文档流中的位置，父元素是不会调整高宽去包含该浮动元素的，但在IE中，layout元素会自动调整高和宽以包含浮动元素。

Firefox下：

IE下：

如果想在FF下达到和IE下类似的效果，可以参考下面的文章 http://positioniseverything.net/easyclearing.html

这篇文章更有意思：http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

似乎设置一下overflow:auto就可以了……

2. 浮动元素旁边的元素。当一个块级元素紧跟在一个左浮动元素之后时，其中的文字内容应该沿着浮动元素的右边顺序排列并会滑到浮动元素下方。但是如果这个块级元素有 layout，那么这个元素就会表现为一个矩形，其中文字不会滑向浮动元素下方。与此类似，和浮动元素相邻的相对定位元素，它的位置偏移量应该参照的是父元素的补白(padding)边缘。注：相对定位一个元素时最好给予其 layout

3. M$专有的滤镜属性filter是只适用于 layout 元素的

4. hasLayout 会影响一个块级别链接的鼠标响应区域(可点击区域)。通常 hasLayout = false 时只有文字覆盖区域才能响应。而 hasLayout = true 则整个块状区域都可响应。

汪杰 2008-05-14 21:58 发表评论

]]>margin, float引起的问题http://www.cnitblog.com/asfman/articles/43720.html汪杰汪杰Wed, 14 May 2008 13:45:00 GMThttp://www.cnitblog.com/asfman/articles/43720.htmlhttp://www.cnitblog.com/asfman/comments/43720.htmlhttp://www.cnitblog.com/asfman/articles/43720.html#Feedback1http://www.cnitblog.com/asfman/comments/commentRss/43720.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/43720.html
　　width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。左右Margin加倍的问题当box为float时，IE6中box左右的margin会加倍

W3C定义的盒模式如下：

　　width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。

　　但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。

左右Margin加倍的问题

　　当box为float时，IE6中box左右的margin会加倍。比如：

<!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=gb2312" />
<title>www.webjx.com</title>
<style>
.outer {
width:500px;
height:200px;
background:#000;
}
.inner {
float:left;
width:200px;
height:100px;
margin:5px;
background:#fff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>

　　左面的inner的左面margin明显大于5px。
　　这时候，定义inner的display属性为inline。

外层box自动计算高度的问题

　　根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。

　　Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：

<!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=gb2312" />
<title>www.webjx.com</title>
<style>
.outer {
width:600px;
background:#000;
}
.inner1 {
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>

　　上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：

<!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=gb2312" />
<title>www.webjx.com</title>
<style>
.outer {
width:600px;
background:#000;
overflow:auto;
}
.inner1 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="clear"></div>
</div>
</body>
</html>

　　因此，外层css要定义overflow属性，内层最后要加上clear属性。

汪杰 2008-05-14 21:45 发表评论

]]>Appendix D. Default style sheet for HTML 4http://www.cnitblog.com/asfman/articles/41531.html汪杰汪杰Thu, 27 Mar 2008 01:03:00 GMThttp://www.cnitblog.com/asfman/articles/41531.htmlhttp://www.cnitblog.com/asfman/comments/41531.htmlhttp://www.cnitblog.com/asfman/articles/41531.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/41531.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/41531.htmlAppendix D. Default style sheet for HTML 4

This appendix is informative, not normative.

This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.

The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.

For other elements, the legacy presentation can be described in CSS but the solution removes the element. For example, the FONT element can be replaced by attaching CSS declarations to other elements (e.g., DIV). Likewise, legacy presentation of presentational attributes (e.g., the "border" attribute on TABLE) can be described in CSS, but the markup in the source document must be changed.

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th          { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A" }
:before, :after { white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }
@media print {
h1            { page-break-before: always }
h1, h2, h3,
h4, h5, h6    { page-break-after: avoid }
ul, ol, dl    { page-break-before: avoid }
}

汪杰 2008-03-27 09:03 发表评论

]]>offsetLefthttp://www.cnitblog.com/asfman/articles/35395.html汪杰汪杰Fri, 26 Oct 2007 06:17:00 GMThttp://www.cnitblog.com/asfman/articles/35395.htmlhttp://www.cnitblog.com/asfman/comments/35395.htmlhttp://www.cnitblog.com/asfman/articles/35395.html#Feedback1http://www.cnitblog.com/asfman/comments/commentRss/35395.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/35395.html同时offsetLeft不包括offsetParent的border
所以通过：
function getPosition(o)
{
var rObj={left:0,top:0};
while(o!==document.body)
{
  rObj.left+=o.offsetLeft;
  rObj.top+=o.offsetTop;
  o=o.offsetParent;
}
return rObj;
}
获取的属性相对于实际的位置，少了几个offsetParent的border
所以正确的为：
function getPosition(o)
{
var iLeft=0,iTop=0,iBorder;
while(o!=document.body)
{
  iBorder = parseInt(o.offsetParent.currentStyle.borderWidth,10);//但是ff没有currentStyle属性
  iBorder = iBorder?iBorder:0;
  iLeft += o.offsetLeft+iBorder;
  iTop += o.offsetTop+iBorder;
  o = o.offsetParent;
}
return {"left":iLeft,"top":iTop};
}
clientLeft似乎相当于border的大小，但不设置border的话body居然有默认的clientLeft为2，其他标签为0

汪杰 2007-10-26 14:17 发表评论

]]>css prhttp://www.cnitblog.com/asfman/articles/21004.html汪杰汪杰Sat, 23 Dec 2006 07:46:00 GMThttp://www.cnitblog.com/asfman/articles/21004.htmlhttp://www.cnitblog.com/asfman/comments/21004.htmlhttp://www.cnitblog.com/asfman/articles/21004.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/21004.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/21004.html@charset "gb2312";

* {font:12px Verdana,Arial,Tahoma,宋体,sans-serif;}/*12px大，字体优先：Verdana,然后：Arial、Verdana、宋体、sans-serif*/
html,body {height:100%;}/*设置浏览器高度为100%*/
body,form,p,pre,ul,ol,dl,h1,h2,h3,h4,h5,h6 {padding:0;margin:0;}/*设置form、p、pre、ul、ol、dl、h1、h2、h3、h4、h5、h6内外补丁为0*/
div,p {display:block;}/*所有div/p为块元素*/
ul,ol,dl {list-style:none;}/*所有项目符号显示无*/
img {border:0;}/*所有图片边框无*/
a {text-decoration:none;}/*所有链接无修饰[上、下划线，虚线...]*/
a:hover {text-decoration:underline;}/*所有链接鼠标放上时为下划线*/
a:visited { text-decoration:none; color: #00f; }
button {cursor:pointer;}/*所有按钮鼠标放上时为手型标志*/
/* 全局设置完毕 */

自定义滚动条：

body {
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #cccccc;
SCROLLBAR-SHADOW-COLOR: #cccccc;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #cccccc;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}

汪杰 2006-12-23 15:46 发表评论

]]>CSS入门4：css选择符http://www.cnitblog.com/asfman/articles/19241.html汪杰汪杰Thu, 16 Nov 2006 13:38:00 GMThttp://www.cnitblog.com/asfman/articles/19241.htmlhttp://www.cnitblog.com/asfman/comments/19241.htmlhttp://www.cnitblog.com/asfman/articles/19241.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/19241.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/19241.html

一.选择符模式

模式/含义/内容描述

*
匹配任意元素。(通用选择器)
E
匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)
E F
匹配元素 E 的任意后代元素 F 。(后代选择器)
E > F
匹配元素 E 的任意子元素 F 。(子选择器)
E:first-child
当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-child 伪类)
E:link E:visited
如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)
E:active E:hover E:focus
在确定的用户动作中匹配 E 。(动态伪类)
E:lang(c)
如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)
E + F
如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器)
E[foo]
匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)
E[foo="warning"]
匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)
E[foo~="warning"]
匹配其“foo”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)
E[lang|="en"]
匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)
DIV.warning
仅 HTML。用法同 DIV[class~="warning"]。(类选择器)
E#myid
匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)

引用:
From：http://www.w3.org/TR/CSS2/selector.html

我们用下面的例子来解释“[s]父元素[/s]”、“[s]子元素[/s]”、“[s]父/子[/s]”及“[s]相邻[/s]”这几个概念。

<div title="这是一个div"> <h1>这是是h1的内容</h1> <p>这是一个段落p的内容！<strong>这里是strong的内容</strong>这是一个段落p的内容！</p> </div>

从以上代码中，我们可以找出这样的关系：
[list]
[*] h1 和 p 同为 div 的“儿子”，两者分别同 div 形成“父/子”关系。
[*] h1,p,strong 都是 div 的“子元素”。（三者都包含在 div 之内）
[*] div 是 h1 和 p 的“父元素”。
[*] strong 和 p 形成“父/子”关系，strong 的“父元素”是 p 。
[*] 但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。
[*] div 是 h1 p strong 三者的“祖先”，三者是 div 的“子（孙）元素”。
[*] h1 和 p 两者是相邻的。
[/list]

继承上面的实例来具体演示一下E F的关系：假如，我们需要将 strong 内的内容二字变为绿色，我们可以有哪些方法呢？

div strong {color:green;} /* －正确。strong 是 div 的“子元素”*/ p > strong {color:green;} /* －正确。strong 和 p 是“父/子”关系*/ div > strong {color:green;} /* －错误！strong 虽然是 div 的“子（孙）元素”，但两者乃是“祖孙”关系，而非“父/子”关系，因此不能用 > 符号连接*/

临近选择器和通用选择器：通用选择器以星号“*”表示，可以用于替代任何 tag 。
实例：

h2 + * { color:green }/*所有紧随 h2 的元素内的文字都将呈现红色*/

二.选择符分类介绍

1.通配选择符
语法：

* { sRules }

说明：
通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。
示例：

*[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; }

2.类型选择符
语法：

E { sRules }

说明：
类型选择符。以文档语言对象(Element)类型作为选择符。
示例：

td { font-size:14px; width:120px; } a { text-decoration:none; }

3.属性选择符
语法：

E [ attr ] { sRules } E [ attr = value ] { sRules } E [ attr ~= value ] { sRules } E [ attr |= value ] { sRules }

说明：
属性选择符。
选择具有 attr 属性的 E
选择具有 attr 属性且属性值等于 value 的 E
选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格
选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E
示例：

h[title] { color: blue; } /* 所有具有title属性的h对象 */ span[class=demo] { color: red; } div[speed="fast"][dorun="no"] { color: red; } a[rel~="copyright"] { color:black; }

4.包含选择符
语法：

E1 E2 { sRules }

说明：
包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。
示例：

table td { font-size:14px; } div.sub a { font-size:14px; }

5.子对象选择符
语法：

E1 > E2 { sRules }

说明：
子对象选择符。选择所有作为 E1 子对象的 E2 。
示例：

body > p { font-size:14px; } /* 所有作为body的子对象的p对象字体尺寸为14px */ div ul>li p { font-size:14px; }

6.ID选择符
语法：

#ID { sRules }

说明：
ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
示例：

#note { font-size:14px; width:120px;}

7.类选择符
语法：

E.className { sRules }

说明：
类选择符。在HTML中可以使用此种选择符。其效果等同于E [ class ~= className ] 。请参阅属性选择符( Attribute Selectors )。
在IE5+，可以为对象的 class 属性(特性)指定多于一个值( className )，其方法是指定用空格隔开的一组样式表的类名。例如：<div class="class1 class2">。
示例：

div.note { font-size:14px; } /* 所有class属性值等于（包含）"note"的div对象字体尺寸为14px */ .dream { font-size:14px; } /* 所有class属性值等于（包含）"note"的对象字体尺寸为14px */

8.选择符分组
语法：

E1 , E2 , E3 { sRules }

说明：
选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
示例：

.td1,div a,body { font-size:14px; } td,div,a { font-size:14px; }

9.伪类及伪对象选择符

语法：

E : Pseudo-Classes { sRules } E : Pseudo-Elements { sRules }

说明：
伪类及伪对象选择符。
伪类选择符。请参阅伪类( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。
伪对象选择符。请参阅伪对象( Pseudo-Elements )[:first-letter :first-line :before :after]。
示例：

div:first-letter { font-size:14px; } a.fly :hover { font-size:14px; color:red; }

汪杰 2006-11-16 21:38 发表评论

]]>pixelHeighthttp://www.cnitblog.com/asfman/articles/18154.html汪杰汪杰Thu, 19 Oct 2006 07:11:00 GMThttp://www.cnitblog.com/asfman/articles/18154.htmlhttp://www.cnitblog.com/asfman/comments/18154.htmlhttp://www.cnitblog.com/asfman/articles/18154.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/18154.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/18154.html　<head>
　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
　<title>menu hide show</title>
　<script language="JavaScript">
　maxh=0;
　function hidde(obj)
　{
　if (maxh==0)
　maxh=obj.style.pixelHeight;
　if(obj.style.pixelHeight>0)
　 {
　   obj.style.pixelHeight-=10;
　 obj.filters.alpha.opacity-=4;
　 if(obj.style.pixelHeight==maxh/10)
　   obj.style.display='none';
　 obj1=obj
　 setTimeout('hidde(obj1)','1');
　 }
　}
　function show(obj)
　{
　if(obj.style.pixelHeight<maxh)
　 {
　   obj.style.display='';
　   obj.style.pixelHeight+=10;
　 obj.filters.alpha.opacity+=4;
　 obj1=obj
　 setTimeout('show(obj1)','1');
　 }
　}
　function turn(obj)
　{
　if (obj.style.display=='none')
　show(obj);
　else
　hidde(obj);
　}
　</script>
　</head>
　
　<body>
　<input type="button" name="Submit" value="hidde" onClick="hidde(table1)">
　<input type="button" name="Submit" value="show" onClick="show(table1)">
　<input type="button" name="Submit" value="turn" onClick="turn(table1)">
　<div id="table1" style="height:200px;FILTER: alpha(Opacity=100);OVERFLOW: hidden;">
　 <table width="100%" height="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#42CC33" >
　   <tr>
　     <td>this is something<br>
　     br<br>
　     br<br>
　     br<br>
　     br<br>
　     br </td>
　 </tr>
　</table>
　</div><br>
　this is the foot
　</body>
　</html>
　

汪杰 2006-10-19 15:11 发表评论

]]>图片飘飘http://www.cnitblog.com/asfman/articles/17765.html汪杰汪杰Mon, 09 Oct 2006 07:50:00 GMThttp://www.cnitblog.com/asfman/articles/17765.htmlhttp://www.cnitblog.com/asfman/comments/17765.htmlhttp://www.cnitblog.com/asfman/articles/17765.html#Feedback1http://www.cnitblog.com/asfman/comments/commentRss/17765.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/17765.html

汪杰 2006-10-09 15:50 发表评论

]]>css中* html>body 是什么意思？ http://www.cnitblog.com/asfman/articles/17219.html汪杰汪杰Fri, 22 Sep 2006 17:17:00 GMThttp://www.cnitblog.com/asfman/articles/17219.htmlhttp://www.cnitblog.com/asfman/comments/17219.htmlhttp://www.cnitblog.com/asfman/articles/17219.html#Feedback1http://www.cnitblog.com/asfman/comments/commentRss/17219.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/17219.html>是子选择符,用于匹配那些其他元素的直接后辈,属于CSS2

比如说:
body > p{color:red;}
<body>
<p>内容</p>
<div><p>内容</p></div>
</body>

只有第一个匹配,第二个P是DIV的下级,因此是BODY的孙级,就不匹配了
*是通用选择符,匹配文档中的任何元素
比如说:
body * ul{color:gray;}
BODY元素的两级以下的UL元素颜色为灰色
也就是说BODY元素的任何下级UL元素不为灰色,但其他UL,不论是DIV的下级元素,还是列表项,或是表格,都会成为灰色
* html>body
至于这个我也不知道该怎么解释,范围太大了
就现在的htm文件而言,html标记已经是最外层的,body就是html的直接下级
我好象记得
html>body #top {
height: 70px;
}
这是为了避免opera的一个分解BUG

上面的二个height,第一个是为了能IE5盒模型的错误,后面一个height才是正确的数字

这些在<网站重构>里面有讲到,买本看看吧
CSS: TDG 对 CSS1 的全部和 CSS2 的大部分属性都有详细的介绍。

成书之时，CSS2 的支持还很不完善，就像乾坤大挪移，张无忌之前从未有人练到过第七层，所以以 Eric Meyer 之能 (他是 W3C CSS2 小组的特邀专家)，很多效果也只能凭空想象。当然，CSS1 的支持基本上都可以使用了，这方面是讲述得很详细的。

目前现代的浏览器 (Moz, IE6, Safari, Opera) 对 CSS1 的支持趋近于完美，CSS2 的大部分都有较好的支持了 (IE6 例外)。

> * 这些选择符，IE6 不支持，但可以用过 IE6 的 Behavior 来书写 htc 文件令它支持。

这在 Eric Meyer 的《More Eric Mayer On CSS》的一个 project 中提到了。另外，http://dean.edwards.name/IE7/ 提供了一个目前相当不错的 IE6 补丁包，让你安装在网站上，可使 IE 用户顺利浏览用了这些选择符的 CSS。

汪杰 2006-09-23 01:17 发表评论

]]>典型的三行二列居中高度自适应布局http://www.cnitblog.com/asfman/articles/17218.html汪杰汪杰Fri, 22 Sep 2006 17:03:00 GMThttp://www.cnitblog.com/asfman/articles/17218.htmlhttp://www.cnitblog.com/asfman/comments/17218.htmlhttp://www.cnitblog.com/asfman/articles/17218.html#Feedback0http://www.cnitblog.com/asfman/comments/commentRss/17218.htmlhttp://www.cnitblog.com/asfman/services/trackbacks/17218.html典型的三行二列居中高度自适应布局

作者：阿捷 2004-7-18 21:42:03

如何使整个页面内容居中，如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子，并详细解释。（本文的经验和是蓝色理想论坛xpoint、guoshuang共同讨论得出的。）

首先先按这里看实际运行效果，这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码：

完整代码

<html>
<head>
<style type="text/css">
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
} #contain{
margin-right: auto;
margin-left: auto;
width: 776px;
} #mainbg{
width:776px;
padding: 0px;
background: #60A179;
float: left;
}
#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>

代码分析

首先我们定义body和顶部第一行#header，这里面的关键是body中的text-align:center;和header中的margin-right: auto;margin-left: auto;，通过这两句使得header居中。注：其实定义text-align:center;就已经在IE中实现居中，但在mozilla中无效，需要设置margin:auto;才可以实现mozilla中的居中。

接下来定义中间的两列#right和#left。为了使中间两列也居中，我们在它们外面嵌套一个层#contain，并对contain设置margin:auto;，这样#right和#left就自然居中了。

注意中间两列定义的顺序，我们首先定义#right，通过float: right;让它浮在#contain层的最右边。然后再定义#left，通过float: left;让它浮动在#right层的左面。这和我们以前表格从左到右定义的顺序正好相反(更正：先左后右、还是先右后左都可以实现，根据自己需要设计)。

我们看到代码中在#contain和两列之间还嵌套了一个层#mainbg，这个层是做什么用的呢？这个层就是用来定义#contain的背景的。你肯定会问，为什么不直接在#contain中定义背景，而要多套一层呢？那是因为在#contain中直接定义的背景，在mozilla中将显示不出来，必须定义高度值才可以。如果定义了高度值，#right层就无法实现根据内容的自动伸缩。为了解决背景和高度问题，就必须增加这么一个#mainbg层。窍门在于#mainbh这个层定义float: left;，因为float使层自动有宽和高的属性。(暂且这么理解：)

最后是定义底部的#footer层。这个定义的关键是：clear:both;，这一句话的作用是取消#footer层的浮动继承。否则的话，你会看到#footer紧贴着#header显示，而不是在#right的下面。

主要的层定义完毕，这个布局就ok了。补充一点：你看到我还定义了一个.text{margin:0px;padding:20px;}，这个class的作用是使内容的外围有20px的空白。为什么不直接在#right里定义margin或者padding呢，因为mozilla和IE对css盒模型的解释不一致，直接定义margin/padding会造成mozilla里布局变形。我一般采用内部再套一层的做法来解决。

希望这个布局对你有帮助，有什么问题欢迎到论坛交流。

汪杰 2006-09-23 01:03 发表评论

]]>