小项目静态网页知识点（防溢出、移动端适配个人记录）

防溢出：溢出内容使用省略号显示：

text-overflow: ellipsis的要求

• white-space: nowrap; → 不换行

• overflow: hidden; → 超出隐藏

• text-overflow: ellipsis; → 超出显示“…”

• 宽度受限 → 文字的容器必须有固定宽度或者 flex:1

• display 可以是 block、inline-blocks

移动端适配：

媒体查询

html{
            font-size: 8.5px; /*手机端默认大小*/
        }
        @media (min-width: 768px) { 
        html { font-size: 12px; } /* 平板或小屏电脑 */
        }
        @media (min-width: 1024px) {
        html {
            font-size: 10px; /* 桌面端固定字体 */
        }
        }
        @media (min-width: 1440px) {
        html {
            font-size: 10px; /* 超大屏固定字体 */
        }
        }

然后下面的代码统一用rem（相对于根元素的大小）

取消span元素因为换行产生的间隙：

将父容器的font-size：0

但这个方法又和防溢出冲突

吸顶导航

定位：sticky，设置top，距离顶端距离，还有z-index

position: sticky;
            top: 0;            /* 吸附距离顶部的距离 */
            z-index: 1000;

position: sticky;
            top: 3rem; /* 紧贴 nav-top 下面，高度和 nav-top 对应 */
            z-index: 999;

flex布局让竖轴内容在最上方对齐：align-items:flex-start