.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;
}
复制代码
.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>
复制代码
缺点:绝对定位是脱离文档流的,意味着下面的所有子元素也会脱离文档流,导致了这种方法的有效性和可使用性是比较差的
实现步骤
<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>
复制代码
和圣杯布局类似,只是处理中间栏部分内容被遮挡问题的解决方案有所不同
实现步骤
<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>
复制代码
极其灵活(还有其他实现方式),需要注意浏览器兼容性
实现步骤
<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>
复制代码
实现步骤:
<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>
复制代码
实现步骤:
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>
复制代码
实现步骤:
<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>
复制代码
缺点:两种实现方式都只能从上往下排列,不能从左往右排列
作者:Rashomon
链接:https://juejin.im/post/5e15ab745188253a8f656c7f
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。