重拾web开发-DIV+CSS基础（总结）

最新推荐文章于 2024-09-11 12:01:27 发布

weixin_33712881

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量66

点赞数

文章标签： xhtml

以下内容摘自网上各处本人只是总结并非完全原创，特此申明。

文档类型

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

这句话标明本html文档是过渡模式，过度模式浏览器对XHTML的解析比较宽松，允许使用HTML4.01的标签，但必须符合XHTML的语法。另外还有Quirks模式(有的翻译为怪异模式)和严格(Srick)模式。

严格模式也叫标准模式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

所谓模式就是浏览器解析CSS的方式，不同模式浏览器解析的严格程度不一样，之所以出现这些模式是因为web开发的标准在不停的演进，关于Quirks和Srick模式参考这里：http://www.quirksmode.org/css/quirksmode.html#link2。最新的标准(html5)支持非常简洁的文档类型写法：

<!DOCTYPE html>

新的文档类型支持html5新的特性如<video>, <canvas>，并且同时它是向下兼容的。

语言编码

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

这句话标识文档的语言为gb2312及简体中文，但推荐我们平时使用国际通用编码UTF-8，但不管采用哪种编码我们的css和html的编码应该保持一致。

CSS样式

加载css样式有四种方式:

外部样式

<link href="layout.css" rel="stylesheet" type="text/css" />

内部样式

<style>
h2 { color:#f00;}
</style>

内部样式以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。

行内样式

<p style="font-size:18px;">内部样式</p>

行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

导入样式

@import url("/css/global.css");

它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到很好的重用性。

CSS优先级

id优先级高于class
后面的样式覆盖前面的
指定的高于继承的
行内样式高于内部或外部样式
总结：单一的（id）高于共用的（class），有指定用指定的，无指定则继承离它最近的。

CSS盒子模型

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

注意：

整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度。

块级元素和内联元素

块级元素：就是一个方块，像段落一样，默认占据一行出现；

内联元素：又叫行内元素，只能放在一行，不会造成前后换行。内联元素只能容纳文本或者其他内联元素。当然上面的概念都是在没有css的作用下，如果允许css操作元素那么块级和内联就没什么差异了，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。display:none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间。

外边距合并

块级元素垂直相邻外边距会合并，合并后去最大值
行内元素实际上不占上下外边距
行内元素的左右外边距不会合并
浮动元素的外边距不会合并（块级元素只有浮动后之间才会出现左右边距）

float

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。主要内容出自这：http://paranimage.com/css-float-attribute/ 英文原文：http://css-tricks.com/all-about-floats/

float属性可能的值：

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

清除浮动

看图说话：

将在浮动元素下面的块级元素(Footer)理解一个从瓶底向上浮的木块并直到找到一个离瓶口最近且容的下自己的位置。清除浮动就是还原块级元素的本质：占据每一行，下一个块级元素换行占据。清除浮动也有也有4个可能值。最常用的是 both，清楚左右两边的浮动。left 和 right 只能清楚一个方向的浮动。none 是默认值，只在需要移除已指定的清除值时用到。inherit 应该时第五个值同样IE不支持。

看图说话：

清除浮动技术

空div方法：或者一些其他元素，但是 div 是最常用的，因为它没有浏览器默认样式；没有特殊功能，而且一般不会被 css 样式化。
overflow 方法在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden，父元素就会扩展以包含浮动。这个方法有着较好的语义性，因为他不需要额外元素。但是，如果需要增加一个新的 div 来使用这个方法，其实就和空 div 方法一样没有语义了。而且要记住，overflow 属性不是为了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。
简单清除方法使用了一个聪明的 css 伪选择符(:after)来清除浮动。比起在父元素上设置 overflow，只需要给它增加一个额外的类似于”clearfix”的类。这个类使用如下 css:

.clearfix:after {
                   content: ".";
                   visibility: hidden;
                   display: block;
                   height: 0;
                   clear: both;
            }

关于这一点参看这里。

浮动带来的问题

浮动带来的问题大多是因为莪IE6

塌陷：使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到
推倒：是浮动元素内的元素（大多是图片）比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片，但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片一个普遍的例子是突破伸出主内容之外把侧栏推到下面。

　　　　解决这个问题的方法：首先确保不是图片造成这种情况，其次可以使用 overflow:hidden 来切除多余的部分。

3像素间距：3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。

　　　　解决这个问题的方法比较俗的是通过设置magin为-3px来解决。

双倍边距bug：同样是IE6当浮动后设置左侧外边距时后，最左侧将显示为双倍边距。
　解决方法：给浮动设置 display:inline; 而且不用担心，它依然是块级元素。
底边距 bug：是当浮动父元素有浮动子元素时，这些子元素的底边距会被父元素忽略掉。快速修正：用父元素的底内补白(padding)代替。

绝对定位和相对定位

文档流

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。每个非浮动块级元素都独占一行，浮动元素则按规定浮在行的一端。若当前行容不下，则另起新行再浮动。内联元素也不会独占一行。几乎所有元素(包括块级，内联和列表元素）均可生成子行，用于摆放子元素。有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 但是在IE中浮动元素也存在于文档流中。浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。浮动概念让人迷惑根源在于浏览器对理论的解读造成的。只能说很多人以IE做标准，其实它不是。

绝对定位和相对定位

position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）
父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角。
相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右。

CSS Sprites

讲CSS Sprites之前，先把背景图片给搞清楚

#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }

css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是左右和上下，第一个参数表示距左多少px，第二个参数表示距上多少，这和padding的简写方式是不一样，一定不要弄混。另外再强调一点css中值为0可以不带单位，其它数值都必须带单位（line-height值为多少倍时，zoom，z-index除外）；no-repeat表示背景图片向哪个方向重复，此时为不重复。
还需说明一点的是定位图片位置的参数是以图片的左上角为原点的，理解了这些，CSS Sprites技术就基本上懂了，就是靠背景图片定位来实现的。把三张背景图片整合到一张上（PS或fireworks都很简单），如下图：

<!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" />
<style>
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:451px; height:28px; margin:0 auto; border-bottom:2px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(sprites2.gif) 0 -59px no-repeat; font-size:14px;}/*这里将超级链接设置成了块级元素*/
#menu ul li a:hover { background:url(sprites2.gif) 0 -29px no-repeat;}
#menu ul li a#current { background:url(sprites2.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页版式</a></li>
<li><a href="#">web教程</a></li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>

其实CSS Sprites将所需要的多张图片素材整合到一张图片上去，然后以这个图片的左上角为原点建立x，y坐标轴：

#menu ul li a#current { background:url(sprites2.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} 其中0,0的坐标就是指你要截取图片的左上角的坐标值：

又因为#menu ul li a { display:block; width:87px; height:28px; ……}这里将超级链接设置成了块级元素并可他定义了长为87px，宽为28px;所以这里就从（0,0）开始截取长为87px，宽为28px的图片事实上就是上图蓝色框中的图片。再看这就代码：

#menu ul li a:hover { background:url(sprites2.gif) 0 -29px no-repeat;}

这是设置当鼠标滑过链接时候的背景图片。很容易理解这里就是从坐标（0，-29）开始截取长为87px，宽为28px的图片，事实上就是上图中红色框区域的图片。最后看这句:

#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(sprites2.gif) 0 -59px no-repeat; font-size:14px;}

……background:url(sprites2.gif) 0 -59px no-repeat…… 其实就是图中黑色框里面的图片，也就是设置成没有点击链接时候的图片。CSS Sprites中的默认情况下是重复的，就是我们不设置它为no-repeat的话，它是重复的，所谓的重复就是图片向四个象限重复，重复可以是无限的，在设计中称为“四方连续”。