CSS Mastery

CSS注意事项：

      a.   设定div宽度时，可以只设定父div宽度，子div设定margin, padding, border:

    CSS box 模型的另一种调整技巧这个Box 模型的调整主要是针对IE6 之前的IE 浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
这样调用它：
<div id="box">...</div>
这时盒子的全宽应该是150 点，这在除IE6 之前的IE 浏览器之外的所有浏览器上都是正确的。但在IE5 这样的浏览器上，它的全宽仍是100 点。可以用以前发明的Box 调整方法来处理这种差异。但用CSS 也可以达到同样的目的，让它们显示效果一致。
#box {width: 150px } #box div { border: 5px; padding: 20px }
这样调用：
<div id="box"><div>...</div></div>
这样，不管什么浏览器，宽度都是150 点了。

         b. 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML 标记都是有意义的，不要标记来控制显示.

blockquote, cite
fieldset,legend, label
caption, thead,tbody,tfoot

继承属性：line-height( 要把body的设置为数值 如1.2,这样子元素才能使本身font-size而改变.
body{
    font-size: 16px;
    line-height: 1.6;
},并且line-height是对行内和块元素都可用的.

设定行高会使行内文本自动在垂直方向居中.

非继承属性：background,

background: url(xx.gif) no-repeat left center; // 将图像定位在元素左边，并垂直居中.
也可 0 50% : 将图像的 50%位置定位到元素的50%位置.
对 0 -20px: 将图像的0,20px处定位到元素的 (0,0)可用于行内和块元素.

width,height: 只能块级元素起作用.
margin,padding: 对行内和块级元素都起作用.
line-height: 对行内和块级元素也都起作用.

关于img 会撑大父div:

可将div 设为line-height: 0;  but,why??

a的css: LoVe : HAte , 即顺序为 a:link,a:visited{}, a:hover,a:active{}

超链接中空格与文字不对齐: 可能是由于字体不同而出现的.

当把链接做成按钮时，设为block并设置line-height（但是不设置height，通过line-

height:1.4和padding:1.2em使链接内文本自动居中,而不需计算).

当链接与 span在同一行时，它们的border并不一样，why??

 

 

如果有*{border:xxx},则对 br,hr等,应设 {border: none;}

ul : 如果不设置其padding,那么li 的左方会有空白.

框模型：
 在IE 怪异模型中（没有设置 DOCTYPE),如IE 7,可把width设置的小于 border-left+border-right. 在水平方向上，width = border+margin+padding+实际宽度...这与FireFox是不同的，当设置DOCTYPE 为严格模型时，IE才与FireFox显示效果一样.

float 也是一个定位模型: 浮动的框可以左右移动，直到外边缘碰到包含框或另一个浮动框.

对float元素，也能用相对定位.

float元素已经脱离了正常的文档流，故，其对于:
<div id='p'>
 <div id="first" style="float:left;width:300px;">first</div>
 <div id="second" style="float:right;width:300px;">second</div>
 <div id="third"> third </div>
</div>
实际上, first和second都是相对于父元素悬浮，由于third不是float,故 first和second实

际上都是[[[覆盖]]]在third上面，third 的内容在视觉上不是矩形了! 可把first,second 边框设为一种，third设为另一种，并且，将 first 和 third的高度设为不一样.

由于float元素脱离文档流，不影响周围元素，所以可能父元素的高度为0, 故为了在视觉上父元素的高度为内部元素高度，可在内部加一个clear:both的元素,即：
在布局时，可以用

<br style="clear:both;height:0;" />把float元素和非float元素隔开(即防止float元素[覆盖]在正常元素上面) .

如果一个单词太长(比如 1000 个 a连在一起），会撑破一行，怎么解决? word-break:

line-height: line-height 与 font-size之差即行间距.

注：父元素的line-height设置为百分比，继承，XXXpx时，它的后代的line-height是不会随着本身的font-size而作相应比例的改变的,而 父元素的line-height 设置为数值(如1.2,1.5)时，子元素的line-height是会随着本身的font-size作相应比例的改变.

但是如果一个元素内部有图片时,

主体居中：
1.利用 margin: 0 auto 和 text-align:center;
2.利用 定位和负值边距.

招数：
1.IE条件注释
<!-- [if IE]
<style type="text/css">
@import ("ie.css");
</style>
-->
[if lt IE 6],[if gte IE 5.50]

2. * html , 只用于<IE6
3. 下划线或!important:
   #nav{
 position: fixed;
 _position: static;
   }

bug:
拥有布局: windows的IE是利用布局来控制元素的尺寸和定位的.默认下具有布局的元素有

(body,标准模式下html,table,tr,td,img, hr,input等,iframe,embed.
设置以下css属性会使元素拥有布局: positon(absolute),float(left/right),display

(inline-block),width,height,zoom,writing-mode:tr-rl 
 
拥有布局的效果：
IE6中如果一个段落拥有布局(如设定高度）,那么当它之前有一个浮动元素时，这个段落的文本不会围绕前一个段落.
IE6中如果一个元素拥有布局，当设定它的宽度但是其内容宽度大于此宽度时，它的宽度会扩张（相当于设定了min-width).此情形下，对于float布局，可能被挤到下一行去了.

其它：
 拥有布局元素不进行收缩; 相对定位元素不获得布局(故很多情形下可利用relative); 

 拥有布局元素之间空白边不进行叠加； 在不拥有布局的块级链接上，单击域只覆

盖文本；

bug:
1. IE6 float元素的双空白边( margin-left:20px; float: left;): margin-left实际上为40px; 修复 :display:inline; 对布局不影响(由于float);
/*
2. 3px 文本偏移: 一个浮动元素{float:left;width:200px;}; 一个正常的p{ marign-

left: 200px;},此时float元素和p之间有3px的偏移.
               修复： * html p{ height: 1%;} ,但是此时p拥有布局，显示为矩形，在

float元素的右边，将margin-left:0;
*/
3.相对容器中的绝对定位：
   将相对容器 * html .container{ height: 1%; } ,使相对容器拥有布局.  

IE5.x 错误地以元素的百分比而不是父元素的百分比来计算填充.