zoukankan      html  css  js  c++  java
  • css进阶 06-CSS开发积累

    06-CSS开发积累

    #让flex盒子中的子元素们,居中

    flex布局常用的三行代码:

        display: flex;
        justify-content: center; // 子元素在横轴的对齐方式 (左右居中)
        align-items: center;  // 子元素在竖轴的对齐方式(上下居中)
    
     

    #让文字只显示一行,超出显示省略号

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

    #让文字最多只显示两行,超出后显示省略号

    	overflow:hidden;
    	text-overflow:ellipsis;
    	display:-webkit-box;
    	-webkit-box-orient:vertical;
    	-webkit-line-clamp:2;
    
     

    #问题描述:文本内容里自带了换行,但是在前端没有展示出来

    解决办法:增加如下属性即可。

    white-space: pre-wrap;
    
     

    或者:

    white-space: pre-line;
    
     

    #CSS的逗号和空格

    CSS的逗号一般写在()里。不同属性值之间,用的是空格,不是逗号。比如:

    	transform: translate(-50%, -50%);  /* 这种写逗号 */
    	transform: translate(-50%, -50%) scale(0.5);   /* 不同属性值之间,用的是空格 */
    
    	background-size: 100% 100%;  /* 这里是空格,不是逗号 */
    
     

    #

    #价格中的羊角符号,有半角和全角之分:

    • ¥半角

    • ¥全角

    可以看出,半角的宽度更小。考虑到容器的空间一般比较紧张,所以推荐使用半角。

    #鼠标悬停时,弹出提示文字

    参考链接:css实现鼠标悬浮后的提示效果

    #图片的宽度固定,高度自适应

    这个场景下,别用background。直接放img元素就好了,将图片的高度设置为auto

  • 相关阅读:
    I-Cache和D-cache
    socat使用
    反射
    属性方法
    getitem
    文件打开编辑和函数参数
    python3编码问题个人理解
    正文内容 python3编码问题
    进度条制作
    集合关系
  • 原文地址:https://www.cnblogs.com/yzy521/p/14132786.html
Copyright © 2011-2022 走看看