CSS相关知识

404error
207 阅读6分钟

CSS 是 Cascading Style Sheet（层叠样式表）的缩写，注释为 /* 这是注释 */

CSS 选择器

  1. class 选择器

  2. id 选择器

  3. 元素选择器（标签选择器）

  4. 属性选择器

    span[title]            /* 具有title属性的span */
span[title="abc"]      /* 具有title属性并且值为‘abc’的span */
span[title^="abc"]     /* 属性title的值以‘abc’开头 */
span[title$="abc"]     /* 属性title的值以‘abc’结尾 */
span[title*="abc"]     /* 属性title的值包含‘abc’字符串 */
span[title~="abc"]     /* 属性title的值中有一个值是‘abc’，如：<span title="abc def"></span> */
span[title|="abc"]     /* 属性title的值以‘abc’开头并用‘-’连接，或值为abc，如：<span title="abc-def"></span>  */

  5. 复合选择器

    /* 组合选择器 */
span.ant-btn {
}
.ant-btn.clear {
}

/* 群组选择器 */
div,
span,
.input-number {
}

/* 后代选择器 */
span .ant-btn {
}
div .clear {
}

/* 直接子元素选择器 */
span > .ant-btn {
}
div > .clear {
}

/* 相邻兄弟选择器 */
div + p {
} /* div后面相邻的元素且必须是p元素 */

/* 后续兄弟选择器 */
div ~ p {
} /* div后面的兄弟元素中的p元素 */

  6. 伪类选择器

    div:hover {
} /* 鼠标移入 */
input:focus {
} /* 聚焦时 */
div:empty {
} /* 没有任何子元素的div */
input:checked {
} /* 被选中 */
input:enabled {
} /* 可用状态 */
input:disabled {
} /* 禁用状态 */

div:not(.wrap) {
} /* 不含有wrap这个class的div */

a标签的四种状态及书写顺序：link（访问前），visited（访问后），hover（悬停），active（当前正被点击）

/* 常用组合式写法，同时满足两个条件 */
ul.clear li:first-child {
} /* ul.clear中第一个元素，且该元素是li */
ul.clear li:last-child {
} /* ul.clear中最后一个元素，且该元素是li */
ul.clear li:only-child {
} /* ul.clear中仅有的一个元素，且该元素是li */
ul li:nth-child(n) {
} /* 第n个元素，且该元素是li */
ul li:nth-child(2n) {
} /* 第偶数个元素，且该元素是li */
ul li:nth-child(2n + 1) {
} /* 第奇数个元素，且该元素是li */
ul li:nth-last-child(2n + 1) {
} /* 倒数第n个元素，且该元素是li */

/* 与nth-child的区别在于，选择同类型（同标签、同class）的元素 */
ul.clear li:first-of-type {
} /* ul.clear中第一个li */
ul.clear li:last-of-type {
} /* ul.clear中最后一个li */
ul.clear li:only-of-type {
} /* ul.clear中仅有的一个li */
ul li:nth-of-type(n) {
} /* 第n个li */
ul li:nth-of-type(2n) {
} /* 第偶数个li */
ul li:nth-of-type(2n + 1) {
} /* 第奇数个li */
ul li:nth-last-of-type(2n + 1) {
} /* 倒数第n个li */

  7. 伪元素

    ::after {
}
::before {
}
::first-letter {
}
::first-line {
}

CSS 样式权重（优先级）

类 型 权 重
!important 无 穷
行内样式 1000
id 100
class/属性/伪类 10
元素/伪元素 1
通配符/>/+/~ 0
  • 权重相加，值大的起作用
  • 权重相同时，后写的起作用
  • !important 慎用

CSS 布局

浮动（float: left/right）

  • 脱离文档流
  • 清楚浮动影响
<div class="clearfix">
  <div class="float">float</div>
  <div class="clear>clear both</div>
</div>

.float {
  float: left/right;
}

.clear {
  clear: both/left/right;
} /* 清楚div左/右/两侧的浮动影响 */

/* 通用类，往浮动元素的父元素添加‘clearfix’类 */
.clearfix:after {
  display: block;
  content: '';
  clear: both;
}

定位（position: static/relative/absoulte/fixed/sticky）

  • static 默认定位
  • relative 相对定位，在原来位置预留空白，相对原来的位置偏移
  • absolute 绝对定位，不预留，相对最近非 static 父元素偏移
  • fixed 固定定位，不预留，相对屏幕视口偏移
  • sticky 粘性定位，可以看做是相对定位和固定定位的混合，元素在滚动前为相对定位，之后为固定定位
  • 除 static 外，其余可用 left、right、top、bottom、z-index 改变元素位置

栅格布局（百分比布局）

  • Ant Design 24 栅格布局，把盒子宽按 24 等分的原则划分

flex 布局

  • 容器元素（display: flex）
  • 分主轴（flex-direction）和交叉轴
<div class="wrap">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
</div>

div.wrap {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse; /* 主轴方向 */
  flex-wrap: nowrap | wrap | wrap-reverse; /* 换行 */
  align-items: center; /* 交叉轴对其方式（flex-start | flex-end | center | space-between | space-around） */
  justify-content: center; /* 主轴对其方式 */
}
div.wrap .one {
  flex-basis: 100px; /* 主轴初始宽 */
  flex-grow: 1; /* 缩小比例（容器宽度<元素总宽度时如何收缩） */
  flex-shrink: 1; /* 缩小比例（容器宽度<元素总宽度时如何收缩） */
  flex: flex-grow flex-shrink flex-basis; /* 符合属性 */
}

css 计算属性

div {
  width: calc(100% - 20px);
} /* + - * / 运算 */
div {
  width: calc((100% - 100px) / 3);
}
  • 运算符前后要有空格

CSS 动画（animation，transform，transition）

  1. transform变形
div {
  transform: rotate | scale | skew | translate | matrix; /* 旋转、缩放、斜切、移动 */
}
  1. transition过渡
属 性 描 述
transition-property 需要过渡的 CSS 属性（width、height...）
transition-duration 过渡需要花费的时间，单位秒或毫秒（1s、10ms）
transition-timing-function 过渡函数（liner、ease-in、ease-out、ease-in-out、cubic-bezier）
transition-delay 延迟时间，单位秒或毫秒（1s、10ms）
  1. animation动
属 性 描 述
animation-name 动画名称
animation-duration 动画需要花费的时间，单位秒或毫秒（1s、10ms）
animation-timing-function 过渡函数（liner、ease-in、ease-out、ease-in-out、cubic-bezier）
animation-delay 延迟时间，单位秒或毫秒（1s、10ms）
animation-iteration-count 播放次数（1、2），infinite 无限次
animation-direction 动画方向（normal、reverse、alternate 交替、alternate-reverse 反相交替）
animation-play-state 设置动画状态（running 播放，paused 暂停）
animation-fill-mode 设置 CSS 动画在执行之前和之后如何将样式应用于其目标

Less 基础用法介绍

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

  1. 嵌套式编写
<!--css写法-->
.wrap .inner {
  font-size: 16px;
}
.wrap .title {
  font-size: 16px;
}

<!--less写法-->
.wrap {
  .inner {
    font-size: 16px;
  }
  .title {
    color: #fff;
  }
}
  1. 变量
@fontColor: #666;
.banner {
  color: @fontColor;
}
  1. 父选择器（&）
  2. 导入其他样式文件 @import "common.scss"
  3. Mixins （混合），带参数的混合，循环...
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
div {
  .bordered;
  .bordered(); // 两种写法效果一样
}

.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1)); // 递归调用自身
  width: (10px * @counter); // 每次调用时产生的样式代码
}

div {
  .loop(5); // 调用循环
}

css modules 的介绍

  • 搭配webpack使用，css-loader插件
  • 产生局部作用域的唯一方法，就是使用一个独一无二的 class 的名字，不会与其他选择器重名，只对引用组件有效
  • 使用:global(.className)的语法，声明一个全局规则
<!--局部作用域-->
.custom-btn {
    height: 28px;
    min-width: 72px;
}

<!--全局作用域-->
<!--写法一-->
:global(.anticon) {
    margin-right: 8px;
}
<!--写法二-->
:global {
    .wrapper-input {
      width: calc(100% - 40px);
    }
    .icons {
      position: absolute;
      right: 0;
      top: 4px;
      width: 40px;
    }
}

import style from './index.less';
...
<div className={style.anticon}>局部作用域用法</div>
<div className="wrapper-input">全局作用域用法</div>
avatar
文章
阅读
粉丝