css常用flex布局 flex： <flex-grow> <flex-shrink> <flex-basis>默认值0

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)

多行溢出

单行

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

多行

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

基于 JavaScript 的实现方案

媒体查询

@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

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

动画

transform keyframes

#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 自定义网站字体属性，然后引用到想要应用该字体的元素上。

@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>;
}

示例：

/* 加载一个本地字体 */
@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;
}

position：sticky

在目标区域以内，它的行为就像 position:relative;在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。

width：max-content

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