前端开发学习之CSS

来张思维导图...

一、什么是CSS

CSS，英文全称Cascading Style Sheets，中文名层叠样式表，从这个名称中我们就可以看出，它是一个样式，层叠的样式，用来描绘html的。俗话说，人靠衣装马靠鞍（等等，这句话好像不是这样用的，毕竟下一句是...），如果说html是一个人的话，css就是对其化妆，层层抹粉，让其更帅更美。

二、CSS的基本思想（个人理解）

css的基本思想其实很简单，就是简单的两步，找到要化妆（修改样式）的对象，以及怎么化妆（修改成什么样的）两步。

三、CSS的引入方式

引入方式也就是写的地方，不同于html，css可以写在三种地方，分别是：

1.行内式

写在html的标签的style属性里，语法是 style="属性1=值1 属性2=值2 ..."，不同的键值对之间用空格隔开。如：

    <div class="car-img" style="background-color: #dcd8d9; background-image: url(./assets/1.jpg);">
    </div>

这里的属性值后面会介绍，先了解下语法规则。

行内式设置的样式只适用于当前这个标签，因此这种写法每个想要修改样式的元素都要写一个，很不方便，不推荐使用。

2.内连式

写在html的head标签里，用style标签包裹起来，这里面的样式会适用于当前页面，提高了代码的复用性。如：

    <style>
        div {
            font: 700 normal 50px 楷体;
        }
    </style>

3.外联式

将css样式，写在一个单独的css文件里（文件后缀为.css），想要用样式的话，通过在头文件里写link标签来引用这个css文件，语法如下：

<link rel="stylesheet" type="text/css" href="css/bg.css">

href这个属性是链接的文档所在的位置，推荐相对路径

rel这个属性表示链接的文档与当前文档的关系，stylesheet是指文档的外部样式表

type 属性规定被链接文档的 MIME 类型。

引入方式小结

css的三个引用方式中，行内式优先级最高的，其余两个优先级相同，毕竟行内式是跟特定元素住在一块了，而内连式和外联式是分家的，是针对一类元素，或具有某一特征的元素处于特定情况下的元素，至于为什么是针对一类元素，请看后面的选择器。

四、CSS选择器

具体怎么找到修改样式的对象，就需要用到CSS的选择器。css选择器通常都是在内连式和外联式中使用的，选择器常分为以下几种

1.元素选择器

顾名思义，是选择元素的，只要是同类元素都会被选中，如：

h1{
            color: aliceblue;
  }

这里的凡是h1标签的字体颜色都发生了改变。

语法规则如下：

元素名{

　　属性1:值；

　　属性2:值;

}

2.类选择器

选择的是一类的元素，也就是具有相同class属性值的元素，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 类选择器</title>
    <style>
        .red{
            color:red;
        }
        .blue{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="red">Lorem ipsum dolor sit amet.</div>
    <div class="blue">Sunt harum tenetur adipisci id.</div>
    <div class="red">In, adipisci! Reprehenderit, voluptatibus eius?</div>
    <div class="blue">Officiis maxime minima dolores sequi.</div>
</body>
</html>

View Code

结果如下：

类选择器语法规则：

.类名{

　　样式； /*属性：值这种键值对形式的我就简写为样式了，见谅*/

}

3.id选择器

id值在html中是唯一的，因此id选择器能够选择唯一的特定一个元素。如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #name{
            color:red
        }
    </style>
</head>
<body>
    <div id="name">sssss</div>
    <div class="mydiv">sssssss</div>
    <div class="red">ssssss</div>
    <p class="red">sssss</p>
    <div id="red">ssssss</div>

</body>
</html>

View Code

结果图如下：

语法规则：

#id名{

　　样式；

}

以上都是css的一些基本选择器，接下来是一些复合选择器，复合选择器是由两个或两个以上的选择器组成的

4.并集选择器

适用场景：实际过程中我们可能有多个选择器有着相同的样式，如字体都是某种特定颜色，这种时候，为减少代码量，诞生了并集选择器，共有选择器之间的相同样式。

语法规则：

选择器1, 选择器2...{

　　选择器1，2共有的样式；

}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        h1,
        p{
            color: red;
        }
    </style>
</head>
<body>
    <!-- h1>lorem^p>lorem   ^表示回到上一级节点应为lorem已经是h1的子节点了-->
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto iusto amet soluta ipsa odio enim dignissimos. Quae nostrum quam ex?</p>

</body>
</html>

View Code

5.交集选择器

适用场景：当想要选择的元素同时具有两个特征的时候，比如说，要选中的是一个具有class属性，值为p1（这里只是举例，正常情况下，class的值应该要见名知义）的p元素，此时就可以用交集选择器来选择。

语法规则：

选择器1选择器2（常为class选择器）{

　　样式；

}

示例：

    <div class="p1">div</div>
    <p>段落</p>
    <p class="p1">小可爱</p>

如果只要让小可爱变成紫色的话，css应该这样写：

p.p1{
            color: purple;
}

结果图如下：

6.后代选择器

适用场景：想要选择一个元素的后代元素（与该元素具有嵌套关系，包括儿子，孙子等），可以使用这个选择器。

语法规则：

父选择器后代选择器{

　　该后代具有的样式；

}

示例：

<p><span> This is a <em>important</em> paragraph.</span></p>

想要将p标签下的，em标签下的字体变为红色，css应该这样写：

        p em{   /* 将p后代中的em标签设置成红色 */
            color: red;
        }

结果如下：

7.子选择器

使用场景：当想要只选择一个元素的子元素，不选择这个元素的孙辈以后的元素。

语法规则：

父选择器>子选择器{

　　子选择器的样式；

}

示例：

    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

当只想要上面那个h1的strong标签里的元素变为红色时，如果使用后代选择器，会让上下两个h1里的very都变成红色，因此要使用子选择器，css代码如下：

        h1>strong{
            color: red;
        }

结果图如下：

8.相邻兄弟选择器

适用场景：当只想要选择紧跟一个元素后的元素，且这两个元素具有同一个父元素，我们把这两个元素称为相邻兄弟，要选后一个元素时，可以用相邻兄弟选择器。

语法规则：

兄元素+弟元素{

　　弟元素的样式；

}

示例：

<body>

<h1>This is a heading.</h1>

<p>This is paragraph.</p>

</body>

当只想要让h1后的p元素标签内的文字变为红色的时候，使用兄弟选择器，css代码如下：

        h1 + p{
            color: red;
        }

9.属性选择器

适用场景：当想选择具有某一特定属性值的元素的时候，使用此选择器。

语法规则：

[属性1=值]{ /*值可以不用加引号*/

　　样式；

}

示例：

    用户:<input type="text"><br>

想要让文本框里的字和光标变红色，css代码如下

        [type=text]{
            color:red /* 里面的光标会变成红色 */
        }

结果图：

10.伪类选择器

什么是伪类，伪类是 W3C （World Wide Web Consortium 万维网联盟，一个进行web标准规范的组织）制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。（参考网站C语言中文网，mdn）

语法规则：

选择器:伪类名{

　　样式；

}

由于伪类数量较多，本文就只选择其中较为常用的来介绍。

示例：

<a href="http://www.baidu.com">百度</a>

实现超链接未访问时，已访问后，鼠标移动到超链接，点击，的样式分别为红色，绿色，粉色，蓝色

        a:link {color: #FF0000}    /* 未访问的链接 */
        a:visited {color: #00FF00}    /* 已访问的链接 */
        a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
        a:active {color: #0000FF}    /* 选定的链接 */

结果图：由于调试时已经访问过了，就会一直时显示这个为已访问后的链接样式，

五、CSS常用属性

1.尺寸属性

对于一个块元素（或行内块）来说，我们通常会在css中定义它的宽高，属性如下：

width 宽

height 高

示例：修改一个div的宽高，为了方便显示，设置了背景色，不设置的话就看不到。

        div {
            width: 100px;
            height: 100px;
            background: pink;
        }

结果图：

2.字体相关属性

修改文字样式的属性，有：

font-siize：字体大小

font-weight：字体粗细

font-style：字体风格，如斜体（italic oblique）等

　　italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。

font-family：字体族，如宋体，楷体，微软雅黑等

上面四个属性可以简写在font属性里，语法如下，要注意书写顺序哦

font： style weight size family

示例：

    <div>
        Lorem ipsum dolor sit amet.
    </div>

css样式：

        div {
            font: italic 700 30px 宋体;
        }

结果图：

3.文本相关属性

修改的时文本相关样式，如颜色对齐等，常用属性有：

color：颜色

　　颜色的取值有四种方式，

　　　　1）关键字形式的，如red，blue等。

　　　　2）rgb形式，如rgb(255,0,0),rgb(0,0,255)等，括号内的三个数字分别是红色分量，绿色分量，蓝色分量，值的范围是0-255。

　　　　3）rgba形式，rgba(255,0,0,0.5)，最后一个分量是alpha 透明度，范围0（完全透明）-1（完全不透明）。

　　　　4）16进制形式，如 #fff，#efefef等，#号后的数字两两为一组，分别为红绿蓝，由于是16进制，换算下来也是0-255，如果每一组的两个数都相同的话，可以简写为1个数。

text-align：对齐方式，默认为left，值有center居中，right右对齐等。

text-decoreation：文本修饰线，有如下划线 underline ，上划线 overline ，穿过文本的一条线line-through等，默认为none。

text-indent：文本首行缩进。

line-height：行高，当设置行高等于容器高的时候，能实现文本垂直居中。

示例：

        div {
            color: #f00;
            text-align: center;
            text-decoration: overline;
            text-indent: 2em;
            line-height: 100px;

            height: 100px;
            background-color: rgb(169, 168, 168);
        }

结果图：

4.背景相关属性

修饰容器背景的相关样式，属性有：

background-color：背景颜色

background-image：url(图片路径) 背景图片

background-repeat：背景平铺方式，默认为水平，通常值有repeat-x 水平平铺，repeat-y 垂直平铺，no-repeat 无平铺

background-position：背景图片位置，值通常有三种，

　　1）10px 20px 这类单位为像素的值，容器左上角为0，0 ，背景图片水平向右（向右为为正）移动10px，垂直向下（向下为正）移动20px。

　　2）关键字形式的如 center center，实现背景图片水平垂直居中。

　　3）百分比值形式，如50% 50% ，实现的也是背景图片水平居中，这种时候当图片与容器左上角重合时，值为0% 0%，当图片右下脚与容器右下角重合时，值为100%。

背景属性简写，使用background属性，

background：color image repeat position

示例：

        div{
            width: 40px;
            height: 40px;
            background-image: url(./img/icon.png);
            background-position: -131px -38px;
        }

结果图：

此处有两个知识点，

1）关于img标签与背景图片的区别

1.img属于html的范畴，是页面骨架的一个部分，background-image是属于css的范畴，主要是起到一个装饰作用。
2.img如果没有设置图片，其宽高为0*0，本质是一个行内块。
3.使用div+background-image，显示图片，即使设置了背景图片，在不设置div高度的时候，其div的高为0，图片显示不出来

2）关于精灵图的应用

利用背景位置这一属性可以实现“精灵图”，什么是精灵图，下面贴一张图给大家看一下，

可以看到像这样由许多图标组成的大图就是一张精灵图，上面的示例就是利用背景位置和容器大小实现的获取精灵图中的一个图标。

六、CSS三大特性

1.继承性

即子元素会继承父元素的样式，能被继承的样式有 font- ，text- ， line-， color 这几类属性。

示例：html部分代码：

html部分代码：

    <div class="father">
        father
        <div class="son">
            son
        </div>
    </div>

css代码：

        .father {
            /* 字体相关 */
            font: 30px 宋体;
            /* 文本相关 */
            text-decoration: underline;
            /* 行高 */
            line-height: 100px;
            /* 文本颜色 */
            color: red;
        }

请问son的样式是，

2.层叠性

既然都叫层叠样式表了，层叠性必然少不了。CSS的层叠性体现在，同类样式会覆盖，不同的样式会叠加。

示例：

html代码：

    <div>
        <div>猜猜我是什么颜色</div>
    </div>

css代码：

        div div{
            color: red;
        }

        div{
            color:green;/* 相同的样式会被覆盖 */
            font-size: 50px;/* 不同的样式就会叠加 */
        }

是什么颜色呢，答案揭晓

此时我们F12打开浏览器开发者模式，查看代码中的div元素，发现单独定义的div样式被划掉了，那么，这个覆盖的规则又是什么样的呢，请看下面css的优先级。

3.优先级

css定义样式具有优先级，相同样式优先级高的会覆盖优先级低的样式，相同优先级，后写的样式覆盖前面写过的同类样式。下面给出一个优先级计算权重表

选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=""	1,0,0,0
每个!important	∞ 无穷大

上面这张表能够帮助大家理解选择器的优先级，注意，权重的计算没有进位一说，也就是说，一个类选择器定义的样式，比一万个元素选择器套娃组成的后代选择器定义的样式优先级高。此外，这张表也没必要记，因为当我们在vscode中编写css代码的时候，将鼠标放到选择器上，能查看到优先级。如下：

这也解释了为什么2中的示例的颜色为红色了。

总结一下，css选择器的优先级为继承或*<元素选择器<类伪类选择器<id选择器<行内样式<!important。

七、CSS盒子模型

1.万物皆盒子

万物皆盒子，在web上，你所看到的东西都是由一个个盒子组成的，像是标题h1-6，段落p，div，span，等，都是一个个盒子，我们设置样式，基本上就是设置盒子的样式。

2.盒子的分类

css将盒子分为了三大类，分别是块盒，行盒，和行内块三种。

1）块盒，css中默认属性display为block，是独占一行的，且在其不设置宽高的情况下，宽度默认为父元素的宽度，高度由内容撑开，没有内容高度为0。

2）行盒，css中默认属性display为inline，是共占一行的，当浏览器显示不下的时候，会换行，并且，其宽高由内容撑开，不受设置影响。

3）行内块，css中默认属性display为inline-block，具有块盒行盒两种特性，即可以设置宽高，也能共占一行，常见的行内块是img标签。

从上面的分类可以看出，盒子的分类并不是绝对的，与display这个属性有关，也就是说，我们可以通过设置display来实现块盒，行盒，行内块的转换。

3.盒子模型的组成

盒子模型由四部分组成，由内到外是，content内容区域，padding内边距，border边框，margin外边距。

1）content内容区域

此处内容区域是由css中的尺寸属性，width和height设置的，我们常设置的宽高也就是内容的宽高，而非是盒子的宽高。

2）padding内边距

内边距指的就是盒子内容到边框之间的距离，css语法设置规则如下：

padding: 10px 10px 10px 10px;

padding: 10px 5px 10px; /*上10 右5 下10 左同右*/

padding: 10px 5px;/*上10，右10，下同上，左同右*/

padding: 10px;/*全部均为10*/

在为padding赋值时，顺序依次分别为上边距，右边距，下边距，左边距（从上开始顺时针），如果有一个方向没有赋值，那么默认与对面相同。在实际过程中，通常只会对一个方向上赋值，可以这样写：

padding-top：10px

padding-right：10px

padding-bottom：10px

padding-left：10px

内边距的应用，可以用来设置一些行内块元素之间具有相同的间隙，示例：

3）border 边框

盒子的边框，是盒子的最外围。css样式语法如下

分开写：

border-width 边框宽度

border-type 边框样式有solid 实线，dashed虚线，dotted 点线等

border-color 边框颜色

简写写法：

border: width type color;

对某一边写法：

border-top ：width type color; 等

边框应用：画等腰三角形，通过设置不同边框不同颜色来完成

如给一个div宽高都设置为0，每个边框都设置不同颜色的时候，

        div {
            width: 0px;
            border-top: 30px solid blue;
            border-right: 30px solid green;
            border-bottom: 30px solid pink;
            border-left: 30px solid red;
        }

就会发现出现了这么个东西

此时这个东西有4个三角形，想要其中一个怎么办，简单，把其他的颜色调成透明不就好了吗。

        div {
            width: 0px;
            border-top: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid pink;
            border-left: 30px solid transparent;
        }

当当完成：

如果想要其它形状的怎么办，可以调节各边边框的宽度来完成，具体看如下图。

边框还有一个常用特殊样式，边框圆角border-radius 语法：

border-radius:10px 10px 10px 10px；/*依次顺序为左上角，右上角，左下角，右下角，如果有某一方向没有赋值，则默认是和对面相同（右下对左上，左下对右上，只有一个值则全部都一样）*/

圆角应用：画圆设置圆角为盒子边长（既然都谈到边长了，也就是说这个肯定是个正方形盒子）的一半

示例：

css代码：

        div {
            width: 100px;
            height: 100px;

            border: 1px solid black;
            border-radius: 50px;
        }

结果图：

4）盒子模型大小的计算公式

以宽度为例，盒子的宽度=左边框的宽度 + 左内边距的宽度 + 内容的宽度 + 右内边距的宽度 + 右边框的宽度。盒子的高度同理。

可见设置盒子的边框内边距其实会撑大盒子，此时解决方法有两种：

手动内减法：依据公式，计算盒子内容的实际宽高。
自动内减法：在盒子的样式中加上一个属性 box-sizing: border-box；这样，在你设置width，height属性的时候，该宽高就会变为盒子的宽高，内容区域会自动内减。

5）margin外边距

外边距的作用是用来设置盒子与盒子之间的距离。

语法：

　　margin:5px 10px 15px 20px; /*规律与padding一致*/

为某一方向上取值，规律同样与padding一致

　　margin-top/right/bottm/left

在页面布局的过程中，盒子的外边距会存在三种情况。

第一种，水平布局的情况下，（多为行内块，或者浮动的盒子，浮动的概念后面会讲），两个盒子间的间距就是盒子之间的左或右外边距之和。

示例：

html代码：

    <div class="c1"></div>
    <div class="c2"></div>

css代码：

        div{
            display: inline-block;
            width: 200px;
            height: 200px;
        }
        .c1{
            background: pink;
            margin-right: 100px;/* 右外边距 */
        }
        .c2{
            background: skyblue;
            margin-left: 100px;/* 左外边距 */
        }

结果图：

第二种，在（块盒）垂直布局的情况下，会发生外边距（上下）合并的现象，实际间距会取较大的值

示例：

html代码：

    <div class="c1"></div>
    <div class="c2"></div>

css代码：

        div{
            width: 200px;
            height: 200px;
        }
        .c1{
            background: pink;
            margin-bottom: 150px;/* 下外边距 */
        }
        .c2{
            background: skyblue;
            margin-top: 100px; /* 上外边距 */
        }

结果图：

第三种，在嵌套盒子的情况下，会发生外边距塌陷的情况。

示例：

html代码：

    <div class="father">
        <div class="son"></div>
    </div>

css代码：

        .father{
            width: 300px;
            height: 300px;
            background: pink;        
        }
        .son{
            width: 100px;
            height: 100px;
            background: skyblue;

            margin-top: 100px;
        }

这里我们想让这子盒子上边离父盒子距离100px，但是发现父盒子跟着子盒子一起下来了。

解决外边距塌陷的方法：

给父盒子设置上边框，或者上内边距，但这种时候会撑大盒子，不推荐。
给父元素设置overflow: hidden ;
父元素有内容的时候，如文本等，也会将子元素与父元素分隔。
将父元素转成行内块元素。
设置双伪元素（::after ，::before），也能解决。

八、伪元素

1.使用场景

一般在页面中非主体内容，可以使用伪元素。

2.与元素的区别

元素，也叫html里的标签，其是html的结构组成的一部分。

伪元素，是css模拟出来的标签效果，其并不占用html的结构。

两者的本质区别，在于是否创建了新的元素。

3.常用伪元素

css3规范中伪元素一般用“::”来和伪类进行区分，实际使用中伪元素用单冒号并不会出错，且能够保证浏览器的兼容性。本文中，伪元素就都用双冒号，伪类用单冒号。

1）::before

语法：

选择器::before{

　　content:'伪元素的内容';

　　display: 默认为行级元素；

　　样式;

}

在选择器所选中的元素的子元素（没有的话就给其添加一个子伪元素）包括选中元素的内容最前面加一个伪元素。

有前就有后，自然也有后面的伪元素

2）::after

语法：

选择器::after{

　　内容同before;

}

在选择器所选中的元素的子元素（没有的话就给其添加一个子伪元素）包括选中元素的内容最后面加一个伪元素。

示例：

html代码：

    <div class="father">
        我是父元素
        <div class="son">
            我是子元素
        </div>
    </div>

css代码：

        .father {
            width: 400px;
            height: 400px;
            background: pink;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
        }

        .father::before {
            content: '我是前面的伪元素';
            display: block;
            width: 100px;
            height: 100px;
            background: skyblue;
        }

        .father::after {
            content: '我是后面的伪元素';
            display: block;
            width: 100px;
            height: 100px;
            background: skyblue;
        }

结果图：

更多其他伪元素，可以查看相关文档。

九、伪类结构选择器

这个选择器在前面的选择器的分类中有提到过，其作用是可以根据元素在html的结构关系来查找元素，如查找第偶数个或奇数个等需要符合一定条件的元素。

伪类选择器与其他选择器的区别是，它在html的结构中不存在的，是通过元素间的逻辑关系来选择元素的。像是a标签的各种状态就是伪类选择器。

常用伪类选择器介绍

选择一个元素，有 :first-child，:last-child，:nth-child(n)等伪类，

示例：

html代码

  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>

css代码

    li:first-child{
      color: red;
    }
    
    /* 2、找到最后一个子元素，并且为li标签 */
    li:last-child{
      color: red;
    }
    
    /* 3、找到第3个子元素，并且为li标签 */
    li:nth-child(3){
      color: pink;
    }

    /* 4、找到倒数第3个子元素，并且为li标签 */
    li:nth-child(8){
      color: pink;
    }

    li:nth-last-child(3){
      color: blue;
    }

这里不要被英文误导了，像是博主在一开始学的时候，看到英文就下意识认为li:first-child为找li标签的第一个子元素，其实并不是，这里是一个交集选择器的思想，其实是要找的元素是一个li标签的同时，又要满足是第一个子元素。

结果图如下：

选择多个元素，使用 :nth-child(an + b) 或者 :nth-last-child(an + b) ，这两个的区别是前者从前往后找，后者从后往前找。括号内的n值域是非负整数，且 an + b不能颠倒顺序，否则啥也选不到。

示例：

css代码

    /* 1、找到偶数个li------------------------ */
    li:nth-child(even){
      color:red
    }
    li:nth-child(2n){
      color:blue
    }
  

    /* 2、找到奇数个li------------------------ */
    li:nth-child(odd){
      color:pink
    }
    li:nth-child(2n+1){
      color:gray
    }

    /* 3、找到前5个------------------------ */
    li:nth-child(-n+5){
      color:purple
    }
   

    /* 4、找到从第5个往后-------------------- */
    li:nth-child(n+5){
      color:yellow
    }

结果图：

十、浮动float

1.标准流

在介绍浮动之前，先介绍一下标准流的概念。

标准流，又称文档流，是浏览器在渲染显示网页内容的默认时采用的一套排版规则，规定了应该以何种方式排版元素。

标准流常见规则：块元素独占一行，从上到下垂直布局，行元素包括行内块共占一行，从左到右水平布局。

2.浮动的概念

浮动这一概念的出现早期是为了解决图文混排问题而出现的。像在word文档中我们也常常见到浮动功能实现图文混排。而网页中的浮动多用于页面布局（块元素水平排布）

3.语法

float : left; 向左浮动

float : right; 向右浮动

float : none; 默认无浮动

4.特点

浮动的元素会脱离标准流，不在标准流中占用空间，相当于从飘起来一样。
浮动的元素，层级比标准流中的级别高，会覆盖到标准流中的块元素，但不会覆盖块内的文本，内容，以及其他行级内容，相当于图文混排。
浮动的元素后面的元素会顶替浮动元素原来的位置。
浮动元素会受到上边块元素的边界的影响，如果上边有块元素，浮动的元素不会跑到上边，而是在块元素的下边浮动。
浮动的元素有特殊的显示效果，块级元素浮动后，可以一行显示多个，行级元素浮动后，可以设置宽高，没有设置display属性就可以设置宽高。

示例：

html代码

    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <div class="c3">c3</div>

css代码

        .c1,
        .c3 {
            /* 浮动元素会受到上面元素的边界的影响，所以下面的元素飘不到同一行 */
            /* 设置display 为inline-block，下面的元素就能飘到上面，inline-block并不是独占一行的*/
            /* 但是不会覆盖这个 */
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            display: inline;
        }

        .c2 {
            width: 110px;
            height: 110px;
            background-color: blue;
            float: left;
        }

当三个div都设置浮动的时候，发现设置了display为inline的c1和c2设置的宽高生效了。

打开浏览器开发者模式，注释掉c1，c2的float属性，发现c2浮到了最前面

注释掉c1，c2的display属性，使其恢复到块元素，发现c3移到了c2下面，c2受c1边界影响，并没有在原来的位置浮起来，但是c3中的文字内容则被挤了出去。

再注释掉c2的float属性，恢复到了原来的块元素标准流排布模式。

5.清除浮动

先来看下这样一个案例。

html代码

    <div class="father clearfix">
        <div class="son"></div>
    </div>

css代码

        .father {
            background: pink;
            /* 清除浮动方式1 */
            /* height: 100px; */
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* float: left; */
        }

结果图：

当我们要让子元素浮动时，也就是取消注释float属性时，发现父元素的高度没有了。

这样的情况就是子元素浮动的时候脱标，无法撑开父元素的高度，导致父元素高度为0，这会严重影响页面的布局，因此需要使用清除浮动的操作。

清除浮动常用方法:

设置父元素的高度。既然子元素脱标导致父元素高度塌陷，那么最简单粗暴的方法就是直接给父元素设置高度。像是在上面的案例就可以直接给父元素设置高度为100px，但这种方法的缺点也很明显，就是高度固定了，如果后面更新网页的时候，父元素内部的子元素发生变化时，父元素的高度也需要改变，不利于网站的维护。
额外标签法。利用css中有专门的清除浮动的属性，clear 来清除浮动。在父元素的最后一个子元素后面添加一个元素，并设置这个元素的css样式为clear:both。这种方法的缺点是复杂化了html的文档结构。
单伪元素法。既然额外标签会复杂话html文档结构，那么添加一个伪元素就不会复杂化html文档结构了。但是如果网站中要清楚浮动的元素有多个的话，每个都要添加一个伪元素，复杂化了css代码，怎么提高css代码的复用性呢，就用到了下面一种方法。
双伪元素法。

我们在css里写上下面这样的代码

        .clearfix::after,
        .clearfix::before {
            content: '';
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

再将clearfix类给要清除浮动的元素，就可以实现在父元素中前后添加了两个伪元素，前用于消除外边距塌陷的影响，后用于清除浮动，大大提高了css代码的复用性。

回到上面的案例，给子元素设置一个上外边距，设置浮动，并给父元素添加clearfix类，得到下面的结果图。外边距塌陷与高度塌陷的问题都解决了。

十一、定位

1.简介

定位是一种布局方式，可以实现元素自由摆放在页面任意位置。定位有三种，分别是相对定位，绝对定位，固定定位。一般使用是通过定位模式加边偏移来完成。

边偏移，要定位元素相对于某一参考元素的位置，共4种偏移，上top，右right，下bottom，左left。

2.相对定位

语法:

　　position:relative;

特点：

相对定位的元素参考的坐标原点是其本身原来的位置。
相对定位的元素在标准流中占据了空间。

案例：

html代码:

    <div></div>
    <div class="two"></div>
    <div></div>

css代码:

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        /* 对第二个div进行定位 */
        .two {
            position: relative;
            top: 10px;
            left: 20px;
            background-color: skyblue;
        }

结果图:

3.绝对定位

语法:

　　position:absolute;

特点:

这种定位在标准流中不占用空间，是脱标的。
参考的是最近的一个有定位的祖先元素(先找父元素，没有定位就参考父元素的父元素...)，如果都没有，就参考body。

案例:

html代码:

    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
    </div>

css代码:

        .father {
            position: relative;
            width: 300px;
            height: 300px;
            background: pink;

            margin: 100px;
            /*为了看到更好的效果*/
        }

        .son1,
        .son2 {
            width: 100px;
            height: 100px;
        }

        .son1 {
            position: absolute;
            top: 50px;
            left: 50px;

            background: skyblue;
        }

        .son2 {
            background: purple;
        }

结果图:

4.固定定位

语法:

　　position:fixed;

特点:

在页面中不占位置，是脱标的
相对与浏览器的显示界面定位的。

案例:

html代码：

    <img src="../assets/img/floor1.jpg" alt="">
    lorem1000

css代码:

        img {
            position: fixed;
            top: 50%;
            right: 0;

            width: 50px;
            height: auto;

            transform: translate(0, -50%);
        }

结果图:

5.不同布局间的层级关系

总的来说，网页中的层级关系默认是标准流布局<浮动布局<定位布局。

层级越大的元素，会覆盖层级小的元素。

例如：

对于不同定位模式来说，层级都是一样的，但后写的定位会覆盖先写的定位。

例如:

html代码

    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>

css 代码

        div {
            width: 200px;
            height: 200px;
        }

        .red {
            position: relative;
            top: 0px;
            left: 0px;
            background: red;
            /* z-index: 3;值越大,层级就越高 */
        }

        .green {
            position: absolute;
            top: 50px;
            left: 50px;
            background: green;
            /* z-index: 2; */
        }

        .blue {
            position: fixed;
            top: 0px;
            left: 150px;
            background: blue;
            /* z-index: 1; */
        }

结果图:

如果想要修改定位的元素的层级关系的话，可以用css提供的 z-index属性来修改某一元素的层级，值越大，元素就排在越上面，值也可以有负值。

十二、CSS一些常用其他属性

1.vertical-align

vertical-align这个属性是用来定义行内元素基线相对于该元素所在行的基线的垂直对齐方式，默认是基线对齐。

可以前往mdn文档查看详细说明

2.overflow

overflow属性的作用是定义内容部分显示效果，它的取值有如下几个

visible 显示的，默认的

hidden 隐藏，超出边界会自动隐藏

auto 超出部分的内容可以通过滚轮显示。

3.visibility

设置的是元素的隐藏效果，当值为hidden时，隐藏元素，但其依然在网页中占据着位置。

如果想要其不占用位置的话可以使用 display:none，这个能够隐藏元素，并且不占用页面的位置。像是常用的网页广告屏蔽插件例如ADblock plus，就是是把广告块的css样式中设置了display:none，使广告隐藏了起来达到屏蔽的效果。顺带一提好像会屏蔽带有ad关键字的广告图片，如果你使用了带有ad的图片，但没有正常显示，可以试着关掉屏蔽广告插件试试。

十三、CSS新特性

1.过渡 transition

这一属性的作用是能够让元素在不同状态切换时有一个过渡的效果，逐渐变化的过程。

transition 是一个简写属性，语法规则如下：

transition: 要过渡的属性（多个属性用逗号隔开）时间;

示例：

html代码

<div></div>

css代码

        div {
            width: 200px;
            height: 200px;
            background: pink;
            transition: all 1s;
        }

        div:hover {
            width: 800px;
        }

2.位移

通过属性 transform，来实现，transform还可以实现旋转，缩放，倾斜等功能，本文只介绍常用的位移和旋转。

语法

transform: translateX(像素值或百分比) translateY(像素值或百分比)

或者 transform:translate(X方向上移动的像素值或百分比, Y方向上移动的像素值或百分比)

其中的百分比指的是相对于自身宽高的百分比。

示例：

html代码：

    <div class="father">
        <div class="son"></div>
    </div>

css代码

        .father {
            width: 500px;
            height: 500px;
            border: 1px solid red;

        }

        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 1s;

        }

        .father:hover .son {
            /* transform: translate(100px, 100px); */
            transform: translateX(100px) translateY(100px);
        }

3.旋转

语法

transform: rotate(角度)；

示例

html代码

    <div>
        <img src="./day08_动画_flex布局/02_代码/img/rotate.png" alt="">
    </div>

css 代码

        img {
            /* 设置动画过渡 */
            transition: all 5s;
        }


        div img:hover {
            /* 正顺负逆 */
            transform: rotate(360deg);
            transform: rotate(-360deg);
        }

4.渐变

使用background-image: linear-gradient() 实现背景颜色的渐变效果

示例

        div {
            width: 100px;
            height: 100px;

            background-image: linear-gradient(red, pink);
        }

结果图

5.动画

动画是元素在多个状态间的变化过程，本质是逐帧画面的快速播放。

动画的使用分为两步

　　1.定义动画

　　　　@keyframes 动画名称{

　　　　　　from{}

　　　　　　to{}

　　　　}

　　或者 @keyframes 动画名称{

　　　　　　0%{}

　　　　　　10%{}

　　　　　　50%{}

　　　　　　100%{}

　　　　}

　　中间的状态可以自己拟定。

　　2.使用动画

　　animation: 动画名称动画花费时长速度曲线延迟时间重复次数动画方向执行完毕时状态；

　　前两个是必须赋值的，后面的都有默认值，可以按需赋值，同样的这个属性也是一个简写属性，具体可以前往mdn文档查看。

示例走马灯

html代码

    <div class="box">
        <div class="img">
            <img src="./走马灯_效果参考/images/1.jpg" alt="">
            <img src="./走马灯_效果参考/images/2.jpg" alt="">
            <img src="./走马灯_效果参考/images/3.jpg" alt="">
            <img src="./走马灯_效果参考/images/4.jpg" alt="">
            <img src="./走马灯_效果参考/images/5.jpg" alt="">
            <img src="./走马灯_效果参考/images/6.jpg" alt="">
            <img src="./走马灯_效果参考/images/7.jpg" alt="">
            <!-- 为防止动画每完成1次的时候有空白而多添加的重复图片 -->
            <img src="./走马灯_效果参考/images/1.jpg" alt="">
            <img src="./走马灯_效果参考/images/2.jpg" alt="">
            <img src="./走马灯_效果参考/images/3.jpg" alt="">
            <img src="./走马灯_效果参考/images/4.jpg" alt="">
        </div>
    </div>

css 代码

        .box {
            width: 600px;
            height: 85px;
            margin: 0 auto;
            border: 1px solid black;
            overflow: hidden;
        }

        .box .img {
            left: 100%;
            width: max-content;
            height: 100%;
            animation: movemove 8s infinite linear;
        }

        .box img {
            float: left;
            width: 150px;
            height: 100%;
        }

        @keyframes movemove {
            to {
                transform: translate(-1050px);
            }
        }

十四、flex布局

1.概念

　flex是一种弹性盒子布局模式，使得块盒布局更加灵活，能够避免浮动脱标的影响。

posted @ 2022-05-05 22:14 百分号% 阅读(169) 评论(0) 收藏举报

刷新页面返回顶部

madaao

前端开发学习之CSS

一、什么是CSS

二、CSS的基本思想（个人理解）

三、CSS的引入方式

1.行内式

2.内连式

3.外联式

引入方式小结

四、CSS选择器

1.元素选择器

2.类选择器

3.id选择器

4.并集选择器

5.交集选择器

6.后代选择器

7.子选择器

8.相邻兄弟选择器

9.属性选择器

10.伪类选择器

五、CSS常用属性

1.尺寸属性

2.字体相关属性

3.文本相关属性

4.背景相关属性

六、CSS三大特性

1.继承性

2.层叠性

3.优先级

七、CSS盒子模型

1.万物皆盒子

2.盒子的分类

3.盒子模型的组成

1）content内容区域

2）padding内边距

3）border 边框

4）盒子模型大小的计算公式

5）margin外边距

在页面布局的过程中，盒子的外边距会存在三种情况。

八、伪元素

1.使用场景

2.与元素的区别

3.常用伪元素

1）::before

2）::after

九、伪类结构选择器

十、浮动float

1.标准流

2.浮动的概念

3.语法

4.特点

5.清除浮动

清除浮动常用方法:

十一、定位

1.简介

2.相对定位

3.绝对定位

4.固定定位

5.不同布局间的层级关系

十二、CSS一些常用其他属性

1.vertical-align

2.overflow

3.visibility

十三、CSS新特性

1.过渡 transition

2.位移

3.旋转

4.渐变

5.动画

十四、flex布局

1.概念

公告