css经常遇到的问题的解决方案(持续更新)

margin 左右上下相邻元素外边距重叠问题

• 相邻边距以大的为准
• 浮动元素不会发生边距重叠问题

单行文字省略号显示的条件

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
white-space: nowrap;

多行文字省略号显示的条件

滚动条样式修改

::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

去除ul li标签样式

ul,li{ padding:0;margin:0;list-style:none}

去除input默认样式

input{
    outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 13px 14px;
    width: 620px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
}

定位居中

transform: translate(-50%, -50%);

字体图标和背景的透明度互不影响

背景设置透明度字体不透明
如果想将背景设置透明度，但是又要保证其中的字体透明度不变，可以通过background属性background:rgba(255,255,255,0.6);来设置，背景透明度为0.6，字体透明度不变。

如果需要设置字体的透明度，可以对color的rgba属性进行设置。

.div1{color:rgba(255,255,255,0.5)}

字体居中

• 行内元素

  • vertical-align 垂直方向
  • text-align 水平方向

滚动条位置置底

document.getElementsByClassName("el-dialog__body")[0].scrollTop = 350;

文字折行显示

white-space: normal;
word-wrap: break-word;
word-break: break-all;

contenteditable

如一个普通的block元素上加个contenteditable="true"就实现编辑，出现光标了

想要样式的宽高自适应屏幕的但在宽高比不平衡时，使用最大宽高,则宽高使用最小的值来限制最大

max-width: 100px
max-height: 100px

如何使图片在不改变宽高比的情况下适应页面

object-fit: contain;

图片过长自动截取

object-fit: cover;
max-height: 298px;

前端页面水印

export function __waterDocument({
  container = document.body,
  width = '200px',
  height = '150px',
  textAlign = 'center',
  textBaseline = 'middle',
  font = "10px Microsoft Yahei",
  fillStyle = 'rgba(220,20,60, 0.2)',
  // fillStyle = 'rgba(230, 230, 230, 0.2)',
  content = '保密水印',
  rotate = 45,
  zIndex = 1000
} = {}) {
  const args = arguments[0];
  const canvas = document.createElement('canvas');
  canvas.setAttribute('width', width);
  canvas.setAttribute('height', height);
  const ctx = canvas.getContext("2d");
  if (ctx === null) {
    console.error("this browser is not support canvas.");
    return;
  }
  ctx.textAlign = textAlign; // 文本对齐设置。可能的值：start，end，left，right或center。默认值为start。
  ctx.textBaseline = textBaseline; // 基线对齐设置。可能的值：top、hanging、middle、alphabetic、ideographic、bottom。默认值为alphabetic
  ctx.font = font; // 绘制文本时使用的当前文本样式。此字符串使用与CSS font属性相同的语法。默认字体为 10px sans-serif。
  ctx.fillStyle = fillStyle;
  ctx.rotate((Math.PI / 180) * rotate);
  ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
  const base64Url = canvas.toDataURL();
  const __wm = document.querySelector('.__wm');
  const watermarkDiv = __wm || document.createElement("div");
  const styleStr = `
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:${zIndex};
      pointer-events:none;
      background-repeat:repeat;
      background-image:url('${base64Url}')`;
  watermarkDiv.setAttribute('style', styleStr);
  watermarkDiv.classList.add('__wm');
  if (!__wm) {
    container.style.position = 'relative';
    container.insertBefore(watermarkDiv, container.firstChild);
  }
  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  if (MutationObserver) {
    let mo = new MutationObserver(function () {
      const __wm = document.querySelector('.__wm');
      // 只在__wm元素变动才重新调用 __canvasWM
      if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
        // 避免一直触发
        mo.disconnect();
        mo = null;
        __canvasWM(JSON.parse(JSON.stringify(args)));
      }
    });
    mo.observe(container, {
      attributes: true,
      subtree: true,
      childList: true
    });
  }
}

浏览器显示11px字体问题

.mini-font{ 
    font-size: 12px;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
   }