前段样式的一些积累(一)

超、凢脫俗 2023-07-06 13:07 29阅读 0赞

1.  关于区域图片未加载时下方区域内容占位导致的抖动感。

overflow: hidden;
     height: 0;

1.  超出内容用…表示。

overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis

1.  vue中使用router-link标签时，如果没有使用to属性，会造成页面样式混乱。
2.  当使用width：100%时，若加入padding，需使用box-sizing border-box；以避免宽度撑出页面。
3.  一些常用样式![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70 2]
4.  关于浮动的小知识![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70 3]
5.  浏览器自带三种弹框

// 第一种
    alert();
    //第二种，
    //【返回值】   点击确定   true；点击取消   false
    confirm("点我看看");
    //第三种，弹出带有输入框的提示框
    //【参数】 第一个：要在提示框上显示的内容；第二个：输入框中默认值
    //【返回值】点击确定   输入的内容；点击取消   null
    prompt('请输入你想要的数字','9');

1.  背景颜色渐变

background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7))

1.  元素垂直居中的几种方法

// 一
    display: flex;
    margin: auto;
    //二
    display: grid;
    margin: auto;
    //三
    position: absolute;
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto;
    //四
    position: absolute;
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200220121131478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200220143403586.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200220144655305.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200220152955961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA=,size_16,color_FFFFFF,t_70