变换

transform 变化属性

• translate 位移

  • transform: translateX(x); 沿 X 轴方向平移 正值右移 负值左移

  • transform: translateY(y);沿 Y 轴方向平移 正值下移 负值上移

  • transform: translate(x, y);沿 X 轴和 Y 轴同时平移

• scale 缩放

  • scale()缩放函数中的参数是以倍数为基础的，1 代表当前大小

  • 1 以上的“正数”为当前大小的倍数。

  • 1 以下 0 以上的“正数”为缩小的倍数。

  • 0 倍为消失

  • 当参数值为负值的时候，元素进行镜面翻转，同样倍数会起作用

• rotate 旋转

• skew 扭曲

  • 填写旋转角度，deg 单位为旋转角度，角度可以为正值或负值

  • skew()默认为 X 轴倾斜函数

变换函数的执行顺序

• 当变换属性需要叠加使用时，不可以生明多个 transform 属性，而是需要把所有要使用的变换函数添加在一个 transform 属性中，用空格分隔。

• 注意顺序不同效果不同

transform-origin

• 属性是可以改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处

• transform-origin 属性取值有两种：一种是“长度值”；另外一种是“关键字”

3D

• perspective 定义透视效果 模拟人眼睛到 3D 变化元素之间的距离

  • perspective 属性值越大，元素的变形就越小。

  • perspective 属性值越小，元素的变形就越大。

  • 透视距离只能定义在 3D 变化的父元素上

• transform-style：preserve-3d来使其变成一个真正的3D图形

• 3d变换函数

  • transform:rotateX(deg);

  • transform:rotateY(deg);

  • transform: translateZ(正值) 沿z轴向前（接近模拟视觉的距离）

  • transform: translateZ(负值) 沿z轴向前（远离模拟视觉的距离）

动画

@keyframes 关键帧

• css 中的@规则，通过在动画序列中定义关键帧的样式，来控制 CSS 动画序列中的步骤

animation 定义动画的属性

• animation-name`属性就是指定动画要使用哪一个关键帧

• animation-duration`属性代表一个动画周期的时长

• animation-timing-function 动画运动的方式

  • linear 匀速

  • steps() 阶梯

• animation-delay`属性动画的延迟时间和之前过渡的延迟

• animation-fill-mode`:设置动画结束时盒子的状态

  • forwards`保持动画结束后的状态

• animation-direction 动画执行顺序

  • reverse 反向

• animation-iteration-count`属性主要用来定义动画的播放次数

  • 直接写没有单位的数字

  • infinite 无限次

简写方式

• animation: 动画执行时间 延迟时间 执行关键帧名称 运动方式 运动次数 结束状态;

• 最简方式 animation: 动画执行时间 执行关键帧名称;

• 执行时间和延迟时间顺序不可调整

过渡

transition 设置过渡属性

• transition-property 过渡样式

• transition-duration 过渡时间

• transition-timing-function过渡方式

• transition-delay 延迟时间

transition：过渡时间 延迟时间 过渡方式 过渡样式

定位

position: relative 定义元素相对定位

• 子元素相对定位不影响父级元素，依然在文档流中，对父级有撑起作用

• 元素相对定位不会对兄弟元素造成影响，如果位置重叠会遮盖

• 元素相对定位后相对的是自己没有移动之前，在文档流中的原位置

• 只有top和left有效果，因为它相对自己原位置的左上角移动的

• 使用场景

  • 当前元素需要距离父元素左上角一定位置

  • 兄弟元素需要遮盖效果的时候

  • 移到父级外面的一部分遮罩层

position: absolute 定义元素绝对定位

• 元素脱离文档流，不再撑起父级高度，父级高度坍塌，但是无法使用清除浮动恢复，因此如使用绝对定位，父元素一定要有宽高

• 绝对定位参照的是距离自己最近的有定位属性的祖先（含父级）元素

• 使用绝对定位后，top、left、bottom、right都会生效，但如果有重叠，会优先使用top和left

• 使用场景

  • 需要叠加的效果

  • 轮播图的控制符

  • 价格小标签

  • 背后有图，图上有字

  • 下拉菜单

  • 遮罩层

• 注意

  • 应用广泛，基本在每个页面都会用得到

  • 不要用它做布局（多用于做小工具）

• 元素居中的方式

  • 内联元素在块级中居中

    .d1 {
      width: 400px;
      height: 200px;
      /* 水平居中 */
      text-align: center;
      /* 垂直居中 */
      line-height: 200px;
      background-color: yellow;
    }
    .d1 span {
      background-color: red;
    }
    

  • 块级元素在块级里居中

    .d2 {
      width: 400px;
      height: 200px;
      background-color: blue;
      position: relative;
    }
    .d2 div {
      width: 120px;
      height: 100px;
      background-color: greenyellow;
      /* 定位在父元素中 */
      position: absolute;
      top:50%;
      /* 回调子元素高度的一半 */
      margin-top: -50px;
      left: 50%;
      /* 回调子元素宽度的一半 */
      margin-left: -60px;
    }
    

    position: fixed 定义元素固定定位

• 默认参照浏览器窗口定位，因此标签写在任何位置都可以

• 直接使用top,bottom,right,left 进行位置调整

• 可配合 z-index 层级一起使用

• 当元素固定定位之后，元素会脱离文档流，对父级没有支撑效果

渐变

background-image: linear-gradient() 线性渐变

• 角度, 颜色1 范围起始位置 范围结束位置，颜色2 ….

• 起始范围 第一个颜色 起始默认0 ，最后一个颜色的结束范围 默认是100%

background-image: radial-gradient(）径向渐变

• x轴半径 y轴半径 at x轴圆心起点 y轴圆心起点, 颜色1 起始范围 结束范围, 颜色2….

• x轴半径和y轴半径相同时，渐变成圆形

选择器

属性选择器

• [属性名]

• [属性名=属性值]

• [属性名^=以xx开头属的性值]

• [属性名$=以xx结尾的属性值]

• [属性名*=含有xx字段的属性值]

• [属性名~=独立存在xx字段的属性值]

目标伪类选择器

• 目标元素:target

结构性伪类

• 父元素>子元素:first-child 第一个子元素

• 父元素>子元素:last-child 最后一个子元素

• 父元素>子元素:nth-child(n) n代表父元素的第n个子元素

• 父元素>子元素:nth-child(xn) xn代表父元素的x的倍数子元素

• 父元素>子元素:nth-child(odd) 代表父元素的奇数子元素

• 父元素>子元素:nth-child(even) 代表父元素的偶数子元素

• 父元素>子元素:only-child代表父元素的唯一子元素

• 父元素>子元素:not(不要的选择器) 除了某个选择器的其它子元素

单位

长度单位

• px、pt

• em、rem、%、vw、vh

时间单位

• s 秒

• ms 毫秒

角度单位

• deg

颜色

英文颜色

• transparent 透明色

十六进制y颜色

• rrggbb

  • 0-9 a-f

rgb()和rgba()

• 0-255

• a 取值范围0-1

hsl()和hsla() 饱和度明度亮度

尺寸

宽度 width

• min-width 最小宽度

• max-width 最大宽度

高度 height

• min-height 最小高度

• max-height 最大高度

边框

border：边框宽度 边框样式 边框颜色 （没有顺序）

可以单独指定边框方向

• top

• bottom

• right

• left

注意边框是占据元素空间的

元素分类

块级元素

• div、p、h1-h6、ul、ol、li、table…

内联元素（行内元素）

• 普通的内联元素

  • span、a、i、b、u

• 行内块级显示的内联元素

  • input、img、button

  • 幽灵空白节点

    • 把img元素变成块级元素 display:block,这个方法比较好，并且不会影响其他元素

    • 父元素，将font-size字号统一为0，也可以清除幽灵空白节点，但父元素中有其他带有文字的元素，也会将文字变为0大小，会影响其他元素

块级元素和内联元素的区别

• 宽高

  • 块级元素可以设置宽高

  • 内联元素设置宽高无效

• 占位

  • 块级元素自占父级元素的一行，默认宽度为父元素宽度的100%

  • 依靠内部文字撑开，文字多内联元素就大

• 排列

  • 块级元素从上往下排列

  • 内联元素从左向右排列

• 内外边距

  • 块级元素设置内外边距均有效

  • 内联元素设置上下内外边距无效，左右有效

元素显示属性 display

• display: block;以块级元素方式显示

• display: inline;以内联元素方式显示

• display: inline-block;属于行内元素，但以块级显示，俗称行内块

• display: none;不显示

显示和隐藏属性

完全消失

• display: none 消失

  .xlcd {background-color: red;}

  .xlcd > div{
    background-color: aqua;
    width: 200px;
  }
  /* 单独写鼠标移入的伪类 */
  /* 鼠标移入.xlcd  是其>ul出现 */
  .xlcd:hover > ul{
    display: block;
  }
  .xlcd ul {
    /* 去除内外边距 */
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: yellow;
    /* 先隐藏 */
    display: none;
  }
  

• display: block 显示

隐藏占位

• visibility: hidden;隐藏

• visibility: visible; 显示

透明度

• opacity: 0; 完全透明

• opacity: 1;完全不透明

放大缩小

• transform: scale(0) 缩小到0

• transform: scale(1) 缩放正常大小

字体

font-size 定义字号

• px 绝对单位

• rem 参照的是html根标签的字号大小，设置其倍数

• em参照的是父元素的字体大小，设置其倍数

• 谷歌浏览器默认字体16px，默认最小可视字号12px

font-family 定义字体系列

• 一般情况下各公司有自己的字体系列标准，可以直接使用

• 字体系列一般定义在html根标签中

• 中文和英文（多个单词）的字体名称，尽量加引号

• 多个字体列表按照顺序从前往后查找执行

font-weight 定义字重（字体粗细）

• 值：100-900 但pc端只显示三种形式

• 移动端可以有多种展现形式，因为移动端的分辨率更高

• 常用关键词：normal（400 默认）、bold（700）、lighter（300）

font-style 定义字体样式（是不是斜体）

• font-style: italic;`斜体

• 注意不是所有字体都有斜体

字体的简写方式

• 顺序：字体样式 字重 字号 字体系列，不可改变顺序

• 最简方式 font：40px chiller; 字号和字体系列，不能再减少

文本

color：颜色的色值

text-align 定义文本对齐方式

• 一定要写给块级元素

• 可以让块级元素中的文字或者内联元素水平对齐

• 可以对其的除了文字和普通的内联元素还有行内块级显示的元素（img、button、input）

line-height 定义“单行”文本行间距

• 可以写像素单位或者%，或者直接写没有单位的数值代表倍数（文字的倍数）

• 设置行间距的文本会撑开高度，如果不写高度行间距可以代替高度

• 当单行文本需要在父元素中垂直居中，需要行间距为父元素的高度

text-decoration 定义文本的修饰

• 主要是清楚a的下划线 text-decoration: none

• 删除线 text-decoration: line-through

text-indent 定义首行缩进的距离

• text-indent: 2em 2倍的字体大小距离，就是中文前面空俩格

文本换行

• white-space: nowrap;强制不换行

• word-wrap: break-word;强制换行

标题溢出省略符号

• / 1.定宽 （可以改）/
  width: 150px;
  / 2.强制不换行 /
  white-space: nowrap;
  / 3.元素溢出部分隐藏 /
  overflow: hidden;
  / 4.文本溢出省略标记… /
  text-overflow: ellipsis;

text-shadow 定义文本阴影

• x y 羽化值 阴影颜色

• 羽化值可以省略但不能为负值

• 可以写多阴影一组属性用逗号分隔

vertical-align 定义垂直对齐方式

• 让前后的内联元素和文字与自己的垂直对齐方式

• 取值

  • top

  • middle

  • bottom

  • baseline 基线

圆角

border-radius 定义元素的圆角

• 1 个值代表四个角

• 2 个值代表左上和右下，右上和左下

• 3 个值代表左上，右上和左下，右下

• 4 个值代表 左上，右上，右下，左下

单独写每个角

• border-top-left-radius左上角

• border-top-right-radius右上角

• border-bottom-left-radius左下角

• border-bottom-right-radius右下角

圆形

• 宽高一致

• border-radius: 50%;

胶囊型

• 胶囊型：高度的一半

溢出

溢出的前提

• 父元素一定限制范围

• 内容或者子元素超出了父级的范围

溢出的处理

• 不处理

  • overflow: visible;溢出默认展示

• 溢出部分隐藏

  • overflow: hidden;

• 溢出部分的拖拽条

  • overflow: auto;只有溢出的方向出现拖动条

  • overflow: scroll;x 轴 y 轴都出现拖动条，子元素不超出也会有滚动条的那条轨道

• 单方向处理

  • overflow-x

  • overflow-y

盒子阴影

box-shadow：x y 羽化 扩展 颜色 内外阴影

• 扩展可以为负值

• 默认外阴影，inset 内阴影

多阴影用逗号分开

阴影不占空间，容易被后面元素挡住

其他元素常用设置

input的轮廓线

• input {outline: 0;}

• input {outline: none;}

列表

• list-style: none 去掉列表的标识符

  • 写给ul和li均可

• list-style还可以自定义

• list-style-image:url() 注意图不宜很大，因为不能调大小

• list-style-position 标识符在列表外还是列表内

  • outside 默认列表外

  • inside 列表内

光标

• cursor: pointer; 常用手型

• cursor: wait;

• cursor: crosshair;

• cursor: help;

背景

插入背景图

• background-image: url(路径);

• 背景图显示

  • 元素必须有宽度高度

  • 如果图片本身大于设定宽高，出现图片展示不全

  • 如果图片本身小于设定的宽高，图片会出现x轴和y轴的重复平铺

背景图平铺方式

• 前提是图片一定小于设置的宽度或高度才会出现图片平铺效果

• background-repeat: no-repeat;不平铺

• background-repeat: repeat-x;x轴平铺

• background-repeat: repeat-y;y轴平铺

背景图定位

• 只想要图片（1张不重复的）在较大背景中定位在某处

• 一个宽高小于背景图，并只想要背景图的一个区域，因此需要定位在背景图的某处【一般是精灵图】

• background-position

  • 正负值，关键字

  • px，百分比…

背景图定位

• x水平轴保证铺满

  • background-size: 100% auto;

  • x轴水平轴保证等比例缩放，y轴垂直轴自动

  • 出现的情况

    • 100% auto

      • 宽高比例刚好，图正好填满

      • 高度大于宽高比的高度，会出现图片y轴重复

      • 高度小于宽高比的高度，会截断y轴的一部分图片内容

    • auto 100%

      • 宽高比例刚好，图正好填满

      • 高度大于宽高比的高度，会出现x轴截断一部分图片内容

      • 高度小于宽高比的高度，会在x轴上出现x轴重复

    • cover

      • 铺满就不会出现空余或者重复，只可能图片被截掉

      • background-size: cover;

    • contain

      • background-size: contain;

      • 保证一张完整的图存在，只可能出现重复或空余

背景的简写方式

• background:color image repeat position;

• 四组值用空格分开,没有顺序

• 简写的弊端：简写的方式会覆盖上边定义好的

  • 最简写法可以是background：color 或者 background：url，其他不可以

边距

内边距

• padding 指盒子的“内补间”，宽高之外到边框以内的距离

• padding 有四个方向分别是上、右、下、左

• 内边距的值

  • • 1 个值，将用于全部的四边。
  • • 2 个值，第一个用于上、下，第二个用于左、右。
  • • 3 个值，第一个用于上，第二个用于左、右，第三个用于下。
  • • 4 个值，将按上、右、下、左的顺序作用于四边。

  • margin 的 auto 取值

    • margin 有一个特殊的取值是 auto，auto 对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。

    • • 块级元素在父元素中水平居中margin:上下距离 auto;
    • • 上下距离在没有的时候可以写 0
    • • 内联素使用 margin：auto，不能完成居中效果

  • 内边距不能写负值

外边距

• 外边距的使用场合：元素的位置微调，元素之间的距离调整

• margin 有四个方向分别是上、右、下、左

• 外边距的值

  • • 1 个值，将用于全部的四边。
  • • 2 个值，第一个用于上、下，第二个用于左、右。
  • • 3 个值，第一个用于上，第二个用于左、右，第三个用于下。
  • • 4 个值，将按上、右、下、左的顺序作用于四边。

  • 外边距可以写负值

• 外边距溢出现象

  • 外边距溢出是父元素中在文档流里的第一个和最后一个子元素会和父元素的上下边界产生合并现象

  • 原因是外边距其实设置的是元素与同级兄弟元素之间的距离。因此第一个和最后一个子元素的外边距会被浏览器会认为你定义的是其父级元素的边。

  • 解决方案

    • 父元素增加padding-top缺点：增加了父元素实际高度

    • 增加父元素的边框，缺点：影响布局效果

    • 父元素增加overflow: hidden/auto;，缺点，父元素就不能溢出显示内容了，出现拖拽条

    • 使用空<table></table>放在第一个子元素前和最后一个子元素后，作用是分隔与父级的粘连

• 外边距合并现象

  • 兄弟元素之外边距合并

  • 两个在文档流中（垂直相邻）兄弟之间外边距，同时存在的时候，取最大的值。

• margin 的无效现象

  • 外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素

  • 下和右外边距，只能让当前元素和周围的元素保持距离

  • 如果周围没有兄弟元素，下外边距和右外边距就无效

盒子模型

标准盒子模型

• `box-sizing: content-box;

• 元素所占高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

• 元素所占宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

怪异盒子模型

• `box-sizing:border-box

• 设置的宽度 width = 左右 border + 左右 padding + 内容的宽度

• 设置的高度 height = 上下 border + 上下 padding + 内容的高度

浮动

浮动属性

• float:left 左浮动

• float:right 右浮动

浮动特性

• 元素浮动后不再自占一行

• 内联元素浮动后自动变成块级元素

• 元素浮动后不再撑起父级元素（高度坍塌），会导致布局混乱

  • 在确定浮动元素的高度时，可以直接给父元素加高

  • 父元素自己也浮动，可以解决其自身子元素浮动带来的高度坍塌，在父元素确实也需要浮动的时候

  • 给父元素增加overflow：hidden、auto，让父元素形成bfc结界，因此子元素的浮动不会对父元素的高度产生影响。使用场景，子元素无法预知高度

  • 增加一个专用的类解决高度坍塌

    • 给父元素增加一个专用类，只做清除浮动负面效果之用

    • .clearfix::after{
      content: “”;
      display: block;
      clear: both;
      }

• 元素浮动后对其后面的兄弟元素有遮盖影响，但不影响前面的兄弟元素

• 浮动的元素会具有向前占位的特性，因此布局时要避免同类型元素布局高度不同

• 元素浮动后对其后块级元素确实有遮盖效果，但对文字、内联元素、行内块无法遮盖，只能形成环绕效果（原因是因为内联、文字、行内块层叠顺序高于块级元素和浮动的块级元素）

• 设置宽度的原因是，因为元素浮动不再自占一行，会按照其内容改变宽度，内容多宽，元素就有多宽

• 元素浮动不在文档流中时，元素在父级中的margin:auto失效

弹性布局

概念说明

• 弹性布局的底层就是浮动布局

• 关系分为：容器和项目（必须是容器包裹项目）

• 当元素作为flex容器的时候，其内部元素的浮动属性和它自己的清除浮动属性都将失效

• 轴

  • 主轴

    • 左至右

    • 右至左

    • 上至下

    • 下至上

  • 交叉轴

    • 垂直于主轴的轴体

容器

• display:flex 将元素定义为弹性flex布局

• flex-direction控制主轴容器元素内项目的排列方向

  • row 左向右

  • row-reverse 右向左

  • column 上向下

  • column-reverse 下向上

• flex-wrap 项目在容器中是否换行显示

  • 现象

    • 容器宽度大于项目相加总宽度，没有任何影响

    • 容器宽度小于项目相加总宽度，项目宽度时效，等比例被挤压

  • nowrap 默认不换行

  • wrap 换行

  • wrap-reverse 反向换行

• flex-flow: 方向 是否换行；定义主轴排序的方向 容器中的项目是否换行

• justify-content 定义项目在容器中的主轴对齐方式

  • flex-start 默认起点对齐

  • lex-end 终点对齐

  • center 居中对齐，一起居中

  • space-between 两端对齐，项目之间的间隔都相等，左右贴边

  • space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

• align-items 定义项目在容器中交叉轴的对齐方式

  • 前提

    • 交叉轴上容器元素必须有富裕空间让项目元素移动

    • 交叉轴上没有富裕空间就需要单独给容器元素设置扩大宽度或者高度的属性

  • flex-start 交叉轴的起点对齐

  • flex-end 交叉轴的终点对齐

  • center 交叉轴的中点对齐

  • baseline 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看出来

  • stretch 默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度

• align-content 多轴线对其

  • 前提，容器在多轴线的交叉方向有剩余空间

  • flex-start 与交叉轴的起点对齐

  • flex-end 与交叉轴的终点对齐

  • center 与交叉轴的中点对齐

  • space-between 第一行和最后一行贴开始和结束，其他均分中间位置

  • space-around 每行间距两侧或上下间距相等，比边框间距大一倍

  • stretch 默认值，项目没设置高度，会导致多轴线之间无距离

项目

• order 项目的排号（顺序）

  • 默认值0，按照元素顺序排列

  • 值越大越靠后，值越小越靠前 （可以为负值）

• flex-grow 项目的放大比例

  • 默认值 0

  • 只有父元素具有富裕空间的时候才看的出来

  • 值越大占据富裕空间的比例就越大

• flex-shrink 项目的缩小比例

  • 默认值1

  • 不缩小 0

  • 值越大缩小的比例就越大

• flex-basis 项目的自动尺寸

  • 设置项目的自动尺寸后width失效

• flex 属性简写

  • 常用设置是：flex:0 0 ??px; 不放大，不缩水，占多少尺寸

响应式布局

设置视口的meta标签

•  
• • width=device-width 视口宽度为设备宽度（device 设备）
• • initial-scale=1.0 初始化视口不缩放
• • maximum-scale=1.0 最大是缩放倍率（不缩放）
• • user-scalable=0 用户不能缩放

语法

• @media 媒体类型 and (尺寸范围) {
  样式列表1
  样式列表2
  样式列表n
  样式列表……
  }

• @media (尺寸范围) {
  样式列表1
  样式列表2
  样式列表n
  样式列表……
  }

Viewport Width 和 Viewport Height

• • vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位。
• • “视区”所指为浏览器内部的可视区域大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
• • vw:1vw 等于视口宽度的 1%
• • vh:1vh 等于视口高度的 1%

特殊的input

pc：input有自带的行间距，无法去除，有自带的文字上下居中效果，当input的高度和块级高度同等时，input仍然高于块级元素。 所以一般在处理input时，会将其改变为块级元素，并且去除他的所有自带可能更改样式

移动：input在移动终端时，受手机默认浏览器的影响，当小键盘弹出时，有的手机浏览器的input会被向上挤压，有的手机input会直接挤压，某种处理方式是，给input加内联高度