.parent { position: relative; } .child { width: 200px; height: 200px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }复制代码
2.margin 负间距
.child{ width:200px; height: 200px; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }复制代码
.child { width: 200px; height: 200px; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }复制代码
.parent { display: flex; justify-content:center; align-items:center; }复制代码
.parent { display: flex; } .child { margin: auto }复制代码
父元素设置teable-cell元素,利用三层结构模拟父子结构
.parent { display: table; width: 200px; height: 200px; } .child { display: table-cell; text-align: center; vertical-align: middle; } .box { display: inline-block; }复制代码
grid布局.parent { display: grid; } .child { justify-self: center; align-self: center; }复制代码
.parent { display: grid; } .child { margin: auto; }复制代码
二、自适应布局右边宽度固定,左边自适应
float布局实现方式
实现步骤:
<style> .container > div { height: 200px; } .left { background-color: #ce5a4b; float: left; width: 100px; } .right { background-color: #499e56; margin-left: 100px; } </style><body> <div class='container'> <div class='left'></div> <div class='right'></div> </div></body>复制代码
flex实现方式:
<style> .container { display: flex; } .left { background-color: #ce5a4b; height: 200px; width: 100px; } .right { background-color: #499e56; height: 200px; flex: 1; } </style><body> <div class='container'> <div class='left'></div> <div class='right'></div> </div></body>复制代码
上部高度固定,下部高度自适应
绝对定位实现方式:
实现步骤:
<style> .container { height: 100%; padding: 100px 0 0; box-sizing: border-box; position: relative; } .top { height: 100px; background: #ce5a4b; position: absolute; top: 0; left: 0; width: 100%; } .bottom { height: 100%; background: #499e56; } </style><body> <div class='container'> <div class='top'></div> <div class='bottom'></div> </div></body>复制代码
普通布局实现:
实现步骤:
<style> .container { height: 500px; padding-top: 100px; box-sizing: border-box; } .top { height: 100px; background: #ce5a4b; margin: -100px 0 0; } .bottom { height: 100%; background: #499e56; } </style><body> <div class='container'> <div class='top'></div> <div class='bottom'></div> </div></body>复制代码
三、三栏式布局三栏式布局的七种布局方式:float布局、绝对定位布局、圣杯布局、双飞翼布局、Flex布局、表格布局、网格布局
实现步骤:
1.左右两栏设置float属性使其脱离文档流左边栏设置 float:left, 右边栏设置float: right
2.给中间元素设置margin-left、和margin-right,设置margin的原因是当中间元素高度超出左右两边时,中间元素会被覆盖
3.为了不影响其他元素,给父元素清除浮动
<style> .left { float: left; width: 100px; height: 200px; background: #ce5a4b; } .right { float: right; width: 200px; height: 200px; background: #499e56; } .main { margin-left: 120px; margin-right: 220px; height: 200px; background: #f8cf5f; } .container::after { content: ''; display: block; clear: both; } </style><body> <div class='container'> <div class='left'></div> <div class='right'></div> <div class='main'></div> </div></body>复制代码
缺点:使用的时候只需要注意一定要清除浮动
实现步骤
<style> .container { position: relative; } .left { position: absolute; left: 0; width: 100px; height: 300px; background-color: #ce5a4b; } .main { position: absolute; left: 120px; right: 220px; height: 300px; background-color: #f8cf5f; } .right { position: absolute; right: 0; width: 200px; height: 300px; background-color: #499e56; } </style><body> <div class='container'> <div class='left'></div> <div class='main'></div> <div class='right'></div> </div></body>复制代码
float和BFC配合圣杯布局缺点:绝对定位是脱离文档流的,意味着下面的所有子元素也会脱离文档流,导致了这种方法的有效性和可使用性是比较差的
实现步骤
<style> .container { overflow: hidden; padding: 0 220px 0 120px; } .container>div { position: relative; float: left; height: 300px; } .main { width: 100%; background-color: #f8cf5f; } .left { width: 100px; margin-left: -100%; left: -120px; background-color: #ce5a4b; } .right { width: 200px; background-color: #499e56; margin-left: -200px; right: -220px; } </style> <div class='container'> <div class='main'></div> <div class='left'></div> <div class='right'></div> </div>复制代码
实现步骤
<style> .container { overflow: hidden; } .container>div { position: relative; float: left; height: 300px; } .main { width: 100%; } .main::after { content: ''; display: block; clear: both; } .left { width: 100px; background-color: #ce5a4b; margin-left: -100%; } .right { width: 200px; background-color: #499e56; margin-left: -200px; } .content { height: 100%; margin: 0 220px 0 120px; overflow: hidden; background-color: #f8cf5f; } </style> <div class='container'> <div class='main'> <div class='content'></div> </div> <div class='left'></div> <div class='right'></div> </div>复制代码
flex布局和圣杯布局类似,只是处理中间栏部分内容被遮挡问题的解决方案有所不同
实现步骤
<style> .container { display: flex; } .main { background-color: #f8cf5f; width: 100%; height: 300px; order: 2; } .left { background-color: #ce5a4b; width: 100px; height: 300px; margin-right: 20px; flex-shrink: 0; order: 1; } .right { background-color: #499e56; width: 200px; height: 300px; flex-shrink: 0; margin-left: 20px; order: 3; } </style><body> <div class='container'> <div class='main'></div> <div class='left'></div> <div class='right'></div> </div></body>复制代码
table-cell布局极其灵活(还有其他实现方式),需要注意浏览器兼容性
实现步骤
<style> .container { width: 100%; display: table; } .container > div { display: table-cell; height: 300px; } .content { height: 100%; margin: 0 20px; background: #f8cf5f; } .left { width: 100px; min-width: 100px; background-color: #ce5a4b; } .right { width: 200px; min-width: 200px; background-color: #499e56; } </style> <body> <div class='left'></div> <!-- 这时的main要放在中间 --> <div class='main'> <div class='content'></div> </div> <div class='right'></div> </body>复制代码
网格布局这种布局方式能使得三栏的高度是统一的,但不能使main放在最前面得到最先渲染
实现步骤
<style> .container { display: grid; width: 100%; grid-template-rows: 300px; grid-template-columns: 100px auto 200px; } .left { background-color: #ce5a4b; margin-right: 20px; } .main { background-color: #f8cf5f; } .right { background-color: #499e56; margin-left: 20px; } </style><body> <div class='container'> <div class='left'></div> <div class='main'></div> <div class='right'></div> </div></body>复制代码
四、多列等高利用背景图片使用起来极其方便,代码简介,但是兼容性很差
<style> .container { background: url('column.png') repeat-y; width: 960px; margin: 0 auto; } .left { float: left; width: 220px; } .main { float: left; width: 480px; } .right { float: left; width: 220px; } </style><body> <div class='container'> <div class='left'></div> <div class='main'></div> <div class='right'></div> </div></body>复制代码
使用正padding和负margin对冲实现多列布局方法实现步骤:
<style> .container { overflow: hidden; } .container>div { /** * padding-bottom 设置比较大的正值。 * margin-bottom 设置绝对值大的负值。 **/ padding-bottom: 10000px; margin-bottom: -10000px; float: left; width: 30%; } .left { background-color: #ce5a4b; } .main { background-color: #f8cf5f; } .right { background-color: #499e56; } </style><body> <div class='container'> <div class='left'></div> <div class='main'></div> <div class='right'></div> </div></body>复制代码
实现思路:
<style> .container { display: flex; } .left { width: 200px; background-color: #ce5a4b; } .main { flex: 1; height: 400px; background: #f8cf5f; } .right { width: 300px; background: #499e56; } </style><body> <div class='container'> <div class='left'></div> <div class='main'></div> <div class='right'></div> </div></body>复制代码
table-cell等高布局实现步骤:
1.父元素设置dispaly:table, table布局天然就具有等高的特性。
<style> .container { display: table; } .left { display: table-cell; width: 300px; background-color: #ce5a4b; } .main { display: table-cell; width: 300px; height: 400px; background: #f8cf5f; } .right { display: table-cell; width: 300px; background: #499e56; } </style><body> <div class='container'> <div class='left'></div> <div class='main'></div> <div class='right'></div> </div></body>复制代码
<style> .container { display: grid; grid-auto-flow: column; } .left { background-color: #ce5a4b; } .main { background-color: #f8cf5f; height: 300px; } .right { background-color: #499e56; } </style><body> <div class='container'> <div class='left'></div> <div class='main'></div> <div class='right'></div> </div></body>复制代码
五、品字形布局实现步骤:
实现方式一:
<style> .container > div { height: 300px; width: 300px; } .top { margin: 0 auto; background-color: #f8cf5f; } .left { display: inline-block; // float: left; margin-left: 150px; background-color: #499e56; } .right { display: inline-block; // float: left; background-color: #ce5a4b; } </style><body> <div class='container'> <div class='top'>上</div> <div class='left'>左</div> <div class='right'>右</div> </div></body>复制代码
实现方式二:
// 与上述实现道理基本相同,不同的是left和right元素布局 <style> .container>div { height: 300px; width: 300px; } .top { margin: 0 auto; background-color: #f8cf5f; } .left { display: inline-block; // float: left; margin-left: -600px; background-color: #499e56; } .right { display: inline-block; // float: left; margin-left: 50%; background-color: #ce5a4b; } </style><body> <div class='container'> <div class='top'>上</div> <div class='right'>右</div> <div class='left'>左</div> </div></body>复制代码
全屏的品字布局缺点:使用inline-block会有小的间隙
实现步骤:
<style> .container>div { height: 200px; } .top { width: 100%; background-color: #f8cf5f; } .left { // display: inline-block float: left; width: 50%; background-color: #499e56; } .right { // display: inline-block float: left; width: 50%; background-color: #ce5a4b; } </style><body> <div class='container'> <div class='top'>上</div> <div class='left'>左</div> <div class='right'>右</div> </div></body>复制代码
实现步骤:
<style> .container { -moz-column-count: 3; /* Firefox */ -webkit-column-count: 3; /* Safari 和 Chrome */ column-count: 3; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 2em; width: 70%; margin: 2em auto; } .item { padding: 2em; margin-bottom: 2em; -moz-page-break-inside: avoid; -webkit-column-break-inside: avoid; break-inside: avoid; background: #ce5a4b; color: #fff; text-align: center; } .item .content-lar { height: 200px; } .item .content-mid { height: 100px; } .item .content-sma { height: 50px; } @media screen and (max-width: 800px) { .container { column-count: 2; /* two columns on larger phones */ } } @media screen and (max-width: 500px) { .container { column-count: 1; /* two columns on larger phones */ } } </style> <body> <div class='container'> <div class='item'> <div class='item_content content-lar'> 1 我最大 </div> </div> <div class='item'> <div class='item_content content-sma'> 2 我最小 </div> </div> <div class='item'> <div class='item_content content-mid'> 3 我中等 </div> </div> <div class='item'> <div class='item_content content-sma'> 4 我最小 </div> </div> <div class='item'> <div class='item_content content-mid'> 5 我中等 </div> </div> <div class='item'> <div class='item_content content-lar'> 6 我最大 </div> </div> <div class='item'> <div class='item_content content-sma'> 7 我最小 </div> </div> <div class='item'> <div class='item_content content-lar'> 8 我最大 </div> </div> <div class='item'> <div class='item_content content-lar'> 9 我最大 </div> </div> <div class='item'> <div class='item_content content-sma'> 10 我最小 </div> </div> <div class='item'> <div class='item_content content-mid'> 11 我中等 </div> </div> <div class='item'> <div class='item_content content-mid'> 12 我中等 </div> </div> <!-- more items --> </div></body>复制代码
flex布局实现步骤:
<style> .container { height: 800px; display: flex; flex-flow: column wrap; width: 70%; margin: 2em auto; } .item { padding: 2em; margin-bottom: 2em; break-inside: avoid; background: #f60; color: #fff; text-align: center; margin: 10px; } .item .content-lar { height: 200px; } .item .content-mid { height: 100px; } .item .content-sma { height: 50px; } @media screen and (max-width: 1100px) { .masonry { height: 800px; } } @media screen and (max-width: 800px) { .masonry { height: 1100px; } } @media screen and (max-width: 600px) { .masonry { height: 1300px; } } @media screen and (max-width: 460px) { .masonry { height: 1600px; } } </style><body> <div class='container'> <div class='item'> <div class='item_content content-lar'> 1 我最大 </div> </div> <div class='item'> <div class='item_content content-sma'> 2 我最小 </div> </div> <div class='item'> <div class='item_content content-mid'> 3 我中等 </div> </div> <div class='item'> <div class='item_content content-sma'> 4 我最小 </div> </div> <div class='item'> <div class='item_content content-mid'> 5 我中等 </div> </div> <div class='item'> <div class='item_content content-lar'> 6 我最大 </div> </div> <div class='item'> <div class='item_content content-sma'> 7 我最小 </div> </div> <div class='item'> <div class='item_content content-lar'> 8 我最大 </div> </div> <div class='item'> <div class='item_content content-lar'> 9 我最大 </div> </div> <div class='item'> <div class='item_content content-sma'> 10 我最小 </div> </div> <div class='item'> <div class='item_content content-mid'> 11 我中等 </div> </div> <div class='item'> <div class='item_content content-mid'> 12 我中等 </div> </div> <!-- more items --> </div></body>复制代码
缺点:两种实现方式都只能从上往下排列,不能从左往右排列
联系客服