基础班day06笔记

发表于
字数统计: 2.1k | 阅读时长 ≈ 7

学习目标

  • 能够说出background相关的几个属性（color、image、repeat、position）
  • 能够使用background设置颜色和图片（color、image）
  • 能够使用background-position设置背景图片的位置（left、center、right）
  • 能够说出元素的三种显示方式（块级元素、行内元素、行内块元素）
  • 能够使用display转换元素的显示方式（display：block/inline/inline-block）
  • 能够说出行高的概念并且使用（基线的距离、让文字垂直居中）
  • 能够说出a链接的四种伪类（lvha：link、visited、hover、active）

。。。。。。

理解上课的知识点……

背景相关的属性

开发中经常会给标签设置背景颜色、背景图片等效果。

背景颜色（background-color）

设置标签的背景颜色

代码：background-color: red;

取值：之前介绍的颜色的取值就可以

背景图片（background-image）

设置标签的背景为图片

代码：background-image: url(图片路径);

注意： 背景图片默认有平铺效果

背景平铺（background-repeat）

设置标签的背景图片是否平铺

代码：background-repeat: no-repeat；

取值：

值 描述
repeat 背景平铺（默认值）
no-repeat 不平铺
repeat-x 水平方向（沿x轴）平铺
repeat-y 垂直方向（沿y轴）平铺

背景附着（background-attachment）（了解）

设置标签的背景图片是否随着页面的滚动而移动（用的不多）

代码： background-attachment: scroll;

取值：

值 描述
scroll 背景图像会随着页面其余部分的滚动而移动（默认值）
fixed 当页面的其余部分滚动时，背景图像不会移动。

背景位置（background-position）

设置背景图片的位置

代码：background-position: 水平方向的位置（x） 垂直方向的位置（y）；

取值：

  • 关键字

    • 水平方向
      • left：左边
      • center：中间
      • right：右边
    • 垂直方向：
      • top：上边
      • center：中间
      • bottom：下边

  • 像素

    以盒子的左上角为原点（0,0），水平向右为x轴，垂直向下为y轴，构建一个坐标系。

    • 第一个值：是X轴的坐标
    • 第二个值：是Y轴的坐标

    然后找到对应的坐标点，将图片的左上角与坐标点重合即可。

连写形式（background）

背景属性相关的连写形式

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div {
    /*背景颜色*/
    background-color: pink;
    /*背景图片*/
    background-image: url(200.jpg);
    /*背景平铺*/
    background-repeat: no-repeat;
    /*背景附着*/
    background-attachment: scroll;
    /*背景位置*/
    background-position: center center;
}
/*--------------------------------------*/
div {
    /*连写形式*/
    background: pink url(200.jpg) no-repeat scroll center center;
}

书写顺序：

background：背景颜色 背景图片 背景平铺 背景附着 背景位置

background:color image repeat attachment position;

background: red url(1.jpg) no-repeat scroll center center;

省略的特殊情况：

当div（盒子）的大小和背景图片的大小一样时（常见的写法）

可以只写background:url(200.jpg) 即可

省略的覆盖问题：

连写都要注意这个问题

如果需要同时设置单独的样式和连写的样式，可以

  • 把单独的样式写在连写的下面
  • 把单独的样式写在连写的里面

实际用的最多的情况：

把盒子的大小设置为背景图片的大小，此时只需要设置url（）即可，其他的样式就可以省略掉！！

ヾ(๑╹◡╹)ﾉ”英雄联盟案例（熟悉背景操作即可）

标签的三种显示方式（重要）

标签有很多，但是其显示的方式（特点），一般我们把它分为三种

回忆一下：div、p、span、a的效果~

div和p标签独占一行、宽度默认继承父盒子、高度由内容撑开

span和a标签一行显示一个、宽度和高度都是由内容撑开

块级元素

div就是一个块级元素

属性： display : block；

显示特点：

  • 独占一行（一行只能显示一个）

  • 宽度默认是父元素的宽度

  • 可不可以设置宽高？

    可以设置宽高！！

代表：

  • div、p、h（记忆）

除此之外还有很多

1
div,p,ol,li,ul,dt,dd,dl,header,footer,aside,nav,article,section......

行内元素

span就是一个行内元素

属性： display : inline；

显示特点：

  • 一行可以显示多个

  • 宽度和告诉默认都是由内容撑开的

  • 可不可以设置宽高？

    不可以设置宽高的

代表：

  • span、a

除此之外还有很多

1
a,span,b,u,s,i,strong,ins,del,em......

行内块元素

行内元素演变成现在的行内块元素的

input、img就是行内块元素的显示特点

属性： display: inline-block ;

特点：

  • 一行可以显示多个 (像是行内)
  • 可以设置宽高 (像是块级)

代表： input、img、textarea、select、button

历史问题：在很久以前只有两种显示方式（行内元素和块级元素）。因为行内块元素是从行内元素演变过来的，还在演变的过程中，所以有些属性并没有改过来，所以此时查看img标签的 display 属性值为 inline

三种显示方式的转换

  • display: block; 转成块级
  • display: inline; 转成行内
  • display: inline-block; 转成行内块
ヾ(๑╹◡╹)ﾉ”low导航（都是a标签 60*40）字体大小12px

nav

注意：p这种段落标签不要嵌套块级元素（惊天BUG）

用p标签里嵌套一个div，此时给p标签设置宽高100px，背景红色，给div设置宽高100px，背景颜色蓝色，请问此时页面中是什么效果？？

行高（line-height）

行高：两行文本之间基线的距离

ヾ(๑╹◡╹)ﾉ”画图演示基线

作用：控制两行文本之间的上下距离

常见的使用： 让单行文本在标签中垂直居中

1
line-height: 标签的高度;

行高能让哪些元素垂直居中？

行高除了可以让单行文本垂直居中之外，还可以让其他元素垂直居中

  • 文本
  • span、a标签（行内元素）
  • input、img标签（行内块元素）

特殊情况：要让 img标签 通过 line-height垂直居中 ，需要单独给 img标签 设置 vertical-align: middle; 属性

如果想让以上元素垂直居中，需要配合以上元素的所在标签（父元素）设置 line-height:标签的高度

其实你会发现，这几类和 text-align：center； 的三类是一样的

行高与font的连写注意点

字体连写里面还有行高属性。

完整版的font连写形式：

font: style weight size/line-height family

注意点：

line-height 如果写在 font 连写前面，会被层叠掉 

1
2
3
4
5
6
7
8
9
10
11
12
/*line-height书写位置：*/
/*1. 写在font里 OK */
font: italic bold 20px/200px '楷体';

/*2. 写在font后面 OK*/
font: italic bold 20px '楷体';
line-height: 200px;

/* 3. 写在font前面 会覆盖  */
line-height: 200px;
font: italic bold 20px '楷体';
/* 因为font的连写中有行高属性，连写中省略相当于设置了默认值 */

如果用到了line-height和font的连写

  • 要么把 line-height 写在 font连写的下面
  • 要么把 line-height 写进 font连写 的里面

链接伪类选择器（了解）

不仅仅是选中某个标签，而是选择的元素的某种状态

链接伪类选择器介绍

回顾a链接的特性

点击之前是蓝色，点击之后是紫色

我们可以手动设置a标签不同状态的颜色（或者其他样式）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*选中a标签没有点击过时状态*/
a:link {
    color: red;
}

/*选中a标签点击之后的状态*/
a:visited {
    color: pink;
}

/*选中鼠标移入时的状态*/
a:hover {
    color: yellow;
}

/*选中鼠标按下的状态*/
a:active {
    color: blue;
}

注意点：

  • 四种链接伪类选择器的顺序固定

    link visited hover active

    可以联想记忆：

    lvha → 看见lv包包就ha哈笑

  • hover用的较多，并且可以给其他标签使用。其他的几乎不用

ヾ(๑╹◡╹)ﾉ”五彩导航

居中方法小总结

水平居中的方法

1
2
3
4
text-align:center
1.文本
2.行内块元素（input/img）
3.行内元素（span/a）
1
2
margin：0 auto：
1.块级元素

垂直居中的方法

1
2
3
4
line-height：标签的高度；
1.文本
2.行内块元素（input/img）注意：img需要加 vertical-align : middle（垂直对齐方式居中）
3.行内元素（span/a）

有同学会问：那块级元素垂直居中怎么实现呢？

→ 这个就需要使用到之后学习的定位知识来完成了