css布局【实用】

左右布局/* 注释以下全是重点 /.bigBox::after{ / 清除浮动【重点】 / content:’’; display: block; clear:both;}.box1{ width: 50%; background: palegreen; / 【重点】 / float: left;}.box2{ width: 50%; background: paleturquoise; / 【重点】 / float: left;}<div class=“bigBox”> <div class=“box1”>box1</div> <div class=“box2”>box2</div></div>左中右布局【 flex 】两版固定宽度 中间自适应 全部自适应 宽度可以都写成 flex: 1; （数值自行调整）.box{ height:50px; / 【重点】 / display: flex}.left{ background-color: #b1dfbb; / 【重点】 / width: 300px; / 如果均分 这个可以改为 flex: 1; /}.center{ background-color: yellowgreen; / 【重点】 / flex: 1;}.right{ background-color: #b1dfbb; / 【重点】 / width: 300px; / 如果均分 这个可以改为 flex: 1; /}<div class=‘box’> <div class=‘left’>left</div> <div class=‘center’>center</div> <div class=‘right’>right</div></div>水平居中.box{ width: 200px; height: 200px; background: aquamarine; / 【重点】 / margin: 0 auto;}<div class=“box”>box</div>以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样水平、垂直居中【 translate 】.box{ width: 200px; height: 200px; background: palevioletred; / 【重点】 / position: relative;}.box span{ background: aquamarine; width: 100px; height: 150px; / 【重点】 / position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}<div class=“box”> <span>123</span></div>水平、垂直居中【 减 margin】{ padding:0; margin: 0;}.box{ width: 200px; height: 200px; background: palevioletred; /* 【重点】 / position: relative;}.box span{ background: aquamarine; width: 100px; height: 150px; / 【重点】 / position: absolute; top: 50%; left: 50%; margin-top: -75px; margin-left: -50px;}<div class=“box”> <span>123</span></div>水平、垂直居中【 flexBox 】.box{ width: 200px; height: 200px; background: palevioletred; / 【重点】 */ display: flex; justify-content: center; align-items:center;}.box span{ background: aquamarine; width: 100px; height: 150px;}<div class=“box”> <span>123</span></div>