【学习心得】页面banner布局相关

文章讨论了页面布局中header的设置,推荐使用flex布局实现内容居中。min-width用于设定页面最小宽度,防止缩小过度;width则限制最大宽度。在处理ul-li列表时,min-width能保证元素不因浏览器缩放而变形。然而,过度使用min-width可能导致内容隐藏。line-height需谨慎使用,以免影响文本换行行为。

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

页面banner布局相关

header

header 需要设置一个main-content,在header中水平居中,可以margin:0 auto; 也可以通过flex布局
内容如果不适配浏览器,直接定width即可
如果要适配浏览器,可以设置min-width 和 width

尽可能少的用margin,padding去布局,而是尝试用flex布局;margin-left:150px 如果页面放大缩小,这个数值会随着浏览器为放大缩小,其他地方可能会被挤下来

min-width 和 width

min-width:页面缩小的最小宽度,当浏览器宽度小于设置的min-width值时,页面不会再缩小

width(即为max-width):页面如果超出了width值,会固定为width,如果小于width但是大于min-width,会随页面缩放,知道min-width是不再缩放

ul-li时,设置li的min-width
比如有头像,logo,都可以设置min-width可以保证不变形
如果不设置min-width只设置width,会随浏览器大小变化而变形

但是min-width也不能乱用,如果页面min-width很多后,需要计算总和,如果总和超出了浏览器宽度,会隐藏掉部分内容,所以用min-width时,要尽可能缩小min-width的范围

line-height

慎用line-height,如果设置的行高=height,如果页面放大缩小将文字挤到换行,如果定义了line-height,会在大于height的下面换行,反之,就会在height高度内换行

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值