前端页面布局小结(入门级,大神请绕道)

本文总结了页面布局的各种技巧,包括使用百分比设定宽度、通过内容撑起高度、清除浮动、div上下左右居中、iframe自适应高度及文字垂直居中等关键信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

页面布局小结

  1. div高度靠内容撑起来
  2. 父级有个div 子级两个div,宽度通过百分比设定(此时不要设border大小,会造成空间不足,挤下去),高度通过内容撑起,如果要设置高度,正负3000方法,
    下面如果有页脚,下padding流出位置
  3. div下的iframe高度宽度可通过100%来,实现与父级div同大小
  4. 一个div设置浮动,后面div浮动自动跟随
  5. 上中下,中多个子级浮动,下若不想浮动,要对中清除浮动
在这里插入代码片
  1. 为父级div定义伪类
/*清除浮动代码*/
        .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
        .clearfloat{zoom:1}
  1. 实现div上下左右居中(登录框可能会用到)
<div style="background-color: #66afe9;width: 800px;height: 200px;
position: absolute;top:0;right:0;bottom:0;margin:auto auto;left:0;"></div>
  1. 实现div左右居中
<div style="background-color: #66afe9;width: 800px;height:200px;margin:0 auto;"></div>
  1. iframe 自适应父级div高度
<script>
//iframe高度
function changeFrameHeight(){
        var ifm= document.getElementById("mainiframe");
        ifm.height=document.documentElement.clientHeight;
    }
    window.onresize=function(){ changeFrameHeight();}
    $(function(){changeFrameHeight();
});
</script>
  1. div设置高度
    方法1 补丁大法:
    (1、父DIV设置 overflow:hidden;
    (2、对要高度自适应的DIV设置 padding-bottom:100000px;margin-bottom:-100000px;两列或多列同理。
    方法2.背景图填充法
    大站用得比较多的方法,如163等,研究了一下
    给父DIV设置了背景图片填充,所有DIV都不设高度。
    方法3JS法:
    原理:用JS判断左右DIV的高度,若不一致则设为一致。
vara=document.getElementById("left");  
varb=document.getElementById("right");  
if(a.clientHeight<b.clientHeight)  
{  
a.style.height=b.clientHeight+"px";  
}  
else  
{  
b.style.height=a.clientHeight+"px";  
}  
  1. 文字垂直居中
    line-height:父级高度 (并非真正的居中,vertical line 真正 但不好使)
    (笔记更新ing…)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值