<style type="text/css">
【1、实现块级元素在块级元素中水平垂直居中】 * ① 设置子容器为定位元素； * ② left:50%; margin-left:-width/2; * top:50%; margin-top:-height/2; */ .div1{ width: 100px; height: 100px; background-color: red; overflow: hidden; /*position: relative;*/ } .div2{ width: 50px; height: 50px; background-color: blue; position: relative; left: 50%; margin-left: -25px; top: 50%; margin-top: -25px; }【2、使用负边距增大元素宽度】 * ① 不指定子容器宽度，指定高度或填充内容； * ② margin: 0px -50px; 可以是左右两边，均超出父容器50px */ .div3{ width: 200px; height: 50px; border: 5px dotted #0000FF; margin: 0 auto; } .div4{ background-color: red; height: 100%; margin: 0px -50px 0px -50px; } /* 第二部分应用，解决div中多个li间距问题 */ .div5{ width: 170px; height: 110px; background-color: #CCCCCC; } .div5 ul{ list-style: none; /*width: 180px;*/ margin-right: -10px; padding: 0px; } .div5 ul li{ width: 50px; height: 50px; margin-right: 10px; margin-bottom: 10px; background-color: orange; float: left; }【3、负边距实现双飞翼布局】 * ① 由于main部分写在前面，所以可以保证朱布局的优先加载 */ .main, .sub, .extra { float: left; } .main { width: 100%; background-color: #ccc; } .sub { width: 190px; background-color: #333; margin-left: -100%; } .extra { width: 230px; background-color: #000; margin-left: -230px; } .main-wrap { margin: 0 230px 0 190px; }</style> </head> <body> <div class="div1"> <div class="div2"> </div> </div> <div class="div3"> <div class="div4"> </div> </div> <div class="div5"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="container clearfix"> <div class="main"> <div class="main-wrap"> <p>main</p> </div> </div> <div class="sub"> <p>Sub</p> </div> <div class="extra"> <p>Extra</p> </div> </div>
</body>