css实现网页布局与定位

这篇文章主要讲解了“css实现网页布局与定位”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css实现网页布局与定位”吧！

第三章 CSS网页布局与定位

3.1 div

几乎XHTML中的任何标签都可以用于浮动与定位，而div首当其冲。对于其他标签而言，往往有它自身存在的目的，而div元素存在的目的就是为了浮动与定位。

3.1.1 div是什么

div是XHTML中制定的、专门用于布局设计的容器对象。在传统表格式布局中，之所以能够进行页面的排版布局设计，完全依赖于表格对象table。如今，接触另一种布局方式——CSS布局。div正是这种布局方式的核心对象。仅从div的使用上说，做一个简单的布局只需要依赖两样东西：div与CSS。因此有人称CSS布局为div+css布局。

3.1.2 如何使用div

只需要应用<div></div>标签，将内容放置其中，便可以应用div标签。但是，div标签之声一个标识，作用是把内容标识成一个块区域，并不负责其他事情。

div标签中除了直接放入文本外，也可以放入其他标签，还可以多个div进行嵌套使用，最终目的是合理地标识出内容区域。

在使用div标签时，可以加入一些属性，比如id、class、align、style等。在CSS布局方法，为了实现内容与表现的分离，不应当将align、style两个属性编写在XHTML页面的div标签中，因此，最终的div代码只能拥有以下两种形式：

代码如下:

<div id="id名称">...</div>
<div class="class名称">...</div>

3.1.3 理解div

在一个没有任何CSS应用的页面中，即使应用了div，也没有任何实际效果。那又如何理解div在布局上的重大潜能呢？尝试编写两个div，用于左分栏与右分栏，代码如下：

代码如下:

<div>左分栏</div>
<div>右分栏</div>

此时浏览器能够看到的仅仅是上下两行文字，并没有看出div的任何特征。

要记住一点，div是一个block对象&mdash;&mdash;块对象（或者块级元素）。XHTML中的所有对象，几乎都默认为两种对象类型：

block块状对象：块对象指的是当前对象显示为一个方块。默认显示状态下，它将占据整行，其他的对象只能在下一行显示。
in-line行间对象（或者称内联元素）：与block对象相反，它允许下一个对象与之共享一行进行显示。
块状div说明，它在页面中并非用于类似于文本那样的行间排版，而是用于大面积，大区域的块状排版。

从页面效果发现，网页中除了文字之外，没有任何其他效果。两个div之间的关系只是前后关系，并没有出现类似于表格的田字型，因此，div本身与样式没有任何关系。样式是需要编写CSS来实现的。

在CSS布局中，所要做的工作可以简单归集为两件事：一是使用div将内容标记出来，二是为了这个div编写所需的CSS样式。

3.1.4 并列与嵌套div结构

div可以多层进行嵌套使用，嵌套的目的是为了实现更为复杂的页面排版。比如：

代码如下:

<div id="header">头部</div>
<div id="center">
<div id="left">左分栏</div>
<div id="right">右分栏</div>
</div>
<div id="footer">底部</div>

上述代码中，为每个div定义了一个id名以供识别。可以看到id名为header、center和footer的3个div对象，它们之间属于并列关系，在网页布局结构中以垂直方向布局而至上而下。

在center中，为了内容的需要，又使用了一个左右分栏的布局，这两个div本身是并列关系，而它们都处于center之中，因此它们与center形成了一种嵌套关系。

注：在适当情况下，应当尽可能少地使用嵌套，以保证浏览器不用过分消耗资源来对嵌套关系进行解析，简单的嵌套结构更有利于对版式的理解与控制。

3.1.5 使用合适对象来布局

Web标准推荐使用尽可能符合页面中元素意义的标签来标识元素。在CSS布局中，要求尽可能多地使用XHTML所支持的各种标签，最终网页对象都将拥有良好的可读性。再通过进一步的CSS定义，其样式表现能力丝毫不比表格差，而且拥有比表格更多的样式控制方法，这正体现了CSS布局的基本优势。

XHTML标签与功能简述：

上述列举了全部的XHTML标签对象，但并非所有对象都会经常使用到。

3.2 一列固定宽度

使用div设置一个带有header、center和footer三个并列的布局，这3个div的基本表现形式正是：一列式布局。

一列式布局是所有布局的基础，也是最简单的布局形式。一列式布局是一种固定宽度的布局样式。

注：默认状态下，即在未设定div宽度的情况下，div将占据整行空间。

3.3 一列宽度自适应

自适应布局是一种非常灵活的布局形式，它能够根据浏览器窗口的大小，自动改变其宽度或高度值。

实际上，默认状态下的div将占据整行空间，即是宽度为100%的自适应布局。一列适应布局需要改变这个设置，将宽度由固定值改为百分比值的形式便可以完成。

 一列固定宽度居中

页面整体居中是网页设计中常见的形式。在传统表格式布局中，使用表格的align="center"属性来实现表格居中，再在其单元格中装内容，实现整个页面居中。

而div本身也支持align="center"属性，同样可以让div呈现居中状态。但是，CSS布局是为了实现表现与内容的分离，align对齐属性是一种样式代码，书写在XHTML的div属性中，有违于分离原则，因此应当使用CSS的方法来实现内容居中。居中的CSS样式：margin: 0px auto;

除了直接使用数值外，margin还支持一个值叫auto的属性值，auto值是让浏览器自动判断边距。在这里，给当前的div左右边距设置为auto，浏览器就会将div的左右边距设为相同，从而呈现出居中的状态。

注：margin属性用于控制对象的上、右、下、左（顺时针旋转）4个方向的外边距。当margin使用两个参数时，第一个参数表示上下边距，第二个参数则表示左右边距。

3.4 二列固定宽度

对于二列布局自然需要用到两个div。分别使用两个id为left和right的div。为了实现二列式布局，必须使用另一个属性&mdash;&mdash;float。

float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局。float的可选参数分别为：none/left/right。float使用none值时表示对象不浮动，使用left时对象将向左浮动，而使用right时对象将向右浮动。

3.5 二列宽度自适应

与一列自适应宽度布局设置一样，是通过对百分比宽度值进行指派。比如：设置左栏宽度为20%，右栏宽度为70%。为什么没有将右栏设置为80%？

这是因为，在CSS布局中，一个对象的宽度不仅仅由width值来决定。对象的真实宽度是由对象本身的宽(width)、对象的左右外边距(margin)以及左右边框(border)，还有内边距(padding)等属性相加而成。

3.6 两列右列宽度自适应

在实际应用中，有时候需要左栏固定宽度，而右栏根据浏览器窗口大小自适应。这只需要设置左栏的宽度值，右栏不设置任何宽度值，并且右栏不浮动即可。

3.7 二列固定宽度居中

对于二列分类居中问题，再使用margin: 0px auto；似乎不能达到效果，这时就需要进行div的嵌套设计来完成。可以使用一个居中的div作为容器，将二列分栏的两个div放置在容器中，从而实现二列居中显示的效果。XHTML代码结构如下：　

代码如下:

<div id="layout">
<div id="left">左列</div>
<div id="right">右列</div>
</div>

CSS代码如下：

代码如下:

#layout {
margin: 0px auto;
...
}

3.8 三列浮动中间列宽度自适应

如果希望有一个三列式布局中的左栏要求固定宽度并居左显示，右栏要求固定宽度并居右显示，而中间栏需要在左栏和右栏的中央，并根据左右栏的间距自动适应。这个布局单纯使用float属性与百分比值并不能够实现。因此需要寻找新的思路来解决。

绝对定位

绝对定位是通过position属性来实现的。position的可选参数分别为：static/absolute/relative。

对页面中的每个对象而言，默认的position属性都是static。使用position: absolute;将会变为绝对定位模式。当使用此属性时，可以使用top、right、bottom、left即上右下左4个方向的距离值，以确定对象的具体位置。CSS代码如下：

代码如下:

#layout {
position: absolute;
top: 20px;
left: 0px;
}

设置top: 20px;时，它将永远离浏览器窗口的上边20px，而left: 0px;将保证它离浏览器左边为0px。

注：如果一个对象被设置了position: absolute;，它将从本质上与其他对象分离出来。它的定位模式不会影响其他对象，也不会被其他对象的浮动定位所影响。从某种意义上来讲，使用绝对定位之后，对象就像一个图层一样漂浮在网页之上。使用绝对定位之后的对象，不需要再考虑它的浮动关系，只要设置对象的top、right、bottom及left4个方向的值即可。

3.9 高度自适应

有些时候设置对象的height: 100%;并不能实现高度自适应的效果。CSS代码如下：

代码如下:

html, body {
margin: 0px;
height: 100%;
}</p> <p>#left {
background-color: #cccccc;
width: 300px;
height: 100%;
float: left;
}

如上述代码，对#left对象设置了height: 100%，然而，同时又设置了html与body的height: 100%，这就是高度自适应问题的关键所在。一个对象的高度是否可以使用百分比显示，取决于对象的父级对象。

在页面中，#left的父级对象是body，而在默认情况下，浏览器并没有给body一个高度属性，因此设置#left为height: 100%;并不会产生任何效果。但是，一旦给body设置了height: 100%之后，它的子级对象#left的height: 100%;便发生了作用，这便是浏览器解析规则引发的高度自适应问题。

3.10 盒模型详解(Box Model)

盒模型是CSS中的一个核心概念。由于浏览器设计的原因，在不同浏览器下面，盒模型的实际表现不一样。

3.10.1 什么是盒模型

盒模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。浏览器通过这些盒状物的大小和浮动方式来判断下一个盒状物是贴近显示，还是下一行显示，还是其他方式显示。任何一个CSS布局的网页，都是由许多不同大小的盒子所构成的。

3.10.2 盒模型的细节

如上面所述，只需要理解盒模型的宽度或高度，就能理解他们在布局中所占据的位置。

在CSS的盒模型设计中，它的宽度和高度不仅仅由值width或height来提供，而是由一组属性值组合而成。除了宽度或高度值外，对于盒模型对象而言，CSS还提供了内边距(padding)、外边距(margin)、边框(border)三个属性，用于控制一个对象的显示细节。

总结：一个盒子（包含margin、border和padding）的实际占用的空间为：

竖直方向：height+border-top+border-bottom+margin-top+margin-bottom+padding-top+padding-bottom
水平方向：width+border-left+border-right+margin-left+margin-right+padding-left+padding-right
3.10.3 上下margin叠加问题（margin重叠现象）

对象之间的间距是由两个对象的盒模型的最终计算值得出的。理论上如此，但也有一种特殊情况，就是上下对象的间距问题。当两个对象为上下关系时，而且都具备margin属性的时候，此时由margin所造成的外边距将出现叠加。比如：

代码如下:

#a {
width: 100px;
height: 100px;
background-color: #eeeeee;
border: 5px solid #bbbbbb;
margin: 10px;
}</p> <p>#b {
width: 100px;
height: 100px;
border: 5px solid #bbbbbb;
background-color: #999999;
margin: 10px;
}

也许会认为，由于a对象有下边距10px，b对象有上边距10px，所以它们的上下距离应该为20px。实际上，它们的上下距离都是10px。引发这种问题的原因是由CSS设计所造成的。比如要对段落进行控制，多个p标签形成段落，如果这些p标签都具备margin: 10px;属性的话，那么它们中第一个段落的顶部外边距是10px，而第一个段落与第二个段落之间的margin就成了20px，由此造成排序距离不一致，所以设计出这种空白边叠加规则。

总结：空白边叠加时，即上下相邻的普通元素，上下边距并非简单的相加，而是取其较大的margin值为准。一旦把某个元素设定了float属性，那么它们将不再进行空白边叠加。

3.10.4 左右margin加倍问题

当盒模型对象为浮动状态时，很对象的左右margin会加倍。可以通过设置对象的display:inline;来解决。display属性用于强制对象按一种显示模式进行解析。

3.11 深入浮动(Float)

浮动是CSS布局中重要的理论。CSS网页布局只能以两种方式存在：一种是浮动式布局，另一种则是定位布局。这两种定位方式的核心都脱离于文档流的控制。

3.11.1 文档流(Document Flow)

文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body元素下的任意元素，根据其前后顺序，组成了一个个上下关系，这便是文档流。文档流是浏览器的默认显示规则。

3.11.2 浮动定位

浮动定位的目的就是打破默认的按照文档流的显示规则，而按照布局要求进行显示。这就需要利用float属性。

3.11.3 浮动的清理(Clear)

清理是浮动中的另一个有用的工具。这需要利用clear属性来拒绝某个方向的浮动。清理的一种方法就是清除某一侧，比如：clear: left;来清理左侧的浮动对象；另一种用法是，当浮动了许多元素后，突然需要另起一行，这时可以制作一个空白的div标签，并使用clear: both;属性来设置该div左右都拒绝浮动。

3.11.4 何时选用浮动定位

当需要网站有较强的对分辨率及内容大小的适应能力时，就需要采用浮动定位。浮动定位能将布局浮在窗口之中，而不是固定在窗口的某个位置，所以其目的主要是针对非固定类型的网页进行设计。

1. 居中布局

对一个元素居中，是相对于它的左右两个边而言。如果浏览器窗口的宽度不固定，那么久需要用div，采用针对左右margin的auto设置，以便让元素居中浮动。

2. 横向宽度百分比缩放

如果有一个二列宽度自适应布局，当左列的宽度无法固定时，则右列的位置也就无法固定，因此右列必须浮动到左列的右边贴近，才可以适应左列宽度的随时变化。

3. 需要借助margin、padding、border等属性

浮动式布局能够通过控制对象的边框、间距等来精确地控制它们之间的位置关系，考虑到每个对象的外边距不一样，所以如果需要采用margin来控制对象占位，也需要使用浮动定位。

3.12 绝对定位与相对定位

3.12.1 绝对定位

凡是采用position: absolute;后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom和left四个方向的边距值来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在。CSS代码如下：

代码如下:

#a, #b, #c, #d {
background-color: #000FFF;
border: 2px solid #00FFFF;
width: 100px;
height: 100px;
margin: 2px 2px 2px 0px;
float: left;
}

#b {
position: absolute;
top: 80px;
left: 100px;
}

#d {
position: absolute;
top:80px;
left: 210px;
}

这时，b和d元素的位置由top值（上边距）及left值（左边距）而决定，他们已经脱离了a和c的浮动而自成一体，浮动在画面之上。

深度(z-index)

由于b和d元素的位置由自身的边距而决定，因此会出现一个问题，即元素的重叠。这种情况下，可以通过设置对象的z-index属性，以设置其重叠的先后顺序，也就是z轴的顺序。CSS代码如下：

代码如下:

#b {
position: absolute;
top: 80px;
left: 100px;
z-index: 1;
}</p> <p>#d {
position: absolute;
top: 70px;
left: 160px;
z-index: 0;
}

一开始没有设置z-index属性时，d元素位于b元素之上。当使用z-index属性后，可以重新设置他们的z轴顺序。

注：以z-index的数值大小为准，大值对象的层级位于小值对象之上。

3.12.2 相对定位

实际上，相对定位就是浮动定位与绝对定位的扩展方式。相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息。position: relative;

不占位的相对定位

当对象采用position: relative;时，该对象虽然进行了相对定位，但其原始的占位信息还存在于文档流及浮动对象中。要想做到绝对定位那样，完全独立于其他对象，自身又可以做到相对定位，可以通过一组定位组合。XHTML代码如下：

代码如下:

<div id="divGroup">
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
<div id="d">d</div>
</div>

CSS代码如下：

代码如下:

[css]</p> <p>#divGroup {
margin: 50px 0 0 50px;　
position: relative;
border: 1px solid #000000;
width: 400px;
height: 200px;
}</p> <p>#a, #b, #c, #d {
background-color: #eeeeee;
border: 2px solid #aaaaaa;
width: 100px;
height: 100px;
margin: 2px 2px 2px 0px;
float: left;
}</p> <p>#b {
position: absolute;
left: 10px;
top: 30px;
}

可以看到，b已经视线里相对定位，而且没有占有空间，c和d也都顺移到a的右边。之所以能够实现这样的效果，就在于相对定位与绝对定位的组合。在这里，对付对象divGroup设定position: relative;的绝对定位，但没有设定它的top及left值，所以divGroup仍然可以当做浮动对象使用。同时，将b对象的定位方式由position: relative;改为position: absolute;绝对定位，尽管改为了绝对定位了，但由于其父级是相对定位，所以这里的绝对定位就变成了相对于父级的绝对，而不是针对浏览器进行绝对定位。

3.12.3 何时选用绝对与相对定位

绝对与相对定位在实际应用中并不常见，值存在于一些特殊情况下。

绝对定位用于网页设置全部固定，而且不希望采用margin、padding、border等属性进行控制。一般有下面一些的设计会使用到。

不规则网页设计
在画面上的设计
交互式设计

感谢各位的阅读，以上就是“css实现网页布局与定位”的内容了，经过本文的学习后，相信大家对css实现网页布局与定位这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！