[分享]css中id做页面布局

CSS中ID是一种用于选择元素的属性，一个HTML元素可以有一个ID（唯一标识符），它用于识别单个元素，同时也可以用于页面布局。container{ width: 960px; margin: 0 a...

CSS中ID是一种用于选择元素的属性，一个HTML元素可以有一个ID（唯一标识符），它用于识别单个元素，同时也可以用于页面布局。

#container{
    width: 960px;
    margin: 0 auto;
    padding: 20px;
    background: #FFF;
} 

上面的代码演示了如何使用ID选择器来应用样式到一个元素上，#container是一个唯一的ID选择器，它应用到一个名为container的HTML元素上，如下：

<div id="container">…</div> 

这个元素可以用于作为页面的容器，一般情况下，我们会设置这个元素的宽度为固定值（如960px），并使用margin: 0 auto来使其在浏览器中居中显示。

另一个常见的用法是使用ID选择器来选中一个特定的元素，如页面中的导航栏：

#nav{
    background: #333;
    color: #FFF;
    padding: 10px;
}
#nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav li{
    display: inline-block;
    margin-right: 10px;
} 

上面的代码演示了如何使用ID选择器来选中导航栏的不同元素，其中#nav是整个导航栏的ID选择器，#nav ul和#nav li则分别选中导航栏中的ul和li元素，并对其应用样式。

使用ID选择器来布局页面有其优点和缺点，优点是可以方便地控制单个元素的样式，可以实现更细致的布局；缺点是对于大型页面，需要使用大量的ID选择器，导致CSS代码臃肿，不易维护。