“”——打开互联网上任意一个网站，发布者一定希望其网站界面简洁美观，用户体验更好。而实现这些优势好的网页设计，离不开页面布局。要实现一个好的页面布局，就必须熟练掌握CSS样式的应用，而 divcss（div + css）则是目前实现页面布局的最常用技术之一。

一、divcss是什么？

divcss指的就是使用CSS样式，实现布局时，将页面元素划分为多个Div元素，再通过CSS样式控制各个Div元素的定位、大小、边框、背景等属性，从而达到页面布局的效果。优点是方便灵活，让网页设计师更好控制整个页面布局，使代码维护更方便。

二、divcss应用场景

在实际网站设计中，divcss应用了很广泛，如在PC端和移动端页面的设计、响应式布局、网页模板设计等。比如在网页模板设计中，由于divcss容易使用，具有良好可维护性、重用性，网站开发人员甚至可以提供完整的HTML、CSS和JavaScript组合库，实现页面的快速布局。在响应式布局中，通过divcss可以根据不同设备的尺寸，在不同的元素上添加CSS样式来控制布局，从而保证了不同设备上的页面展示效果。

三、divcss的优点

3.1 简洁：相比于表格布局，divcss的代码更加简洁明了，易于维护。因为表格DOM结构较为复杂，所以在维护时会比较麻烦。

3.2 灵活性优势：由于divcss的布局灵活性较大，可以在不同的设备上快速实现响应式布局。

3.3 提高代码复用性：divcss可以将样式代码和结构代码分离，对于多个页面的布局进行复用，大大减少了代码量。

3.4 降低网站的加载时间：由于表格布局代码体积大，会较之divcss会占用更多的客户端带宽资源，并且表格中含有的一些属性，如行内样式和奇偶行背景色等也会增加网站加载时间。使用divcss能大大减少网站的加载时间。

四、divcss的具体实现

4.1 常用DIV样式

– 定位

在divcss中，定位应用较为频繁，一般使用position属性定义元素定位方式。常见的position取值有：static、relative、absolute、fixed。

- static：默认值，不会修改元素位置，即元素遵循文档流，并且只能按照文档流进行左、右、下、上的偏移。

- relative：相对定位，不影响其他元素的位置和大小，但是对自身位置可以进行调整。

- Absolute：绝对定位，元素完全脱离文档流，相对于其最近一个非静态定位的祖先元素进行定位。

- fixed：固定定位，元素固定在屏幕中的某个位置，不随滚动而移动。

- 布局方向

CSS属性float，定义了css元素沿着其容器的哪一侧进行浮动。除非当使用clear属性来清除浮动属性时，悬浮者的边界可能会包含在右侧或左侧的其他插入内容中。

- 尺寸属性

divcss中，尺寸属性还是很重要的。从应用的角度来讲，往往需要对一些元素进行设置固定宽度、固定高度，或者需要按比例来设置宽度和高度。常用的尺寸属性有：width、height、min-width、max-width、min-height、max-height。

4.2 方法

（1）W3C标准盒模型

我们知道，在CSS2版本中，浏览器实现盒模型的尺寸解释有所不同，所以W3C标准盒模型就横空出世。W3C标准盒模型所说的是content、padding、border、margin等四个部分的组合，最后得到的盒子大小不变。

（2）响应式布局

针对不同的屏幕分辨率，我们需要保证网页的布局与视觉效果始终保持一致。这就要求前端开发人员要学会使用media query语法，以及媒体查询参数值的灵活掌握。

五、优秀的divcss实例

为了更好地学习和掌握divcss，我们为大家推荐了一些优秀的divcss实例，供大家参考学习：

（1）固定宽度居中布局

例：通过以下CSS代码可以使宽度为700px的div居中显示

.center-wrapper {

width: 700px;

margin: 0 auto; }

（2）等分布局

例：通过以下CSS样式代码，可以实现三列等宽的内容布局

.container {

display: flex;

justify-content: space-between;

flex-wrap: wrap;}

.container .panel {

width: 33.3333%;

box-sizing: border-box;}

（3）响应式布局

例：在不同的设备尺寸上，通过以下CSS实现不同的布局效果：

@media (min-width: 720px) {

/* desktop view layout */

#main {

float: left;

width: 72%;

}

#aside {

float: right;

width: 25%;

margin-left: 2%;

}

};

@media (max-width: 720px) {

/* mobile view layout */

#main {

width: 100%;

}

#aside {

width: 100%;

margin: 20px auto 0;

}

};

六、总结

总的来看，divcss在当今的网页设计中应用广泛，无论是响应式布局、模板设计，还是PC端和移动端布局，都必须掌握。保证网页布局的优雅简洁，还需要大家多多实践和积累，加强对CSS样式的熟悉和了解，并结合自己的实际项目经验将其运用好。