重学系列，算是补了之前的坑

CSS(cascading style sheets)层叠样式表

也被称为级联样式表，也是一种标记语言

语法规范

CSS规则由两部分组成，选择器和一条或者多条声明

选择器：给谁修改样式

声明：修改的属性

属性和属性值以键值对的形式出现，以分号结尾

CSS基础选择器

作用：选择标签，即想把哪个标签进行修改

分类

基础选择器和复合选择器

基础选择器

是由单个选择器组成

包含 标签选择器、类选择器、id选择器、通配符选择器

标签选择器：标签名作为选择器，例如<div>标签

语法

写在<head>中

<head>
    <style>
        标签名
        {
            属性1:属性值
            属性2:属性值
        }
    </style>
</head>

作用

可以将某一类标签选择出来，比方说所有的段落p，能快速的把同一类标签设置为同一样式

只能修改一类的标签，不能单独修改某个标签

类选择器

单独选择一个或者多个标签

语法
.类名
{
    属性1:属性值;
    属性2:属性值;
}
应用属性

找到需要更改的标签，在标签内写入

class="类名"
例如
<p class="red">
    hou
</p>

名字不能取例如div之类的

多类名

class中可以写多个类名，多个类名之间用空格隔开

id选择器

以#定义样式，以id属性设置特定元素

语法
#id名
{
    属性1:属性值;
    属性2:属性值;
}
调用
<p id="id名">紫色</p>

id选择器只能被调用一次

通配符选择器

表示选取页面中所有的标签

语法
*
{
    属性1:属性值;
    属性2:属性值;
}

可以更改所有的标签，作用范围是全局的

CSS字体属性

属性 中文 说明
font-family 字体 设置字体
font-size 字体大小 设置字体大小
font-weight 字体重量 设置字体的粗细
font-style 字体样式 设置字体样式

font-family

可选值（部分）以下是大体的字体分类：

  • serif衬线字体
    • 字体都带个勾，例如宋体之类的
  • sans-serif非衬线字体
    • 字体横平竖直，例如微软雅黑
  • monospaced等宽字体
font-family:"Microsoft YaHei";
若字体名称为两个或两个以上的单词时要加引号，单个单词可以不加，若有多个字体，可以用逗号分割
font-family:"Microsoft YaHei","apple";
检索过程：如果第一个字体匹配，则使用第一个字体，否则继续检索，直到有合适的，如果都没有，则使用浏览器默认的
为保证统一性，一般给body指定字体
body 
{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

font-size

font-size:2px;
  • **px(pixel)**为像素的意思
  • 在<body>标签中指定的大小不会修改标题标签的大小，标题标签需要单独设置

font-weight

属性的查找文档在这里

font-style

normal-普通、标准、正常

italic-斜体

使用服务器上的字体

如果必须要使用某些字体而这些字体用户电脑中又没有，可以将这个字体放到服务器上，需要在CSS引入并声明：

@font-face {
    font-family: "自定义字体名称";
    src: url("路径");
}

使用时，在font-family中填写自定义的字体名称即可，例如：

@font-face {
    font-family: "myfont";
    src: url("./font/HuaGuangGangTieZhiHei-KeBianTi-2.ttf");
}
body {
    font-family: myfont;
}

CSS文本属性

属性 中文 说明
color 颜色 文本颜色
text-align 对齐 文本对齐
text-decoration 装饰 文本装饰
text-indent 缩进 文本首行缩进
line-height 行间距 行间距，默认值1.33

line-height用来设置行高 ，每个文字都是放到一个框里的，设置文字的大小实质上相当于设置框的大小，框的上下留白的间距是相同的，所以可以通过把line-height设置为外部盒子的高度实现垂直居中

文本颜色属性

类型 表示
预定义 color:预定义颜色值
十六进制 color:#6位16进制
RGB color:rgb(值1,值2,值3)或者color:rgb(值1%,值2%,值3%)

文本对齐

align对齐方式

属性 表示
left 左对齐，默认
right 右对齐
center 居中对齐

文本装饰

text-decoration

属性 中文 表示
none 没有 默认，没有装饰线
underline 强调 下划线
overline - 上划线
line-through 穿过 删除线

也可以指定线的颜色、样式（实线、点线等）：

text-decoration: 线的类型 颜色 线的央视;

文本缩进

text-indent

text-indent:1px;
单位 含义
px 像素
em 相对于当前文字的大小

行间距

line-height，行高

行间距=文字高度+上间距+下间距

CSS引入方式

按照书写的位置（引用方式）不同，分为

行内样式表(行内式)

代码复用差，只能当前被设置的标签才有这个属性

<p style="color:xxx,font-size:xxx;">
	行内样式表
</p>

作用范围：一个标签

内部样式表(嵌入式)

复用也比较差，只能这个文件使用

写到HTML内部，是将CSS抽取出来，单独放到<style></style>中

理论上<style><style>可以放在任意位置，但一般放在<head></head>中

作用范围：当前HTML标签页

外部样式表(链接式)

所有的文件都能使用

单独建立一个CSS文件，用来存储样式，之后再把CSS引入使用

引入CSS

<link rel="stylesheet" href="路径">

作用范围：多个页面

VSCode快速代码

HTML

! 生成框架
标签名*5 生成5个标签
标签名1>标签名2>...>标签名n 将2当作1的儿子...以此类推
标签名1+标签名2+....标签名n 生成同级标签
.类名*n 生成n个div 类为类名的标签
标签名.类名*n 生成n个标签名 类为类名的标签
标签名.类名$n 生成n个标签名 类为类名(1-n)的标签
标签名{内容} 生成<标签名>内容</标签名>

CSS

写首字母加数字

例如

text-indent:3em

ti3em

text-decoration:none;

tdn

text-align:center

tac

复合选择器

后代选择器

有以下代码

<h1>无序列表</h1>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <h1>有序列表</h1>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

若仅想更改有序列表中的每个元素的CSS，可使用后代选择器语句

即 父级+后代

ol li
{
    属性
}

类和标签也可以相互混用

<h1>无序列表</h1>
<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
</ol>
<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
</ol>

以上有两组ol，如果只想更改第二个ol的a的 属性，可以为第二个ol指定类

即

<h1>无序列表</h1>
<ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
</ol>
<ol class="类名">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
        <li><a href="#">测试</a></li>
</ol>

而CSS为

.类名 ol li a
{
    属性
}

子选择器

使用后代选择器更改某个标签的CSS样式时默认是将其所有的后代都选中，也可以仅选择其亲儿子

    <style>
        .div > p {
            color: red;
        }
    </style>
</head>
<body>
<div class="div">
    <p>111111111</p>
    <p>111111111</p>
    <div>
        <p>66666</p>
    </div>
    <p>111111111</p>
    <p>111111111</p>
    <p>111111111</p>
</div>

.div中的第一层<p>标签属于亲儿子，div>div>p中的p属于后代元素

<ol>
        <a href="#">儿子</a>
        <p>
            <a href="#">孙子</a>
        </p>
</ol>

如果按照后代选择器的方法进行选择a的时时候

ol a
{
    属性
}

此时会将ol中所有的a的值属性全部改变

若只想选择亲儿子

ol>a
{
    属性
}

兄弟选择器

可以选择某个选择器后的所有相关的选择器

p + span代表选择p之后的第一个span，p和span是平级的

    <style>
        p + span {
            color: red;
        }
    </style>
</head>
<body>
<div class="div">
    <p>111111111</p>
    <p>111111111</p>
    <span>我被选择了</span>
    <span>666666666</span>
    <p>111111111</p>
    <p>111111111</p>
    <p>111111111</p>
</div>

p ~ span代表选择p之后所有的兄弟span：

    <style>
        p ~ span {
            color: red;
        }
    </style>
</head>
<body>
<div class="div">
    <p>111111111</p>
    <p>111111111</p>
    <span>我被选择了</span>
    <span>我也被选择了</span>
    <p>111111111</p>
    <span>我也被选择了</span>
    <p>11111<span>我没有被选择</span>1111</p>
    <p>111111111</p>
</div>

属性选择器

[属性名]可以选择出带有某个属性的标签，也可以和之前的选择器组合起来使用

[属性名=值]可以选择出带有某个属性并且属性=值的标签

    <style>
        [title] {
            color: red;
        }

        [name] {
            color: blue;
        }

        div[title] {
            color: #42b983;
        }

    </style>
</head>
<body>
<div class="div">
    <p>111111111</p>
    <p title="标题">111111111</p>
    <p>111111111</p>
    <p>111111111</p>
    <p>111111111</p>
    <p name="good">111111111</p>
    <div title="value">
        <p>999999</p>
    </div>
    <p>111111111</p>
    <p>111111111</p>
</div>

并集选择器

选择多组标签，为其定义相同的样式，用于集体声明，任何选择器都可以作为集体选择器的一部分

用,分隔

例如如果同时定义<div和<p>有一样的样式

div,p
{
    属性;
}

交集选择器

同时具有某几个属性的选择器，例如：

.a.b.c {
    color: black;
}

代表对同时拥有a b c属性的选择器有效，例如：<p class="a b c">lllll</p>

伪类选择器

用于表示元素特殊的状态，例如想要选中div中的第一个p标签，可以使用div>p:first-child，选中最后一个p标签可以使用div>p:last-child

例如：

<div>
    <p>66666666</p>
    <p>66666666</p>
    <p>66666666</p>
    <p>66666666</p>
    <p>66666666</p>
    <p>66666666</p>
    <p>66666666</p>
</div>

也可以选中其中的某个p标签，div>p:nth-child(数字)，选中第三个div>p:nth-child(3)，如果括号中什么都不写，相当于都不选中，如果写n，代表选中所有。下标从1开始：如果div>p:nth-child(2n)（或者even）代表选中下标为偶数的，如果为2n + 1（或者odd）代表选中奇数的

以上这些属性都是根据所有元素的位置进行排序的，例如：

        div > p:nth-child(2n) {
            color: red;
        }

<div class="div">
    <span>6666</span>
    <p>1111111111</p>
    <p>2222222222</p>
    <p>3333333333</p>
    <p>4444444444</p>
    <p>5555555555</p>
    <p>6666666666</p>
    <p>7777777777</p>
</div>

这个时候将会以span当作第一个元素，此时1、3、5、7会变成红色，如果删掉span，此时2、4、6会变红色

如果想要按照实际选中的元素进行计数，可以使用nth-of-type(数字/表达式)

如果使用first-child或者last-child时，要求的元素不是排在第一个或者最后一个，那么将不会选中要求的元素，因为第一个和最后一个不是要求的目标元素，这个时候可以使用first-of-type或者last-of-type进行解决

也可以实现给除了第3个p标签之外的所有标签都设置一个样式：

div > p:not(:nth-of-type(3)) {
    color: red;
}

例如想要实现以下效果：

内容 | 内容 | 内容 | 内容 | 内容 | 内容 | 内容| 内容 | 内容

    <style>
        .nav {
            width: 100%;
            height: 30px;
            background-color: #e3e4e5;
        }
        .nav a {
            text-decoration: none;
            color: grey;
            font-size: 14px;
            line-height: 30px;
        }
        .link {
            width: 380px;
            margin: auto;
        }
        .link > a:not(:nth-of-type(1))::before {  
            // 也可以写成 .link > a:not(:first-child)::before
            content: "|";
            padding-right: 5px;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="link">
        <a href="#">内容</a>
        <a href="#">内容</a>
        <a href="#">内容</a>
        <a href="#">内容</a>
        <a href="#">内容</a>
        <a href="#">内容</a>
        <a href="#">内容</a>
        <a href="#">内容</a>
        <a href="#">内容</a>
    </div>
</div>

链接伪类选择器

语法

a:属性
属性 说明
a:link 未被访问的链接
a:visited 所有已经访问的链接
a:hover 鼠标位于其上的链接
a:active 选择活动链接，即鼠标放上未弹起

书写时必须按照link-visited-hover-active

:focus伪类选择器

focus-焦点、重点，一般在表单中使用

input:focus
{
    属性
}

伪元素

表示页面中的特殊的、并不存在的元素，使用::开头，可以用来实现首字下沉

例如p::first-letter代表p标签中第一个字符，首字下沉：

p::first-letter {
    font-size: 30px;
}

p::first-line代表第一行

例如：

p::selection {
    background-color: red;
}

可以展现出p标签中的元素被选中时的颜色：image-20220927203256963

在一个标签开始的位置/结束追加内容：

.box::before {
    content: "内容";
    color: brown;
}

.box::after {
    content: "最后";
    color: red;
}

使用这种方式追加的内容无法选中

        .content001::before {
            content: "“";
            font-size: 50px;
            font-family: "宋体";
        }

        .content001::after {
            content: "”";
            font-size: 50px;
            font-family: "宋体";
        }

    </style>
</head>
<body>
<div class="box">
    0000000000
</div>

可以达到：image-20220927204912359的效果

练习：https://flukeout.github.io/

CSS元素显示模式

显示模式为元素(标签)以什么方式显示，HTML元素分为块元素和行内元素

块元素

在HTML中

<div>  
</div>
<p>
</p>
<h1-h6></h1-h6>

等都是块元素，div是最典型的

特点

  1. 独占一行
  2. 高度、宽度、内外边距都可以控制
  3. 宽度默认是容器(父级)的100%
  4. 是一个容器或者是盒子，里面还可以放行内元素或者块元素
  5. 文字类的元素内不能放块级元素，例如<p>中不能放<div>，<1-6>中也不能放

行内元素

例如

<a></a><span></span>

等元素都属于行内元素，也被称为内联元素

特点

  1. 相邻行内元素在一行上，一行可以显示多个
  2. 宽高值对行内元素不起作用
  3. 默认宽度是它本身内容的宽度
  4. 行内元素只能放文本或者其他行内元素
  5. <a>中不能放<a>，可以放其他的元素

行内块元素

例如

<input><img><td>

等标签，属于块内元素，既有行内元素的特点，也有块元素的特点

特点

  1. 一行可以有多个，但每个元素直接有空隙
  2. 本身的宽度是内容的宽度
  3. 高度、行高、内外边距可以设置

显示模式转换

例如将行内元素转换为块内元素，例如增加<a>的控制范围

行内元素转换为块内元素

默认的情况下，<a>的大小无法被控制，可以在CSS中加入

display:block;

生效宽度和高度

块内元素转换为行内元素

display:inline;

设置后，宽度高度无效

转换为行内块元素

display:inline-block;

文字垂直居中

line-height:盒子的高度;

背景(background)

名称 中文 说明
background-color 颜色 背景颜色
background-image 图像 背景图像
background-repeat 重复 设置背景的平铺方式
background-position 位置 背景图片的位置
background-attachment 附属 背景图片附着方式
background 背景透明 背景透明

background-color

背景颜色的默认值为transparent，即透明的、清澈的

background-image

背景图像，与插入图像的区别再于便于控制位置

值 说明 格式
none 无背景图 background-image:none
url 填写url地址或文件路径 background-image:url()

background-repeat

默认的情况下，背景是平铺的

值 说明 格式
repeat 平铺-默认值 background-repeat:repeat
no-repeat 不平铺 background-repeat:no-repeat
repeat-x 沿x轴平铺 background-repeat:repeat-x
repeat-y 沿y轴平铺 background-repeat:repeat-y

当背景颜色和背景图片都存在时，背景图片会压住背景颜色，即背景图片浮于背景颜色上方

background-position

background-position:水平值 垂直值;

如果第二个值省略，默认是center

背景图片的位置，值可以是数字，也可以是预置好的参数值

可以使用方位名词或者精确单位

水平值和垂直值可以为像素

方位名词

参数值 说明
top 顶部
center 居中
bottom 底部
left 左
right 右

精确单位

如果是精确单位，那么第一个是x坐标（到左侧），第二个是y坐标（到上侧）

如果只指定一个值，只会设置x，而y默认为center

单位也可以混合使用

background-attachment

背景附着方式，控制页面背景是否固定或者跟着页面滑动

常用于做视差效果，例如各大软件的官网介绍页

值 中文 用法
scroll 滚动 background-attachment:scroll
fixed 固定 background-attachment:fixed

默认值是scroll

background:

background:rgba(0,0,0,透明度)

background-size

可以设置背景图片的大小

background-size: 500px 500px;

如果只写一个值，那么长宽一样大

如果想要只填写长或者高中的一个值，并且自动调整另一个值，可以：

background-size: 值1 auto;
background-size: auto 值2;

特殊的值：

  • cover保持图片比例不变，将图片铺满背景（图片可能显示不全）
  • contain保持图片比例不变，尽可能显示把图片显示全（可能无法铺满背景）

三大特性

三大特性分别为层叠性、继承性、优先性

层叠性

解决样式冲突问题，即同一选择器用了两个或者多个不同属性

遵循就近原则，即当样式冲突时，最终的样式为最后一个属性值

继承性

在CSS中都具有继承性

<div>
    <p>
        龙生龙，凤生凤，老鼠的儿子会打洞。
    </p>
</div>

以上代码中，如果只更改div的属性，p中未设置的相关属性也会一并更改

优先级

  • 当选择器相同时，按照层叠性执行
  • 如果不同，则按照优先级执行，优先执行权重高的

从高到低

选择器 权重 表示
!important重要的 1，最高 无穷大
行内样式style="" 2 1,0,0,0
ID选择器 3 0,1,0,0
类选择器 伪类选择器 4 0,0,1,0
元素选择器 5 0,0,0,1
继承或者* 6，最低 0,0,0,0

越靠近元素的优先级最高，使用多个选择器，权重为相加后的结果。例如既使用元素选择器又使用ID选择器(div#选择器)，此时的权重为0,1,0,1

分组选择器单独计算，例如.box1, .box2, .box3，这三个选择器单独的计算

如果优先级相等，优先使用靠下的，例如

    <style>
        .box2 {
            color: #f58b8b;
        }
        .box3 {
            color: darkmagenta;
        }
        .box1 {
            color: yellow;
        }
    </style>
</head>
<body>
<div class="box1 box2 box3">
    <p>66666666666</p>
    <p>66666666666</p>
    <p>66666666666</p>
    <p>66666666666</p>
    <p>66666666666</p>
    <p>66666666666</p>
    <p>66666666666</p>
</div>

生效的是.box1因为比较靠下

!important

选择器
{
    属性:属性值 !important;
}

不管父元素的权重有多高，子元素继承下来的永远是最低的

例如
<div>
    <p>
        这里
    </p>
</div>

<style>
    div
    {
        color:red;
    }
    p
    {
        color:pink;
    }
</style>

以上代码执行后，标签中的文字颜色pink

权重叠加

在复合选择器中出现的问题，将权重相加(不存在进位)进行判断

文档流

文档流normal flow，是一个网页的基础，创建的元素默认都是在文档流中进行排列

页面中的元素有两个状态：

  • 在文档流中
    • 块元素独占一行 ，默认宽度是父元素的100%，默认高度是被内容（子元素）撑开
    • 行内元素不会独占一行，只占用自身大下，一行容纳不下所有行内元素，将会自动切换到下一行，继续从左至右进行排列
  • 脱离文档流（不在文档流中）

盒子模型

组成部分

名称 中文 作用
content 内容 内容
padding 填充 内边距
border 边界 边框
margin 边沿，余量 外边距

盒子模型示意图

image-20210308181059631

border边框

可以设置的属性，会影响盒子的大小

属性 含义
border-width 设置边框的粗细
border-style 设置边框的风格
border-color 设置边框的颜色

border-style

属性值 中文 含义
solid 实心，坚硬的 实线
dashed 虚线 虚线
dotted 点缀，点线，有点的 圆心线
none 没有 无线

复合写法

border:width style color;

复合写法没有固定的顺序

outline

轮廓，和border用法一样，添加边框border之后整个元素变大，添加轮廓之后元素不会变大，将会在原本基础上进行添加边框，元素也不会因为添加了轮廓后移动

padding内边距

用于设置内边距

分类 含义
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
用法
padding-top/left/bottom/right:像素值;
复合写法
写法 含义
padding:1px 上下左右内边距均1px
padding:1px 2px 上下内边距为1px，左右内边距为2px
padding:1px 2px 3px 上边距1px，左右边距2px，下边距3px
padding:1px 2px 3px 4px 上边距1px，右边距2px，下边距3px，左边距4px

按照上 右 下 左，顺时针方向

padding也会影响盒子的大小，例如有一个300*300的div的，div中有一个padding:20px的其他元素，此时div的大小为320*320

如果没有指定宽度，设置padding的宽不受影响

margin外边距

用于设置外边距，即盒子与盒子之间的距离

写法 含义
margin-top 上外边距
margin-bottom 下外边距
margin-left 做外边距
margin-right 右外边距

margin的简写形式与padding一致

应用

外边距可以实现块级元素的水平居中，但有两个前提：

  • 盒子必须指定了宽度

  • 盒子的左右外边距都设置为auto

有三种写法

/*方法1*/
margin:0 auto;
/*方法2*/
margin:auto;
/*方法3*/
margin-left:auto;
margin-right:auto;

原理就是将左右设置为auto

以上方法仅针对于块元素，若想让行内元素也实现居中对齐，可以对其父元素进行设置

text-align:center;

盒子的大小

默认情况下的盒子大小 = 边框 + 内边距 + 宽/高

盒子大小是可以进行修改的box-sizing：

  • content-box默认值
  • border-box将会以长宽为盒子的大小，适当的缩小长宽大小

垂直布局

如果不设置父元素的高度，那么父元素的高度将被子元素撑开（父元素的高度相当于子元素的高度）。如果设置了子元素，并且子元素比父元素高度大，那么此时子元素将会溢出

当子元素溢出时，可以在父元素中控制溢出后显示的效果， 在父元素中使用overflow进行控制：

  • visible-默认值，子元素会在父元素外部显示
  • hidden-溢出的内容将会被隐藏
  • scroll将会生成两个方向的滚动条（垂直、水平），通过滚动即可查看内容
  • auto 会根据需要生成滚动条，例如宽度溢出生成横向的，高度溢出生成纵向的

也可以使用overflow-x或者overflow-y单独的控制水平或者垂直方向溢出后的效果

外边距合并

只要是指margin-top和margin-bottom

当两个不同的块级元素分别存在margin-top和margin-bottom且都为正值时，两者的垂直间距将以最大的为准

相邻的外边距一正一负，那么两者的垂直间距将会以两者的和为准

如果两个外边距都是负数，那么两者的垂直间距将会以最小的为准

例如

.div1,.div2{
    height:300px;
    width:300px;
    background-color:pink;
}
.div1
{
    margin-bottom:100px;
}
.div2
{
    margin-top:200px
}

有以下

<div class="div1">
    
</div>

<div class="div2">
    
</div>

此时两者上下间距为最大值200px

image-20210312081741351

解决方法

只给其中一个设置margin值

塌陷

当盒子中嵌套盒子，被嵌套的盒子想要向下或者向上移动时，会出现塌陷问题，因为此时的父子的外边距都在同一个位置，所以造成了两者的移动

.div1 {
    height: 300px;
    width: 300px;
    background-color: pink;
}

.div2 {
    height: 30px;
    width: 30px;
    margin-top: 20px;
    background-color: red;
}

    <div class="div1">
        <div class="div2">

        </div>
    </div>

问题图片

image-20210312082852977

想要效果image-20210312082925064

解决方法

  • 给父元素添加边框，可以设置为1px，颜色背景与父元素相同（也可以设为透明，transparent），设置线的格式。这可以隔开两者的外边距，也可以单独设置border-top

  • 给父元素指定一个内间距，padding:1px

  • 万能代码overflow:hidden

  • 出现问题的根本原因是两者的外边距重叠问题，解决思路就是隔开外边距，可以通过添加::before伪元素的方式进行隔开

    •     <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .box::before {
            content: "";
            display: table;
        }
        .box2 {
            height: 100px;
            width: 100px;
            background-color: #8d8d8d;
            margin-top: 100px;
        }


    </style>
</head>
<body>
<div class="box">
    <div class="box2">

    </div>

</div>

清除高度塌陷和外边距重叠的通用解决方案

通用解决方案：

.clear-fix::before, .clear-fix::after {
    content: '';
    display: table;
    clear: both;
}

高度塌陷

假设有一个div，这个div的高度随着子元素的高度进行变化，这个div中也包含另外的div，在正常情况下没有任何问题，但如果给内部的div添加了float属性，这个时候出现了下图的情况，此时成为高度的塌陷，这是因为：父元素被子元素撑开，但当子元素浮动后，将会完全脱离文档流，此时的父元素将无法被撑起来，此时将会造成页面错乱

image-20221001210256818

BFC

BFC全称为Block Formatting Context即块级格式化环境，这是CSS隐含的属性，开启后会将一个元素变成一个独立的布局，开启BFC所能实现的效果：

  • 元素不会被浮动元素覆盖
  • 子元素和父元素的外边距重叠
  • 可以包含浮动的子元素

开启方式：

  • 父元素跟子元素一样，都添加float属性，但存在着副作用，会覆盖掉下方不带有浮动的元素，宽度也将会消失
  • 将父元素的display设置为inline-block，也存在问题，行内块元素不适合作为外部的布局容器，宽度也将会消失
  • 将父元素的overflow设置为不是visible的值，这个方式的副作用比较小， 推荐使用overflow:hidden
  • 其它啊方式可参阅：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

清除内外边距

默认情况下<body>等都有默认的边距

使用通配符选择器

*
{
    padding:0px;
    margin:0px;
}

水平布局

对于水平布局来说需要满足：margin-left + border-left + paddeing-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度

如果不满足这个条件，此时成为过渡约束，等式会自动调整，也就是自动调整margin-right的值

以上七个值中，width、margin-left、margin-right可以设置为auto，如果某个值为auto，则将会自动调整值为auto的属性以使等式成立

    <style>
        .box {
            border: 5px solid black;
            width: 600px;
        }
        .box2 {
            width: auto;
            height: 200px;
            margin-right: 100px;
            margin-left: 100px;
            background-color: deeppink;
        }
    </style>
<div class="box">
    <div class="box2">

    </div>
</div>

这个例子中，只有width为auto，那么将会动态的调整width：

  • margin-right、margin-left设置为了100px，此时带入到margin-left + border-left + paddeing-left + width + padding-right + border-right + margin-right = 父元素内容区的宽度可得知：100 + 0 + 0 + 0 + width + 0 + 0 + 100 = 600 ，动态调整width，这时候width = 400
  • width默认值是auto

image-20220930114246252

所以默认情况下，一个在父元素中的div（width不为auto）调整margin-right是没有效果的，如果要产生效果，需要将margin-left: auto，此时div将会右对齐，这时候再调整margin-right就有效果了

如果将一个宽度和其中一个外边距设置为auto，那么此时宽度默认为最大，另一个外边距默认为0

如果将两个外边距设置为auto，宽度是固定值，那么此时的两个外边距将为同样的值

圆角边框

border-radius

radius中文是半径的意思，语法格式

border-radius:长度;

如果盒子是正方形，那么将border-radius设置为长宽值的一般，那么，这个盒子就成为圆形的了

同理，下图所示的也是为高度一半image-20210319092748057

border-radius:长度是一个简写

border-radius:数值单位1 数值单位2 数值单位3 数值单位4;

按照顺时针设置，左上，右上，右下，左下

盒子阴影 box-shadow

值 中文 含义
h-shadow 必需，水平阴影位置，允许负值
v-shadow 必需，垂直阴影位置，允许负值
blur 模糊 可选，模糊距离，扩散的程度
spread 传播 可选，阴影尺寸，影子大小
color 颜色 可选，阴影颜色
inset 插图 可选，改为内阴影，默认值是outset可以设置为inset 
box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 内外阴影;

最后一个数值不可以写为outset因为是默认的，可以写成inset

阴影不占用空间，其他盒子依旧可以和按照顺序无缝排列

鼠标经过其他标签时，也可以产生类似于<a>的效果，使用

标签名+驴哈就可以

文字阴影text-shadow

值 中文 含义
h-shadow 必需，水平阴影位置，允许负值
v-shadow 必需，垂直阴影位置，允许负值
blur 模糊 可选，模糊距离，扩散的程度
color 颜色 可选，阴影颜色 
box-shadow:水平阴影位置 垂直阴影位置 模糊距离 颜色;

浮动float

CSS提供三种传统的布局方式

  • 普通流（标准流）
  • 浮动
  • 定位

普通流（标准流/文档流）

按照默认的方式排列

比如，默认的div是块级元素

有很多效果标准流没法做，所以用到了浮动

典型应用

多个块级元素在一行中显示

准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

语法

选择器
{
    float:属性值;
}
值 含义
none 元素不浮动，默认值
left 元素向左浮动
right 元素向右浮动

将盒子放在同一行中

特性

  • 会脱离标准流

  • 浮动的盒子不再保留原来的位置，因为位置变了，所以原本的位置被其他盒子占用了

    如果只对一个盒子加了浮动，其他的盒子没加，那么新建的盒子会叠放在浮动的盒子之下

  • 如果多个盒子设置为浮动，那么盒子会一行内以顶端对齐

  • 如果一行之内无法完全显示该盒子，则该盒子会另起一行

  • 所有元素都可以加浮动特性，添加浮动特性后，元素具有行内块元素的属性

  • 浮动元素通常与其搭配的标准流的父级一起使用，一般是为其父级排列上下左右位置，再从父级元素内添加浮动

  • 一个元素浮动了，其他盒子也浮动

  • 浮动不会盖住文字，文字将会环绕在浮动元素的周围，可以实现文字环绕图片的效果

  • 浮动只会影响到后边的标准流，不会影响前边的

清除浮动

理论上父盒子的大小是不设置高度大小的，一般会让子盒子撑开，如果不设置高度父元素的高度会变为0，因为浮动的元素不占用位置

由于父级元素在很多情况下不方便给给高度，但盒子浮动不会占用位置，当父级元素为0时，会影响到其他的标准流盒子

原理：浏览器自动为元素添加一个上边距，但使用开发者工具无法看出

以下就是异常情况

image-20210326075736486

清除浮动的本质是清除浮动造成对本元素的影响，也就是在受到影响的元素上添加

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #a1a8ef;
            float: left;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: #d2c3c3;
            clear: left;

        }

    </style>
</head>
<body>
<div class="box">

</div>
<div class="box2">

</div>

语法

选择器{
    clear:属性值;
}
属性值 含义
left 清除左侧浮动
right 清除右侧浮动
both 清除影响比较大的浮动

一般都用clear:both;

本质

  • 清除浮动元素脱离标准流造成的影响
  • 策略是只让浮动在父盒子内部影响，不影响父盒子外的元素

解决方法

额外标签法（隔墙法）

在浮动元素末尾加一个空标签并为其清除浮动，例如

<div style="clear:both;">
	
<div/>

新添加的标签必须为块级元素

给父级添加overflow

是给父级添加的属性

overflow:hidden/auto/scroll;

overflow为溢出的意思

scroll为滚动的意思

:after伪元素法

也是给父元素添加的效果

image-20210326084613278

双伪元素清除浮动

也是给父元素添加

image-20210326085059097

CSS属性书写顺序

一般遵循的顺序

  • 布局定位属性，例如display等
  • 自身属性，例如width height border padding background
  • 文本属性，例如color font text
  • 其它属性，例如border-radius box-shadow

CSS定位

可以使某个盒子浮于某个盒子上方

组成

定位可以将盒子定在任意的位置

定位=定位模式+边偏移

定位模式是选择的定位方式，通过CSS中的position进行设置的

属性值包括

值 中文 含义
static 静态的 静态定位
relative 相对的 相对定位
absolute 绝对的 绝对定位
fixed 固定的 固定定位
sticky 黏 黏性定位

边偏移决定了最终的位置，当position: relative时，相较于定位的位置计算的

属性值包括

属性 值 含义
left left:99px; 左侧偏移量
right right:99px; 右侧偏移量
top top:99px; 顶部偏移量
bottom bottom:99px; 底部偏移量

开启定位后水平方向需要满足：left + margin-left + border-left + paddeing-left + width + padding-right + border-right + margin-right + right = 包含块内容区的宽度

  • left和right默认值是auto

  • 当开启绝对定位absolute后，要想实现margin: auto将div居中，那么需要设置left: 0;right: 0，否则不会生效：

    • .box2 {
    width: 100px;
    height: 100px;
    background-color: #aabbcc;
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
}

开启定位后，垂直方向需要满足：top + margin-top + margin-bottom + padding-top + padding-bottom + height = 包含内容区的高度

  • 利用这个特性可以实现开启绝对定位absolute的div实现在其父元素中水平垂直居中的效果，只需将right bottom right left设为0，四个方向的margin设置为auto

    • .box2 {
    width: 100px;
    height: 100px;
    background-color: #aabbcc;
    position: absolute;
    margin: auto;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

静态定位static

是元素的默认定位方式，无定位的意思

position:static;
  • 是按照标准流的形式摆放元素的位置，没有边偏移
  • 很少被使用，可以直接被认为是标准流

相对定位relative

元素移动位置时，相对于原来的元素的位置进行表示的

  • 以自己原来的位置为基准进行移动
  • 移动后，原来的位置仍在保留，即原来标准流中的位置继续占有原来的位置，新的盒子不能接着放在原来的位置

绝对定位absolute

元素移动时是以它的父元素为基准进行移动

  • 若父元素即其上所有元素没有定位属性，则以浏览器为基准进行移动
  • 如果父元素加了除了static元素以外的任意定位，那么将会以父元素为基准进行移动
  • 盒子会以最近一级有定位的元素为基准进行移动，例如一个盒子的父元素没有定位，但它的爷爷元素有定位，则会以它的爷爷元素为基准进行定位
  • 绝对定位不会占用原来的位置
子绝父相

意思是子级用绝对定位，父级得用相对定位

  • 子级绝对定位，不会占用位置，可以放在父盒子的任意位置，不影响兄弟盒子
  • 父盒子需要添加定位限制子盒子在父盒子内显示
  • 因为父盒子需要占用位置，所以只能用相对定位

固定定位fixed

将元素固定到计算机浏览器的可视位置，并且在滚动页面时位置保持不变

  • 是以浏览器的可视窗口为基准进行定位
  • 跟它的父元素没有关系
  • 不占有原先的位置
  • 固定定位不是永远和浏览器的四个角对齐的
    • 让固定定位以版心对齐，即无论如何缩放，被固定的始终以中心元素的右侧/左侧边缘对齐
      • 设置其left:50%
      • 让其margin-left:版心宽度的50%
效果代码
<!--
 * @Created by : SongXiaoxu
 * @Copyright © 2021年 by: 宋晓旭. All rights reserved
 * @Date: 2021-02-08 12:57:20
 * @LastEditTime: 2021-04-18 22:18:34
-->
<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

</html>

.div1 {
    width: 400px;
    height: 300px;
    background-color: pink;
    margin: auto;
}

.div2 {
    width: 50px;
    height: 50px;
    background-color: rgb(0, 0, 0);
    position: fixed;
    left: 50%;
    margin-left: 202px;
}

黏性定位sticky

可以认为相对定位和固定定位的混合

特性
  • 以外部的盒子为参考位置进行移动
  • 占有原来的位置
  • 必须添加top bottom left right其中一个有效

如果它在一个div中，将在这个div在屏幕上呈现时固定位置，移动走div，带有这个定位的元素也跟着div一块移走，如果把这个元素放到body中，那么当这个元素出现并且滑动鼠标到这个元素固定位置后，这个元素将不会在屏幕上消失

定位叠放次序z-index

z为z轴的含义，为了解决多个盒子叠放在一起的优先级问题

z-index:值;
/*例如*/
z-index:1;
  • z-index的数值不限，可以是正值也可以是负值，默认为auto，数值越大，盒子越往上
  • 如果值相同，则按照书写顺序，后来者居上
  • 值后无需加单位
  • 只有盒子定位的才有z-index值
  • 祖先元素的层级即使再高也不会盖住后代元素

绝对定位居中

加了绝对定位relative的盒子不能使用margin:auto实现居中

  • 先让盒子向左/右走50%，即letf:50%;或者right:50%
  • 在让盒子的margin-left或者margin-right走负的盒子宽度的一半的一半

实现垂直居中也同理，只不过是修改top或者bottom以及margin-top或者margin-bottom

其他特性

  • 行内元素添加绝对定位absolute、固定定位fixed、float浮动后，可以直接设置高度和宽度，即自动转化为了块级元素
  • 块级元素添加定位后，如果不指定宽度和高度，则大小为内容的大小，而不是一行的大小
  • 浮动float的元素不会压住标准流的文字、图片
  • 绝对定位absolute、固定定位fixed会压住标准流的文字、图片以及所有内容

元素的显示与隐藏

让一个元素可以进行显示隐藏，比如鼠标经过某个地方时，可以显示出来

  • display显示隐藏
  • visibility显示隐藏
  • overflow溢出隐藏

display

值 含义
none 隐藏元素
block 除了转换成块级元素还有显示元素的功能

使用display隐藏元素后，不再占用原来的位置，常与JavaScript配合一起进行隐藏元素

visibility

值 含义
inherit 继承，遵循父级的显示/隐藏属性
visible 可视
hidden 隐藏

隐藏元素之后，继续占有原来的位置

overflow溢出

对溢出的元素进行操作，可以设置溢出的部分的属性，隐藏或者显示

值 含义
visible 可视，默认值
hidden 隐藏超出的内容，对多出的部分进行隐藏
scroll 滚动，始终显示滚动条，可以拖动滚动条查看溢出部分的内容
auto 当内容超出时显示滚动条，不超出时不显示

有定位的盒子慎用overflow，会隐藏多余的盒子

遮罩案例

<!--
 * @Created by : SongXiaoxu
 * @Copyright © 2021年 by: 宋晓旭. All rights reserved
 * @Date: 2021-02-08 12:57:20
 * @LastEditTime: 2021-04-26 15:53:23
-->
<!DOCTYPE html>
<html lang="zh-cn">

<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>Document</title>
    <link rel="stylesheet" href="style.css">
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">
        </div>
    </div>
</body>

</html>

.div1,
.div2 {
    background-color: red;
    width: 300px;
    height: 300px;
    color: white;
}

.div1 {
    background-color: rgb(145, 255, 2);
    position: relative;
}

.div2 {
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
    display: none;
}

.div1:hover .div2 {
    display: block;
}

* {
    background-color: pink;
}

鼠标经过隐藏的盒子不会有反应，因为这个元素被隐藏了，若想有反应，可对其父级进行操作

CSS高级技巧

精灵图

网页中经常会用许多很小的图片进行装饰，但当图片过多时服务器会很频繁的发送和接收，造成服务器压力过大，降低页面加载速度

为了减少服务器的发送和请求次数，引入了CSS精灵技术，也成为CSS Sprite(精灵)、CSS雪碧

核心原理：将小图片整合成大图片，使得服务器只需要请求一次

download

例如上图为王者荣耀官网所用到的CSS精灵图

  • 主要是针对背景图片，将多个小背景，整合在一张大的图片中
  • 适用于经常显示且不发生变化的图片
  • 用到的属性为background-position:水平值 垂直值，在网页中，越往下垂直值越大，越往右，水平值越大

用法

.div1
{
    width:宽度值;
    height:高度值;
    background-image:url(图片位置);
    background-position:水平值 垂直值;
    background-repeat:no-repeat;//背景不重复
}

缺点

  • 图片文件比较大
  • 图片本身放大会失真
  • 一旦制作完毕再进行更换会很复杂

字体图标iconfront

字体图标为了解决部分精灵图的缺点，再网页中，经常会看到放大镜（搜索）的小图标、小喇叭图标等，这些图标一般都是icon front(字体图标)，本质属于字体，具有放大不失真的特点

优点

  • 字体图标要比图像小，一旦加载出来，就会马上渲染，减少服务器的请求
  • 具有灵活性，可以添加任何的属性，阴影、改颜色等
  • 具有强大的兼容性，几乎支持全部的浏览器

使用

  • 将下载好的文件解压，取出front文件夹，并放入到网页的根目录下

  • 为保证浏览器兼容问题，front文件夹内有4个字体文件

  • 打开下载的压缩包，将style.css中的front-face选择器复制下来

    @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?s644t4');
  src:  url('fonts/icomoon.eot?s644t4#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?s644t4') format('truetype'),
    url('fonts/icomoon.woff?s644t4') format('woff'),
    url('fonts/icomoon.svg?s644t4#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

  • 引入到页面，在<head></head>标签中添加<style></style>标签，将以上内容添加至<style></style>标签中

  • 打开压缩包内的demo.html，选择需要插入的图标，复制后边的乱码

  • 在编辑器中，添加一个存放的标签，并将乱码粘贴到存放的标签中，并为标签添加font-family:'icomoon'; 属性

字体图标的追加

  • 打开https://icomoon.io/app/#/select，选择import icons，上传压缩包内的selection.json，选择需要追加的图标，直接下载并替换文件即可

三角形的绘制

  • 将盒子的长宽设置为0像素，为其添加边框，并将边框的颜色设置为透明

    border:10px solid rgba(0,0,0,0);
/*或者*/
border:10px soild transparent;

  • 再为想要添加的三角形的方向进行修改颜色

    border-left/right/top/bottom-color:颜色;

.div7 {
    width: 0px;
    height: 0px;
    border: 30px solid rgba(0, 0, 0, 0);
    border-left-color: red;
}

界面样式

用户鼠标样式

即修改网页中的用户的鼠标样式

使用到的是cursor属性

值 含义
default 默认的，小箭头
pointer 指针，即小手样式
move 移动，即四个箭头
text 针对文字的编辑指针样式
not-allowed 不允许，即禁止图标

轮廓线outline

给表单添加outline:0;或者outline:none;

去掉防止拖拽文本域

即文本域右下角的拖动按钮，即通过拖动即可将文本域进行扩大，但如果进行扩大，势必会挤占其他的盒子

设置textarea的resize属性值为none

vertical-align垂直对齐

仅适用于行内元素和行内块元素

值 含义
baseline 以基线对齐，元素放在父基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把元素放在父元素中间
bottom 把元素的顶端与最低元素的顶端对齐

图片底部缝隙问题

vertical-align常用来解决图片底部存在缝隙的问题，因为图片默认是与文字的基线对齐，所以会有个缝隙，可以将vertical-align的值设置为middle|top|bottom等任意非baseline即可

第二个方法将图片转换为块级元素，即display:block;，因为块级元素独占一行

white-space

设置网页如何处理空白：

  • normal正常
  • nowrap不换行
  • pre保留标签内的格式
    • 例如：在默认情况下标签内的多个空格将会被当成一个空格处理，如果添加这个属性，可以保留多个空格

溢出文字省略号显示

  • 单行文本溢出显示省略号

    1. 强制将文本在一行中显示

      white-space:nowrap;

    2. 超出部分隐藏

      overflow:hidden;

    3. 文字用省略号代替超出部分

      text-overflow:ellipsis;

综上

white-space:nowrap;/*默认值为normal（普通的）即自动换行*/
overflow:hidden;
text-overflow:ellipsis;

布局技巧

  • margin:负值;，常用来解决添加边框后的两个边框重叠问题

文字围绕浮动元素

效果

image-20210429201159154

代码

<!--
 * @Created by : SongXiaoxu
 * @Copyright © 2021年 by: 宋晓旭. All rights reserved
 * @Date: 2021-02-08 12:57:20
 * @LastEditTime: 2021-04-29 20:11:38
-->
<!DOCTYPE html>
<html lang="zh-cn">

<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>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?s644t4');
            src: url('fonts/icomoon.eot?s644t4#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?s644t4') format('truetype'), url('fonts/icomoon.woff?s644t4') format('woff'), url('fonts/icomoon.svg?s644t4#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        .div4 p {
            font-family: 'icomoon';
            font-size: 199px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">

        </div>
        <p>一萨弗哈德森看见发哈第三方的卡刷饭卡上顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p>
    </div>
</body>

</html>

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid red;
    font-size: 10px;
}

.div2 {
    width: 90px;
    height: 90px;
    background-color: black;
    margin: 5px;
    float: left;
}

原理为对正方形盒子添加左浮动

翻页按钮

<!--
 * @Created by : SongXiaoxu
 * @Copyright © 2021年 by: 宋晓旭. All rights reserved
 * @Date: 2021-02-08 12:57:20
 * @LastEditTime: 2021-04-29 20:38:11
-->
<!DOCTYPE html>
<html lang="zh-cn">

<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>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?s644t4');
            src: url('fonts/icomoon.eot?s644t4#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?s644t4') format('truetype'), url('fonts/icomoon.woff?s644t4') format('woff'), url('fonts/icomoon.svg?s644t4#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        .div4 p {
            font-family: 'icomoon';
            font-size: 199px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">

        </div>
        <p>一萨弗哈德森看见发哈第三方的卡刷饭卡上顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p>
    </div>
    <br>
    <div class="div3">
        <div class="div4">
            页面
        </div>
        <a href="#" style="width: 80px;">上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" style="width: 80px;">下一页</a>
        <input type="text" style="background-color: white;outline:none;"> 页
        <button style="width: 60px;height: 35px;">确定</button>
    </div>
</body>

</html>

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid red;
    font-size: 10px;
}

.div2 {
    width: 90px;
    height: 90px;
    background-color: black;
    margin: 5px;
    float: left;
}

.div3 {
    width: 600px;
    height: 100px;
    border: 1px solid red;
    font-size: 10px;
    margin: auto;
    text-align: center;
}

.div4 {
    text-align: center;
    width: 100%;
    background-color: black;
    color: white;
    /* height: 20%;
    line-height: 10px; */
}

.div3 a,
.div3 input,
.div3 button {
    margin: 30px 0;
    text-align: center;
    line-height: 30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: rgb(233, 233, 233);
    text-decoration: none;
    border: 1px gray solid;
}

单位

px-像素-pixel

em-相较于字体大小-1em = 16px，默认是16px，如果字体大小变了，这个单位也会变

  • 例如 以下1em = 200px

  • #box3 {
    width: 1em;
    height: 1em;
    background-color: #646ee1;
    font-size: 200px;
}

rem相较于html字体大小，可以通过以下方式修改：

  • html {
    font-size: 100px;
}

渐变

本质上相当于图片，需要通过background-image进行设置

线性渐变：

  • background-image: linear-gradient(方向, 颜色1, ..., 颜色n)
    • gradient中文为坡度、斜率，读音为ˈɡreɪdiənt
    • 方向可以省略
    • 方向可以写为：to left，to right，to bottom，to top
    • 方向也可以直接写角度，例如100deg
    • 方向可以写为圈数，例如0.25turn表示选转0.25圈
    • 默认是所有颜色平均分配的，也可以指定每个颜色的大小，例如：background-image: linear-gradient(.12turn, red 50px, #ffffff 100px);
  • 可重复的线性渐变：
    • 指定渐变每个颜色的宽度后，如果剩余的部分不足以进行填充，那么此时将会使用纯色填充，如果想要实现重复使用填充（类似于背景图的多次使用），这时候可以使用repeating-linear-gradient

径向渐变：

  • background-image: radial-gradient()

    • radial中文为径向的、放射的，读音为ˈreɪdiəl

    • 渐变的形状根据元素的形状进行计算的，例如正方形为原型，长方形为椭圆

    • 也可以手动指定渐变的形状：

      • background-image: radial-gradient(77px 99px, red, #ffffff);

    • 同样也是有repeating-radial-gradient的

    • 也可以指定位置：

      • 渐变的形状大小可以省略

      • // 指定在中心的位置
background-image: repeating-radial-gradient(77px 99px at center center, red, #ffffff);

      • background-image: repeating-radial-gradient(77px 99px at 100px 12px, red, #ffffff);

:focus-within

可能会出现一个input标签外部套着一个div，如果想要达到当里边的input点击时（获取焦点），外边的div改变一些样式的效果，可以使用这个伪类选择器

.content-nav-search:focus-within {
    border: 1px solid #ff6700;
}

过渡

transition，中文为过渡、变革、转变、变迁，读音为trænˈzɪʃn

基本使用：

transition: 属性 秒/毫秒数;
transition: 属性 效果 过渡时间 延迟秒数;
// 也可以为所有的属性都添加过渡效果
transition: all 1s;
transition: all 100ms;
transition: all 0.1s;
transition: width 10s, height 1s;
transition: all linear 1s 2s;

以上属于简写形式，大部分属性都支持过渡，但必须是一个有效数值到另一个有效数值过渡，例如不支持margin: auto到margin: 10px的过渡，因为auto不是一个有效值

  • transition-property过渡属性，多个值使用,隔开

  • transition-duration过渡时间，秒数或者毫秒数，可以为小数，duration中文为期间、持续时间，读音为duˈreɪʃn，也可以分别指定时间

    • transition-property: width,height;
transition-duration: 200ms;
transition-property: width, height;
transition-duration: 0.8s, 10s;

  • transition-timing-fuction可以设置动画变化效果（类似于贝塞尔曲线的速度）

    • ease，中文为缓慢、减轻、容易、舒适、降低、缓和，读音为iːz，这是默认值，先缓慢加速后缓慢减速
    • linear线性运动，匀速运动，读音ˈlɪniər
    • ease-in加速运动
    • ease-out减速运动
    • ease-in-out先加速后减速，节奏上和ease差不多，但速度不一样
    • cubic-bezier()可以指定贝塞尔曲线的函数，cubic读音为ˈkjuːbɪk，中文为立方体、三次函数，可以通过https://cubic-bezier.com/ 生成贝塞尔曲线函数值
    • step(数值)代表分几步走
    • transition-delay: 秒/毫秒数代表延迟相应的时间执行过渡效果

动画

animation，中文为动画、动画片，读音为ˌænɪˈmeɪʃn，动画和过渡比较类似，都是用来实现动态效果的

可以配合精灵图制作出精灵动画sprite animation，sprite中文为精灵，读音为spraɪt

需要关键帧keyframe，frame中文为框架、模式、体系、帧

关键帧的定义：

@keyframes 关键帧名称 {
    // 开始的属性
    from {
        
    }
    // 结束的属性
    to {
        
    }
}

也可以写成百分比的形式：

@keyframes test {
    0% {
        margin-left: 0;
    }
    30% {
        margin-left: 582px;
    }
    100% {
        margin-left: 200px;
    }
}

使用时，需要指定关键帧的名称、关键帧动画的持续时间：

animation-name: 关键帧的名称;
animation-duration: 时间;

同样的，也有：

  • animation-timing-function用来指定动画效果
  • animation-delay用来指定延迟时间
  • animation-iteration-count用来指定动画执行的次数
    • 默认为1次
    • 可以指定一个数字，表示要执行的次数就是这个数字的大小
    • 如果指定为infinite，代表无限执行，中文为极大的、无穷的，读音为ˈɪnfɪnət
  • animation-direction指定动画的运行方向，默认都是重复执行从from到to
    • normal默认值
    • reverse表示反向执行，即从to（100%）到from（0%）
    • alternate表示重复执行时反向执行，中文为候补、轮流、备用、交叉、变换，读音为ˈɔːltərneɪt
  • animation-play-state表示动画的状态
    • running默认值，代表执行
    • pause代表暂停
  • animation-fill-mode动画填充模式，即动画执行完停留的位置
    • none默认值，代表停到开始执行的位置
    • forward代表停到执行结束的位置
  • 也可以综合的写在一块：animation: test 1s 16s none infinite alternate;

精灵动画sprite animation：

  • 上图可以制作成一个精灵动画

  • .mitu {
    background-image: url("https://cdn-images-1.medium.com/max/1600/1*WhDjw8GiV5o0flBXM4LXEw.png");
    width: 265px;
    height: 270px;
    background-repeat: no-repeat;
    background-position: 0px;
    animation: mitu 0.5s infinite steps(5) none;
}
@keyframes mitu {
    from {
        background-position: 0;
    }
    to {
        background-position: -1283px;
    }
}

也可以写出小球运动的动画：

    <style>
        .land {
            height: 400px;
            border-bottom: 10px solid black;
            overflow: hidden;
        }

        .ball {
            width: 60px;
            height: 60px;
            border-radius: 100px;
            background-color: #653d79;
            animation: ball 10s forwards infinite ease-in;
        }

        @keyframes ball {
            0% {
                margin-top: 0;
            }

            35%, 45%, 55% {
                margin-top: 320px;
            }
            32%, 42%, 52% {
                height: 60px;
            }
            40%, 50%, 60% {
                margin-top: 350px;
                height: 50px;
            }
            65% {
                margin-top: 340px;
                height: 60px;
            }
            100% {
                margin-top: 340px;
                margin-left: 400px;
            }
        }
    </style>
</head>
<body>
<div class="land">
    <div class="ball">

    </div>
</div>

平移

变形不会影响页面布局

transform中文为变换，读音为trænsˈfɔːrm

用法：

transform: translateX(值)
transform: translateY(值)
transform: translateZ(值)

transform: translateX(50px) translateY(100px);

值可以为百分比、像素，如果是百分比那么将会相较于宽高进行移动，移动之后保留之前的位置

旋转

默认页面上进行旋转时效果并不是特别明显，这是因为没有设置视距，如果没有视距，旋转相当于在平面上进行

想要使旋转效果生效，需要将视距属性写到最开始的位置，视距大小通常设置为800-1300px即可：

transform: perspective(视距大小)
  • perspective中文为态度、看法、透视，读音为pərˈspektɪv

旋转：

transform: rotateX/Y/Z(值)
  • rotate中文为旋转、使转动，读音为ˈroʊteɪt

例如呈现出Windows10徽标的效果：

    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #646ee1;
            position: relative;
            transition: all 3s;
            transform: perspective(800px) rotateY(-25deg) translateY(10px);
        }
        .line1 {
            height: 100%;
            width: 5px;
            background-color: white;
            margin: auto;
        }
        .line2 {
            width: 100%;
            height: 5px;
            background-color: #ffffff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="line1">

    </div>
    <div class="line2">
        
    </div>
</div>

镜像翻转效果也可以使用这个属性实现：

transform: rotateY(180deg);

翻转后的背面也可以隐藏掉：

backface-visibility: hidden;

元素不透明

可以设置整个元素的不透明效果：

opacity: 数值;
opacity: 0.5;

opacity中文为不透明、模糊，读音为oʊˈpæsət

3d效果

transform-style: preserve-3d;

默认情况下，元素按照2d效果生成的视距，如果想要以3d形成视距，可以开启这个效果

立方体旋转：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            width: 400px;
            height: 400px;
            /*background-color: #c5c5c5;*/
            margin: auto;
            transform-style: preserve-3d;
            /*transform: perspective(800px);*/
            position: relative;
            animation: box infinite 5s forwards;
        }
        @keyframes box {
            0% {
                transform: perspective(800px) rotateX(0) rotateY(0);
            }
            50% {
                transform: perspective(800px) rotateX(0) rotateY(360deg);
            }
            100% {
                transform: perspective(800px) rotateX(360deg) rotateY(360deg);
            }

        }
        .left, .right, .top, .bottom, .front, .end {
            width: 200px;
            height: 200px;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        .left {
            background-color: rgb(161, 168, 239);
            transform: perspective(800px) rotateY(-90deg) translateZ(100px);
        }
        .right {
            background-color: #95f3b7;
            transform: perspective(800px) rotateY(90deg) translateZ(100px);
        }
        .top {
            background-color: #fab5b5;
            transform: perspective(800px) rotateX(90deg) translateZ(100px);
        }
        .bottom {
            background-color: #653d79;
            transform: perspective(800px) rotateX(-90deg) translateZ(100px);
        }
        .end {
            background-color: #dc664c;
            transform: perspective(800px) rotateY(-180deg) translateZ(100px);
        }
        .front {
            background-color: #e8d725;
            transform: perspective(800px) translateZ(100px);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        左
    </div>
    <div class="right">
        右
    </div>
    <div class="top">
        顶
    </div>
    <div class="bottom">
        底
    </div>
    <div class="end">
        后
    </div>
    <div class="front">
        前
    </div>
</div>

缩放

transform: scaleX/Y(值)可以出现放大或者缩小的效果

transform: scaleX(1.2) scaleY(1.2);

scale中文为天平、大小、等级、程度、刻度，读音为skeɪ

transform: scale(值); // 可以同时实现缩放X轴和Y轴的效果

transform-origin

可以用来设置变换的起点，transform-origin: 0 0

flex

flex中文为弯曲、屈伸、活动，读音为fleks，通常被称为弹性盒，用来代替浮动完成页面布局，可以让元素具有弹性，让元素随着页面大小的改变而改变

弹性元素的直接子元素是弹性元素，一个元素可以同时是弹性元素和弹性容器

  • display: flex
  • display: inline-flex

默认的子元素排列方式是从左至右，也可以进行修改：

  • flex-direction: row默认值
  • flex-direction: row-reverse从右至左
  • flex-direction: column自上至下
  • flex-direction: column-reverse自下向上

主轴：元素的排列方向，例如自右向左排列，主轴就是自右向左

侧轴：与主轴处置的方向，例如主轴从右向左，侧轴就是自下至上

可以为每个子元素设置伸展系数，设置伸展系数后，将会按照子元素的主轴进行伸展：

  • flex-grow: 数值，grow中文为成长
  • 默认值为0，也就代表不进行伸展
  • 可以把这个数值当成一个权重
  • 如果子元素的所有伸展系数一致，那就代表所有子元素按照主轴的方向撑满父元素
  • 如果仅给一个子元素设置伸展系数，那么这个子元素按照主轴的方向撑满父元素

也可以为每个子元素设置收缩系数，设置收缩系数后，如果父元素的主轴空间不足以直接容纳所有的子元素时，将会按照这个规则缩小

  • flex-shrink: 数值，shrink中文为收缩、缩小，读音为ʃrɪŋk
  • 所有子元素的收缩系数默认值为1，也就是同时进行等比例的伸缩
  • 当收缩系数为0时，代表这个元素不进行收缩

当元素在主轴上溢出时，可以选择将这个元素换到下一行显示：

  • flex-wrap
    • wrap代表换到下一行
    • wrap-reverse代表反向换到下一行
  • flex-flow相当于flex-direction和flex-wrap的结合，例如flex-flow: column wrap

（给父元素设置的属性）也可以设置flex中的元素的对其方式，可以设置为左对齐或者右对齐（主轴为横向时）、上对齐或者下对齐（主轴为纵向时）：

  • justify-content
    • flex-start默认值
    • flex-end代表朝空白方向对齐（下对其或者右对齐）
    • center居中
    • space-around将空白分布到元素两侧，相当于平均分布
    • space-evently空白分布到元素一侧
    • space-between将空白分布到两元素中间

将一个元素在弹性盒中水平垂直居中对齐：

  • justify-content: center;
align-items: center;

align-content用来设置多行元素的排列方式，文档https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-content：

  • normal默认值
    • image-20221007215226171
  • start：下一行紧贴上一行，并且在辅轴的开始位置
    • image-20221007213744082
  • center：两行紧贴在辅轴中心位置
    • image-20221007214013848
  • end两行紧贴，在辅轴最下边
    • image-20221007214052337
  • space-between两侧对齐
  • space-around均匀分布
    • image-20221007215438259
  • space-evently

flex-basis: 110px;可以用来指定元素在主轴的长度，代替width，默认值为auto

flex-grow、flex-shrink、flex-basis可以简写为flex: gorw shrink basis：

  • 默认值为flex: 0 1 auto
  • 也可以设置为：auto，相当于0 0 auto
  • 可以设置为none，相当于0 0 auto

例如：

flex: 1 1 auto;
flex: 1 1 100px;

可以通过order: 数值为每个子元素单独调整位置

移动端

调整移动端视口大小：

<meta name="viewport" content="width=375px">

完美的移动端视口大小：

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

由于移动端的屏幕视口大小都不同，因此直接使用px作为长度单位会造成意想不到的问题

使用百分比作为单位也不是很好的解决方案，如因为百分比的像素是一直变换的，可以使用vw作为单位，vw代表视口宽度，即viewport width

通常像素和vw的单位转换是0.13333333333vw = 1px

如果全部都直接使用vw作为单位，每次都需要手动的计算，可以使用一种优雅的解决方案：

字体单位rem相较于html字体大小，可以通过以下方式修改：

  • html {
    font-size: 100px;
}

也就是说，可以把html的字体大小修改为0.13333，这样的话，1rem = 1vw

响应式

根据窗口的大小产生出不同的效果，一个网页可以适配多端设备

响应式布局的关键点是媒体查询

用法：@media 规则

  • 媒体类型：

    • all所有设备

    • print打印设备

    • screen带有屏幕的设备

    • speech屏幕阅读器

    • 由于网页一般都是在屏幕上显示的，所以一般都写screen或者all

    • @media screen {
    body {
        background-color: red;
    }
}
@media screen, print {
    
}

媒体特性

用法：

@media (条件) {
    
}

例如：

@media (width:600px) {
    body {
        background-color: red;
    }
}

通常只关注宽度的大小

也可以设置一个范围：

  • min-width代表大于这个宽度像素时生效
  • max-width代表小于这个宽度像素时生效

常用的宽度分界点：

  • max-width: 768px超小屏幕
  • min-width: 768px小屏幕
  • min-width: 992px中型屏幕
  • min-width: 1200px大型屏幕

多个条件可以一块写：

// , 代表或者
@media (条件), (条件) {
    
}
// and 代表且
@media (条件) and (条件) {
    
}

例如：

// 代表屏幕宽度小于300px或者大于600px时使用
@media (max-width: 300px), (min-width: 600px){
    body {
        background-color: red;
    }
}

// 代表600 - 1000p'x
@media (min-width: 600px) and (max-width: 1000px){
    body {
        background-color: red;
    }
}

Q.E.D.

念念不忘，必有回响。