css杂项

• CSS3四个自适应关键字：fill-available、max-content、min-content、fit-content
  • max-content
    • 表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行
    • 如 max-content;
• 边框
  • 圆角
    • 可以分别控制左上、右上、左下、右下四个位置的圆角：border-radius: 4px 0 0 0;
    • 根据实际需要，有时需要内外层设置相同的圆角才能显示完美，比如一个table被包在一个div中时，内外都要设置原角，如果外层div不设置的话，会露出外层div的边框和背景色。
  • 处理重叠
    • 只需要设置div的margin值为边框值的相反数就行
    • 注意交接的两个div，只要一个设置margin值为边框值的相反数就行了，比如两个div左右相邻，只需要设置左div的右边框为负数，或者设置右div的左边框为负数即可。
• 阴影
  • 该属性是一个用逗号分隔阴影的列表（多个阴影进行叠加），每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
  • box-shadow: [inset] h-shadow v-shadow [blur] [spread] [color] [inset];
    • inset代表向内发散（默认没有设置即为outset，即向外发散），放在样式最前面或最后面的位置，都可以。
    • h-shadow（position x）代表水平方向的偏移量，注意是把四个方向的阴影看成一个整体，一起偏移。正数代表往右偏，负数代表往左偏。
    • v-shadow（position y）代表垂直方向的偏移量，注意是把四个方向的阴影看成一个整体，一起偏移。正数代表往下偏，负数代表往上偏。
    • spread代表阴影本身的宽度，正数时相当于扩大一圈
    • blur代表阴影向外模糊、渐变发散的宽度
  • 阴影并不能直接控制上下左右的显示与否
    • 但可以通过偏移来让一侧消失（缺点是偏移后一侧的阴影就会缺一小段，因为偏移后阴影没有补上）
    • 然后通过设置两个阴影效果进行叠加来模拟偏移后同时显示或不显示相对方向的两个阴影（因为一组阴影效果要不同时控制四边使用相同的效果，要不只能控制一个角的两个边使用相同的效果）
    • 比如下面的样式就可以通过两个阴影效果的叠加，让div有左、右、下三边的阴影效果。
      • box-shadow: -1px 1px 1px 0px rgba(0,0,0,.2), 1px 1px 1px 0px rgba(0,0,0,.2);
  • Box-shadow generator
    • 先要在左边点加号新建一个，然后再尝试设置和查看阴影效果
    • 可以新建多个阴影
    • 可以手动改参数来看效果，也可以直接用鼠标拖动当前选中的阴影来自动生成配置。
  • 注意
    • 如果有圆角，那么使用over-flow可以让圆角也拥有阴影？
    • div和table、td都可以设置阴影效果，但是貌似table的阴影效果在edge浏览器中无效。
• 自动隐藏超出容器的内容并显示省略号

.ellipsis {
  white-space: nowrap;/* 规定文本是否折行 */ 
  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
  text-overflow: ellipsis;/* 规定超出的内容文本省略号显示，通常跟上面的属性连用，因为没有上面的属性不会触发超出规定的内容 */
}

• ::before和::after伪元素

  • 和超链接上各个状态伪元素类似，这两个伪元素并不是真实的标签、类名，可以认为是某个标签或元素的一个状态
  • ::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容，比如用于实现icon类型的按钮或图标的样式，这样就可以不使用图片，而纯粹用css样式来绘制图标。
  • 当然还有其他用途，比如清除浮动、做出各种图形效果（比如利用边框圆角来模拟三角形、六角形）等。
  • 也可使用display样式来控制其显示及隐藏
  • 貌似xpath无法定位伪元素，因为伪元素只存在于CSS中？只是用于显示用的，实际不存在于DOM中？

  .mdsp.mdsp-defaults .iconMdsp.addCircle:before {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      speak: none;
      text-decoration: none;
      text-transform: none;
      font-family: "mdspcssregular" !important;
      content: "�";
  }
  

• CSS3的transform属性

  • transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行移动(translate)、旋转(rotate)、缩放(scale)或倾斜(skew)
  • 使用translate(x, y)、translateX(x)、translateY(y)进行位置平移
  • 使用scaleX(x)、scaleY(y)、scale(x, y)进行伸缩转换
    • scale(X轴缩放倍数，Y轴缩放倍数) - 基于原来的位置进行伸缩变换，其中x代表沿X轴的伸缩倍数，y代表沿Y轴的伸缩倍数；0~1: 缩小；> 1：放大
  • 使用rotate(旋转角度)进行旋转
    • rotate(旋转角度) - 元素以图形中心点为旋转中心，正值-顺时针旋转；负值-逆时针旋转；

• 其他

  • 有时候按钮点击后，如果不点页面的其他地方的话，按钮会一直有个外框。这是因为没有取消该按钮的焦点，该样式来自于border。
  • 图片和文本对齐
    • 文本外面要套上span或者a，然后图片和文本的vertical-align都要是middle（只在父标签中设置的话，其中的文本并不会有这个样式，还会是默认的baseline）。
  • 使用z-index控制重叠的元素的优先级。值越大越靠前。如果想要保证某个元素在前面，可以给他设置一个很大的值，比如99999.
  • 颜色设置如果使用rgba，最后一个0~1的数字代表透明度。但是要注意，如果背景色使用了透明度，并且上下层有重叠，那么透明度也会叠加，会导致相同的透明度设置，但看起来颜色不同。