布局和样式是每个前端的必修課。在日常的工作中也会碰到一些特定场景的布局需求，配合上样式就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享
由于篇幅原因，会分为 2 篇今天，会先介绍一些有趣而又实用的布局的寫法之后的一篇，将展现样式的神奇魔法
在商城中展示商品图片时，如果图片较多一种比较好的体验是：会先有一个占位图，目的昰为了让页面无抖动也就是所谓的图片懒加载效果。但是当遇到适配时就比较头痛，特别是手机的横竖屏切换如果是通过 JavaScript 计算的话，就可能会出现抖动现象
本着能用 CSS，就不用 JS 去实现的原则就有了下面这种方案：
可以适配不同屏幕，只要 UI 提供一张 4:3 的占位图即可下圖展示了不同宽高，但比例相同的 2 张图都能完美地居中显示。
移动端的界面，寸土寸金有时为了控制屏幕的滚动长度，会将一些模块横向排列但是，横向排列会产生一些布局问题
比如，移动端的滚动条样式依赖与手机浏览器，各不相同一种解决方案是：把滚动轴隐藏掉，但不能 overflow-x:hidden;不然就滚不动了。然后算好每一个横向的块的宽度让最右侧的块露出一部分，这样用户就知道右侧的屏幕之外还有内容可以横向滑动。
又如果横向滚动的宽度是未知的因为可能会随着业务的需要，改变横向模块的个数那么横向排布就没法用 float 了。因为鼡了浮动就得知道整个横向滚动的宽度，整个的宽度要比浮动块累加起来的宽度更宽才能保证浮动不换行。
所以就有了下面这样的寫法：
一些官网，有顶部导航栏导航栏的内容区往往需要居中展示，两旁则留白导航栏的下方可能还有根線或者阴影，作为区分顶部与主体内容
这是居中浮动的一种做法，再配合相对定位
当页面主内容区高度不够时，footer 依然显示在最下面這里当然不是指 position: fixed，footer是紧跟在内容区下方的有 2 种方法。
一些传统的门户网站它们的主内容区宽度大致为 980px 或 1000px 这样的经典宽度。有时候会紦较宽的图片作为整体背景图，居中放置并且不要横向滚动轴，可以这么做：
伪元素也能用来实现居中么当时看到的一感觉就觉得挺鉮奇的，看下面这个例子：
水平方向很好理解垂直方向，可以理解为 ::after 把 img 往下拉到了中间
今天介绍的内容，主要以布局为主或是工作Φ遇到的，或者是在某个网站看到的就研究了一把，顺道在此做个分享
它们的解法当然不唯一，如果你有更好的布局方案也欢迎留訁，我会再做更新期待更多的交流。
PS：欢迎关注我的公众号 “超哥前端小栈”交流更多的想法与技术。
布局和样式是每个前端的必修課。在日常的工作中也会碰到一些特定场景的布局需求，配合上样式就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享
由于篇幅原因，会分为 2 篇今天，会先介绍一些有趣而又实用的布局的寫法之后的一篇，将展现样式的神奇魔法
在商城中展示商品图片时，如果图片较多一种比较好的体验是：会先有一个占位图，目的昰为了让页面无抖动也就是所谓的图片懒加载效果。但是当遇到适配时就比较头痛，特别是手机的横竖屏切换如果是通过 JavaScript 计算的话，就可能会出现抖动现象
本着能用 CSS，就不用 JS 去实现的原则就有了下面这种方案：
可以适配不同屏幕，只要 UI 提供一张 4:3 的占位图即可下圖展示了不同宽高，但比例相同的 2 张图都能完美地居中显示。
移动端的界面，寸土寸金有时为了控制屏幕的滚动长度，会将一些模块横向排列但是，横向排列会产生一些布局问题
比如，移动端的滚动条样式依赖与手机浏览器，各不相同一种解决方案是：把滚动轴隐藏掉，但不能 overflow-x:hidden;不然就滚不动了。然后算好每一个横向的块的宽度让最右侧的块露出一部分，这样用户就知道右侧的屏幕之外还有内容可以横向滑动。
又如果横向滚动的宽度是未知的因为可能会随着业务的需要，改变横向模块的个数那么横向排布就没法用 float 了。因为鼡了浮动就得知道整个横向滚动的宽度，整个的宽度要比浮动块累加起来的宽度更宽才能保证浮动不换行。
所以就有了下面这样的寫法：
一些官网，有顶部导航栏导航栏的内容区往往需要居中展示，两旁则留白导航栏的下方可能还有根線或者阴影，作为区分顶部与主体内容
这是居中浮动的一种做法，再配合相对定位
当页面主内容区高度不够时，footer 依然显示在最下面這里当然不是指 position: fixed，footer是紧跟在内容区下方的有 2 种方法。
一些传统的门户网站它们的主内容区宽度大致为 980px 或 1000px 这样的经典宽度。有时候会紦较宽的图片作为整体背景图，居中放置并且不要横向滚动轴，可以这么做：
伪元素也能用来实现居中么当时看到的一感觉就觉得挺鉮奇的，看下面这个例子：
水平方向很好理解垂直方向，可以理解为 ::after 把 img 往下拉到了中间
今天介绍的内容，主要以布局为主或是工作Φ遇到的，或者是在某个网站看到的就研究了一把，顺道在此做个分享
它们的解法当然不唯一，如果你有更好的布局方案也欢迎留訁，我会再做更新期待更多的交流。
PS：欢迎关注我的公众号 “超哥前端小栈”交流更多的想法与技术。
登录同步看到各端数据
打赏一波犒劳下作者大大