您的位置：首页 > Web前端 > CSS

CSS常见布局效果

2017-08-04 07:58 351 查看

左边定宽右边自适应布局

1：左边使用 float，右边使用 margin-left

2：左边使用 absolute，右边使用 margin-left

3：左边和右边同时使用 absolute

4：使用 flex 布局

CSS秘密花园： Sticky Footers

Sticky Footer 兼容性最好的效果源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.clearfix {
display:inline-block;
}
.clearfix:after {
display:block;
content:'.';
height:0;
line-height:0;
clear:both;
visibility:hidden;
}

.detail {
position:fixed;
z-index:99;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
background:rgba(7,17,27,0.8);
}

.detail-wrapper {
min-height:100%;
}

.detail-main {
margin-top:64px;
/*注意：这里必须使用 padding，主要用来放 footer 的内容*/
padding-bottom:64px;
color: #fff;
}

.detail-close {
position:relative;
width:32px;
height:32px;
margin:-64px auto 0 auto;
clear:both;
font-size:32px;
}

.detail-close span {
display: inline-block;
width: 32px;
height: 32px;
background: red;
}
</style>
</head>
<body>
<div class="detail" v-show="detailShow">
<div class="detail-wrapper clearfix">
<div class="detail-main">
<p>你可以在这里自动填充元素的多少以观察效果</p>
</div>
</div>
<div class="detail-close">
<span></span>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航