【学习心得】页面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高度内换行