前端基础 - CSS - 《技术》

盒子模型 https://segmentfault.com/a/1190000013069516
BFC https://zhuanlan.zhihu.com/p/25321647
position

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/%E5%AE%9A%E4%BD%8D
https://www.ruanyifeng.com/blog/2019/11/css-position.html
文档流

正常文档流
浮动文档流
定位文档流

flex布局 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
CSS 优先级 https://zhuanlan.zhihu.com/p/41604775
CSS选择器 https://segmentfault.com/a/1190000013424772
CSS3新特性 https://segmentfault.com/a/1190000010780991
CSS样式隔离 https://juejin.cn/post/6844904034281734151#heading-9
CSS性能优化 https://blog.csdn.net/weixin_43883485/article/details/103504171
双飞翼、圣杯布局 https://juejin.cn/post/6844903817104850952
层叠上下文 https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
div居中 https://juejin.cn/post/6844903821529841671
浮动 https://segmentfault.com/a/1190000012739764
如何绘制1px 的线

产生的原因：
devicePixelRatio（设备像素比：物理像素 / 逻辑像素 = 2 或者 3）
也就是说如果DPR是2的设备，我们写的1px 在设备中相当于 1 DPR = 2px或者3px
常用的解决方案
*1、transform 加伪元素

.border{
        position: relative;
}
.border::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border:1px solid red;
    width: 200%;
    height: 200%;
    transform-origin: left top;
    transform: scale(0.5);
}

2、box-shadow

box-shadow: 0px 0px 1px 0px red inset;

3、border-image

border: 1px solid transparent;
border-image: url('./border-1px.png') 2 repeat;

文本超出显示省略号

单行文本

.text {
  width: 100px;
  white-space:nowrap;       /* 使文本不可换行 */
  overflow:hidden;          /* 隐藏溢出部分 */ 
  text-overflow:ellipsis;   /* 显示省略符号来代表被隐藏的文本 */
}

多行文本

方式1

.text {
    width: 100px;
    word-wrap:break-word;         /* 内容存在英语或数字时强制换行 */
    overflow: hidden;             /* 隐藏溢出部分 */
    text-overflow: ellipsis;      /* 显示省略符号来代表被隐藏的文本 */
    display: -webkit-box;         /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置盒子内排列顺序为纵向 */
    -webkit-line-clamp: 2;        /* 限制块元素显示的文本的行数 */
  }

方式2

.text {
      width: 100px;
      position: relative;
      word-wrap:break-word;         /* 英文字符换行 */
      line-height: 20px;
      max-height: 40px;
      overflow: hidden;
    }
    .text::after{
      content: "...";
      position: absolute;
      bottom: 0;
      right: 0;
      padding-left: 40px;
      background: -webkit-linear-gradient(left, transparent, #fff 55%);
      background: -o-linear-gradient(right, transparent, #fff 55%);
      background: -moz-linear-gradient(right, transparent, #fff 55%);
      background: linear-gradient(to right, transparent, #fff 55%);
    }

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

https://juejin.cn/post/6844903693142196238

// html部分(这部分不做变化,下面例子直接共用)
<body>
  <div id='container'>
    <div id='center' style="width: 100px;height: 100px;background-color: #666">center</div>
  </div>
</body>

方法1：绝对定位与负边距实现（已知高度宽度）

// css部分
 #container {
      position: relative;
    }
 #center {
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;   // 向上和左 移动自身宽度的一半
    }

方法2：绝对定位与margin:auto（已知高度宽度）

这种方式无需知道被垂直居中元素的高和宽，但不能兼容低版本的IE浏览器。

 #container {
      position: relative;
      height:100px; //必须有个高度
    }
 #center {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;//注意此处的写法
    }

方法3：绝对定位+CSS3(未知元素的高宽)

利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中

  #container {
      position: relative;
    }
  #center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

方法4：flex布局

利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

   #container {  //直接在父容器设置即可
      height: 100vh;//必须有高度
      display: flex;
      justify-content: center;
      align-items: center;
    }

方法5 flex/grid与margin:auto(最简单写法)

容器元素设为 flex 布局或是grid布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。

  #container {
      height: 100vh;//必须有高度
      display: grid;
    }
  #center {
      margin: auto;
    }