一、盒子模型
1.盒子内部结构
(1)一个盒子实际所占的宽度是由“内容+内边距+边框+外边距”组成。CSS中通过设置width和height来控件盒子大小。
2.边框
(1)当有多条规则作用于一个边框时,会产生冲突,后面的设置覆盖前面的设置,这对于任何属性是一样的。
3.内边距
(1)当一个盒子设置背景图象后,默认情况下背景覆盖的范围是“padding+内容“组成的范围,并以padding左上角为基准点平铺图像。
4.外边距
(1)body是一个特殊点,它的背景色会延伸到margin部分,而其它盒子的背景色只覆盖”padding+内容”(IE浏览器)或”padding+内容+边框”(FF浏览器)。
二、盒子的浮动和定位
1.盒子之间的关系
(1)标准流
就是不使用其它的与排列和定位相关的特殊CSS规则时,各种元素的规则。
(2)块级元素
它们总是以一个块的形式表现出来,并且跟同级兄弟依次竖直排列,左右撑满。
(3)行内元素
本身不占有独立的区域,仅仅是在其它元素的基上指出了一定的范围。
2.盒子在标准流中的定位
(1)行内元素之间的距离:为第一个元素的margin-right和第二元素的margin-left之和。
(2)块级元素之间的距离:是margin-top或margin-bottom之中的最大者。
3.浮动和定位
(1)一个块级元素的范围是由它里面的标准流内容决定的,与里面的浮动内容无关,也即把其中的子元素浮动后,它就不再属于父块,不再属于标准流了。注意:两个块级原素中,第一个块级元素浮动时,后面的块级元素的内容会环绕它,但若是第二个块级元素浮动时,第一个元素是没有任何变化的,即不会去环绕第二个浮动的块级元素的!!多块情况类似的。
(2)相对定位结论
使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新位置。
使用相对定位的盒子仍在标准流中,它对父块和兄弟盒子没有任何影响,它的原位置不会被其它块补填。
(3)绝对定位的结论
使用绝对定位的盒子会以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。
绝对定位的盒子从标准流中脱离,这意味着它们对其后的兄弟的定位没有影响。但是其兄弟盒子会填充它原来的位置,就像它不存在一样。
4.当块的高度值小于子块的高度加上margin的值时,此时IE会自动扩大,保持子元素的margin-bottom的空间以及父元素自身的padding-bottom。而FF不会,它会保证父元素的height高度的完全吻合,而这时子元素将超过父元素范围。
5.z-index属性用于调整定位时重叠块的上下位置,z-index大的页面位于其值小的上方。默认值为0。当两个块的z-index值一样时,将保持原有的高低覆盖关系。
6.display的属性改变一个元素是块级(block)还是行内(inline)元素,抑或不显示此元素(none);
三、文字与图像
1.文字大小(font-size)
(1)长度单位
1em表示的长度是其父元素中字母m的标准宽度,1ex则表示父元素中字母x的标准高度。当父元素变化时,使用这两个单位的子元素的大小会同比例变化。
2.行高(line-height)
(1)表示两行文字之间基线的距离,也就是每行文字高度,如果加上下划线,下划线就是基线。
(2)行高的值既可以使用像素等为行高单位,也可以不加任何单位,只写数字,此时行高表示行高与字体大小的比值。如字体大小12px,
Line-height:1.5。
实际大小为line-height:1.5*12px=18px;
3.字母大小写转换:text-transform
4.文字装饰效果:text-decoration,它的值有underline,overline,line-height,blink等。
5.文字对齐与首段缩进
(1)段落水平对齐:text-align
(2)段首缩进 text-indent:对中文网页,设置为”2em”即可。
6.段落的垂直对齐:vertical-align
(1)在目前浏览器中,只能用表格单元格中的对象竖直方向的对齐设置,而对于一般的块级元素,如div,不起作用。
7.图像样式。
(1)background-position:属性确定背景图像的位置,如果设置两个值,它们分别用于确定水平位置和竖直位置。如果只设置一个值,那么缺省的值为center.
而且它与平铺相关,实际上指定了平铺的起始点。除了使用top,left,bottom,right,center外,还以可相对数值和绝对数值来作为它的属性值,如5%,18px等。
数值表示的是距离左边的距离和距顶边的距离。
(2)background-attachment:fixed可以固定背景图片,当拉动滚动条时,只有文字移动,而图片不动。
(3)图像的水平(横向对齐方式):不能直接设置图片的text-align属性,而是由其父像素的该属性实现的,但是对纵向对齐是可以通过图像的vertical-align属性设置的。这点正好与文字的对齐方式相反的。
四、链接与导航
1.伪类
(1)伪类的声明顺序
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
上面的声明顺序不能变,如果变了,将不会效果。
(2)a:link与a设置的都是相同的,二者通常情况下是没有区别的,但实际工作中,经常作用a,a:visited{};
2.按钮超链接
(1)对于普通超链接和点击过的链接设置相同,并且利用边框的样式模拟按钮效果,而鼠标指针经过时的超链接,相应地改变文字�色、背景色、位置和边框,从而模拟出“按下去“的特效。
3.FF浏览器不支持a元素的高度(width)和宽度(height)属性!!
4.项目符号
(1)list-style-type:属性设置ull或ol标记符号样式。
(2)list-style-image:属性设置项目符号显示为图片,但由于浏览器间的差异,一般不使用此属性,而是将list-style-type属性值设置为none,然后设置li标记的background实现。
5.简单菜单导航
(1)虽然把链接设为块级元素,但是只有在鼠标经过文字时(IE6),才能触发鼠标经过效果,而不是鼠标进入矩形区域就可触发。IE7修改了此错误,解决方法是:
在”#navigation li a”中增加一条CSS规则:
height:1em;
五、CSS+DIV布局
1.固定宽度版式
(1)body{text-align:center;}
#containter{position:relative;margin:1 auto;widht:760px;text-align:left;}
(2)body{margin:0px;}
#contaniner{position:relative;left:50%;width:760px;margin-left:-330px;}
2.左中右版式
(1)左右块用绝对定位,并且固定块宽度,而中间块不设置宽度,自动调整宽度,但是必须将它的padding-left和padding-right分别设置为左右块宽度。
(2)块的背景色问题:由于左右块背景色没有延伸到页面底端
解决:当有页脚时,把一整个块内容块(左、中、右三块)放到一个块中(这里放不放无所谓,主要是好管理),然后将body背景色设置为与右块相同的�色,再制做一副图片,宽度与left相同,�色与left背景色相同的块,做#container的背景图片,再设置向下重复即可。
六、经验心得
1.在项目列表中,当把<li>标记设置了float:left属性时,再为<li>指定宽度,那么当<li>标记超过父标记的宽度时就会自动换行 。
2.浮动:假如有两个块,第一个设置为浮动后,不论方向,那么第二个块的内容会环绕第一个块;但若是设置二个块浮动后,对第一个块却没任何影响,即第一个块的内容是不会环绕第二个块。保持在原来的位置不变。
3.为了减少差异,一般尽量在布局的块,如<ul>、<li>、<div>、<p>等的属性margin 、padding的值要么根据需要设置为相应的值,要么设置为0;
4.经常用图片来代替块里的标题文字,先把标题文字隐藏,再把代替图片设置为块的背景图片。若是要竖直方向的图片,一般是这样设置;若是横向的图片,
一般可以把包含标题文字隐藏,再设置相应父元素的宽度和高度及外边距和内边距,之后设置父元素的背景图片为代替图片。
例:<h3><span>这是测试</span></h3>
H3 span{display:none;}
H3{width:170px;height:60px;margin:0px;padding:0px;}
H3{bacground:url(1.jpg) no-repeat;}