本文深入探讨了CSS布局的两种实用方法，包括使用margin、padding和position属性进行精确控制，以及利用calc函数实现高度自适应调整。通过具体示例，展示了如何创建响应式布局，使网页元素在不同屏幕尺寸下保持良好视觉效果。
样式如图：
css布局(一)如下：
<style type="text/css">
*{
padding:0;
margin: 0;
}
html,body{
height:100%;
}
.header{
width: 100%;
height: 50px;
background: #333;
margin-bottom: -50px;
position:relative;
}
.content{
width: 100%;
height: 100%;
padding-top: 50px;
box-sizing:border-box;
background-color: red;
}
.content>p{
width: 25%;
height: 100%;
float: left;
background-color: #999;
font-size: 100px;
color: #fff;
}
.content>p:nth-child(2){
background-color: red;
}
.content>p:nth-child(3){
background-color: green;
}
.content>p:nth-child(4){
background-color: blue;
}
</style>
css布局(二)如下：
.header{
width: 100%;
height: 50px;
}
.content{
width: 100%;
//calc用上就不用margin、padding了
height: calc(100% - 50px);
}
html代码为：
<body>
<div class="header"></div>
<div class="content">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
扫一扫
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
