CSS高级技巧

2022-11-02 14:45:21 浏览数 (1)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情 >> # CSS知识框架

CSS知识框架

CSS高级技巧

鼠标样式：cursor

定义:cursor : default 小白 | pointer 小手 | move 移动 | text 文本

轮廓： outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 outline : outline-color ||outline-style || outline-width

防止拖拽文本域：resize

定义:resize：none

vertical-align 垂直对齐

只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

溢出

word-break:自动换行

  1. normal 使用浏览器默认的换行规则。
  2. break-all 允许在单词内换行。
  3. keep-all 只能在半角空格或连字符处换行

text-overflow 文字溢出

  1. ellipsis : 当对象内文本溢出时显示省略标记（...）
  2. clip : 不显示省略标记（...），而是简单的裁切

过渡transition:transition: 要过渡的属性 花费时间 运动曲线 何时开始;

2D变形transform
  1. 移动 translate(x, y)
  2. 缩放 scale(x, y)
  3. 缩放 scale(x, y) 旋转 rotate(deg) transform:rotate(45deg)
  4. 调整元素转换变形的原点：transform-origin transform-origin: 10px 10px
  5. 倾斜 skew(deg, deg) transform:skew(30deg,0deg);选择器

复合选择器

  1. 交集选择器
  2. 并集选择器:逗号隔开，集体分明
  3. 后代选择器:当标签发生嵌套时，内层标签就成为外层标签的后代。
  4. 子元素选择器:比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。 5.属性选择器: div[class^=font]
  5. E::first-letter文本的第一个单词或字（如中文、日文、韩文等） 2. E::first-line 文本第一行； 3. E::selection 可改变选中文本的样式； 伪元素选择器

标签选择器

  1. 元素选择器 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
  2. 类选择器 .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  3. 多类名选择器:用逗号分隔
  4. id选择器:只能使用一次 5.通配符选择器: * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 6.伪类选择器
css jquery

0 人点赞