CSS常见样式

常见字体样式

/* 一个英文单词太长允许换行 */
overflow-wrap: break-word;

/* 行内太长允许换行 */
word-break: break-all;

/* 文本阴影： x, y, blur, color */
text-shadow: 1px 1px 2px black;
/* 多重阴影 */
text-shadow: 1px 1px 2px black, 1px 1px 2px blue, 1px 1px 2px blue;

/* 首字母缩进 */
text-indent: 2em;

/* :not() 不包含被选中的元素 */

:not(p) {} /* 选择所有不是段落（p）的元素 */
p:not(.fancy) {} /* 类名不是 `.fancy` 的 <p> 元素 */
body :not(div):not(span) {} /* 既不是 <div> 也不是 <span> 的元素 */
body :not(.crazy, .fancy) {} /* 类名不是 `.crazy` 或 `.fancy` 的元素 */

文字溢出部分显示为省略号

单行文本

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

多行文本

overflow: hidden;             /* 隐藏溢出部分 */
text-overflow: ellipsis;      /* 显示省略符号来代表被隐藏的文本 */
display: -webkit-box;         /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置盒子内排列顺序为纵向 */
-webkit-line-clamp: 2;        /* 限制块元素显示的文本的行数 */

显示textarea换行及空格

通过添加css样式来显示换行

.pre-line {
   white-space: pre-line;
}

通过replace手动替换

// 换行转换
let text = content.replace(/\n/g,'<br/>');
// 空格转为换
let text = content.replace(/ /g,' &nbsp');

首字母特殊样式

1、 ::first-letter 选中第一行第一个字母设置特殊样式

p::first-letter {
  color: red;
}

2、单词首字母大写

• js做法过滤：

function capitalizeFirst(str) {
    return str.toLowerCase().replace(/(|^)[a-z]/g, function(L){ L.toUpperCase() });
};

• css方案：

text-transform: capitalize | uppercase | lowercase | none

• none：默认。
• capitalize： 单词首字母大写。
• uppercase：仅有大写字母。
• lowercase：仅有小写字母。

.capitalize-first{
  text-transform: capitalize;
}

3、首字母下沉

• 1、利用伪元素::first-letter然后float

p::first-letter { 
  float: left; 
  margin: 0 .2em 0 0; 
  font-size: 5em; 
  color: #c69c6d; 
}
p {clear:both;} /*清除首字的浮动，避免影响p标签的高度与其相叠加*/

• 2、利用initial-letter属性:需要配合first-letter一起使用

p::first-letter { 
  color: #c69c6d;
  initial-letter:3 1;/*第一个表示行高，第二个表示沉度*/
}

自定义滚动条

/*滚动条整体样式*/
*::-webkit-scrollbar {
  width: 8px; /*定义纵向滚动条宽度*/
  height: 8px; /*定义横向滚动条高度*/
}

/*滚动条内部滑块*/
*::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: hsla(220, 4%, 58%, 0.3);
  transition: background-color 0.3s;
}

/*鼠标悬停滚动条内部滑块*/
*::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/*滚动条内部轨道*/
*::-webkit-scrollbar-track {
  background: #ededed;
}

0.5像素边框

• 利用缩放scale处理

利用伪类和绝对定位，设置一个宽高为200%的元素，border为1px，缩放0.5，边框就为0.5了。

div::after{
  position:absolute;
  top:0;
  left:0;
  z-index: 1;
  display: block;
  content:"";
  width:200%;
  height:200%;
  border:1px solid red;
  -webkit-transform : scale(0.5);
  transform : scale(0.5);
}

• 伪类 + transform

/* 利用 -webkit-min-device-pixel-ratio 获取屏幕 dpr 值 */

.border_1px:before{
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
  width: 100%;
  background-color: #000;
  transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .border_1px:before{
        transform: scaleY(0.5);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
    .border_1px:before{
        transform: scaleY(0.33);
    }
}

• 利用background-image背景渐变

渐变一半透明一半有颜色，但只能实现单边。

div::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  content: "";
  width: 1px;
  height: 100%;
  background-image: linear-gradient(0deg, transparent 50%, #f50404 50%);
}

• 利用box-shadow阴影

div {
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

• 动态设置meta缩放比

通过设置缩放，让CSS像素等于真正的物理像素。

onst scale = 1 / window.devicePixelRatio;
const viewport = document.querySelector('meta[name="viewport"]');
if (!viewport) {
    viewport = document.createElement('meta');
    viewport.setAttribute('name', 'viewport');
    window.document.head.appendChild(viewport);
}
viewport.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

边框实现特殊形状

通过宽高、边框、圆角、颜色来调整他们之间的比例来实现各种特殊形状。

/* 直角三角形 */
.triangle {
  width: 0;
  height: 0;
  border: 30px;
  border-style: solid;
  border-color: black black transparent transparent;
}

/* 等腰三角形 */
.triangle {
  width: 0;
  height: 0;
  border: 30px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/* 等腰梯形 */
.triangle {
  width: 20px;
  height: 20px;
  border: 20px;
  border-style: solid;
  border-color:#e66161 #f3bb5b #94e24f #85bfda;
}

/* 不规则三角形 */
/* 通过调整border四个边框不同的宽度来实现 */
/* 可以实现各种特殊形状 */
/* 加上border-radius 还可以实现扇形等特殊形状 */

/* 首场等腰三角形 */
.triangle {
  width: 0px;
  height: 0px;

  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #e66161;
  border-bottom: 0;
}

/* 不规则直角三角形 */
.triangle {
  width: 0px;
  height: 0px;

  border-top: 60px solid transparent;
  border-right: 30px solid #e66161;
  border-left: 0;
  border-bottom: 0;
}

/* 不规则三角形 */
.triangle {
  width: 0px;
  height: 0px;
  border-left: 15px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid #e66161;
  border-bottom: 0;
}

/* 对称不规则三角形 */
.triangle {
  width: 0px;
  height: 0px;
  border-left: 15px solid transparent;
  border-right: 50px solid transparent;
  border-top: 30px solid #e66161;
  border-bottom: 30px solid #85bfda;
}

/* 不规则梯形 */
.triangle {
  width: 0px;
  height: 0px;
  border-top: 15px solid #e66161;
  border-right: 15px solid #e66161;
  border-left: 15px solid transparent;
  border-bottom: 0;
}

/* 不规则四边形 */
.triangle {
  width: 0px;
  height: 0px;
  border-top: 60px solid #e66161;
  border-right: 30px solid #e66161;
  border-left: 80px solid transparent;
  border-bottom: 50px solid transparent;
}

/* 扇形 */
.triangle {
  width: 0px;
  height: 0px;

  border-top: 100px solid #e66161;
  border-right: 100px solid #f3bb5b;
  border-left: 100px solid #94e24f;
  border-bottom: 100px solid #85bfda;
  border-radius: 100px;
}

/* 拱形 */
.triangle {
  width: 40px;
  height: 30px;

  border-top: 30px solid #e66161;
  border-right: 30px solid #e66161;
  border-left: 30px solid #e66161;
  border-bottom: 0px solid transparent;
  border-radius: 15px;
}

/* 不规则圆形 */
.triangle {
  width: 0px;
  height: 0px;

  border-top: 100px solid #e66161;
  border-right: 100px solid #f3bb5b;
  border-left: 100px solid #94e24f;
  border-bottom: 100px solid #85bfda;
  border-radius: 20% 80% 30% 70%/80% 70% 30% 20%;
}

动态高度实现展开收起动画

可以使用max-height代替height:auto实现动态的展开收起动画。 因为设置了最大高度，所以在高度小于最大高度时，动画可能会延迟。

.box {
    max-height: 0;
    transition: max-height .5s;
}
.box-active {
    max-height: 300px; // 最大高度
}

flex布局滚动条失效问题

给元素设置flex为1时，自身元素以及子元素都无法实现滚动条效果，原因是设置felx:1子元素溢出父级大小，导致overflow失效。

1、设置flex:1;，子元素超出，自己设置滚动条，

    flex: 1;
    overflow: auto;
    width: 0;    //若横向需要滚动条
    height: 0;    //若纵向需要滚动条

2、设置felx:1;，子元素的子元素超出，给子元素设置滚动条，直接加overflow: hidden;

/* 自己 */
flex:1;
overflow: hidden;

/* 子元素 */
width: 100%;
overflow: auto;