自适应开发学习

本文详细阐述了在使用百分比布局时需注意的关键点,包括百分比与父级元素的关系、宽度设置、行内元素宽度限制以及浏览器计算像素数的方式。通过避免常见错误,实现网页布局的灵活性与兼容性。

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

 在使用百分比布局的时候需要注意的几点:
1.你所设置的百分比,是针对他的父级元素来说的,而不是浏览器的宽度。
 
2.当你设置了width:100%时,请避免设置margin和padding。因为你的div实际宽度将是width+margin+padding 从而大于外框。
 
3.每一行中,如果存在多个div,尽量不要让他们的总宽度刚好等于100%。


当像素数出现小数时,浏览器是采取四舍五入的方式计算的。比如你的外框是11像素宽,里边的两个div的宽带均设置为50%,则计算为5.5px,浏览器四舍五入的算法得出6px,所以总宽度将变成12px,超出了外框的总宽度。所以我们在设置的时候尽量不要把总宽度设置成100%。
 
4.为整个网站设置最小宽度,为了保证用户在任何浏览器窗口中都能正常浏览,避免那种极端小的浏览器窗口,你可以写上min-width 以保证页面不变形,在浏览器窗口极小时出现横向滚动条。但是ie6是不支持此属性的,可以针对ie6使用js控制一下。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值