【web前端自动化工作环境配置】2.网页固定宽度且居中的的版式

最新推荐文章于 2023-01-09 12:03:41 发布

Anabel Chen

最新推荐文章于 2023-01-09 12:03:41 发布

阅读量1.7k

点赞数

分类专栏：【Web前端】文章标签： html

【Web前端】专栏收录该内容

23 篇文章 2 订阅

订阅专栏

宽度固定且居中的版式是网络中最常用的排版方式之一，先写一段代码再逐一解释。

<style type="text/css">
        body,html{margin: 0;text-align: center;}
        #container{position: relative;margin: 0 auto;width: 700px;text-align: left;}
    </style>

首先对<body>和<html>标记进行属性控制，虽然90%以上的浏览器都是以<body>为基准的，但是考虑到个别情况因此二则同时声明，一般情况下不需要声明<html>标记。

第二行代码“margin：0 ；”指定页面四周的空隙都为0.紧接着设置“text-align:center”,这是整个排版的关键语句，即将页面<body>中的所有元素都设置为居中，块#container属于页面的一部分，自然也居中对齐。

接下来设置#container的属性，“position:relative”设置块相对于原来的位置。但是由于<body>已经设置了居中，因此这里不需要再调整，只是考虑到浏览器的兼容性，加上了这句代码。

#container属性中的"margin:0 auto;"是非常关键的一句，它使得该块与页面的上下边界距离为0，左右则自动调整，这一句代码的完整的写法为“margin：0 auto 0 auto；”这里采用了简写。其中margin-left和margin-right的auto值一定要写，否则在Firefox的浏览器中将默认为0，页面会移动到浏览器的左侧。

然后设定“width：700px;”,这是需要设定的自动宽度。最后的"text-align:left;"用来覆盖<body>中设置的对齐方式，使得#container中的所有内容恢复左对齐。

整个过程的思路清晰明了，这里给出简单的实例。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>屏幕自适应</title>
    <style type="text/css">
        body,html{margin: 0;padding: 0px;text-align: center;background: #e9fbff;}
        #container{position: relative;margin: 0 auto;padding:0px;width: 700px;text-align: left;background: url("") repeat-y;}
    </style>
</head>
<body>
    <div id="container">
    </div>
</body>
</html>