认识Web和Web标准publish: false

让flex盒子中的子元素们，居中

flex布局常用的三行代码：

  1.     display: flex;
  2.     justify-content: center; // 子元素在横轴的对齐方式 （左右居中）
  3.     align-items: center;  // 子元素在竖轴的对齐方式（上下居中）

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

  1.     overflow: hidden;
  2.     white-space: nowrap;
  3.     text-overflow: ellipsis;

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

  1.     overflow:hidden;
  2.     text-overflow:ellipsis;
  3.     display:-webkit-box;
  4.     -webkit-box-orient:vertical;
  5.     -webkit-line-clamp:2;

参考链接：https://blog.csdn.net/NN_nan/article/details/55045562

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

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

  1. white-space: pre-wrap;

或者：

  1. white-space: pre-line;

2019-11-12-CSS的逗号和空格

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

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

2019-11-01

人民币价格中的羊角符号，有半角和全角之分：

  • ¥半角

  • ￥全角

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

2019-11-19-鼠标悬停时，弹出提示文字

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

2019-11-27-图片的宽度固定，高度自适应

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

2020-03-26-通过CSS扩大点击热区

  1. .button {
  2.     position: relative;
  3.     /* [其余样式] */
  4. }
  6. .button::before {
  7.     content: '';
  8.     position: absolute;
  9.     top: -10px;
  10.     right: -10px;
  11.     bottom: -10px;
  12.     left: -10px;
  13. }

注意，button 里面不要写 overflow: hidden 属性，否则扩大的热区无效。

参考链接：https://www.jianshu.com/p/b83fc87cb222

2020-10-09-上下滚动，不显示滚动条

  1. .sku_list {
  2.     margin-left: 25rpx;
  3.     display: flex;
  4.     flex-wrap: wrap;
  6.     height: 617rpx;
  7.     overflow: hidden;
  8.     overflow-y: scroll;
  10.     /* 去掉滚动条 */
  11.     &::-webkit-scrollbar {
  12.         display: none;
  13.     }
  14. }

注意，去掉滚动条的那行代码里，建议用display: none;，不要用width: 0;。因为，当你需要设置横向滚动的效果时，display: none;这个属性的效果更好，不会改变容器的size；width: 0;可能会改变容器的size。

参考链接：

2021-05-06-设置页面的宽高，撑满屏幕

一般来说，我们在开发一个页面的时候，默认是希望这个页面的宽高能够撑满屏幕的。代码可以这样写：

  1. .app {
  2.     width: 100vw;
  3.     min-height: 100vh;
  4. }

2021-09-13-JS中插入CSS

代码举例：

  1. new_element = document.createElement("style");
  2. new_element.innerHTML =(".tucao-content p{font-size:18px;}");
  3. document.body.appendChild(new_element);

参考链接：