前端复习：CSS专题3

2023-01-31 01:01:05 css 复习专题

1.1 行高

CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上。
```
line-height: 40px;
```
文字，是在自己的行里面居中的。比如说，现在的文字字号为14px，行高为24px。那么：
为了严格保证字在行里面居中，我们的工程师都有个约定：行高、字号，一般都是偶数。这样，它们的差，就是偶数，就能够被2整除。
1.2 单行文本垂直居中
文本在行里面居中，公式为：
```
行高:盒子高;
```
需要注意的是，这个小技巧，行高=盒子高。只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，需要设置盒子的padding值。

1.3 font属性
使用font属性，能够将字号、行高、字体一起设置。
```
font: 14px/24px “宋体”;
```

等价于三行语句：

font-size:14px;
line-height:24px;
font-family:"宋体";

font-family就是“字体”的意思。
网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装。比如说你设置为：
```
font-family: "华文彩云";
```
如果用户电脑中没有这个字体，那么就会变成宋体。页面中，中文我们只使用：微软雅黑、宋体、黑体。
为了防止用户电脑里面，没有微软雅黑这个字体。就要用英文的逗号，隔开备选字体，就是说如果用于电脑里面，没有安装微软雅黑字体，那么就是宋体：
```
font-family: "微软雅黑","宋体";
```
备选字体可以有无数个，用逗号隔开。
我们要将英文字体，放在最前面，这样所有的中文，就不能够匹配英文字体，就自动的变为后面的中文字体：
```
font-family: "Times New Roman","微软雅黑","宋体";
```
所有的中文字体，都有英文别名，我们也要知道：
微软雅黑的英文别名为：font-family: "Microsoft YaHei"; ；宋体的英文别名为：font-family: "SimSun";。
font属性能够将font-size、line-height、font-family合三为一：
```
font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";
```
行高可以用百分比，表示字号的百分之多少。一般来说，都是大于100%的，因为行高一定要大于字号。
```
font:12px/200% “宋体”
```
等价于：
```
font:12px/24px “宋体”;
```
2.1 伪类
也就是说，同一个标签，根据用户的某种状态不同，有不同的样式，这就叫做“伪类”。
类就是工程师加的，比如div属于box类，但是a属于什么类呢？不明确，因为要看用户有没有点击、有没有触碰，所以就叫做“伪类”。
伪类用冒号来表示，分为4种：
```
    a:link{
        color:red;
    }
    a:visited{
        color:orange;
    }
    a:hover{
        color:green;
    }
    a:active{
        color:black;
    }
```
1、link表示，用户没有点击过这个链接的样式，是英文中“链接”的意思。
2、:visited表示，用户访问过这个链接的样式，是英文“访问过的”意思。
3、:hover表示，用户鼠标悬停的时候链接的样式，是英文“悬停”的意思。
4、:active表示，用户用鼠标点击这个链接，但是不松手，此刻的样式，是英文“激活”的意思。
需要记住，这四种状态，在css中，必须按照固定的顺序：a:link 、a:visited 、a:hover 、a:active。如果不按照顺序，那么将失效。“爱恨准则”love hate，必须先爱后恨。
2.2 超级链接的美化
a标签在使用的时候，非常的难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
我们一定要将a标签写在前面，:link、:visited、:hover、:active这些伪类写在后面。

a标签中，描述盒子，伪类中描述文字的样式、背景。

    .nav ul li a{
        display: block;
        width: 120px;
        height: 40px;
    }
    .nav ul li a:link ,.nav ul li a:visited{
        text-decoration: none;
        background-color: yellowgreen;
        color:white;
    }
    .nav ul li a:hover{
        background-color: purple;
        font-weight: bold;
        color:yellow;
    }

需要记住，所有的a都不继承text、font这些东西，因为a自己有一个伪类的权重。
最标准的，就是把link、visited、hover都要写。但是前端开发工程师在大量的实线中，发现不写link、visited浏览器也挺兼容，所以把a标签简化了。

a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签蕴含了link、visited的状态。

.nav ul li a{
        display: block;
        width: 120px;
        height: 50px;
        text-decoration: none;
        background-color: purple;
        color:white;
    }
    .nav ul li a:hover{
        background-color: orange;
    }

3.1 background-color属性

背景颜色属性。CSS2.1中，颜色的表示方法有哪些？一共有三种：单词、rgb表示法、十六进制表示法。
3.1.1 用英文单词来表示
能够用英文单词来表述的颜色，都是简单颜色。
红色：background-color: red; 。
3.1.2 用rgb方法来表示
红色：background-color: rgb(255,0,0);。rgb表示三原色“红”red、“绿”green、“蓝”blue。光学显示器，每个像素都是由三原色的发光原件组成的。靠明亮度不同可以调成不同的颜色。
用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。
如果此项的值background-color: rgb(0,255,0); ；蓝色：，是255，那么就说明是纯色。
绿色：background-color: rgb(0,255,0); ；蓝色：background-color: rgb(0,0,255);；黑色：background-color: rgb(0,0,0);；白色：background-color: rgb(255,255,255);。
颜色可以叠加，比如×××就是红色和绿色的叠加：background-color: rgb(255,255,0);
3.1.3 十六机制表示法
红色：background-color: #ff0000;。所有用#开头的值，都是16进制的。
16进制表示法，也就是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255，00就是10进制的0，所以等价于rgb(255,0,0)。
3.2 background-image
用于给盒子加上背景图片：background-image:url(images/wuyifan.jpg);。
url()表示网址，unifORM resouces locator 统一资源定位符。images/wuyifan.jpg 就是相对路径。
背景天生就是被平铺满的。
3.3 background-repeat属性
设置背景图片是否重复，重复方式为：repeat表示“重复”。
repeat表示“重复”的意思。

也就是说，background-repeat属性，有三种值：

background-repeat:no-repeat;   不重复
background-repeat:repeat-x;    横向重复
background-repeat:repeat-y;    纵向重复

3.4 background-position属性

3.4.1 属性的意思

position就是“位置”的意思，background-position就是背景定位属性。
```
background-position:向右移动量 向下移动量;
```
定位属性可以是负数：

3.4.2 CSS精灵
“CSS精灵”，英文css sprite，所以也叫作“css雪碧”技术。是一种CSS图像合并技术，该方法时将小图标和背景图像合并到一张图片上，然后利用css的背景定位技术来显示需要显示的图片部分。
CSS精灵有什么优点，就是减少了Http请求。比如说4张小图片，原来需要4个http请求，但是用了css精灵后，4张小图片变成了一张图，http请求只有1个。
如淘宝网中的精灵兔：

3.4.3 使用单词描述属性
background-position描述左右的词为left、 center、right；描述上下的词为：top 、center、bottom。
```
background-position: right bottom;
```
3.5 background-attachment
背景是否固定。
```
background-attachment:fixed;
```
背景会被固定住，不会被滚动条滚走。
3.6 background综合属性
background属性和border一样，是一个综合属性：
```
background:red url(1.jpg) no-repeat 100px 100px fixed;
```

等价于：

1background-color:red;
2background-image:url(1.jpg);
3background-repeat:no-repeat;
4background-position:100px 100px;
background-attachment:fixed;

可以任意省略部分：
```
background: red;
```
定位有三种，分别为相对定位、绝对定位、固定定位。
相对定位为：position:relative;
绝对定位为：position:absolute;
固定定位为：position:fixed;
4.1 认识相对定位
相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。

也就是说，如果一个盒子想要进行位置调整，那么就要使用相对定位。

position:relative;   → 必须先声明，自己要相对定位了，
left:100px;       → 然后进行调整。
top:150px;       → 然后进行调整。

4.2 不脱标，老家留坑，形影分离

相对定位不脱离标准流，其真实的位置还是在老家里，只不过影子出去了，可以到处飘。

4.3 相对定位用途
相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：
1、微调元素；
2、做绝对定位的参考；
4.4 相对定位的定位值
可以使用left、right来描述盒子左、右的移动；可以使用top、bottom来描述盒子的下、上的移动。
绝对定位要比相对定位更灵活。

5.1 绝对定位脱标
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不准守。绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽高：
```
    span{
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: pink;
    }
```
5.2 参考点
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角。
如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：
面试题：
用bottom定位的时候，参考的是浏览器首屏大小对应的页面左下角：

5.3 以盒子为参考点
一个绝对定位的元素，如果父辈元素中也出现定位的元素，那么将以父辈这个元素，为参考点：

要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷。

<div class="box1">   →  相对定位
    <div class="box2">  →  没有定位
        <p></p>   → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
    </div>
</div>

<div class="box1">   →  相对定位
    <div class="box2">  → 相对定位
        <p></p>   → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
    </div>
</div>

不一定是相对定位，任何定位，都可以作为参考点。

<div>  → 绝对定位
    <p></p>  → 绝对定位，将以div作为参考点。因为父亲定位了。
</div>

5.4 绝对定位的盒子居中

绝对定位之后，所有标准流的规则，都不适用了，所以margin : 0 auto；失效。可以使用如下设置使其水平居中：
```
left:50%;
margin-left:负的宽度的一半
```
固定定位，就是相对于浏览器窗口的定位。无论页面如何滚动，这个盒子显示的位置不变。
固定定位脱标。
1、z-index值表示谁压着谁。数值大的盖住数值小的。
2、只有定位了的元素，才能够有z-index值。也就是说，不管相对定位、决定定位、固定定位，都可以使用z-index值。而浮动的东西不能够使用。
3、z-index值没有单位，就是一个整数值。默认的z-index值为0。
4、定位了的元素，永远能够压住没有定位的元素。

相关文章

前端复习：CSS专题3

1.1 行高

1.2 单行文本垂直居中

1.3 font属性

2.1 伪类

2.2 超级链接的美化

3.1 background-color属性

3.1.1 用英文单词来表示

3.1.2 用rgb方法来表示

3.1.3 十六机制表示法

3.2 background-image

3.3 background-repeat属性

3.4 background-position属性

3.4.1 属性的意思

3.4.2 CSS精灵

3.4.3 使用单词描述属性

3.5 background-attachment

3.6 background综合属性

4.1 认识相对定位

4.2 不脱标，老家留坑，形影分离

4.3 相对定位用途

4.4 相对定位的定位值

5.1 绝对定位脱标

5.2 参考点

5.3 以盒子为参考点

5.4 绝对定位的盒子居中