divcss布局经典实例代码 css怎么实现div水平居中

什么是DIV+CSS经典布局怎么实现div的水平居中

说到网页布局，DIV+CSS经典布局可是最基础也是最实用的。先来个全局样式重置，给所有元素清除默认的margin和padding，保证盒模型计算一切顺畅。比如这段代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

然后用视口单位搞个全屏布局，设置容器 .container 的宽度和最小高度占满全屏，用flex方向设置成列，自动撑满页面，非常灵活。

说到div水平居中，其实有不少小窍门呢！比如给body加个text-align: center，然后让你的div设置margin: 0 auto，这招让你的div神奇地跑到正中间了。为了方便观察效果，给div加个边框，宽度和高度自己调，不得不说，这办法简单又有效。

简单总结一下操作步骤：

哎呀，这样一套整下来，你的div居中效果杠杠的！

除了布局，这里给你列几个超实用的CSS小技巧，帮你在网页设计上闪闪发光：

透明度和颜色的区别
CSS里有opacity和rgba两种透明方式。opacity是给整个元素搞透明，范围0到1，比如0.5就是半透明；而rgba是颜色加透明度，方便给背景或文字定义颜色，颜色+Alpha通透感超赞！
文字下划线的多种实现
最常用的就是text-decoration: underline，一键增添漂亮下划线。但如果想炫酷点儿，你也可以用border-bottom给div加个底边界，看起来更灵活多变。
空格和换行的处理
哎，有时候HTML空格会被直接忽略，好烦人！这时候white-space属性来救场啦。有normal、pre、nowrap等多种值，帮你精准控制文本显示的空格和换行，网页排版so easy。
图片大小调节法宝
想控制图片大还是小？简单粗暴地写width和height？那也太呆板了！用max-width和width: auto搭配，可以让图片自适应不同屏幕尺寸，良心灵活度提升不少！
超链接样式怎么定义
超链接样式常见的定义是在a标签里，比如a:link、a:hover等伪类，配合class更方便控制不同链接样式，设置颜色、字体、下划线啥的都很轻松。