html和css基础

最新推荐文章于 2024-08-27 10:55:39 发布

spirit~zZ

最新推荐文章于 2024-08-27 10:55:39 发布

阅读量1.4k

点赞数

分类专栏：学习笔记

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：不知道从哪里扒下来的，一直存在我的电脑里，如果原作看到了，请不要介意哈！大家资源共享哈！！！

1、网页HTML代码最前面必须包括W3C声明，以便符合标准：

一般网页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

框架页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

2、网页编码声明：

简体中文网页为gb2312

繁体中文网页为big5

英文网页为utf-8

3、采用CSS链接方式，全站使用同一个CSS文件，实现内容与表现分离：

不要将样式直接写在页面html代码中，页面中不得使用<font></font>、<style>等标签。

4、CSS文件中需要对一些基本的标签进行定义或重置：

padding:0;

margin:0;

}

body,td,th,div {

font-family: 宋体;

font-size: 12px;

color: #000000;

}

body {

background:#FFFFFF;

}

line-height:150%;

}

a:link {

color: #000000;

text-decoration: none;

}

a:visited {

color: #000000;

text-decoration: none;

}

a:hover {

color: #ff0000;

text-decoration:underline;

}

a:active {

color: #000000;

text-decoration: none;

}

h1{

color:#000000;

line-height:150%;

font-size:24px;

}

li{

list-style:none;

word-break: keep-all;

white-space: nowrap;

}

5、网页设计完成后，必须分别在Internet Explorer 6.0和Firefox3.0进行兼容性测试，确保页面表现在这两个主流浏览器中保持完全一致，无错位、重叠现象。

6、解决兼容性问题常用CSS代码有：

1）div对齐方式有居左、居中、居右三种方式，居中的要清除浮动：clear:both; 否则就会有重叠现象。

2）隐藏超出部分：overflow:hidden;

3）设置固定宽度：width:100px。除特殊需要外，div一般不设置高度，宽度、高度不能使用百分比，以免在各浏览器中出现较大误差。

4）给div临时加边框：border:1px solid;

5）用!important;为IE和FF设置不同样式，如：width:100px!important; width:102px; 前面是FF样式，后面是IE样式。

6）判断IE浏览器版本调用不同的样式表。

<!--[if lte IE 6]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if IE 8]>

<![endif]-->

7）屏蔽IE7。

7、信息列表用ul,li形式，减少代码冗余。如：

<div>

<ul>

</ul>

</div>

8、W3C验证。通过W3C组织官方网站可以验证CSS是否符合标准，网址是：

http://jigsaw.w3.org/css-validator/check/referer

1）所有标签都必需使用小写

2）所有标签内之属性都要有值且不可省略双引号或单引号

3）所有标签必须成对, 若非成对需加上/在最后

4）一个网页最少要包含的标签

<html>

<head>

</head>

<body>

内容

</body>

</html>

5）若要显示<、>、&的话, 需输入：< >

若要显示&于网页中的话，则需输入：&

6）标签顺序不可错乱，应该是：<b><p>文字</p></b>

7）注释文字中不可包含----，HTML注释形式：，CSS注释形式：/*注释文字*/

在页面中除了开始、结束、JavaScript代码处需要加一些必要的注释外，其他地方尽量少写注释，有时注释太多也会引起一些问题。

在样式表中可以适当加些注释，简要说明样式的用途、范围等。

8）、页面引用样式时使用class=”style1”，而不是id=”style1”，把id留给程序员使用，提高样式可重用性，减小CSS文件体积。

9、html代码要适当缩进（可在代码前按TAB键，或页面全部做完后，在DW代码视图中执行“套用源格式”，不要有空白行。

10、网页中图片的使用。

1）网页中最好使用gif、jpg格式图片，由于png图片在浏览器中的兼容性还有问题，故不建议使用。

2）栏目标题背景、圆角背景、边框背景、标题前的icon图标等可以写在background:url( );里。

3）网站logo、more、new、hot、广告位等图片需使用<img>标签，以便为其添加链接。

11、网页整体必须在浏览器中居中显示，即：div{margin:0auto;}。

12、如果网页中同时有飘浮图片、下拉菜单、弹出对话框、Flash，前三者要位于Flash上方。需在Flash中加以下透明代码：

<param name="WMODE" value="transparent">//IE

13、设置网页滚动条的样式：

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

14、英文、数字在FF下不自动换行，需加以下代码：

word-wrap:break-word;

15、注意水平、垂直方向的对齐、留白问题。

16、网页宽度。

一般窄屏宽为760px，宽屏为950px。

17、样式的命名应该符合语义化要求，即一看样式名就可知道这个样式大概用在什么地方、有什么用途，方便以后调用、维护。如顶部样式则为.header。

一、web标准

web标准不是某一个标准，而是一系列标准的集合。

web标准是由三大部分组成的标准集：

结构（structure）：HTML、XML、XHTML。

表现（presentation）：CSS。

行为（behavior）：DOM、ECMAScript。

二、常用html标签

块级元素

div 用于页面布局

p 段落

ul,li 无序列表

ol,li 有序列表

dl,dt,dd 释义列表

h1 页面主标题

h2 页面副标题

h3 页面模块标题

h4-h7 标题，因考虑seo原因，页面中用的不多

form 表单

table,caption,thead,tbody,tr,th,td,tfoot 表格相关

br 强制换行

行级元素

span 控制行级元素的样式，没有语义

a 链接

strong 重点内容，加粗，seo中用于标示重点内容

em 重点内容，斜体

label 表单中用，提升用户体验

input 单行文本框，单选框，复选框，按钮

select 选择框

textarea 文本框

button 按钮

img 图片

例：ex1.html（布局分析）

三、css基础、常用css样式、css引入方式

css基础

css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（value）。

Selector { Property:value }

参数说明：

Property : value — 样式表定义。属性和属性值之间用冒号(:)隔开，定义之间用分号(;)隔开。

常用css选择符

Ø 类选择符（.类名，页面中可使用多次）

.nav { background:#ccc; }

Ø id选择符(#id名，页面中只能使用一次)

#nav { color:#c00; }

Ø 标签选择符(标签名)

body { font-size:12px; }

p { color:blue; }

div { background:#ccc }

Ø 群组选择符（标签，标签）

h1,h2,h3,p,span{ font:12pxarial; }

使用英文逗号对选择符进行分隔，使得页面中所有的h1,h2,h3,p,span都将具有相同的样式定义。这样做的好处是对于页面中需要使用同样式的地方只需要书写一次样式表即可实现，减少代码量，改善css代码的结构。

Ø 包含选择符（标签子标签）

h1span{font-weight:bold;}

当我们仅仅想对某一个对象中的子对象进行样式指定时，包含选择符就派上用场。

<h1>这是我们的一段文本<span>这是span内的文本</span></h1>

Ø 标签指定式选择符（标签类(id）)

如果既想使用id或class，也想同时使用标签选择符，可以使用如下格式：

h1.p1 {}

表示针对所有class为p1的h1标签。

Ø 组合选择符

h1 .p1 {}

表示h1标签下的所有class为p1的标签。

#content h1{}

表示id为content的标签下的所有h1标签。

h1.p1,#content h1{}

同时定义两个组合选择符。

h1#content h2{}

id为content的h1标签下的h2标签。

Ø 通配选择符(* 谨慎使用)

*{background-color:#FFF;}

*号表示针对所有对象，包含所有不同id不同class的XHTML的所有标签。使用如上的选择符进行样式定义，页面中所有对象的背景色均为白色。

Ø 伪类及伪对象

a:hover {background-color:#333; }

CSS优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	2
.apple {color:red;}	10
p.bright {color:yellow;}	11
p.bright em.dark {color:brown;}	22
#id316 {color:yellow}	100

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	1+1=2
.apple {color:red;}	10
p.bright {color:yellow;}	1+10=11
p.bright em.dark {color:brown;}	1+10+1+10=22
#id316 {color:yellow}	100

1. 有!important声明的规则高于一切。
2. 如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

CSS继承也是有限制的，有一些属性不能被继承，如：border, margin, padding, background等

布局属性

1、float：设置是否以及如何浮动；(left,right,none)

2、margin：设置元素和其他元素或内容之间的距离；

3、padding：设置元素的子元素或内容到此元素边缘的距离；

4、clear：清除浮动（both）

5、overflow：设置当元素的内容超出其指定的范围时将如何管理内容；

6、display：设置该元素是否以及如何显示；(block,none,inline,inline-block)

7、visibility：设置该元素是否显示。和display不同的是，即使不显示此对象也会有空的占位；

8、position：设置元素的定位方式；(static,relative,absolute,fixed)

9、z-index：设置元素的层叠顺序；

10、width：设置元素的宽度；

11、height：设置元素的高度；

12、top、right、bottom、left：设置该元素与其最近的一个具有定位设置的父对象相关的位置。分别为上、右、下、左四个位置，此四个属性只在该元素的定位（position）属性被设置时有效；

文本、文字属性

1、font：设置元素中文本的属性。该属性是复合属性，组合使用，也可分开定义；

（1）font-style：字体的样式；

（2）font-weight：文字的粗细；

（3）font-size：文字的大小；

（4）line-height：元素的行高；

（5）font-family：文字的字体；

2、color：设置对象中文字的颜色；

3、text-indent：设置对象中首行文本的缩进值；

4、text-align：设置对象中文本的对齐方式；

5、vertical-align：设置对象中文本的垂直对齐方式；

6、text-decoration：设置对象中文本的修饰；

背景属性

background：用于设置背景的所有特性。该属性是复合属性。

（1）background-image：背景图像；

（2）background-color：背景颜色；

（3）background-repeat：背景图片是否以及如何平铺；

（4）background-attachment：背景是否随内容滚动；

（5）background-position：背景图片的位置；

列表属性

list-style：用于设置列表的所有相关样式。该属性是复合属性

（1）list-style-type：列表项所使用标记符号的样式；

（2）list-style-image：列表项标记的图像；

（3）list-style-position：列表项标记的放置位置；

其它

1、cursor：设置在元素上移动的鼠标指针采用的光标形状；

2、zoom：设置元素的缩放比例；

伪类

1、:link： a元素在未被访问前的样式；

2、:hover：在其鼠标悬停时的样式；

3、:active：在被用户激活（在鼠标点击与释放之间发生的事件）时的样式；

4、:visited：在其链接地址已被访问过时的样式；

5、:focus：对象成为输入焦点时的样式；

单位

1、相对长度单位：包括：（1）px：像素；（2）em：相对于当前元素内文本的字体尺寸； %

2、颜色单位

（1）#rrggbb：十六进制正整数；(推荐)

（2）rgb(r,g,b)：分别为红、绿、蓝色的正整数或百分数的值；

（3）color name：颜色名称；（不推荐）

css引入

外部样式表（推荐）：<linkhref=”style.css” rel=”stylesheet” type=”text/css”>

内部样式表（调试）：<style>body{background:#000 }</style>

行间样式表（调试）：<divstyle=”background:#ccc”></div>

例：ex1.html（布局分析）

四、块级元素和行级(内联)元素

block element 块级元素
顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的<div>、<p>、<ul>默认状态下都是属于块级元素。块级元素比较霸道，默认状态下占据一整个行，后面的内容也必须再新起一行显示。

非块级元素也可以通过css的display:block;将其变成块级元素。

float:left;可以让内联元素变成块级元素

inline element 内联元素
通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。

当然块级元素也能变成内联元素,那就是通过css的display:inline;来实现。

Float:left;也可以让元素在行内显示，但元素还是块级元素

display（此属性可将块级元素变为内联元素，也可将内联元素变为块级元素）
none 此元素不会被显示。
block 此元素将显示为块级元素。
inline此元素会被显示为内联元素。
inline-block 行内块元素。

行内块

有内联元素可以在同一行显示的属性，也有块级元素可以设宽高的属性

span{display:block} 拥有块级元素的属性，可设width,height,margin,padding等

div{display:inline } 变为行级元素，只能设margin,padding的左右值

例：ex1.html（布局分析）

五、 html嵌套规则

就像用php时，<?php 代码 ?>，不能 <代码? 这样写一样, html标签也有嵌套规则。

清晰版看图片

六、盒模型

对于网页中的大部分对象，实际呈现形式都是一个盒子形状对象，我们平时所说的“切页面”，就是安排有关这个盒子上的内容。盒子尺寸的问题是最容易让初学者感到迷惑的，下面探讨盒模型的尺寸及占位的标准计算方法。

宽度计算

元素的实际宽度width = border值左的宽度 + padding值的宽度 + 内容的宽度 + padding值的宽度 + border值的宽度

width = 10px(border-left) + 30px(padding-left)+ 120px(内容width) +30px(padding-right) +10px(border-right)

高度同理

height = 10px(border-top) + 30px(padding-top)+ 120px(内容height) +30px(padding-bottom) +10px(border-bottom)

这是firebug显示的例子的布局，表示的比较清楚

注意：盒模型只是为了便于理解来供大家学习，真正在浏览中的显示会有不同

七、绝对定位，相对定位及实例

css有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有元素都在普通流中定位。也就是说，普通流中的元素的位置由元素在html 中的位置决定。

通过使用 position 属性，我们可以选择 4 种不同类型的定位，有些会影响元素框生成的方式。

position属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。（默认）

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。这时元素可可设z-index。

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

让HTML元素脱离文档流固定在浏览器的某个位置

提示

1.必须设相对和绝对定位，z-index属性才会起作用
2.直接设元素绝对定位属性，元素会相对于浏览器窗口来定位
3.元素的父级设为相对定位，则子级设绝对定位后会相对于父级元素来定位（推荐）
4.元素的z-index值在同级元素中间起作用
5.设相对定位或绝对定位的元素，比不设的元素z-index值高
6.文档流中后面元素的z-index值高于前面元素，如果不同级元素要改变上下排列顺序，需要设置父级z-index值；如果因为排列紧密发生遮挡，则元素触发相应动作时再设position相关属性和z-index值;

7.如果外层相对定位的层宽度或高度为奇数时，ie6下会有1px的bug,解决方法改为偶数。

例：ex1.html（布局分析）

八、 css简写

css简写就是指将多行的css属性声明化成一行，又称为css代码优化。css简写的最大好处就是能够明显减少css文件的大小。一个团队在进行设计的时候，臃肿的css代码会使你的团队其他成员的工作效率下降。

属性值为0

书写原则是如果css属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:

padding: 10px 5px 0px0px;

font:0px/0px arial;

试试这样吧:

padding: 10px 5px 0 0;

font:0/0 arial;

背景

Background-color:#ccc;

background-image: url(“logo.png”);

background-position: topcenter;

background-repeat:no-repeat;

其实可以写成:

background: #ccc url(logo.png)no-repeat top center;

颜色

#000000 可以写成 #000, #336699 可以写成 #369

这种简写技巧只适用于成对出现的颜色值，其它颜色值不适用这种技巧，比如:

#010101, #223345, #fff000

margin(外边距/空白边)

声明css magin值得时候通常会写成这样:

margin-top:0px;

margin-right:10px;

margin-bottom:0px;

margin-left:10px;

让我们试试把值为0的单位去掉，并把4条声明合并成一条声明:

margin:0 10px 0 10px;

当声明padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:

margin:0 10px; 是指左右的值为10px，上下的值为0；

margin:0 10px 5px; 是指左右值为10px，上值为0,下值为5px

margin:5px 10px 0; 是指左右值为10px,上值为5px,下值为0

padding(内边距)

padding的简写技巧等同于margin。

border(边框)

如果你想声明一个1像素宽的实线黑色边框，可能会写成:

border-width:1px;

border-style:solid;

border-color:#000;

其实可以写成:

border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。

我们还可以为四个边设置不同的宽度:

border-top-width:1px;

border-right-width:2px;

border-bottom-width:3px;

border-left-width:4px;

可以简写成:

border-width:1px 2px 3px4px;

最后，我们还可以只设置右和下边框的样式:

border-right:1px solid#000;

border-bottom:1px solid#000;

虽然并没减少多少代码,建议写成这样:

border:1px solid #000;

border-width:0 1px 1px 0;

先设置四个边的默认风格，然后声明具体的哪个边要显示。

还可以设边框样式

border:1px dotted #000; 点虚线

border:1px dashed #000; 长虚线

文字

文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:

font-weight:bold;

font-size:14px;

line-height:20px;

font-family:宋体, arial, sans-serif;

其实可以优化成一行:

font: bold 14px/20px 宋体, arial, sans-serif;

需要注意的是：字体的简写最少必须写font:字号字体；如果缺少了，则不起作用。

列表(因为几个浏览器的表现不一，现在zol网站的reset已经把列表的某些属性都重置了，列表图片统一用背景实现)

list-style-type:square;

list-style-position:inside;

list-style-image:url(filename.gif);

可以写成:

list-style:square insideurl(filename.gif);

九、居中

水平居中

内联元素水平居中：text-align:center（在包含内联元素的块级元素上设置）

块级元素水平居中：margin:0auto;（必须设宽度，而且不能浮动）

绝对定位水平居中：{width:800px; position:absolute; height:500px; background:#000; left:50%;margin-left:-400px;}

垂直居中

内联单行元素垂直居中：height:100px;line-height:100px; （包含内联元素的块级元素上设置）

图片简单垂直居中：使用设置背景图片的方法。
body {background: #fff url("sample.gif") no-repeat center;}

图片通用垂直居中：

.pic {

/*非ie的主流浏览器识别的垂直居中的方法*/

display: table-cell;

vertical-align:middle;

/*设置水平居中*/

text-align:center;

/* 针对ie的hack*/

*display: block;

*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/

*font-family:arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

width:120px;

height:90px;

}

.pic img {

/*设置图片垂直居中*/

vertical-align:middle;

}

绝对定位垂直居中：{width:800px; position:absolute; height:600px; background:#000; top:50%; margin-top:-300px;}

其它情况居中

计算padding或者margin的距离来设定

例：ex1.html

十、背景拼合（css sprites）

css sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用css的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

优点

优点：提高网页载入速度和防止图片加载延迟。

缺点：要留好足够的空间，防止没有设绝对宽高的背景串位；维护相对来说比较麻烦。

例：ex1.html

background-position:指定的是图片左上角相对于元素左上角的位置,第一个数字表示 x 轴(水平)位置，第二个是 y 轴(垂直) 位置

background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。

x 轴上：

* left

* center

* right

y 轴上:

* top

* center

* bottom

顺序方面和使用像素值时的顺序几乎一样，首先是 x 轴，其次是 y 轴，像这样：

background-position: topright;

使用百分数时也类似。需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。假设设定如下：

background-position: 100% 50%;

十一、常见浏览器bug及解决办法

1 ie双倍margin bug

.bug1{width:200px;height:120px; background:#090;}

.float_l{float:left;width:100px; height:80px; margin-left:20px; margin-top:10px; background:#f5f5f5}

<divclass="bug1">

</div>

元素是浮动的、并且给元素一个和浮动同一个方向的margin，结果ie6显示两倍的指定margin大小。

解决方法：给浮动元素加display:inline

见例：bug1.html

2 浮动

.bug2{width:300px;background:#090; padding:10px;}

.float_l{float:left;width:130px; height:80px; background:#f5f5f5}

.float_r{float:right;width:130px; height:100px; background:#050505}

<divclass="bug2">

</div>

<div>我是浮动下面的元素</div>

浮动元素一定要清除，否则就会有一些莫名的错误（例如背景显示不出来，因为没有清除浮动，布局的高度为0；此元素下面的内容会显示错位严重）

解决方法：

reset里有两种清除浮动的方法

有外围元素时，在外围的元素上加clearfix

没有外围元素时，在浮动元素的下方加<div class=”clear”></div>

如果是以前的页面，整体div都float:left;时，用<brclass=”clear” />来清浮动

见例：bug2.html

3空白外边距互相叠加

body{background:#ccc;}

#bug3{width:200px; margin:20px;background:#090}

#content{margin:30px;background:#f5f5f5}

<divid="bug3"><div id="content">内容</div></div>

垂直方向的空白边距离叠加了，而且#content的垂直空白边突破了#bug3的空白边

解决方法:

#bug3{width:200px;margin:20px; background:#090; padding:1px;}

或者

#bug3{width:200px;margin:20px; background:#090; border:1pxsolid #090}

见例：bug3.html

4 注释在IE中造成文字溢出的研究

1、在 IE、Firefox 中测试，只在IE 出现文字溢出现象。

说明：注释造成文字溢出是 IE的 BUG 。

2、去除 <div style=”float:left”></div> 中的“float:left;”，你会发现多出来的“猪”字不见了，页面正常显示。同样去除 <div style=”float:right;width:400px”> 中的“float:right;”，多余的“猪”字也同样消失，页面正常显示。

说明：注释造成文字溢出与区块的浮动有关。

3、将注释转移到 <div style=”float:left”></div> 前面，多余的“猪”字消失，页面正常显示。将注释转移到<div style=”float:right;width:400px”> ↓这就是多出来的那只猪 </div> 下面，多余的“猪”字也同样消失，页面正常显示。

说明：注释造成文字溢出与其位置有关。（可与第2点结合理解）

4、去除 <div style=”float:right;width:400px”> 中的“width:400px”，多余的“猪”字消失，页面正常显示。

说明：注释造成文字溢出与文字区块的固定宽度有关（无论是绝对值还是相对值）。

5、增加注释的条数：当1条注释时，则多出来 1 个字；2 条注释时，则多出来 3 个字；3 条注释时，则多出来 5 个字……

我们会从上面的规律中得到这样一个公式：溢出文字的字数=注释的条数 *2-1，这里的字数在中文或英文数字时都成立。

当溢出的文字字数大于文本的字数时，文字区块将会消失。

说明：溢出的字数与注释的条数有关。

由 1 和 2 的测试得知：注释不要放置于 2 个浮动的区块之间。

解决方法：

1、不放置注释。最简单、最快捷的解决方法，嘿嘿……

2、注释不要放置于 2 个浮动的区块之间。

3、在最外面的一个div前面加清除浮动clear

见例：bug4.html

块级元素设小高度之后（<12px），在ie6,7下，高度并不是实际值。

解决办法：设置font:0/0 arial; 让它的字体和行高都为0后，所设高度会起作用。

见例：bug5.html

ie中一行文字，文字链不移动，日期右浮动时，会显示到下一行

解决办法：

1把右浮动元素放不浮动元素前面

2给右浮动元素加margin-top:-行高高度；属性

见例：bug6.html

ie6 bug: 消失的绝对定位元素

.content{width:200px; position:relative;}

.abs{position:absolute; left:0; top:0; width:200px;height:120px; background:#090}

.main{float:left; width:100px; height:200px;background:#f3f3f3}

.sub{float:left; width:100px; height:200px;background:#bc2931}

<div class="abs">绝对定位的</div>

</div>

以上代码在ie6下浏览会发现，绝对定位元素不见了。
产生原因不明，当满足以下条件之一可解决：
1、main + sub + 2 < content（各元素的宽度）；
2、在main元素之前加一对空的div
3、给abs元素再嵌套一个div元素

见例：bug7.html

ie6中奇数宽高的bug

一个外部的相对定位div，内部一个绝对定位的div（right:0），在ie6下查看，却变成了right:1px的效果了。

解决方法：就是将外部相对定位的div宽度改成偶数。

见例：bug8.html

IE6下两个层中间有间隙

.left { float:left; width:100px; height:100px; background:red }

.right { width:100px; height:100px; background:orange;overflow:hidden; }

<divclass="left">aaaaaa</div>

<divclass="right">aaaaaa</div>

解决方法：是给.right也同样浮动 float:left 或者IE6 hack .left{margin-right:-3px;}

见例：bug9.html

ie6下<a>标签如果没有href=””属性，则hover设置不起作用

解决办法：加href,或者用js添加mouseover事件时，给a设置class

十二、快速定位页面中的问题

1 强大的firebug

2 浮动是否清除

3 样式冲突？样式继承？样式优先级？样式有没应用上？样式名是否以数字开头？

3正确定义<!doctype html>（推荐使用<!doctype html>，html5的声明标签）

4 <!doctype html>前面有注释或其它内容的时候，页面会出现莫名问题

5 标签检测

很多工具都有页面标签检测这个功能,有时出现无法理解的错误可以用这些工具检测下,有可能会是标签没有闭合,或者是标签某个字母写错了

6 利用背景定位

有时候页面会错位,错位的情况有很多种,比较简单的方法就是把出现问题的各部位,都写上不同的背景颜色,这样的话,占位错误的那一块会明显看到

7 如果用以上方法都不能解决,那就用页面模块排除法,先删除掉没有出现问题的地方,然后每删除一小模块调试下,这样可以应对很复杂页面的错误定位

8 看看会不会是全角空格的问题，不小心在样式中输入了全角空格，结果空格以后的样式浏览器识别不了，不起作用。

9 zol新改版的页面都有包含reset.css文件，这里已经把一些间距reset了，以前的页面没有包含reset的，可以看下是否默认间距问题引起的浏览器显示不同。

10 编码问题

解决办法：用记事本打开，另存为，选择编码，就可以了。

十三、 css hack

.sofish{

color:#c00;

color:#0c0\9;/* all ie */

*color:#00c; /* ie6-7 */

+color:#000; /* ie7 */

_color:#ccc; /* ie6 */

}

/*ff,chrome,opera,safari */

@mediaall and (min-width: 0px){ .sofish{color:#f60;} }

十四、小技巧

表格显示1px边框

.aa{width:200px;border-collapse:collapse;}

.aa td{border:1px solid#ccc;}

图片下面有空隙

给图片加display:block

定义鼠标点击后变色，鼠标移上不管用。

链接伪类的定义顺序，css属性的排列顺序: l-v-h-a

a:link {}

a:visited {}

a:hover {}

a:active {}

给table定义position:relative不管用

如果一定要定义，在table外面套个div,在div上定义。

长英文折行处理(给table元素定义不起作用)

word-wrap:break-word;word-break:normal;word-break:break-all;overflow:hidden;

清除浮动

设置width,height,overflow:hidden也可以清除浮动

垂直对齐文字与文本框，按钮，选择框等

label,input,select{vertical-align:middle}

游标手指cursor

cursor: pointer

未知宽度水平居中

方法一

.contain{

float:left;

display:inline;

position:relative;

left:50%;

}

.center{

position:relative;

left:-50%;

line-height:20px;

padding:5px;

background:#ccc;

}

<divclass="contain">

<divclass="center">未知宽度居中方案</div>

</div>

方法二

body {text-align:center;}

li { float:left;font-size:12px;}

a { float:left;border:1px solid #000; padding:5px 10px; text-decoration:none; color:#000;}

ul {display:inline-block; *display:inline; zoom:1;}</style>

<ul>

</ul>

spirit~zZ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录