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-contentalign-contentjustify-content的简写
  • row-gap行元素之间的间隙gutter大小
  • column-gap列元素之间的间隙gutter大小
  • gaprow-gapcolumn-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;
}

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

相关推荐
星离~1 小时前
css—轮播图实现
前端·css
布兰妮甜2 小时前
如何使用 Tailwind CSS 构建响应式网站:详细指南
前端·css·tailwind css
shawya_void3 小时前
javaweb-day01-html和css初识
前端·css·html
思考的橙子3 小时前
CSS之3D转换
前端·css·3d
Dragon Wu6 小时前
TailwindCss 总结
前端·css·前端框架
徊忆羽菲8 小时前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲8 小时前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
前端Hardy16 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
彪82520 小时前
第十章 JavaScript的应用
css·html5
好青崧20 小时前
CSS 样式入门:属性全知晓
前端·css·tensorflow