css常用 - 技术栈

flex布局

flex： <flex-grow> <flex-shrink> <flex-basis>默认值0 1 auto
flex-grow大小flex 增长系数
flex-shrinkflex 元素的收缩规则
flex-basis在主轴方向上的初始
flex-direction主轴的方向
flex-flowflex-direction 和 flex-wrap 的简写
flex-wrap单行显示还是多行显示
order布局时的顺序

对齐属性。

align-content $弹性盒子布局$ 的纵轴、 $网格布局$ 的主轴的对齐
align-items $弹性盒子布局$ 交叉轴的对齐、 $网格布局$ 块向轴上的对齐
align-self对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items的值
justify-content $弹性盒子布局$ 主轴的对齐、 $网格布局$ 的行向轴分配
place-content是align-content和 justify-content的简写
row-gap行元素之间的间隙gutter大小
column-gap列元素之间的间隙gutter大小
gap是 row-gap和 column-gap的简写

有用的选择器

p:first-of-type 、p:nth-of-type(2)：其父级第一个元素（需要为p）
p:first-child、p:nth-child(2)：其父级下第一个p元素
.className:not(p)

多行溢出

单行

css 复制代码

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行

css 复制代码

-webkit-line-clamp: 2;//（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）
display: -webkit-box;//（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
-webkit-box-orient: vertical;//（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
overflow: hidden;//（文本溢出限定的宽度就隐藏内容）
text-overflow: ellipsis；

基于 JavaScript 的实现方案

媒体查询

css 复制代码

@media (min-width: 30em) and (max-width: 50em) { ... }

@media (30em <= width <= 50em ) { ... }

消除浮动

1、父级div定义overflow:hidden、overflow:auto、定义height
2、结尾处加空div标签clear:both
3、父级div定义伪类:after

css 复制代码

.clearfloat:after{
  display:block;
  clear:both;
  content:"";
  visibility:hidden;
  height:0
}

js操作css

获取/设置 CSS 样式

ini 复制代码

const element = document.getElementById("example");
const style = window.getComputedStyle(element);

element.style.backgroundColor = "red";

类名、样式名

ini 复制代码

const element = document.getElementById("example");
element.classList.add("active");
element.classList.remove("active");
element.classList.toggle("active"); // 如果存在类名 active ，则删除，否则添加

element.className = "test";

尺寸、位置

ini 复制代码

const element = document.getElementById("example");
console.log(element.clientWidth);
console.log(element.clientHeight);
console.log(element.offsetWidth);
console.log(element.offsetHeight);

element.style.width = "200px";
element.style.height = "100px";

动画

transform keyframes

css 复制代码

#charactor1 {
  animation: 3s linear 1s infinite cyclic1;
}
@keyframes cyclic1 {
  from {
    transform: rotate(0deg) translateX(200px);
  }
  to {
    transform: rotate(360deg) translateX(200px);
  }
}

#charactor2 {
  animation: 3s linear 1s infinite cyclic2;
}
@keyframes cyclic2 {
  from {
    transform: translateX(200px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(360deg);
  }
}

@font-face 自定义网站字体属性，然后引用到想要应用该字体的元素上。

css 复制代码

@font-face {
  font-family: <font-name>;
  src: local( <family-name> ) | <url> [format("formatName")][,<url> [format("formatName")]]*;
  unicode-range: <unicode-range>;
  font-variant: <font-variant>;
  font-feature-settings: <font-feature-settings>;
  font-variation-settings: <font-variation-settings>;
  font-stretch: <font-stretch>;
  font-weight: <font-weight>;
  font-style: <font-style>;
  font-display: <font-display>;
}

示例：

css 复制代码

/* 加载一个本地字体 */
@font-face{
  font-family: myFont;
  src: local('Microsoft YaHei');
}
/* 加载多个本地字体 */
@font-face{
  font-family: myFont;
  src:  local(黑体), local("Microsoft YaHei"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local(sans-serif);
}
/* 应用自定义字体 */
.box{
  font-family: myFont;
}

欢迎关注我的前端自检清单，我和你一起成长