欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

CSS+DIV概念和细节 (copy)_html/css_WEB-ITnose

程序员文章站 2022-05-10 20:12:08
...
http://www.cnblogs.com/xiaofu/articles/1614386.html

一、盒子模型

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.在项目列表中，当把

  • 标记设置了float：left属性时，再为
  • 指定宽度，那么当
  • 标记超过父标记的宽度时就会自动换行 。

    2.浮动：假如有两个块，第一个设置为浮动后，不论方向，那么第二个块的内容会环绕第一个块;但若是设置二个块浮动后，对第一个块却没任何影响，即第一个块的内容是不会环绕第二个块。保持在原来的位置不变。

    3.为了减少差异，一般尽量在布局的块，如

    • 相关标签： CSS+DIV概念和细节 (copy)

    上一篇： PHP学习(6) 包含代码和嵌入PHP

    下一篇： 面向对象深入

    推荐阅读