CSS

Last updated on a year ago

嗨嗨嗨

CSS定义

CSS的全名是层叠样式表（Cascading Style Sheets，缩写为CSS），是一种样式表语言，用来描述HTML文档的美化内容，CSS有多种写法（位置不同）

CSS书写顺序

  1. 盒子模型属性
  2. 文字样式
  3. 圆角、阴影等修饰属性

内部样式表

将CSS代码写在title下方，用双style标签。

1
2
3
4
5
6
7
8
9
10
11
12
<title>hello world</title>
<style>
    /*选择器{}*/
    p {
        /*CSS属性:属性值;*/
        color:red;
    }
</style>

<p>
    红色文本
</p>

这样后面使用的p文本都会变为红色

外部样式表

将CSS代码写在单独的CSS文件中（.css），在HTML使用link标签引入

1
2
3
p {
    color: red;
}
1
2
<title>外部样式表</title>
<link rel="stylesheet" href="my.css">

stylesheet是样式表

行内样式表

配合JavaScript使用。CSS写在标签的style属性值里

1
2
3
<div style="color: red; font-size:20px;">
    这是div标签
</div>

CSS选择器

基础选择器

  • 标签选择器：使用标签名作为选择器，选中同名标签设置相同的格式，无法差异化设置设置标签的显示效果

  • 类选择器：查找标签，差异化设置标签的显示效果

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    定义类选择器：
    .类名
    使用类选择器：
    标签添加 class="类名"

    <style>
    /*定义*/
    .red {
    	color: red;
    }
    /*使用*/
    <p class="red">红色字体</p>

    一个标签只有一个class属性，但是class可以有多个属性值，中间用空格隔开

    1
    2
    3
    <p class="red size">
        使用了red类和size类，中间用空格隔开
    </p>

    类名有多个单词可以用-连接

  • ID选择器：查找标签，差异化设置标签的显示效果
    id选择器一般配合JavaScript使用，很少用来设置CSS样式

    1
    2
    3
    4
    定义id选择器：
    #id名
    使用id选择器：
    标签添加id="id名"

    同一个id选择器在一个页面中只能用一次

  • 通配符选择器：查找页面所有标签，设置相同样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    * {
        color:red;
    }

    <p>
        p标签颜色为红
    </p>
    <div>
        div标签颜色为红
    </div>
    <h1>
        h1标签颜色为红
    </h1>

    通配符选择器一般在网页开发初期使用，用来清除标签的默认样式，比如间距颜色等，需要多少再自己设置

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确、更高效的选择目标元素（标签）

  • 后代选择器：选中某元素的后代元素，包含儿子、孙子、重孙子…

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /*父选择器 子选择器{CSS属性} ，父子选择器之间用空格隔开*/
    <style> div span{
        color: red;
    }
    </style>

    <span> 这是span标签，黑色的</span>
    <div>
    	<span>这是div的儿子span，红色的</span>
    	<p><span>这是div的孙子span，红色的</span></p>
    </div>

  • 子代选择器：选中某元素的子代元素（最近的子级）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /*父选择器 > 子选择器{CSS属性} 父子选择器之间用逗号隔开*/
    <style>
    	div > span{
    		color: red;
    	}
    </style>

    <div><span>这是div的儿子span，红色的</span></div>
    <div><p><span>这是div的孙子span，黑色的</span></p></div>

  • 并集选择器：选中多组标签设置相同的样式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /*选择器1,选择器2,..,选择器n{CSS属性}  选择器之间用,隔开*/
    <style>
    	div,
    	p,
    	span{
            color: red;
    	}
    </style>

    <div>div标签，红色</div>
    <p>p标签，红色</p>
    <span>span标签，红色</span>

  • 交集选择器：选中同时满足多个条件的元素(了解即可)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /*选择器1选择器2选择3...{CSS属性} 选择器之间连写*/
    /*标签选择器要写在最前面*/

    <style>
    p.box{
        color: red;
        /*既是p标签，又有box类的*/
    }

    <p class="box">既是p标签又是box类，红色</p>
    <p>只是p标签，黑色</p>
    <div class="box">只是box类</div>

  • 伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /*选择器:状态{CSS属性}*/
    <style>
    	a:hover{
    		color: red;
            /*鼠标悬停状态的链接，红色*/
    	}
    	.box:hover{
        	color:green;
            /*box类鼠标悬停状态，绿色*/
    	}
    </style>

    <a href="#">a 标签悬停变红</a>
    <div class="box">box类，悬停变绿</div>

    超链接的四种状态

    选择器 作用
    :link 访问前
    :visited 访问后
    :hover 鼠标悬停
    :active 点击时（激活）

    如果要给超链接设置以上四个状态，必须按LVHA（LV好啊）的顺序书写

  • 结构伪类选择器：根据元素的结构关系查找元素。

    选择器 说明
    E:first-child 查找第一个E元素
    E:last-child 查找最后一个E元素
    E:nth-child(N) 查找第N个元素(第一个E元素N为1)
    E:net-child(公式) 查找多个元素
    功能 公式
    偶数标签 2n
    奇数标签 2n+1;2n-1
    5的倍数的标签 5n
    找到第5个以后的标签 n+5
    找到第5个以前的标签 -n+5

  • 伪元素选择器：创建虚拟元素（伪元素），用来摆放装饰性内容

    选择器 说明
    E::before 在E元素里面最前面添加一个伪元素
    E::after 在E元素里面最后面添加一个伪元素

    注意：

    • 必须设置**content:””**属性，用来设置伪元素的内容，如果没有内容，引号留空即可
    • 伪元素默认是行内显示模式
    • 权重和标签选择器相同

文字效果

描述 属性 效果
字体大小 font-size 文字&文字
字体粗细 font-weiight 文字&文字
字体倾斜 font-style 文字&文字
行高 line-height 文字
文字
字体族 font-family 文字&文字
字体复合属性 font 复合属性
文字缩进 text-indent 段落
文本对齐 text-align 对齐
修饰线 text-decoration 文字&文本&文字
颜色 color 文字文字
个别属性注意事项：

  • 字体大小font-size：设置字体大小，属性值为数字+px，文字默认大小是16，h1默认32

  • 字体加粗font-weight：可以设置字体的粗细，属性值可以是数字也可以是关键字，如normal（正常）和bold（加粗），但在开发中一般使用数字，正常为400，加粗为700.

  • 字体样式font-style：一般是用来清除文字默认的倾斜效果，比如em标签，font-style有两个属性值：normal（正常）和italic（倾斜）。

  • 行高line-height：设置多行文本的间距，属性值：数字+px或直接数字（当前标签font-size属性值的倍数）。行高=上下间距+文本高度。

  • 行高实现垂直居中：行高属性值等于盒子高度属性值。

  • 字体族font-family：设置文字字体，属性值为字体名

    1
    font-family:楷体

    属性值可以些多个字体名，中间用逗号隔开，执行顺序是从左到右依次查找，如果未找到该字体则使用默认效果。属性最后设置一个字体族名，网页开发建议使用无衬线字体（sans-serif）。

  • 复合属性font：使用场景：设置网页文字公共样式，有两种写法

    1
    2
    3
    4
    5
    6
    7
    div {
        font-style: italic;
        font-weight: 700;
        font-size: 40px;
        line-height: 2;
        font-family: 楷体;
    }

    也可以使用font写法：

    1
    2
    3
    4
    div {
    	font: italic 700 30px/2 楷体;
        /*倾斜，加粗，字体大小30px，行高2倍， 字体楷体*/
    }

    font的属性必须按顺序写：倾斜，加粗。字体/行高 字体（字号和字体必须写，否则font不生效）

  • 文字缩进text-indent：属性值为：数字+px或数字+em（推荐使用，1em=当前标签的字号大小）。

  • 文字对齐方式text-align：属性值left（左对齐默认），center（居中），right（右对齐）。还可以用来对齐图片，将img放入div中，div再使用text-align属性。

  • 修饰线text-decoration：可以去除或添加线，比如去除a标签默认的下划线。属性值有四个：none(无)，underline（下划线），line-through（删除线）， overline（上划线）

  • color文字颜色：

    颜色表示方式 属性值 说明 使用场景
    颜色关键字 颜色英文单词 red、green、blue 学习，测试
    rgb表示法 rgb(r,g,b) rgb表示红绿蓝三原色，取值0-255 了解
    rgba表示大 rgba(r,g,b,a) a表示透明度，取值0-1 开发，实现透明色
    十六进制表示法 #RRGGBB #000000，#ffcc00，简写：#000，#fc0 开发使用（从设计稿复制）

调试工具

在浏览器按f12，当发现效果未生效时，可以在元素中找到对应的html代码，可以点样式，查看该行的CSS，如果有错误，浏览器会提示，并提示错误的行数。
当鼠标移动到CSS代码上时，会出现多个多选框，勾选意味着对应的属性生效，可以很方便的调试。

CSS特性

  • 继承性：子级默认继承父级的文字控制属性。所以在工作中，一般对body设置文字控制属性。如果标签自带样式，那么生效自己的样式，不继承。比如p可以继承颜色和字号，a自带颜色，只能继承字号，h自带字号，只能继承颜色等。

  • 层叠性：对于相同标签

    • 相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
    • 不同的属性会叠加：不同的CSS属性都生效

  • 优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
    通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important（选中标签的范围越大，优先级越低）在属性的分号前加!important，会把该属性的权重提升到最高

  • 优先级-叠加计算规则：如果是复合选择器，则需要权重叠加计算

    （行内样式，id选择器个数，类选择器个数，标签选择器个数）

    规则：

    • 从左往右依次比较选个数，同一级个数多的优先级高，如果个数相同，向后比较。
    • !important权重最高
    • 继承权重最低

Emmet写法

代码的简写方式，输入缩写vscode会自动生成代码

  • HTML：

    说明 标签结构 Emmet
    类选择器
    		标签名，类名
    id选择器
    		标签名#类名
    同级标签

    		div+p
    父子级标签

    		div>p
    多个相同标签 123 span*3
    有内容的标签
    内容
    		 div{内容}

  • CSS：大多数简写方式为属性单词的首字母

背景属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<table>
    <tr>
        <td style="background-color: rgb(151, 38, 38);color: white">描述</td>
        <td style="background-color: rgb(151, 38, 38);color: white">属性</td>
    </tr>
    <tr>
        <td>背景色</td>
        <td>background-color</td>
    </tr>
    <tr>
        <td>背景图</td>
        <td>background-image</td>
    </tr>
    <tr>
        <td>背景图平铺方式</td>
        <td>background-repeat</td>
    </tr>
    <tr>
        <td>背景图位置</td>
        <td>background-position</td>
    </tr>
    <tr>
        <td>背景图缩放</td>
        <td>background-size</td>
    </tr>
    <tr>
        <td>背景图固定</td>
        <td>background-attachment</td>
    </tr>
    <tr>
        <td>背景复合属性</td>
        <td>background</td>
    </tr>
</table>

用法与注意事项：

  • 背景图background-image：属性值为：url(./xx.jpg)，默认平铺效果

    1
    2
    3
    4
    5
    6
    7
    <style>
    	div {
    		width: 400px;
            height: 400px;
            background-image: url(./images/1.png);
    	}
    </style>

  • 背景图平铺方式background-repeat：属性值为：**no-repeat(不平铺，左上角)**，repeat（平铺，默认），repeat-x(水平平铺)，repeat-y（垂直平铺）

  • 背景图位置background-position：属性值可以是关键字也可以是数字，还可以是二者混用。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
        /*bakcground-position: 水平位置 垂直位置*/
    	background-position:left top;
        /*图片水平居左，垂直居上*/
        background-position:50px 0;
        /*图片水平向右移动50px*/
        bakcground-position:0 50px;
        /*图片垂直向下移动50px*/
    }

    使用数字的话，正数为水平向右垂直向下，负数反之。关键字有left,right,center,top,bottom。

    • 特殊写法：
      • 关键字取值方法可以颠倒取值顺序
      • 可以只写一个关键字，另一个方向默认为居中；数字只写一个表示水平方向，垂直方向居中。

  • 背景图缩放background-size：属性值有关键字、百分比、数字+单位。

    • 关键字：
      • cover:等比例缩放背景图片以完全覆盖背景图片，可能背景图片部分不可见
      • contain:等比例缩放背景图片以完全装入背景区，可能背景部分空白
    • 百分比：根据盒子尺寸计算图片大小
    • 数字加单位

  • 背景图固定background-attachment：属性值：fixed。使背景不会随着元素的内容滚动

  • 背景图复合属性background：和之前说过的font一样，多个属性值之间用空格隔开，但不需要区分顺序。

显示模式

  • 块级元素

    • 独占一行
    • 宽度默认是父级的100%
    • 添加宽高属性生效

    如div

  • 行内元素

    • 一行共存多个
    • 尺寸由内容撑开
    • 添加宽高属性不生效

    如span

  • 行内块元素

    • 一行共存多个
    • 默认尺寸由内容撑开
    • 添加宽高属性生效

    如img

转换显示模式

属性名：display
属性值：

属性值 效果
block(常用) 块级
inline-block(常用) 行内块
inline(不常用) 行内

盒子模型

组成

  • 内容区域-width&height
  • 内边距-padding（出现在内容与盒子边缘之间）
  • 边框线-border
  • 外边框-margin（出现在盒子外面）

边框线

属性名：border
属性值：边框线粗细 线条样式 颜色（中间用空格隔开，不区分顺序）
常用线条样式：

属性值 线条样式
solid 实线
dashed 虚线
dotted 点线

  • 设置单方向边框线border-方位名词：属性值：边框线粗细 线条样式 颜色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    div {
        border-top: 2px solid red;
        /*设置上边框线*/
        border-right: 3px dashed green;
        /*设置右*/
    	border-left: ...;
        /*设置左*/
        border-bottom:...;
        /*设置下*/
    }

内边距

设置内容与盒子边缘之间的距离

属性名：padding/padding-方位名词

  • 内边距多值写法：

    取值个数 示例 含义
    一个值 padding: 10px 四个方向内边距均为10px
    四个值 padding: 10px 20px 40px 80px 上右下左
    三个值 padding: 10px 40px 80px 上，左右，下
    两个值 padding: 10px 80px 上下，左右

    记忆方法：从上开始顺时针旋转，如果没有对应的值，则于对面的相同。

盒子尺寸计算

  • 默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
  • 结论：给盒子border/padding会撑大盒子
  • 解决：
    • 手动做减法，减掉border/padding的尺寸
    • 内减模式：添加代码：box-sizing:border-box

外边距

拉开两个盒子之间的距离，与padding属性值写法、含义相同。

  • 版心居中效果：盒子设置宽度后，将padding值设置为auto，这样盒子到浏览器两边的距离会相等。

清除默认样式

清除标签默认的样式，如：默认的内容边框。有两种写法，一种是使用通配选择器清除所有标签的样式，一种是用并集选择器清除所有有默认样式的标签。

元素溢出-overflow

控制溢出元素的内容的显示方式

属性值 效果
hiddne 隐藏
scroll 溢出滚动（无论是否溢出，都显示滚动条位置）
auto 溢出滚动（溢出才显示滚动条位置）

外边距问题-合并现象

场景：垂直排列的兄弟元素，上下maegin会合并
现象：取两个margin中的较大值生效

外边距问题-塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题
现象：导致父级一起向下移动
解决方法：

  • 取消子级margin，父级设置padding
  • 父级设置overflow:hidden
  • 父级设置border-top

圆角border-radius

设置元素的外边框为圆角。属性名：border-radius。属性值：数字+px/百分比，属性值为半径。和border一样，顺时针，从左上角开始。

阴影box-shadow

给元素设置阴影效果
属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

  • X轴和Y轴偏移量必须书写
  • 默认是外阴影，内阴影需要使用inset

标准流、浮动与flex

  • 标准流：也叫文档流，指的是标签在页面中默认的排布规则

  • 浮动：让块级元素水平排列。以前常用，现在多使用flex布局。

  • flex布局：

浮动

基本使用

作用：让块元素水平排列。属性名：float。属性值：

  • left：左对齐
  • right：右对齐

浮动的特点：盒子均为顶对齐，且变为行内块。若display直接改为行内块会对齐最长盒子的底部。且使用了浮动的元素，会脱离标准流的控制，比如现在写了两个盒子，one使用了float:left，two不使用，那么浏览器会认为two才是第一个元素，one和two会同时位于左上角重合，且one浮于上方。

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）
解决方法：清除浮动

  • 额外标签法：

    • 在父元素内容的最后添加一个块级元素，设置CSS属性clear:both

    • 单伪元素法：

      1
      2
      3
      4
      5
      .clearfix::after {
      	content:"";
          display: block;
          clear: both;
      }

      将父元素的添加clearfix类，原理与额外标签法相同

    • 双伪元素（推荐）：

      1
      2
      3
      4
      5
      6
      7
      8
      .clearfix::before,/*解决外边距塌陷问题*/
      .clearfix::after{/*清除浮动的影响*/
      	content:"";
          display: table;
      }
      .clearfix::after{
          clear:both;
      }

    • overflow
      父元素添加CSS属性overflow:hidden

Flex布局

Flex布局也叫弹性布局，是浏览器提倡的的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。Flex模型不会产生浮动布局中脱标现象，布局网页更简单和灵活

Flex组成

设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸
组成部分：

  • 弹性容器
  • 弹性盒子
  • 主轴：默认在水平方向
  • 测轴/交叉轴：默认在垂直方向

Flex布局属性

描述 属性
创建flex容器 display:flex
主轴对齐方式 justify-content
侧轴对齐方式 align-items
某个弹性盒子侧轴对齐方式 align-self
修改主轴方向 flex-direction
弹性伸缩比 flex
弹性盒子换行 flex-wrap
行对齐方式 align-content

  • 主轴对齐方式
    属性名：justify-content

    属性值 效果
    flex-start 默认值，弹性盒子从起点开始依次排列
    flex-end 弹性盒子从终点开始依次排列
    center 弹性盒子沿主轴居中排列
    space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
    space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
    space-evenly 弹性盒子沿主轴均匀分布排列，弹性盒子与容器之间间距相等

  • 侧轴对齐方式

    属性名：

    • align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
    • align-self:单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）
    属性值 效果
    stretch 弹性盒子沿着侧轴线拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
    center 弹性盒子沿侧轴居中排列
    flex-start 弹性盒子从起点开始依次排列
    flex-end 弹性盒子从终点开始依次排列

  • 修改主轴方向

    主轴默认在水平方向，侧轴默认在垂直方向

    属性名：flex-direcation：

    属性名 效果
    row 水平方向，从左至右（默认）
    column 垂直方向，从上到下
    row-reverse 水平方向，从右到左
    column-reverse 垂直方向，从下到上

  • 弹性伸缩比

    控制弹性盒子的主轴方向的尺寸

    属性名：flex

    属性值：整数数字，表示占用父级剩余尺寸的份数

  • 弹性盒子换行

    弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

    属性名：flex-wrap

    属性值

    • wrap：换行
    • nowrap:不换行（默认）

  • 行对齐方式

    在开启换行情况下，多行之间的对齐方式

    属性名：align-content

    属性值：

    属性值 效果
    flex-start 默认值，弹性盒子从起点开始依次排序
    flex-end 弹性盒子从终点开始依次排序
    center 弹性盒子沿主轴居中排列
    spance-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
    spance-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
    space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

定位和层叠

定位 position

作用：灵活的改变盒子在网页中的位置

实现：

  1. 设置定位模式：position
  2. 偏移值：设置盒子的位置

position用来设置定位模式有以下取值

取值 说明
relative 1. 相对位置。相对于自己原本的位置。2.不脱标，偏移后的位置依然会有空位。3.不改变显示模式。
absolute 1.绝对定位。相对于已定位的最近祖先元素。没有则参照窗口。2.脱标。3.显示模式具备行内块特点。
fixed 1.固定定位。网页滚动时位置不会改变。2.脱标。3.显示模式具备行内块特点。

偏移值可以通过以下属性设置

属性 说明
top 顶部距离
right 右边距离
left 左边距离
bottom 底部距离

注意，偏移值和position设置的模式有关，relative相对自己原本的位置如：top:10px则会下移10像素，absolute相对已定位的最近祖先元素；fixed相对于浏览器，比如top:50%移动到浏览器的中部（上边框的位置位于浏览器中线）。

还可以通过设置transform属性的**translate(x,y)**，会移动自身，如果参数设置百分比则是自身大小的百分比。

堆叠层级 z-index

默认效果：当我们给多个标签设置了定位，会按照标签的书写顺序，后来者居上。

作用：设置定位元素的层级顺序，改变定位元素的显示顺序。

实现：设置z-index的值，值越大越靠上。

常见用途

定位在我们的网页中很常见，比如轮播图两边/下边的按钮，使用了absolute定位；当我们下滑网页时，出现的“返回顶部”按钮，使用了fixed定位。

CSS精灵

CSS Sprites（CSS雪碧）又叫CSS精灵，是一种网页图片应用处理方式，把网页中的背景图整合到一张图片上，再用background-position定位出图片的位置。

优点：减少服务器请求次数，提高加载速度。

字体图标

展示的是图标，本质是文字。

作用：添加简单、纯色的小图标

优点：

  • 灵活性：修改样式灵活，如：尺寸颜色等
  • 轻量级：体积小、渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：下载后使用

推荐下载站点：inconfont

下载后将文件解压得到的文件中，html是示例文件，需要用到图标时在里面找类名，css样式文件，和字体文件。

解压导入后，给标签设置对应的类名就可以使用了。

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <!--引入样式表-->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /*使用选择器时需要注意优先级，字体图标自带样式*/
        .iconfont {
            font-size: 10px;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-icon-test1"></span>
</body>

垂直对齐 vertical-align

当我们同时放入文字和图片（行内块）时，会发现，图片和文字似乎是底部对齐的方式，当放大后会发现，图片下方由一段小空白，实际上，这种对齐方式叫做基线对齐，我们写单词时，都是以第三条线做基线，有的基线在底部（abc…)，有的基线不在底部（pqg），而我们写字的方式就是基线对齐。

当我们把文字和行内块放一起时，行内块会当作文字处理，他的基线在底部，而有的文字基线不是在底部，所以会加上一小段空白。

需要改变这种对齐方式，给高的行内块使用vertical-align就可以了

取值：

取值 说明
baseline 基线对齐，默认
top 顶部对齐
middle 居中对齐
bottom 底部对齐

其中middle是最常用的。

过渡属性-transition

作用：为一个元素不同状态的切换添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性 【空格】花费时间（s或ms）

过渡的属性可以是具体的CSS属性，也可以是all（两个状态属性不同的所有属性，都产生过渡效果）。

滑动解锁：

设置hover，一直移动且添加过渡效果，

透明度-opacity

作用：设置整个元素的透明度（包括背景和内容）

取值：0-1之间，1为完全透明，0为不透明

光标类型-cursor

作用：鼠标悬停在元素上时显示指针样式

属性值：

属性值 效果
default 默认值，通常是箭头
pointer 小手效果，提示用户可以点击
text 工字形，提示用户可以选择文字
move 十字光标，提示用户可以移动

SEO搜索引擎优化

在公司中一般会有专门的SEO人员，但有时也需要前端的配合。SEO就是网站排名，下面是提升网站排名的一些常用方法：

  1. 花钱
  2. 将网页制作成html后缀
  3. 标签语义化
  4. …

网页头部SEO标签：

  • title：网页标题
  • description：网页描述
  • keywords：网页关键词

网站图标 favicon

出现在标题栏的图标，增加网站辨识度。

在vsconde中输入link:favicon即可快速生成

1
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

平面转换

transform

作用：为元素添加动态效果，一般与过渡使用

概念：改变盒子平面内的形态（位移、旋转、缩放、倾斜）

属性值 说明
translate(x轴移动距离，y轴移动距离) 平移，输入百分比是以自己为参考，只输入一个值表示x轴移动，也可以使用translateX（）
rotate（旋转角度） 旋转，角度的单位是deg，正数顺时针，负数逆时针
scale（缩放倍数）/scale（x缩放，y缩放） 中心缩放，输入负数就镜像
skew（角度） 倾斜，角度单位deg

关于缩放有一点说下，我一开始觉得用width和height也可以，但后面发现，这样做出来的缩放中心点是在左上角的，效果很差。

改变转换原点 transform-origin

默认：盒子中心点

属性：transform-origin: 水平原点位置

取值：

  • 方位名词（left,top,right,bottom,center）
  • 像素单位数值
  • 百分比

多重转换

如果我们想要给一个盒子设置多种转换效果，比如轮胎，一边旋转一边平移，就需要使用到多重转换，多重转换需要一些技巧

  • 先平移后旋转

    1
    transform: translate() rotate();

    因为旋转会改变坐标轴向，坐标轴向以第一个转换为准，如果反过来你会发现轮胎螺旋着出去了（其实也挺酷的）

  • 必须复合属性

    不能拆开写

    1
    2
    transform: translate();
    transform: rotate();

    这样写后面的属性会把前面的覆盖掉

渐变

分类：

  • 线性渐变：linear-gradient（to 方位名词/角度， 颜色1 终点位置， 颜色2 终点位置）

  • 径向渐变：radial-gradient（半径 at 圆心位置，颜色1 终点位置， 颜色2 终点位置）

    如果写了两个半径则为椭圆。

线性渐变：

1
2
3
4
5
6
.box {
    //红色向做渐变为黄色
    background-image: linear-gradient(to left, red 20% ,yellow 100%);
    //45度向上渐变
    background-image: linear-gradient(45deg, red 20% ,yellow 100%);
}

径向渐变：

1
2
3
4
.box {
    background-image: radial-gradient(50px at 50% 50%, red 50%, yellow 100%);
    background-image: radial-gradient(50px 50px at center center, red 50%, yellow 100%);
}

空间转换

transform

属性值：

属性值 说明
translate3d(x,y,z) 平移，用法和translate一样，但必须写满三个参数，变种有translateX,Y,Z,使用空间转换之前需要设置视距
rotateX,Y,Z(角度) 旋转，rotateX表示绕X轴旋转，以此类推，坐标轴原点在盒子中心。（说起来参数正负旋转的方向和魔方有点像）
rotate3d(x,y,z,角度) 设置自定义旋转轴的位置及旋转角度，x,y,z三个位置取值为0-1
scale3d(x,y,z) 缩放，scaleX,Y,Z()

关于旋转方向的两种记忆方式

  1. 类比魔方（夹带私货），比如R，表示从魔方的右面看顺时针转动，那么类比下来，translateX(10deg)就表示从X正方向看（坐X轴的箭头指向自己），顺时针转动，从正面看起来就是，盒子的上边远离，下边靠近。
  2. 左手定则，不知道在看的你还记不记得物理学过的左手定则，将大拇指指向想要沿着旋转的轴，其余四指旋转方向就是正数。

视距 perspective

作用：指定观察者与z=0平面的距离，为元素添加透视效果

在相同的位移下，视距越大，变化越不明显，可以类比人眼，蚂蚁在眼前走几毫米立马就知道了，太阳时时刻刻转动却没感觉。

透视效果：近大远小，近实远虚

属性值：添加给直接父级，范围800-12200（经验）

立体呈现 transform-style

作用：设置元素的子元素是否位于3d空间中

属性值：

  • flat：子级位于平面（默认）
  • preserve-3d：子级位于3d空间

动画 animation

基础

过渡与动画的区别：

  • 过渡：实现两个状态之间的变化过程
  • 动画：实现多个状态的变化过程，动画可控（重复播放、最终画面、是否暂停）

实现：

  1. 定义动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /*实现两个状态之间的动画*/
    @keyframes 动画名词 {
        from {}
        to {}
    }
    /*实现多个状态之间的动画*/
    @keyframes 动画名称 {
        0% {}
        10% {}
        ...
        100% {}
    }

  2. 使用动画

    1
    2
    3
    4
    /*给需要动画的标签设置animation*/
    .box {
        animation: 动画名称 动画时长 ...;
    }

属性值：

animation是个复合属性，他的属性值有：动画名称、动画时长、速度曲线、延迟时间、重复次数、动画方向 执行完毕时状态。

其中动画名称和动画时长为必填，取值不分先后，如果有两个时间，第一个表示动画时长，第二个表示延迟时间

属性 说明 取值
animation-name 动画名称 动画名
animation-duration 动画时长，秒或毫秒 1s,1ms等
animation-timing-function 速度曲线 详情
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay 动画延迟播放 1s,1ms等，默认0
animation-iteration-count 动画播放次数 默认1
animation-direction 动画在下一周期是否逆向播放 默认normal，详情
animation-play-state 动画状态，暂停或播放 running/paused,默认running

多组动画

在animation属性中可以用逗号将多个动画隔开，做到多组动画。

属性详解

animation-timing-function

属性值 说明
linear 匀速播放
ease 默认，先慢后快再慢
ease-in 以慢速开始
ease-out 以慢速结束
ease-in-out 开始和结束都是慢速
steps(uint, start|end) 逐帧动画，第一个参数为步长，就是将动画分成几部分；第二个参数是可选的start/end，默认值为end
cubic-bezier(n,n,n,n) 定义三次贝塞尔曲线,推荐网站

animation-fill-mode

属性值 说明
none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards 结束后停留在结束状态
backwards 结束后停留在开始状态
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

animation-iteration-count

属性值 说明
normal 默认值，动画正常播放
reverse 动画反向播放
altemate 动画在奇数次正向播放，在偶数次反向播放
alternate-reverse 动画在偶数次正向播放，在奇数次反向播放

移动端布局

分辨率

设别的分辨率分为物理（不可变）和逻辑（可变，比如电脑设置里的100%，150%等），在制作网页的时候，参考的是逻辑分辨率。

在制作pc网页的时候，html的宽和逻辑分辨率是一样的，但是默认情况下移动端网页的宽和逻辑分辨率是不一样的，想要一样就需要设置视口

视口

  • 视口： 显示HTML网页的时候，用来约束HTML尺寸

    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    这个标签需要认识，不会写也没关系，用vscode的!回车生成的HTML结构中自带了。

    如果不写这个会怎么样呢？答案是网页的宽度和逻辑宽度不相等。

    现在使用谷歌浏览器仿真设备，我使用iphoneSE逻辑宽度是375，如果不写该标签，则HTML宽度是980，而写了之后，HTML的宽度就和逻辑宽度一样了。

  • width=device-width: 视口宽度 = 设备宽度

  • initial-scale = 1.0: 缩放1倍（不缩放）

二倍图

适配方案

  • 宽度适配：宽度自适应

    一般用在pc端，常见的有百分比（也叫流式布局）和flex布局，只能实现宽度自适应，高度固定。

  • 等比适配：宽高等比缩放

    • rem
    • vw

设计稿一般是750px（iPhone留下的传统）;

rem布局

rem 单位

rem是一个相对单位，1rem = 1HTML字号大小，但是字号是不变的，所以我需要通过一些方法改变字号的大小，来实现等比适配。这个方法就是媒体查询

媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的CSS，当某个条件成立时，执行对应的CSS

1
2
3
4
5
@media (媒体特性){
    选择器 {
        CSS属性
    }
}

在目前的rem布局中，HTML标签的字号为视口宽度的1/10

1
2
3
4
5
6
/*视口宽度为320px时，根字号为32px*/
@midia (wdith: 320px) {
    html {
        font-size: 32px;
    }
}

但是如果只使用meida，每适配一台设备，就需要人工多写一个meida，而且即使是一台设备也可以设置多种分辨率（120%，150%等），这样一台设备又得写许多个media。

所以在实际中，我们需要配合一个js

flexible.js

这是手淘开发出的一个用来适配移动端的js库，核心原理就是根据不同的视口宽度给网页中HTML根节点设置不同的font-sze

1
2
/*导入js库*/
<script src="./js/flexible.js"></script>

这里是GitHub链接GitHub - amfe/lib-flexible: 可伸缩布局方案

也可以直接复制源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

LESS

什么是less

less是一个CSS预处理器，文件后缀是.less。扩充了CSS，使CSS具备一定的逻辑性、计算能力。

浏览器不识别less，目前需要用less转成css，网页引入对应的css文件。

可以用vscode插件Easy LESS，保存后自动生成对应的css文件。

另一种方法是使用node.js进行手动编译，命令行输入

1
2
3
4
5
//安装工具
npm install -g less

//编译less文件（生成的文件名可自定义）
lessc index.less > index.css

代码风格

less的语法和css差不多，但是可以使用数值进行运算，结构也比css更有逻辑性

1
2
3
4
5
6
7
.father {
    color: red;
    width: ( 68 / 37.5rem);
    .son {
        height: (29 / 37.5rem);
    }
}

相信学习过css的你一定看得懂上面的代码，上面的代码编译成css如下

1
2
3
4
5
6
7
.father {
    color: red;
    width: 1.81333333rem;
}
.father .son {
    height: 0.77333333rem;
}

注释

使用//单行注释和/*块注释*/

运算

加减乘除直接写运算就可以了，但是除法需要用小括号括起，或者使用./

1
2
3
4
5
.box {
    width: 100 + 50px;
    width: (100/50px);
    width: 100./50px;
}

不过一般还是推荐使用小括号写法

运算的单位一般写在最后，如果有多个单位，则只会以第一个单位为准

less嵌套

less选择器可以嵌套，用来表示子代选择器，上面有代码了，这里不累述。

在less的嵌套中有一个&符号，这个符号表示当前选择器，举个例子

1
2
3
4
5
6
7
8
9
10
11
.father {
    color: red;
    //嵌套a标签
    a {
        color: blue;
    }
    //同时设置a标签的悬停状态
    a:hover {
        color: green;
    }
}

编译出的css

1
2
3
4
5
6
7
8
9
.father {
    color: red;
}
.father a {
    color: blue;
}
.father a:hover {
    color: orange;
}

这种写法没什么问题，但是在less中显得累赘，本来都是设置给a的样式却要分开写，这时候就可以使用&符号

1
2
3
4
5
6
7
8
9
10
11
.father {
    color: red;
    //嵌套a标签
    a {
        color: blue;
        //使用&符号,&表示本身
        &:hover {
            color: orange;
        }
    }
}

这样生成的css和上面的是一样的。

变量

定义变量： @变量名:数据;

使用变量： CSS属性: @变量名;

导入

作用：用来导入less公共样式文件

语法：@import "文件路径";，如果是less文件可以省略后缀

为什么要这样写呢？一个页面可能有不止一个css/less文件，我们可以一个个导入，也可以使用less导入后编译成一个css文件，再进行导入。

导出与禁止导出

注意：以下内容仅使用于easy less插件，而非less本身语法

  • 导出

    作用：设置导出的css文件名和路劲

    语法：在文件开头//out: URL，注意，如果只写到目标文件夹，需要在结尾加/

  • 禁止导出

    作用：在less文件保存的时候不生成css

    语法：第一行添加//out: false

vw布局

vw和vh

vw和vh是一个相对单位，1vw = 视口宽度的百分之一，vh同理。

在实际开发中，我们拿到设计稿之后，需要知道该设计稿面向的视口宽度/高度是多少，然后将元素大小除以一个vw，这样对才能适应不同的屏幕。假设视口宽度是375px，设计稿其中一个元素的宽度是10px，那么我们在制作网页时，这个元素的宽度应该写为(10/3.75)vw。因为1vm=1/100视口宽度，而现在视口宽度是375px，1个vw也就是3.75px。所以，10px在375px宽的屏幕里，占了（10/3.75）个vw。

而在less中我们可以写为width:(10/3.75vw)，也可以用变量将3.75vw存储起来（推荐），写为@vm:3.75vw，然后设置元素宽度width:(10/@vw)

这样就实现了对不同屏幕大小的适配。

vw、vh混用问题

vw和vh一般在开发中只会使用一个，不能混用，如果混用可能导致盒子变形

响应式网页

什么响应式网页

用一套代码适配不同的设备，需要根据不同的设备修改盒子的布局。

实现方法

常用的实现方法有两种，媒体查询和bootstrap框架

媒体查询

基本语法

媒体查询的语法我们上面有讲过一点

1
2
3
4
5
@media (媒体特性) {
	选择器 {
		样式
	}
}

但是之前我们写的条件是width:123px这种当宽度相等触发的，但是响应式布局是不同区间有不同的布局，那么要如何实现呢？

max-width,min-width

需要用到两个属性：max-width、min-width，最大宽度和最小宽度。一般只用一个，也可以两个表示区间都写（嵌套写法，不推荐使用，只提供一个想法）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*小于等于768px*/
@media (max-width: 768px) {
    body {
        background-color: red;
    }
}

/*大于等于1200px*/
@media (min-width: 1200px) {
    body {
        background-color: green;
    }
}

/*1500到2000之间*/
/*不推荐	*/
@media (max-width: 2000px) {
    @media (min-width: 1500px) {
        body {
            background-color: red;
        }
    }
}

关于第三种写法有更好的解决方法，因为css是会覆盖的，假设我先写了>=100px的样式，下面再写>=200px的样式，下面的代码是会将上面的覆盖的，所以>=100px的样式其实只会在100到200区间生效。

所以书写顺序很重要，一定注意max-width和min-width的书写顺序是反过来的。

媒体查询-完整写法

1
@media 逻辑操作符 媒体类型 and (媒体特性) {CSS代码}

  • 逻辑操作符：and、only、not

  • 媒体类型：用来区分设备类型的，屏幕设备、打印设备等（手机电脑平板都属于屏幕设备）

    类型 值 描述
    屏幕 screen 带屏幕的设别
    打印预览 print 打印预览设备
    阅读器 speech 屏幕阅读模式
    不区分类型 all 默认值，包括以上三种类型

  • 媒体类型：主要用来描述媒体类型的具体特征，如屏幕宽高等

    ​

    特性 属性 值
    视口的宽高 width,height 数值
    视口最大宽高 max-width,max-height 数值
    视口最小 min-width,min-height 数值
    屏幕方向 orientation portrait:竖屏，landscape:横屏

搭配单文件css

媒体查询是可以搭配单独的CSS文件使用的，实现也很简单。当我们用link引用css文件的时候，设置media即可

1
<link red="stylesheet" media="逻辑符 媒体类型 and（媒体特性）" href="xx.css">

bootstrap框架

是推特开发的开源工具包，详细了解请自行百度。