项目杂项

background 有顺序 background url在前 size在后才有效果

一行情况下排不满需要有填充如何做 1.设置flex:1、flex:auto配合justify-content:between或around让他去自动伸展来填充 2.设置padding值让间隙更自然+

flex-direction:column会有一些坑 flex的伸缩也是指y轴上的伸缩,设置了align-items:stretch让他能填充x轴,有wrap控制宽度来形成版心,版心的居中就要靠设置margin:0 auto来做。

wrap的应用:形成版心的关键样式 下面的样式:content内部每个section都占满一行,wrap设置了版心宽。

这种内容不会铺满一行,不建议这么写

这种内容会铺满一行,建议这么写

https://www.zcfy.cc/article/the-best-way-to-implement-a-quot-wrapper-quot-in-css-css-tricks-3953.html?t=new 新增wrap是最佳实践

居中对齐还没试 display:inline-block; vertical-align:middle;

一般是采用高度等于行高来做(只能是单行文本)

做响应式布局几种实现: 1、弹性布局(基于两根轴,设置好flex属性解决空间分配问题,设置justify-content解决对齐方式问题,简直是傻瓜布局) 2、传统百分比布局 实现思路:使用内容盒子设置宽度百分比、边距百分比 问题:为什么不用边框盒子? 右边空缺过大(分配问题)以及折行的现象(border和padding影响)

img的使用方案 知识点: background-size:contain,等比缩放,尽可能去填充容器,填不满平铺 background-size:cover,等比缩放,尽可能去填充容器,填满后裁掉 利用background-size:contain, 在pc版本设为宽1190(版心)和高332的前提下, 准备多套img,例如640360 2380664 设置容器的max-width: 设备的宽;

flex布局
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。