> 文章列表 > 【学习心得】页面banner布局相关

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

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

页面banner布局相关

  • header
    • min-width 和 width
    • line-height

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高度内换行