项目经验–布局
警示：养成提取代码的习惯
思考 : 编写结构时要从外往里 依次递进 (分上下结构 左右结构) 写代码思路不能乱 建议 : 把思路写成注释 根据自己的注释实现代码 移动端布局：上下结构、上中下，可以使用绝对定位来完成 .top{ position: absolute; left: 0; right: 0; top: 0; bottom: 90px; overflow: auto; } .bottom{ position: absolute; left: 0; right: 0; bottom: 0; height: 88px; } 项目中个人信息，姓名和电话结构，可以给姓名设置max-width，超出最大宽度则省略号显示 .name { max-width: 200px; /* 以下三行代码功能是超出部分显示省略号*/ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; } android bilibili 文字省略(两行之后) .ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 布局小技巧：flex: 1;width: 0
解释：设置了flex: 1的元素，如果没有设置width，当内部元素的内容大小超出剩余空间时，元素的实际宽度为内容的宽度；当设置了width，并且width小于剩余宽度时，元素的实际宽度等于剩余空间的宽度；设置了width且width大于剩余宽度时，实际宽度为width的值。
未知宽高盒子水平垂直居中 /* 方法一 */ div { position： absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } /* 方法二 */ div { display: flex; justify-content: center; align-items: center; } 移动适配方案 rem + flexible.js(淘宝做法)网易做法：假设1rem = 100px1vw/1vh=100px
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
