CSS技巧

Change就是我44053

2019-07-18 244 阅读1分钟

1.实现元素水平垂直居中（IE8+）

<div class="box">
    <div class="content"></div>
</div>
<style>
.box{
    width: 1200px;
    position: relative;
}
.content{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // 需设置宽高
    width: 200px;
    height: 100px;
    margin: auto;
}
</style>

2.多栏等高布局

<style>
	.box{display:table;width:100%}
	.box1{display:table-cell; width: 50%; background-color: red;}
	.box2{display:table-cell;width: 50%; background-color: blue;}
</style>
</head>

<body>
	<div class="box">
		<div class="box1">1<br>1<br>2</div>
		<div class="box2">2</div>
	</div>
</body>

3.margin失效情形。

内联元素垂直方向上的margin是无效的。

margin重叠问题

//此时两个div之间的margin为30px，而非50px;
<div style="margin-bottom:20px"></div>
<div style="margin-top:30px"></div>

display: table-cell/display: table-row等声明的margin无效。