CSS常见效果代码总结
2016-06-27 17:48
513 查看
本文主要介绍在css中,许多效果的固定写法
效果如图所示:
1.水平垂直居中
测试页面,代码如下图所示:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中和水平居中demo</title> </head> <style> .wrapper{ width: 300px; height: 300px; border:1px solid red; position:relative;/*父元素需要相对定位*/ } .content{ border:1px solid red; background-color:#6699FF; width:200px; height:200px; position: absolute; top: 50%; left: 50%; margin-top:-100px ; /*二分之一的height,width*/ margin-left: -100px; } </style> <body> <div class="wrapper"> 边框 <div class="content"> 内容 </div> </div> </body> </html>
效果如图所示: