css总结

「已注销」

已于 2022-05-20 10:27:08 修改

阅读量2.3k

点赞数

分类专栏： CSS 文章标签： css 前端

于 2022-05-20 10:24:00 首次发布

本文链接：https://blog.csdn.net/love_dzq/article/details/124877424

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

前言

从1996年W3C推出的第一版CSS规范代表CSS的诞生到现在2022年，CSS已经有了20多年的沉淀。我在了解CSS的发家史发现，CSS在一系列为解决HTML越来越庞杂的问题的技术中脱颖而出的核心竞争力是有奥秘的。它能在当时的那么多样式表语言中脱颖而出，我认为层叠特性有着举足轻重的功劳，层叠策略对于样式的显示是相当灵活的.其次CSS的核心“武器”便是“普通流（文档流）”的概念。为了使得描述有一定的逻辑性和时间顺序，在第一扎CSS2的讨论中我将作重围绕【层叠特性|文档流】这两个大的点来展开对CSS2中琐碎的知识点的扩充说明。CSS3作为互联网洪流时代适应移动端的产物，在和CSS2相比之下更加丰富更加规范，更加具有体系化，同时也更加的复杂。在第二扎中我主要是对CSS3中添加的新特性以及其使用方法做个展示。随着硬件科技的日渐发达，在现在移动端在主流开发中的占比也越来越大，在第三扎中则是对目前主流的移动端布局的几个方式进行展示梳理，通过实战案例让新的布局方式能够有熟练的使用。最后，希望在整篇的记录和梳理之下我能够有所感悟和收获。

第一扎 CSS2.1

从DOM的角度认识CSS

DOM(Document Object Model),翻译过来就是文档对象模型，它定义了所有 HTML 元素的对象和属性，以及访问它们的方法（接口）。核心观点就是将整个HTML文档比喻成一棵树，而我们所说的每个元素就相当于是这棵树上的节点，如下图所示：

图解DOM树（最简单的方式理解DOM树）_是木子啦~的博客-CSDN博客

从图中可以看出，节点就是我们所说的HTML的元素，我们可以给这些节点元素添加绑定任意的属性值，而这些节点元素对象中的属性就会被浏览器按照约定好的规则解析并且渲染最终展示在我们的面前，形成我们所说的网页。我们经常有这样的比喻：HTML是骨架、CSS是皮肤、JavaScript是灵魂，他们构建出我们形形色色的网页。但是我们要明确一点——浏览器是这个世界的造物主。

浏览器是造物主，HTML是骨架、CSS是皮肤、JavaScript是灵魂，通过造物主将这些元素融合就形成了世间万物。除开人我们本身这个例子，世界万物都是如此，比如：石头是只有骨架和皮肤不会动的东西，所以它没得灵魂不会动。HTML属于CSS和JavaScript必要不充分条件，建造的顺序没法颠倒。总不会有人能够成功将HTML写进CSS或者JavaScript中能够成功在浏览器中运行吧！当然现在出现的诸如Node等等这些脚本语言，我们不做讨论，因为他们的造物主并不是浏览器，属于另外一个世界。

由此可以得出结论，CSS本质是字符串，想要让他们有意义就需要浏览器的解析并且作为对象嵌入到HTML DOM对应的节点元素当中，这样渲染出来后就能够在浏览器中成功看到CSS给HTML文档穿上的华丽的衣服了。

CSS的专业术语及使用

那么有意思的就来了。如何让CSS文件中这些普普通通的字符串赋予意义用在美化网页上呢？我们就要学习CSS的专业术语让浏览器能够正确知道我们的意图，按照我们的意图渲染出我们想要的样式。

1．属性

属性对应的是平常我们书面或交谈时对CSS的中文称谓。例如，上面示意CSS代码中的height和color就是属性。当我们聊天或者分享时说起CSS的时候，嘴里冒出来的都是“这个元素高度99像素”，或者“这个文字颜色透明”，而“高度”和“颜色”就是CSS世界的属性，感觉有点儿像现实世界里人的姓氏。

2．值

“值”大多与数字挂钩。例如，上面的99px就是典型的值。在CSS世界中，值的分类非常广泛，下面是一些常用的类型。

整数值，如z-index:1中的1，属于，同时也属于。
数值，如line-height:1.5中的1.5，属于。
百分比值，如padding:50%中的50%，属于。
长度值，如99px。
颜色值，如#999。
此外，还有字符串值、位置值等类型。在CSS3新世界中，还有角度值、频率值、时间值等类型，这里就不全部展示了。

3．关键字

顾名思义，关键字指的是CSS里面很关键的单词，这里的单词特指英文单词，abc是单词吗？不是，因此，如果CSS中出现它，一定不是关键字。上面示例CSS代码中的transparent就是典型的关键字，还有常见的solid、inherit等都是关键字，其中inherit也称作“泛关键字”，所谓泛关键字，可以理解为“公交车关键字”，就是“所有CSS属性都可以使用的关键字”的意思。

4．变量

CSS中目前可以称为变量的比较有限，CSS3中的currentColor就是变量，非常有用。

5．长度单位

CSS中的单位有时间单位（如s、ms），还有角度单位（如deg、rad等），但最常见的自然还是长度单位（如px、em等）。需要注意的是，诸如2%后面的百分号%不是长度单位。

6．功能符

值以函数的形式指定（就是被括号括起来的那种），主要用来表示颜色（rgba和hsla）、背景图片地址（url）、元素属性值、计算（calc）和过渡效果等，如rgba(0,0,0,.5)、url(‘css-world.png’)、attr(‘href’)和scale(-1)。

7．属性值

属性冒号后面的所有内容统一称为属性值。例如，1px solid rgb(0,0,0)就可以称为属性值，它是由“值+关键字+功能符”构成的。属性值也可以由单一内容构成。例如，z-index:1的1也是属性值。

8．声明

属性名加上属性值就是声明，例如：

color: transparent;

9．声明块

声明块是花括号（{}）包裹的一系列声明，例如：

{
　 height: 99px;
　 color: transparent;
}

10．规则或规则集

出现了选择器，而且后面还跟着声明块，比如本小节一开始的那个例子，就是一个规则集：

.vocabulary {
　 height: 99px;
　 color: transparent;
}

在明确CSS的基本语法之后就是使用的阶段了。

CSS引入和使用方式

有了对专业术语和对css基本规则的认识我们就要，按照规范在HTML文档中使用我们的CSS层叠样式表。有三种引入和使用的方式分别是【行内样式】【内部样式】【外部样式】，下面将通过案例来认识：

一、行内样式

使用style属性引入CSS样式。

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

三、外部样式表

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

导入的链接可以使用相对路径也可以是绝对路径

在这里插入图片描述

语法：
1、链接式

<link type="text/css" rel="styleSheet" href="CSS文件路径" />

2、导入式

<style type="text/css">
 @import url("css文件路径");
</style>

综合实例【完整案例CSS引入方式.html】:

<head>
<!-- 外部样式引入--链接式 -->
<link rel="stylesheet" href="css/style.css" />
<!-- 外部样式引入--导入式 -->
<style>
@import url(CSS/style.css);
</style>
<!-- 内部样式使用 -->
<style>
    div {
        margin-left: 50%;
        color: #ffe8e8;
        transform: translateX(-50%);
        text-align: center;
    }
</style>
</head>
<body>
 	<!-- 行内样式使用[在元素节点标签内] -->
	<p style="color: pink; font-size: 20px">给我一个粉红的回忆</p>
</body>

案例效果：

在这里插入图片描述

引入样式的说明

外链css为什么放在head

这是因为浏览器对HTML文档的读取解析顺序是从上到下的，如果把css放在底部，当网速慢时，html代码加载完成但css没加载完，会导致页面没有样式而难以阅读，所以先加载css样式能让页面正常显示。

CDN引用技术

CDN(Content Delivery Network)是指内容分发网络,我们只需要知道它对我们的CSS有什么用处。

我们可以通过引用CDN的链接直接使用别人分享的链接作为外联引用从而直接使用别人的第三方样式库。常用的CDN托管网站有【https://staticfile.org/】

CSS2选择器的使用

选择器可以理解成用来瞄准HTML DOM树上节点元素的东西，想要对元素进行操作，我们就将写好的声明块通过选择器发射给指定的节点元素上，为改节点添加样式(化妆)。

在CSS2.1中已经出现的选择器有5类分别是【基本选择器】【多元素的组合选择器】【CSS 2.1 属性选择器】【CSS 2.1中的伪类】【CSS 2.1中的伪元素】

一、基本选择器

在开发中我们最常见的4个选择器

序号	选择器	含义
1.	*****	通用元素选择器，匹配任何元素
2.	E	标签选择器，匹配所有使用E标签的元素
3.	.info	class选择器(类选择器)，匹配所有class属性中包含info的元素
4.	#footer	id选择器，匹配所有id属性等于footer的元素

实例：

* { margin:0; padding:0; }

p { font-size:2em; }

.info { background:#ff0; }

p.info { background:#ff0; }

p.info.error { color:#900; font-weight:bold; }

#info { background:#ff0; }

p#info { background:#ff0; }

二、多元素的组合选择器

序号	选择器	含义
5.	E,F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔
6.	E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
7.	E > F	子元素选择器，匹配所有E元素的子元素F
8.	E + F	毗邻(兄弟)元素选择器，匹配所有紧随E元素之后的同级元素F

实例：

div p { color:#f00; }

#nav li { display:inline; }

#nav a { font-weight:bold; }

div > strong { color:#f00; }

p + p { color:#f00; }

三、CSS 2.1 属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

序号	选择器	含义
9.	E[att]	匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如"[cheacked]"。以下同。）
10.	E[att=val]	匹配所有att属性等于"val"的E元素，即匹配任何形式的单词
11.	E[att~=val]	匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素，即属性值中可以有其他空格隔开的元素
12.	E[att\|=val]	表示带有以 att 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"`-`"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）

实例：

/*很容易忽略的一个点，当存在这个属性的时候使用该声明块*/
p[title] { color:#f00; }

/* 匹配.my error, .error，但不匹配.myerror。*/
div[class=error] { color:#f00; } 

/* 匹配.coll,.cor coll 但不匹配.corcoll */
td[headers~=coll] { color:#f00; } 

p[lang|=en] { color:#f00; }

blockquote[class=quote][cite] { color:#f00; }

四、CSS 2.1中的伪类

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。

序号	选择器	含义
13.	E:first-child	匹配父元素的第一个子元素
14.	E:link	匹配所有未被点击的链接
15.	E:visited	匹配所有已被点击的链接
16.	E:active	匹配鼠标已经其上按下、还没有释放的E元素
17.	E:hover	匹配鼠标悬停其上的E元素
18.	E:focus	匹配获得当前焦点的E元素
19.	E:lang©	基于元素语言来匹配页面元素。

完整的标准伪类索引MDN

实例：

p:first-child { font-style:italic; }

input[type=text]:focus { color:#000; background:#ffe; }

input[type=text]:focus:hover { background:#fff; }

/* 选取任意的英文（en)段落 */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

五、 CSS 2.1中的伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 ::first-line 伪元素可改变段落首行文字的样式。

序号	选择器	含义
20.	E::first-line	匹配E元素的第一行
21.	E::first-letter	匹配E元素的第一个字母
22.	E::before	在E元素之前插入生成的内容
23.	E::after	在E元素之后插入生成的内容

实例：

p:first-line { font-weight:bold; color;#600; }

.preamble:first-letter { font-size:1.5em; font-weight:bold; }

.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }

a:link:after { content: " (" attr(href) ") "; }

CSS三大特性

CSS有三个非常重要的三个特性：【层叠性】、【继承性】、【优先级】。

层叠性

CSS全称是Cascading Style Sheets，翻译成中文就是“层叠样式表”，由名字就可以知道层叠性，对于CSS的核心重要性。可以说是CSS在众多样式表中脱颖而出占据今天的地位，层叠性就是重要的一笔。下面我们就来了解一下什么是CSS的层叠性：

层叠性定义：相同的选择器设置了相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

样式冲突：遵循就近原则

实例说明：

<style>
    div {
        /*第一次定义文本为红色*/
        color: red;
        font-size: 12px;
    }
    div {
        /*在第二次的定义中就会被覆盖*/
        color: pink;
    }
</style>
<body>
	/*最终文本的颜色为粉红色*/
    <div>长江后浪推前浪,前浪死在沙滩上</div>
</body>

案例效果：

在这里插入图片描述

继承性

子标签会继承父标签的某些样式，如文本颜色和字号。

实际案例：

<style>
  /* 父类样式 */
	div {
		color: red;
        /* font: 文字大小/行高 字体 */
        font： 12px/24px 'Microsoft YaHei';
        /* 1.5相当于当前元素文字大小的1.5倍 */
        font： 12px/1.5 'Microsoft YaHei';
		font-size: 14px;
	}
</style>
<body>
	<div>
    <!-- 子类继承 -->
		<p>龙生龙，凤生凤</p>
	</div>
</body>

案例效果：

优先级（Specificity）

优先级是CSS重要的概念，它决定了在样式被层叠之后应该选择哪一个声明块的属性加入到DOM元素节点当中。引用MDN官方对优先级的定义：

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性。

选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者 *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=‘’ ‘’	1，0，0，0
!important重要的	∞ 无穷大

当样式写在HTML文档中不同位置的时候效果也会不一样。

他们的顺序如下：行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式

优先级注意点：

权重是由4组数字组成，但不会进位。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法：通配符和继承权重为0，标签选择器为1，类/伪类选择器为10，id选择器100，行内样式表为1000，!important无穷大。
继承的权重为0，父元素的优先级再高，通过继承传给子元素后优先级为0

总结优先级的关系如下：

行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式
important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承

优先级权重叠加

符合选择器会有权重叠加的问题

/* ul li 权重 0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
ul li {
	color: green;
}
/* li 权重 0，0，0，1 */
li {
	color: red;
}

注意：当样式层叠冲突的时候可以使用权重叠加来解决冲突。

优先级的特殊情况说明

在开发过程中有遇到过添加!important属性之后不生效的问题，

!important 真的是的无法超越的王者吗？其实不是的，一些情况，我们可以超越 !important, 可以看看下面的例子：

<style>
.box {
	max-width: 100px;
}
</style>
<body>
    <div class="box" style="background: #f00; 
     width: 300px!important;">
     我的宽度是多少呢？？
     <div>
</body>

案例效果【important优先级的特殊情况.html】：

这时候 .box 的宽度只有 100px , 而不是 300px, 可见，max-width 可以超越 width!important!但是，这实际上不是优先级的问题，因为优先级是比较相同属性的，而 max-width 和 width 是两个不同的属性。

CSS流的概念

流作为CSS中的一种基本的定位和布局机制无处不在。它很重要，重要到我们觉得理所应当这样就像1+1=2一样，大家都知道但是却鲜有人证明得当。如果需要做一个比喻来说明什么是CSS世界中的流我认为将HTML元素标签比作一个盛水的容器，将CSS比作容器中的水，而我们在这个容器里的水上面铺设各种各样我们喜欢的小黄鸭，这些比喻都再合适不过，甚至你可以想象在这个布满水的容器里不断填充小黄鸭它会溢出来的画面，这么说来是不是就突然变得简单并且有趣起来了呢？CSS世界构建的基石是HTML，而HTML最具代表的两个基石

和正好是CSS世界中块级元素和内联级元素的代表。

通过一个案例来演示流的概念

【页面地址：CSS流概念的解释.html】CSS和HTML代码如下：

<style>
    .body {
      margin: 0;
      padding:0;
      box-sizing: border-box;
    }
    .vat{
      /* position: relative; */
      margin-top: 300px;
      margin-left : 50% ;
      transform: translateX(-50%);
      width: 400px;
      height: 200px;
      background: url("./img/vat.png") no-repeat;
      background-size: 100%;
      overflow:hidden;
    }
    .duck{
       /*除去定位的干扰*/
      /* position:absolute;
      top: -15px;
      left: 120px; */
      display: inline-block;
      width: 80px;
      height: 80px;
      background: url("img/duck.png") no-repeat;
      background-size: 100%;
    }
    .mlee {
      left: 200px;
    }
</style>
<body>
    // HTML块级容器元素
  <div class="vat">
      // 内联级元素
    <span class="duck"></span>
    <span class="duck mlee"></span>
  </div>
</body>

案例效果：

poj

通过案例可以发现，在没有任何能改变CSS流设定元素的干扰下，加入小黄鸭，依次紧贴排列在容器的左上角。

可以得出，所谓**“流”，就是CSS世界中引导元素排列和定位的一条看不见的“水流”。在没有特殊布局和流的破坏的情况下文档流是从左往右自上而下排列**的。这就是，CSS对页面布局的基础方式，明确流的概念是一个里程碑的意义。可以让我们在文章下面出现的某些元素中(诸如脱标、浮动、定位)或者当页面元素布局出现偏差时做出快速的解释。

CSS盒子模型

在 CSS 中，我们看到的元素都被盒子包裹着，整个编写代码的过程就像是在搭积木往大池子里头摆物体，所以理解盒子的基本原理是我们实现精准布局和处理元素排列的关键一步。

块级盒子(Block box)和内联盒子(lnline box)

在CSS的世界中广泛的使用两种盒子模型【块级盒子】【内联盒子】。这两种盒子会在页面流和元素之间的关系表现出不同的行为。

使用浏览器的开发者工具可以清楚的看到他们的模样

在这里插入图片描述

块级盒子(Block box)

块级盒子(block box)表现以下特性：

会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
每个块级盒子都独占一行
设置的宽度(width)和高度(height)属性可以生效
内边距（padding）, 外边距（margin）和边框（border）会将其他元素从当前盒子周围“推开”

默认情况下诸如我们常见的盒子div标题(<h1>和段落(<p>等)默认情况下都是块级的盒子。

内联盒子(inline box)

**内联盒子(inline box)**对外显示为 inline他的行为如下:

盒子不会产生换行。
设置的宽度(width)和高度(height)属性都不会生效
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开(类似于垂直方向脱标的意思)。在边框和内边距大小超过上下元素时会对盒子上面的元素盖压包括文字，对下面的元素也会覆盖但是不会盖压文字

直接实例说明：【内联盒子的span测试.html】

水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。(类似于水平方向不脱标的意思)

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。
关于内外边距推开的概念举个如下例子：

案例效果：【内联盒子的span测试.html】

块级盒子演示

wef

内联盒子演示
在这里插入图片描述

我们通过对盒子dispaly属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

超纲补充：内部和外部显示类型

`dispaly:block的元素`不等于块级元素

元素默认的display值是list-item，元素默认的display值是table，但是它们均是“块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。

正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响。

.clear:after {
　 content: '';
  display: table;　// 也可以是block，或者是list-item
　 clear: both;
}

为什么list-item清除浮动不常用

实际开发时，我们要么使用block，要么使用table，并不会使用list-item主要有以下原因：

会出现不需要的项目符号，如下图所示。这其实并不是什么大问题，再加一行list-style:none声明就可以了。【用listitem清除浮动.html】

在这里插入图片描述

IE浏览器不支持伪元素的display值为list-item。这是不使用display:list-item清除浮动的主因，兼容性不好。对于IE浏览器（包括IE11），普通元素设置display:list-item有效，但是:before/:after伪元素就不行

为了引出我们的中心主题，我们需要进一步了解为什么IE浏览器不支持伪元素的display值为list-item，那么我们就从下面探究为什么会出现项目符合来研究。

为什么list-item元素会出现项目符号

这个问题本身并不难，但是由这个问题可以引申出内部和外部显示类型这个重大的概念。它牵扯到CSS中各种盒子。

原因是这样的：原先只有块级盒子（block-level box）和内联盒子（inline box）。块级盒子就负责结构，内联盒子就负责内容。原本以为块级盒子一套就够用了，也就是所有“块级元素”就只有一个“块级盒子”，但是，半路杀出个list-item，其默认要显示项目符号的，一个盒子解释不了，怎么办？给list-item再重新命名一个盒子叫标记盒子(marker box)，于是就成了所有的“块级元素”都有一个“主块级盒子”，list-item除此之外还有一个“标记盒子”专门用来放圆点、数字这些项目符号。因为IE浏览器下list-item可能是无法创建标记盒子所以导致无法清除浮动。

在这里插入图片描述

通过对list-item的解决方案的借鉴CSS又出现了inline-block元素

怎么理解inline-block元素

inline-block的盒子和list-item的原理是一样的，是每个元素都两个盒子，由外在的【块级盒子】和内在的【****】组成。块级盒子负责元素是可以一行显示，还是只能换行显示；块级容器盒子负责宽高、内容呈现什么的。值为inline-block的元素则由外在的“内联盒子”和内在的“块级容器盒子”组成，所以以此类推值为inline的元素则内外均是“内联盒子”。

这就能解释，display属性值是inline-block的元素既能和图文一行显示，又能直接设置width/height,因为有两个盒子，外面的盒子是inline级别，里面的盒子是block级别。

那么解释内部和外部显示类型就变得轻而易举了

什么是内部和外部显示类型

【MDN官方解释】

在这里最好也解释下内部和外部显示类型。如上所述， css的box模型有一个外部显示类型(块级盒子)，来决定盒子是块级还是内联。

同样盒模型还有内部显示类型(块级容器盒子)，它决定了盒子内部元素是如何布局的。默认情况下是按照正常文档流布局，也意味着它们和其他块元素以及内联元素一样。

什么是CSS盒模型？

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。—《MDN》

盒模型的各个组成部分

CSS中组成一个块级盒子需要:

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

利用浏览器的开发者工具我们很容易就能看见组成结构：

在这里插入图片描述

标准盒模型

一句话概括就是设置的宽高只是**内容盒子(content box)**的宽高，其他的另算。在标准模型中，如果你给盒设置 width 和 height，实际设置的是 内容盒子(content box)。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。见下图↓

假设定义了 width, height, margin, border, and padding:

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。

Showing the size of the box when the standard box model is being used.

注: margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。

替代（IE）盒模型

一句话概括就是设置的宽高就是除margin之外的宽高。IE盒模型通常就是我们口中说的怪异盒模型。你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的! 因为这个原因，css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).

在这里插入图片描述

默认浏览器会使用标准模型。如果需要使用替代模型，您可以通过为其设置 box-sizing: border-box 来实现。这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。

如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性就欧克。

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

注：一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换。直到IE8+ 才支持使用box-sizing 进行切换。

盒模型案例：【CSS盒子模型.html】

案例效果：

在这里插入图片描述

BFC结界

什么是BFC?

BFC全称为block formatting context，中文为“块级格式化上下文”。“结界”这个词大家应该都理解的，指通过一些特定的手段形成的封闭空间，里面的人出不去，外面的人进不来，具有极强的防御力。BFC的特性表现就如出一辙，所以很多人都喜欢用结界的概念来说明BFC。大家请记住下面这个表现原则：如果一个元素具有BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。所以，BFC元素是不可能发生margin重叠的，因为margin重叠是会影响外面的元素的；BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

如何触发BFC?

常见的情况如下：

根元素；
float的值不为none；
overflow的值为auto、scroll或hidden；
display的值为table-cell、table-caption和inline-block中的任何一个；
position的值不为relative和static。

BFC的作用

BFC的结界特性最重要的用途其实不是去margin重叠或者是清除float影响，而是实现更健壮、更智能的自适应布局。下文中会展示BFC如何清除浮动，从而解决外边距塌陷的问题。

外边距塌陷问题

什么是外边距塌陷？

在开发中会遇到外边距塌陷问题。块的顶部外边距和底部外边距有时被组合（折叠）为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷（合并）。它不是BUG而是标准

问题代码：

<style>
    .father {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        margin-top: 50px;
    }
    .son {
        width: 100px;
        height: 100px;
        background-color: darkcyan;
        margin-top: 100px;
    }
</style>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

问题案例效果：

在这里插入图片描述

我们的业务需求是【父元素距离顶部50px，然后子元素在父子的上边距有100px】,实际的效果却是父元素距离顶部100px,子元素相对父元素没有边距。这个就是外边距合并(外边距塌陷)问题。

为什么会造成塌陷

CSS的设计者们在很早之初为了为了实现文字环绕效果决定使用一种方法(float)破坏文档流,而这种属性的作用之一就是可以使父元素的高度塌陷。随着Web技术的不断发展，为原始的图文展示设计的方法已经不适用现在的技术，而我们仍在满屏使用这种带有使父元素塌陷的方法，就会出现塌陷问题。

发生外边距塌陷的三种情况

1.相邻的兄弟姐妹元素

<style>
* {
margin: 0;
}

.box1 {
width: 150px;
height: 100px;
margin-bottom: 50px;
/* border: 1px solid #000000; */
background-color: rgb(201, 239, 98);
}

.box2 {
width: 100px;
height: 100px;
/* border: 1px solid #000000; */
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>

此时两个div中间的距离并不是60px，而是50px。就是说这里并不是两个margin的和，而是取的两者中较大的那个。

2.块级父元素与其第一个/最后一个子元素

如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说“挨到一起了”。此时这个块级父元素和其第一个子元素就会发生上边距合并。即这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。类似的，若块级父元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的border、padding、inline content、height、min-height、max-height分隔时，就会发生下边距合并现象。

<style>
        * {
            margin: 0;
        }

        .box1 {
            width: 150px;
            height: 100px;
            /* margin-top: 20px; */
            /* border: 1px solid #000000; */
            background-color: rgb(201, 239, 98);
        }

        .box2 {
            width: 100px;
            height: 100px;
            /* border: 1px solid #000000; */
            background-color: rebeccapurple;
            margin-top: 10px;
        }
    </style>
</head>

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

margin
可以看出margin的变化，但是引用中说的清除浮动，没有明白具体指的是什么（div中如果设置了float是不会发生边界融合的)。如果父元素设置了border，那么margin也不会发生融合现象。

注意：

如果div中有内容，可以自行撑开，不会发生融合
父元素设置了padding、border，不会发生合并
父元素或者子元素设置了float或者position：absolute，不会发送融合（可以理解为BFC会阻止元素外边距合并。）

解决方案：

设置padding或者border
触发BFC

哪些元素会生成BFC？

根元素
float属性不为none
position为absolute或fixed
display为inline-block、table-cell、table-caption、flex、inline-flex
overflow不为vidible

3.空块元素

如果存在一个空的块级元素，border、padding、inline content、height、min-height都不存在，那么上下边距中间将没有任何阻隔，上下外边距将会合并。
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

可以理解成中间div宽度为0且上下边距融合，只取margin的最大值。

浮动

CSS中正常的流内容或者流布局虽然也足够强大，但是实现的总是方方正正、规规矩矩的效果，有时候我们希望有一些特殊的布局表现，例如，文字环绕效果，或者元素固定在某个位置，要实现这样的效果，正常的流就有些捉襟见肘。因此，CSS中有一类属性，专门通过破坏正常的“流”来实现一些特殊的样式表现。在上一节处理元素外边距塌陷的问题时我们通过设置浮动触发BFC成功就解决了塌陷问题，那么现在就来解释什么是浮动。

什么是浮动？

浮动(float)属性,在创作之初的本质就是为了实现文字环绕效果。我们可以简单的认为她是用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

案例：【】

<style>
    .float {
        display: flex;
        /* 添加浮动 */
        float: left ;
        width: 200px;
        height: 200px;
        flex-direction: column;
        background-color: yellowgreen;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
    <div class="float">
        <span>200x200</span>
    </div>
    I will no longer, as has ever been my habit, continue to ruminate on every petty vexation which fortune may dispense; I will enjoy the present, and the past shall be for me the past.
    我絕不會再像以前一樣，把命運加給我們的一點兒不幸拿來反覆咀嚼(念念不忘)；我要享受現時，過去的事就讓它過去吧。《少年維特之煩惱》
	</body>

案例效果：

未添加浮动效果

在这里插入图片描述

添加浮动效果【float浮动效果展示.html】

在这里插入图片描述

语法：选择器{float:属性值;}

属性值	描述
none	元素不浮动(默认)
left	元素左浮动
right	元素有浮动

浮动特性(重难点)

浮动元素会脱离标准流==(脱标)==。

脱离标准普通流的控制(浮)移动到指定位置(动),（俗称脱标）。

浮动的盒子不再保留原先的位置。
浮动的元素会一行内显示并且元素顶部对齐。

浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级元素宽度装不下这些浮动的盒子，多出的盒子就会另起一行对齐。
浮动的元素会具有行内块元素的特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素的相似特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来定。

浮动元素经常和标准流父级搭配使用

为了约束浮动元素的位置，我们网页布局一般采取的策略是：
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。符合网页布局第一准则。

浮动案例：小米商城浮动案例

float的特性

包裹性
块状化并格式化上下文
破坏文档流
没有任何margin合并(塌陷)

包裹性

所谓的包裹性是指，使用float的元素会自动加上一个块级框，也就是可以像块级元素那样设置宽高，例子如下：

<style>
    .float {
        float: left;
        width: 200px;
        height: 300px;
        background-color: yellowgreen;
    }
</style>
<body>
    <span>我絕不會再像以前一樣，把命運加給我們的一點兒不幸拿來反覆咀嚼</span>
    <div class="float">
        <span class="float">我絕不會再像以前一樣，把命運加給我們的一點兒不幸拿來反覆咀嚼</span>
    </div>
</body>

案例效果：【float包裹性.html】

在这里插入图片描述

可以看出添加了浮动之后，原本是内联级元素的span拥有了可以设置宽高的功能转换成了块级元素。

破坏文档流

float的破坏性主要是指它会使父容器的高度塌陷，也就是父元素在高度计算的时候会忽略浮动的元素

案例【外边距塌陷.html】

在这里插入图片描述

在上文中已经讲述过了这个问题。这个特性也正是它能够实现文字环绕的原因，但是由于后来float被大量应用到页面布局之中，所以这个我们不得不想办法清除浮动，这个在下文会有提到。

脱离文档流

我们常常说到float 和 absolute 都会说到脱离文档流，但是两者是有区别的，可以理解成定位的absolute的脱离是完全脱离，而float的脱离是不完全的。absolute正如它的名字一般，是绝对脱离，设置了该属性的元素，将完全独立在文档流之外，不会对其他的元素产生任何影响，就举上面文字环绕的例子来说，如果把img属性的float换成position：absolue属性的话，那么p元素以及上面的文字都会顶到图片的位置上，就像这样:

在这里插入图片描述

而对于float我们之前已经提出，float只是脱离了文档流的DOM空间但是还占据着文字空间。

高度塌陷

float和absolute都能引起父元素的高度塌陷，同样地，由于absolute是完全脱离文档流，所以这种情况的高度塌陷是没办法清除的；float引起的高度塌陷则是可清除的，我们常说的清除浮动就是指清除float带来的高度塌陷问题，在下文会有提到。

在两列布局中的使用

float和absolute都被广泛用于两列布局之中，absolute由于完全脱离，可以做到精准的定位，但是不利于设计两列之间的联动变化；float属性可以保留一些相互影响，但是要非常小心传递来的问题，比如clear的不当使用会导致左右布局异常联动，在后面讲清除浮动时会专门讲解。而且在使用浮动布局的时候，要注意某些情况下要交换浮动左右浮动元素的声明次序。

float和inline-block的横向排列

使用float和inline-block都能使li横向排列。但是，使用float可以选择排列的方向,而inline只有一种方向；
第二是在单纯排列图片的时候，如果图片大小不是完全一致的，那么使用这两个属性都能完成比较合适的排列：

在这里插入图片描述

但是如果图片大小不等高，float的脱离文档流特性导致排列的某些图片会被挤到下一行，导致垂直方向无法对齐，如下：【float和inline-block的区别.html】

在这里插入图片描述

而如果使用display：inline-block则可以保证垂直方向的对齐：【float和inline-block的区别.html】

在这里插入图片描述

所以如果是要保证垂直对齐的情况下，使用display:inline-block会比较合适

float和display:inline-block这两个属性有一个很经常用到的地方就是横向导航。导航中一般是单行对齐，而且除了图片之外还有文字，这时候如果采用display:inline-block，必须要考虑**display:inline-block属性带来的空白间隙问题**(这个问题可以自行查找，本文中不赘述)，此时使用float:left更为合适一些。

浮动的缺点

float好像也能满足我们布局页面的需求，但是实际上他会导致一个严重的问题：一碰就碎，主要在于其缺少弹性。举个例子，一旦某个列表高度变高了，则下面的列表就可能发生不愿看到的布局错位，抑或是日后我们需要增加某个元素的宽度，则牵一发而动全身，其他元素也必须跟着调整，否则样式必乱，也就是说布局的容错性很糟糕。所以一个原因是纯浮动布局容错性差，容易出现比较严重的布局问题，还有一个原因就是float本身就是魔鬼属性，容易出现意料之外的情况，这里的意料之外除了float属性自身特性（如父元素高度塌陷）导致的布局问题外，还包括诸多兼容性问题。

如何清除浮动

前文中常常提到的float属性会引起父容器高度塌陷的问题，因此我们需要清除浮动。

我认为清除浮动，根据原理来划分，分为两类：

利用BFC原理包裹浮动
利用clear属性清除浮动

利用BFC原理包裹浮动

BFC的结界特性最重要的用途其实不是去margin重叠或者是清除float影响，而是实现更健壮、更智能的自适应布局。根据BFC的表现原则，具有BFC特性的元素的子元素不会受外部元素影响，也不会影响外部元素。所以在父元素中触发BFC就可以包裹浮动。

父级添加overflow属性。

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

注意是给父元素添加代码

优点：代码简洁。

缺点：无法显示溢出部分。

案例：Overflow法实现清除浮动

利用clear属性清除浮动

如果大家有过经验都知道，通常利用clear属性清除浮动的方式有两种：

利用添加空标签清除浮动(隔墙法)
通过after伪类清除元素

这两种方式只是写法上有所不同，通过伪类清除可以让代码比较简洁，并且符合语义化的原则（其实就是可以少写无意义的空标签）现在比较流行的bootstrap框架或者其他各大框架中，方法展示如下：

额外标签法

也被称为隔墙法，是W3C推荐的做法。

额外标签法也称为隔墙法，是W3C推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如<div class="clear"></div>，或者其他标签(如<br/>等)

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化较差。

注意：要求添加的空标签必须是块级元素

案例：额外标签法实现清除浮动
<style>
/* 添加清除浮动样式 */
.clear {
clear: both;
}
</style>
<div class="box">
<div class="ermao">二毛</div>

<div class="clear"></div>
</div>

父级添加:after伪元素

:after 方式是额外标签法的升级版。也是给父元素添加。

原理：在父元素后面添加一个容器，使用隔墙法实现。

优点：没有增加标签，结构更简单。

缺点：需要照顾低版本浏览器。

代表网站：百度、淘宝、网易等。

代码：
<style>
	/* 固定的样式写法 */
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6-7兼容IE系列*/
*zoom: 1;
}
</style>
<body>

<div class="box clearfix"></div>
</body>
案例：after伪元素法实现清除浮动

父级添加双伪元素

也是给父元素添加。添加:before :after伪类元素

原理：在父元素前后都添加一个容器，使用隔墙法实现。

优点：没有增加标签，代码更简洁。结构更简单。

缺点：需要照顾低版本浏览器。

代表网站：小米、腾讯等。

代码：
<style>
.clearfix:before,.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6-7兼容IE系列*/
*zoom: 1;
}
</style>
<body>

<div class="box clearfix"></div>
</body>
案例：双伪元素法实现清除浮动

至于before和after中的display:table;是为了防止子元素垂直方向上的边距折叠，也就是通常说的子元素margin-top会被转移到父元素的问题所以以上的效果就相当于在父元素最后插入一个子元素，并且设置clear:both属性，这是现在最通用的办法，但是其实并无是完美无缺的。

清除浮动总结

父级没有高度。
子盒子浮动了。
影响下面页面标准流的元素布局，需要清除浮动。

清除浮动的方式	优点	缺点
额外标签法(隔墙法)	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow:hidden	书写简单	溢出隐藏
父级after元素	结构语义化正确	由于 IE6-7不支持:after,兼容性问题
父级双伪类元素	结构语义化正确	由于 IE6-7不支持:after,兼容性问题

clear使用不当的例子

举一个之前项目中碰到的一种情况，为了方便大家理解，在这里把模型简化,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        .div1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightpink;
        }
        .div2{
            margin-left:100px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
        <div class="div1">
        这是div1
        </div>
        <div class="div2">
            <div style="float:left">这是一个浮动的标题</div>
            <div style="clear:both"></div>
        </div>
</body>
</html>

这段代码是一个非常简单的左右两列布局，在右边内部有个浮动的标题，于是在后面跟上一个清除浮动的子元素（这里采用空标签只是为了在研究问题的时候排除伪类元素的干扰），但是存在一个问题：右边的div2会自动适应div1的高度，或者说清除浮动的容器会有高度，我们可以在F12中直接改变左边div1的高度，可以看到右边的高度也随之改变。

案例【clear使用不当的例子.html】

在这里插入图片描述

这种情况有很多方法可以处理，比如让div2形成一个BFC容器，但是很少看到有文章讲到问题的根源，我查了很久，最后发现问题是源于clear这个属性上设计：

clear清除浮动对于其他形成BFC的块内部的浮动元素是无效的
clear清除浮动的原理是：让添加了clear属性对应元素的margin-top边缘在某侧或者两侧（看设置的值是left right还是both）浮动元素的底边距之下，简单的说就是clear:both的作用本质是让自己不和float元素在一行显示，并不是真正意义上的清除浮动。

其实这个很好理解，我们之所以能够使用clear解决float引起的父元素塌陷问题，其实就是因为加了clear的空标签或者是伪类元素，把margin-top值设置在了浮动元素的bottom边缘下方，从而能够撑起父元素。

所以最后我们就知道上面的问题出在哪里了：clear是清除某侧或者两侧的所有浮动，结合上面那个例子来看，其实是有两处浮动的，第一是左侧的div1，第二是在div2内部有个浮动的标题，我们的目的是要清除内部的浮动，但是因为clear本身的定义，就把两个浮动都清除了，也就是把加了clear属性的标签top值设置了浮动元素的bottom边缘下方，所以，那个块将会和左侧等高（实质应是设置了clear空标签的高度为0并且top刚好在div的下方）。

定位

导读：为什么要定位

定位的整个想法是允许我们覆盖上面描述的基本文档流行为，以产生有趣的效果。如果你想稍微改变布局中一些盒子的位置，使它们的默认布局流程位置稍微有点古怪，不舒服的感觉呢？定位是你的工具。或者，如果您想要创建一个浮动在页面其他部分顶部的UI元素，并且/或者始终停留在浏览器窗口内的相同位置，无论页面滚动多少？定位使这种布局工作成为可能。

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。
有很多的效果，标准流或浮动都无法快速实现，此时需要定位来实现。
- 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
- 定位则是可以让盒子只有的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他的盒子。

定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

值	语义
static	静态定位
ralative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

边偏移

边偏移就是定位的盒子移动到最终位置。有top bottom left right 4个属性。

边偏移属性	实例	描述
top	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	`bottom: 80px`	底部偏移量，定义元素相对于其父元素下边线的距离。
left	`left: 80px`	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	`right: 80px`	右侧偏移量，定义元素相对于其父元素右边线的距离。

静态定位static(默认值)

静态定位是元素的默认定位方式,它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

语法：选择器 {position：static}

静态定位按照标准流特性摆放位置，它没有偏移量。
静态定位在布局时很少用到。

相对定位relative(重要)

相对定位是元素在移动位置的时候，是相对它原来的位置来说的(自恋型)。它是我们将要看的第一个位置类型，与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。

语法:选择器 {position：relative;}

案例效果【相对定位.html】：

在这里插入图片描述

相对定位的特点：

它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
原来在标准流的位置继续占有，后面的盒子任然以标准流的方式对待它(不脱标，继续保留原来的位置)。

因此，相对定位并没有脱标。它最典型的应用时给绝对定位当爹的。

绝对定位absolute(重要)

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)。

语法：选择器{position:absolute;}

绝对定位的特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(document文档)。
如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不在占有原先的位置(脱标)。

案例代码：

<style>
    .father {
        width: 300px;
        height: 300px;
        background-color: silver;
    }
    .son {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
    }
</style>
<body>
    <div class="father">
    我是标准流的盒子，没有设置相对定位
        <div class="son">
        我是绝对定位盒子,在父元素没有设置相对定位时,我会继续往上一层去找，直到找到根			元素为止，如果都没有设置相对定位则以根元素作为参照。
        </div>
    </div>
</body>

案例效果【绝对定位-父级无定位.html】：

在这里插入图片描述

子绝父相的由来

子绝父相：自己使用绝对定位，父级则需要相对定位。

弄清楚这个口诀，就明白了绝对定位和相对定位的使用场景。

这个‘子绝父相’太重要了，是我们学习定位的口诀，是定位中最常用的一种方式。

子级绝对定位不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
父盒子需要加定位限制子盒子在父盒子中显示。
父盒子布局时，需要占有位置，因此父亲只能是绝对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会用到。

固定定位fixed(重要)

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法： 选择器{position:fixed};

固定定位的特点：

以浏览器可视窗口为参照点移动元素。
- 跟父元素没有任何关系。
- 不随滚动条滚动。
固定定位不在占有原先的位置==(脱标)==。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

案例效果【固定定位.html】：

在这里插入图片描述

固定定位小技巧：固定在版型右侧位置

小算法

让固定定位的盒子left：50%。走到浏览器可视区的一半位置。
让固定定位的盒子margin-left:版心宽度一半的距离多走版心宽度一半的位置。

案例：【固定定位小技巧.html】

粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合。Sticky粘性的

语法：选择器{position：sticky;top:10px}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素(固定定位特点)。
粘性定位占有原先的位置(相对定位特点)
必须添加top left right bottom其中一个才有效。
跟页面滚动搭配使用。兼容性较差，IE不支持。

案例效果【粘性定位.html】：

在这里插入图片描述

定位的总结

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边偏移	很少
relative相对定位	否(占有位置)	相对于自身位置移动	常用
absolute绝对定位	是(不占有位置)	带有定位的父级	常用
fixed固定定位	是(不占有位置)	浏览器可视区	常用
sticky粘性定位	否(占有位置)	浏览器可视区	当前阶段很少

注意：

如果一个盒子既有left属性也有right属性，则默认会执行left属性同理 top bottom 会执行 top；

定位叠放顺序z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)

语法：选择器{z-index:1;}

数值可以是正整数、负整数或0，默认是auto,值越大，盒子越靠上。
如果属性值相同，则按照书写顺序，后来居上。
数字后面不能加单位。
只有定位的盒子才有z-index属性。

绝对定位的盒子居中

加了绝对定位的盒子不能通过margin：auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left:50%:让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px让盒子向左移动自身宽度的一半。

案例：【绝对定位水平垂直居中.html】

定位特殊属性

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

意思就是将元素的display方式改成了inline-block

定位的拓展

脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题。

绝对定位和固定定位会完全压住盒子

浮动元素不同，只会压住让下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)，浮动的元素不会压住下面标准流的文字。

但绝对定位会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

背景属性

背景颜色

语法：background-color:颜色值;

一般情况下元素背景的默认值是transparent(透明),我们也可以手动指定背景颜色为透明色。

在CSS3之后加入新的特性：背景半透明background:rgba();用于设置背景颜色的透明状态。(IE9+版本)

背景图片

语法：background-image:none|url(url);

参数值	作用
none	无背景图(默认的)
url	使用绝对或相对地址指定背景图像

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。(精灵图也是一种运用场景)

注意：页面元素既可以添加背景颜色也可以天剑背景图片，只不过背景图片会压住背景颜色。

背景平铺

语法： background-repeat: repeat|no-repeat|repeat-x|repeat-y;

参数值	作用
repeat	背景图像在纵向和横向上平铺(默认的)
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向平铺

背景图像大小

语法：background-size: *length*|*percentage*|cover|contain;；

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

背景图片位置

语法：background-position: x y;

参数代表的是：x坐标和y坐标。可以使用方位名词或者是精确单位。

参数值	说明
length	百分数\|有浮点数字和单位标识符组成的长度值
position	top\|center\|bottom\|left\|center\|right 方向名词

参数为方位名词

如果指定的两个值都是方位名词，则两个值的前后顺序无关，比如 left top 和 top left 效果一致。
如果指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参数为精确单位

如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标。
如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

参数是混合单位

如果指定的两个值是精确定位和方位名词混合使用，则第一个值是X坐标，第二个值是Y坐标。

注意：背景如果是按照px计算的时候，方法或者缩小网页时背景会相对移动

背景附加

语法：background-attachment：scroll|fixed

background- attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

可以用于制作视差滚动效果。

参数值	说明
scroll	背景图像是随对象内容滚动
fixed	背景图像固定(不随页面的滚动而滚动)
local	这个值是后来添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)，因为滚动值相当混乱，在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元素上，因此当您滚动元素时，背景也随之滚动。

背景色半透明：background：rgba(0,0,0,0.3)

背景复合语法

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置`

案例地址：背景透明度案例

案例效果：

在这里插入图片描述

cross-fade()实现背景透明度

有时候根据业务需求我们需要将背景图片设置成透明的如果是纯色背景或者是CSS渐变背景，很好处理，使用rgba或者hsla颜色色值即可。但是，如果是url()背景图像，似乎就无能为力了。很多人会想到使用::before/::after伪元素实现，但是这个方法太啰嗦，成本太高。所以我们用cross-fade()函数的方法实现。

cross-fade（交叉淡入淡出）

函数设计的初衷是多个图像半透明叠加，但是，这样的场景实际开发很少遇到，因此，cross-fade()反而更适合控制单个背景图像的半透明效果。【MDN cross-fade】

<style>
.cross-fade-image {
    width: 300px; height: 300px;
    background: no-repeat center / contain;
    background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%);
    background-image: cross-fade(url(1.jpg), url(2.jpg), 50%);   
}
</style>
<body>
    <div class="cross-fade-image"></div>
</body>

所以我们之间让自己想要的背景图片和一张透明的图片相互堆叠，这样不就实现了透明的效果了吗？

<style>
    body {
        background-repeat: no-repeat;
        background-position: left top;
        background-color: mintcream;
        background-image: -webkit-cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url('./img/bg2.jpg'), 10%);
        background-size: 100%;
        background-attachment: fixed;
        overflow-y: auto;
    }
</style>

案例效果：【透明背景案例】

在这里插入图片描述

可以看到背景出现了明显的透明效果，(๑•̀ㅂ•́)و✧

进阶可以看看张鑫旭的这篇文章【巧用CSS cross-fade()实现背景图像半透明效果】

图片边框（border-image）

这是CSS3边框的一个新属性，原本认为是个很不起眼的元素，可以认为他是用于给边框添加样式的。在2014年，Firefox 浏览器支持了 border-image 的渐变图像功能之后，这个属性就被关注了起来。

基本用法

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置,实际上就是图片路径
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

图片资源(border-image-source)

他的作用就是引入图片作为图片边框的源，在2014年4月Firefox 浏览器终于支持了 border-image 的渐变图像功能。

也就是说我们可以对图片边框使用渐变属性了，可以轻松实现其他 CSS 属性不太好实现的渐变边框效果。

在这里插入图片描述

有了对这个属性的支持我们可以做出类似于警示某一段内容存在风险的红色条纹边框

像这样↓

yun

<style>
.border-stripe {
    border: 12px solid;
    border-image: repeating-linear-gradient(-45deg, red, red 5px, transparent 5px, transparent 10px) 12;
}
</style>
<div class="border-stripe">我们可以使用红色条纹边框表示警示</div>

可以做出虚线，像这样↓

在这里插入图片描述

<style>
    .border-dashed {
        border: 1px dashed deepskyblue;
        border-image: repeating-linear-gradient(135deg, deepskyblue, deepskyblue 5px, transparent 5px, transparent 10px) 1;
    }
</style>
<div class="border-dashed">1:1的虚线</div>

图片裁剪位置(border-image-slice)

边框图像切片。指定4个值(4条分割线：top, right, bottom, left)将 border-image-source 分割成9宫格，如下：

在这里插入图片描述

没有单位，默认单位就是像素(px),不需要画蛇添足加上去。
支持百分比值，百分比值大小是相对于边框图片的大小，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。
举个简单的例子，前面提到，支持百分比宽度，所以这里“30% 35% 40% 30%”的示意可以用下图表示：

距离图片上部30%的地方，距离右边35%，距离底部40%，左边30%的地方各剪裁一下。也就是对图片进行了“四刀切”，形成了九个分离的区域，这就是九宫格。

关键字：fill
作用是将border-image-source九宫格中间那一块切片作为DOM节点的背景。
素材图片box.png:(注意图片的中心是有一个橙色的点的)
```
.fillbox {
    height: 30px;
    margin: 50px 0px;;
    border: 10px solid transparent;
    border-image: url(./img/borderfill.png) 27 fill round;
}
```

边框背景宽度(border-image-width)

这个属性在官方的说法中就只有一句话概括，【图像边界的宽度】。所以我做了自己的理解：这个属性就是设置slice切割后的九宫格图片在通过重复生成的图片边框大小的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ODZhjhT-1653011216543)(C:\Users\HASEE\AppData\Roaming\Typora\typora-user-images\image-20220517105929764.png)]

重复性(border-image-repeat)

border-image-repeat: [ stretch | repeat | round | space ]{1,2}

border-image-repeat 字面意义是边框图片平铺。作用是指定 border-image 的平铺方式。语法上最多可接收两个参数，第一个参数指定水平方向边框的平铺方式，第二个参数指定垂直方向边框的平铺方式，九宫格的中间区域受这两参数的共同影响，如下：

目前只能四值可供选择：stretch(拉伸), repeat(重复), round(平铺), space。其中，stretch 是默认值，space 目前chrome浏览器按 repeat 来渲染。这四个参数的效果如下：

注：

round 与 repeat 的区别：round会凑整填充（进行了适度的拉伸）。repeat不进行拉伸，不凑整。
round 与 space 的区别：虽然都是凑整填充显示，但是 space 是在小方块之间有一定的空隙。

边框背景扩散(border-image-outset)

border-image-outset: [ <length> | <number> ]{1,4}

border-image-outset作用是把原来的贴图位置向外延伸

.box {
	margin: 0 auto;
	width: 81px;
	height: 81px;
	border: 27px solid rgba(0,0,0,.1);
	border-image-source: url(//misc.aotu.io/leeenx/border-image/box.png);
	border-image-slice: 27 27 27 27;
	border-image-repeat: repeat;
}
.outset {
	border-image-outset: 27px;
}

border-image-outset 与 border-image-width 参数的意义是一样的。
注：

border-image-outset 的值不能为负值

案例说明：【图片边框.html】

案例效果：
在这里插入图片描述

详细的分析可以参考水木同学对该属性的总结border-image属性，文章还说明了border-box 与 border image area 的关系，面面俱到。

border-width 分割 border image area 的假象源自 border-image-width 的缺省值1，数值1表示 border-image-width 是 1x border-width，大白话就是border-image-width 的默认值是border-width。

进阶的使用可以看看张鑫旭的文章【被低估的border-image属性】

复合属性缺省值写法

为什么用到缺省值隔开？

border-image: source slice width outset repeat|initial|inherit;是一个符合写法

border-image: url(./img/borderfill.png) 27 /5px/ 6px round;

我们知道在slice width outset这几个属性之间他们都是可以有简写形式的复合写法(都是上右下左的形式)，并且存在元素单位相同的情况。

举个例子：

这是完全写法，样式显示的也是我们想要的结果，

在这里插入图片描述

当我们通过简写的复合写法时

在这里插入图片描述

可以看到声明块直接报错了。这就是没有分隔表明缺省值的问题导致语义不明，浏览器无法解析这个声明块。

如何使用分隔符表示

在表意不明的简写属性间添加/做分隔

border-image: url(./img/borderfill.png) 27 /5px/ 6px round;

三个属性，在第二个属性前后添加/表示和前面和后面分隔开来，明确属性的作用。

圆角边框

在CSS3中，新增了圆角边框样式，border-radius属性用于设置元素的外边框圆角。

语法：

border-raduis:length;length:百分比||像素值

border-raduis:左上右上右下左下;顺时针方向转。还有两个值的为对角线分，三个值等。

border-top-left-radiusx4个角的方位依次设置值。

radius半径原理：(椭)园与边框的交集形成圆角效果

在这里插入图片描述

实例：圆角边框案例示范

div
{
    border:2px solid;
    border-radius:25px;
}

小技巧：

参数值可以为数值或者百分比的形式。
当盒子元素为正方形的时候，设置border-radius:50%就是圆形。
如果是一个矩形，设置为高度的一半可以做圆角按钮。
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角和左下角。

盒子阴影(常用)

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。

语法：box-shadow:h-shadow v-shadow blur spread color inset

属性值	描述
h-shadow	必需。水平阴影的位置。允许负值。(x轴距离)
v-shadow	必需。垂直阴影的位置。允许负值。(y轴距离)
blur	可选。模糊距离。（可以理解成羽化程度）
spread	可选。阴影的尺寸。(影子的大小)
color	可选。阴影的颜色。请参阅CSS颜色值。(一般结合rgba使用，有透明度看起来更真实。)
inset	可选。将外部阴影(outset)改为内部阴影。

注意:

默认的是外阴影(outset)，但是作为默认值不可以写这个单词，否则导致阴影无效。
盒子阴影不占用空间，不会影响其他盒子的排列。

文字阴影

CSS3中新增了文字阴影，我们可以使用text-shadow属性为文字添加阴影。

语法：text-shadow:h-shadow v-shadow blur color

属性值	描述
h-shadow	必需。水平阴影的位置。允许负值。(x轴距离)
v-shadow	必需。垂直阴影的位置。允许负值。(y轴距离)
blur	可选。模糊距离。（可以理解成羽化程度）
color	可选。阴影的颜色。请参阅CSS颜色值。(一般结合rgba使用，有透明度看起来更真实。)

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

display属性

display属性用于设置一个元素应如何显示。

display:none;隐藏对象
display:block;除了转换为块级元素之外，同时还有显示元素的意思。

display隐藏元素后，不在占有原来的位置。

后面应用及其广泛，搭配JS可以做很多的网页特效。

土豆视频遮罩案例：http://yehudah0912.github.io/tudou.html

案例效果：
在这里插入图片描述

visibility可见性

visibility属性用于指定一个元素应可见还是隐藏。

visibility:visible;元素可视。
visibility:hidden;元素隐藏。

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

如果隐藏元素想要原来的位置，就用visibility:hidden;

如果隐藏元素不想要原来的位置，就用display:none;

overflow溢出

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出内容否，总是会显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden 因为它会隐藏多余的部分。

精灵图

为什么需要精灵图

一个网页中往往会应用很多小背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

精灵图(sprites)的使用

使用精灵图核心

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
这个大图片也称为sprites 精灵图或者雪碧图。
移动背景图片位置，此时可以使用background-position。
移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
因为一般情况下都是往上往左移动，所以数值是负值。(网页中的坐标：x轴邮编走是正值，左边走是负值，y轴同理)
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显。

图片文件还是比较大的。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是字体图片iconfont。

字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

字体图标的优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有浏览器。

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片就用精灵图。

字体图标的下载

推荐下载网站：

icomoon字库 https://icomoon.io 推荐指数：⭐️⭐️⭐️⭐️⭐️

IcoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，是他们成一字型。该字库内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

阿里iconFont字库https://www.iconfont.cn/ 推荐指数：⭐️⭐️⭐️⭐️⭐️

这个是阿里妈妈M2UX的一个iconfont字体图标库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点是，免费！

字体文件格式

不同浏览器支持的字体格式是不一样的，字体图标之所以兼容是因为包含了主流浏览器支持的字体文件。

TureType(.ttf)格式.ttf字体是Windows和Mac的最常见字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+
Web Open Font Format(.woff)格式,是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
Embedded Open Type(.eot)格式，.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
SVG(.svg)格式，.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
OpenType(.otf)格式，.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

字体图标的引入

在CSS样式中全局声明字体：简单理解把这些字体文件通过CSS引入到我们页面中。

一定要注意文件路径的问题。

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

字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加心得字体图标到原来的字体文件中。

把压缩包里面的selection.json重新上传，然后选中自己想要的新的图标，重新下载的压缩包，并替换原来的文件即可。

字体案例：字体图标的使用

CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

要点：设置盒子宽高为0，设置边框其余边为透明。

语法：

.box {
  /* 设置盒子宽高为0px */
  width: 0;
  height: 0;
  /* 解决低版本兼容性 */
  line-height: 0;
  font-size: 0;
  /* 需要那条边为底就，设置其他边为透明色 */
  border-bottom: 100px transparent solid;
  border-left: 100px transparent solid;
  border-right: 100px transparent solid;
  border-top: 100px pink solid;
}

效果：

在这里插入图片描述

京东三角对话框案例：CSS三角案例

CSS用户界面样式

什么是界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式 cursor

语法：选择器 {cursor:属性值}

/* 关键字值 */
cursor: pointer;
cursor: auto;

/* 使用URL，并提供一个关键字值作为备用 */
cursor: url(hand.cur), pointer;

/* URL和xy的坐标偏移值，最后提供一个关键字值作为备用 */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* 全局属性 */
cursor: inherit;
cursor: initial;
cursor: unset;

cursor属性为零个或多个值，它们之间用逗号分隔，最后必填一个关键字值。每个指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型。

每个后面都可选跟一对空格分隔的数字表示偏移。它们用来设置指针的热点(即自定义图标的实际点击位置)，位置相对于图标的左上角。

例如，下面的例子使用值指定两个图像，为第二个图像提供坐标，如果两个图像都无法加载，则返回progress关键字值：

cursor: url(one.svg), url(two.svg) 5 5, progress;

属性值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。
not-allowed	禁止

类型	CSS值		描述
General	`auto`		浏览器根据当前内容决定指针样式例如当是内容是文字时使用text样式
`default`	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpTeT9D4-1653011216547)(https://developer.mozilla.org/@api/deki/files/3438/=default.gif)]	默认指针，通常是箭头。
`none`		无指针被渲染
链接及状态	`context-menu`		指针下有可用内容目录。
`help`	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z8vwtmqj-1653011216547)(https://developer.mozilla.org/@api/deki/files/3442/=help.gif)]	指示帮助
`pointer`		悬浮于连接上时，通常为手
`progress`		程序后台繁忙，用户仍可交互 (与`wait相反`).
`wait`		程序繁忙，用户不可交互 (与`progress相反`).图标一般为沙漏或者表。
选择	`cell`		指示单元格可被选中
`crosshair`	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IrhpGenZ-1653011216549)(https://developer.mozilla.org/@api/deki/files/3437/=crosshair.gif)]	交叉指针，通常指示位图中的框选
`text`		指示文字可被选中
`vertical-text`		指示垂直文字可被选中
拖拽	`alias`		复制或快捷方式将要被创建
`copy`		指示可复制
`move`		被悬浮的物体可被移动
`no-drop`	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iku06t9u-1653011216550)(https://developer.mozilla.org/@api/deki/files/3445/=no-drop.gif)]	当前位置不能扔下 bug 275173Windows或Mac OS X中 “no-drop 与not-allowed相同”.
`not-allowed`		不能执行
`grab`		可抓取译者注:grab和grabbing在比较后期才被支持，见浏览器兼容表
`grabbing`		抓取中
重设大小及滚动	`all-scroll`	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uzy5akIc-1653011216551)(https://developer.mozilla.org/@api/deki/files/3433/=all-scroll.gif)]	元素可任意方向滚动（平移）. bug 275174Windows中, “all-scroll 与 move相同”.
`col-resize`		元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
`row-resize`		元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
`n-resize`		某条边将被移动。例如元素盒的东南角被移动时`使用se-resize`
`e-resize`
`s-resize`
`w-resize`

`nw-resize`
`se-resize`
`sw-resize`
`ew-resize`		指示双向重新设置大小
`ns-resize`
`nesw-resize`
`nwse-resize`
缩放	`zoom-in`		指示可被放大或缩小
`zoom-out`	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ryGN3iV-1653011216553)(https://developer.mozilla.org/@api/deki/files/3460/=zoom-out.gif)]

取消表单轮廓线outline属性

语法：outline: none/0

outline语法

/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

/* 全局值 */
outline: inherit;
outline: initial;
outline: unset;

**注意：**对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。

案例效果：

在这里插入图片描述

取消拖拽文本域resize属性

语法：resize:none

resize CSS 属性允许你控制一个元素的可调整大小性。

属性值	描述
none	元素不能被用户缩放
both	允许用户在水平和垂直方向上调整元素的大小
horizontal	允许用户在水平方向上调整元素的大小
vertical	允许用户在垂直方向上调整元素的大小。

**注意：**如果某个元素块的overflow属性被设置visible，则该属性被设置为resize无效。

综合案例：https://yehudah0912.github.io/UserInterfaceStyle.html

vertical-align属性应用

CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

CSS的vertical-align属性的使用场景：经常用于设置图片或者表单(行内块元素)和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

案例效果：

在这里插入图片描述

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

vertical-align属性可被用于两种环境：

使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片：
垂直对齐表格单元内容:

注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。

语法:

/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

解决图片底部默认空白缝隙问题

bug:图片底侧会有一个空白间隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

给图片添加vertical-align:middle|top|bottom等。(提倡使用的)
把图片转换为块级元素displa：block;

应用案例 https://yehudah0912.github.io/vertical-alignTest.html

溢出文字省略号显示

text-overflow是CSS3中的属性，它规定了当文本溢出其包含元素时以何种方式显示。但在使用的时候，有时会发现这个text-overflow设置了属性怎么不起作用呀？现在我们就来踩踩这里面的坑。

clip：默认值，将溢出的文本裁减掉
ellipsis：将溢出的文本用省略号(…)来表示
<string>：设置一个字符串用来表示溢出的文本

单行文本溢出

单行文本溢出显示省略号–必须满足三个条件

.box>p {
  /* 1.先强制一行内显示文本 */
  white-space: nowrap;
  /* 2.超出部分隐藏 */
  overflow: hidden;
  /* 3.文字用省略号代替超出部分 */
  text-overflow: ellipsis;
}

多行文本溢出

多行文本溢出显示省略号，有较大的兼容性问题，适用于webKit浏览器或移动端(移动端大部分是webKit内核)。

.multiple {
  /* 1.超出部分隐藏 */
  overflow: hidden;
  /* 2.文字用省略号代替超出部分 */
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本行数 */
  -webkit-line-clamp: 3;
  /* 设置或检索伸缩对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

完整案例：文本溢出

常见布局技巧

巧妙利用一个技术更快更好的布局

margin负值的运用

1.让每个盒子margin王左侧移动-3px正好压住相邻盒子边框。

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可(如果没有定位，则加相对定位(保留位置)，如果有定位则加z-index)

在这里插入图片描述

文字围绕浮动元素

利用的特性：浮动元素不会压住文字

在这里插入图片描述

行内块的巧妙运用

CSS三角强化

在这里插入图片描述

案例源码：常见布局技巧

第二扎 CSS3使用及其新特性

CSS3是什么呢？CSS2的设计是面向图文展示，CSS3的设计则是为了更绚丽的视觉效果和更丰富的网页布局。

CSS3新增选择器

一、CSS3的同级元素通用选择器

序号	选择器	含义
24.	E ~ F	匹配任何在E元素之后的同级F元素

实例：

p ~ ul { background:#ff0; }

二、CSS3 属性选择器

序号	选择器	含义
25	E[att^=val]	表示带有以 att 命名的属性，且属性值是以 value 开头的元素。
26	E[att$=val]	表示带有以 att 命名的属性，且属性值是以 value 结尾的元素。
27	E[att*=val]	表示带有以 att 命名的属性，且属性值至少包含一个 value 值的元素。

实例：

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {font-size: 2em;}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {font-style: italic;}

三、CSS3中与用户界面有关的伪类

序号	选择器	含义
28.	E:enabled	匹配表单中激活的元素
29.	E:disabled	匹配表单中禁用的元素
30.	E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
31.	E::selection	匹配用户当前选中的元素

实例：

input[type="text"]:disabled { background:#ddd; }

四、CSS3中的结构性伪类

序号	选择器	含义
32.	E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
33.	E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
34.	E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
35.	E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
36.	E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
37.	E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
38.	E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
39.	E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
40.	E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41.	E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42.	E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

实例：

p:nth-child(3) { color:#f00; }

p:nth-child(odd) { color:#f00; }

p:nth-child(even) { color:#f00; }

p:nth-child(3n+0) { color:#f00; }

p:nth-child(3n) { color:#f00; }

tr:nth-child(2n+11) { background:#ff0; }

tr:nth-last-child(2) { background:#ff0; }

p:last-child { background:#ff0; }

p:only-child { background:#ff0; }

p:empty { background:#ff0; }

五、CSS3的反选伪类

序号	选择器	含义
43.	E:not(s)	匹配不符合当前选择器的任何元素

实例：

:not(p) { border:1px solid #ccc; }

六、CSS3中的 :target 伪类

序号	选择器	含义
44.	E:target	匹配文档中特定"id"点击后的效果

这是很有意思的一个伪类，我可以理解成它是依托HTML的锚点做出的功能，可用于加亮显示页面中可从表格内容中链接到的部分，你甚至可以不使用任何JavaScript代码，只使用:target伪类创建一个加亮框。依赖初始化时就隐藏在页面中的链接到指定元素的锚,一旦定位，CSS就会更改display 来显示加亮框，可以不通过js实现模态框的效果也美滋滋。

案例实例【伪类target的案例2.html】

在这里插入图片描述

实例【伪类target的使用.html】：

<style>
    p:target {
        background-color: gold;
    }

    /* 在目标元素中增加一个伪元素*/
    p:target::before {
        font: 70% sans-serif;
        content: '►';
        color: limegreen;
        margin-right: 0.25em;
    }

    /*在目标元素中使用italic样式*/
    p:target i {
        color: red;
    }
</style>
<body>
    <h3>目录</h3>
    <ol>
    <li><a href="#p1">跳到第一段!</a></li>
    <li><a href="#p2">跳到第二段!</a></li>
    <li><a href="#nowhere">这个链接不存在，因为目标不存在。</a></li>
    </ol>

    <h3>我的有趣的文章</h3>
    <p id="p1">
    您可以使用URL片段来定位<i>这个段落</i>。 点击上面的链接试试吧!  
    </p>
    <p id="p2">
    这是<i>另一段</i>，也可以从上面的链接访问。 这岂不乐乎?  
    </p>
</body>

替代（IE）盒模型

如果你希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性就欧克。

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

注：一个有趣的历史记录 ——Internet Explorer默认使用替代盒模型，没有可用的机制来切换。直到IE8+ 才支持使用box-sizing 进行切换。

盒模型案例：【CSS盒子模型.html】

案例效果：

在这里插入图片描述

CSS3 filter(滤镜) 属性

CSS3滤镜filter： filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

语法filter：函数()例如filter：blur(5px); blur模糊处理数值越大越模糊

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如： `filter: url(svg-url#element-id)`

CSS3 calc()函数

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

语法：width:calc(100% - 80px)

括号里面可以使用+-*/来进行计算。

注意：值和运算值之间需要有空隙。

CSS3过渡(重点)

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或者JavaScript的情况下，当元素从一种样式变换为另外一种样式时元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态。

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(ie9一下版本)但是不会影响页面布局。

我们现在经常和:hover一起搭配使用。

语法：transition: 要过渡的属性花费时间运动曲线何时开始;

属性值	描述
属性	想要变化的CSS属性,宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以
花费时间	单位是秒(必须写单位)比如0.5s。
运动曲线	默认是ease(可以省略)`linear匀速
何时开始	单位是秒(必须写单位)可以设置延迟触发时间默认是0s(可以省略)

记住过渡口诀：谁做过渡给谁加

案例效果：

在这里插入图片描述

案例：filter/calc/过渡效果案例

CSS3字体抗锯齿

CSS3里面加入了一个-webkit-font-smoothing属性。

这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。

加上之后就顿时感觉页面小清晰了。淘宝也在用哦！

它有三个属性：

属性	作用
none	对低像素的文本比较好
subpixel-antialiased	默认值
antialiased	抗锯齿很好反锯齿

CSS3 2D转换

转换(transform) 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换(transform)可以简单理解为变形

移动:translate
语法：

// 二维坐标都移动

transform:translate(x,y);

// 移动Y轴

transform:translateY(y);

// 移动X轴

transform:translateX(x);

重点:
- 定义2D转换中的移动，沿着X和Y轴移动元素。
- translate最大的优点:不会影响到其他元素的位置。
- translate中的百分比单位是相对于自身元素的teanslate：(50%,50%)
- 对行内标签没有效果
旋转:rotate
语法：

transform：rotate(度数deg)

重点：
- rotate里面跟度数，单位是deg,比如rotate(45 deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
缩放:scale
语法：

transform：scale(x，y) (宽高)

transform：scale(n) (等比例缩放)

重点:
- 注意其中的x和y用逗号分隔
- transform:scale(1,1)：宽高都放大了一倍，相当于没有放大
- transform:scale(2,2)：宽高都放大了两倍
- transform:scale(0.5,0.5)：宽高缩小了一半
- scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他的盒子布局

设置2D转换中心点transform-origin

语法：transform-origin：x y

重点：

注意后面的参数x和y用空格隔开
x y默认转换的中心是元素的中心点(50% 50%)
还可以给 x y 设置像素或者方位名词 (top bottom left right center)

2D转换综合写法

语法：transform：translate() rotate() scale()…

注意：

同时使用多个转换，其格式为：transform：translate() rotate() scale()…等，
其顺序会影响转换效果。(先旋转会改变坐标轴方向[改变运动的轨迹])
当我们同时有位移和其他属性的时候，记得要将位移放到最前。

CSS3动画

动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较于过渡，动画可以实现更多变化，更多控制，连续自动播放效果。

动画的基本使用

先定义动画
再使用(调用)动画

动画常用属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1 ， infinite是循环播放。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

用keyframes定义动画(类似定义类选择器)

动画序列

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes(关键帧)中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请使用百分比来规定变化发生的时间，或用关键词==‘from’和‘to’，等同于0%和100%==.
百分比要是整数。
百分比是按照总的时间划分的。

两种写法：

@keyframes 动画名称 {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

/* 定义动画 */
@keyframes ani {
  from  {
    transform: translate(0,0);
  }
  to {
    transform: translate(1000px,400px);
  }
}

元素使用动画

animation-name:动画名称；调用动画。
animation-duration：持续时间；持续时间

.box {
  width: 40px;
  height: 20px;
  background-color: pink;
  /* 调用动画 */
  animation-name: ani;
  /* 设置动画持续时间 */
  animation-duration: 2s;
  transition: all .4s;
}

动画简写属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束状态。

3D转换

3D转换我们主要学习的是最常用的3D位移和3D旋转

主要知识点：

3D位移：translate3d(x,y,z)
3D旋转：rotate3d(x,y,z)
透视：perspective
3D呈现transform-style

参考笔记详情：https://blog.csdn.net/linziwang/article/details/121179198

linear-gradient() 函数背景线性渐变

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

语法：background-image: linear-gradient(起始方向,颜色1,颜色2);

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

注意：

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，如果省略默认就是top。

HSL()颜色表达函数

hsl() 函数使用色相、饱和度、亮度来定义颜色。hsla()可以添加透明度，利用HSL可以快速的创建同一色相的色阶。

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

**色相（H）**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等单位时deg(度数)。
**饱和度（S）**是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。

HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。

支持版本：CSS3

案例效果：

在这里插入图片描述

第三扎移动端Web开发

关于移动端布局主流的有三种方式【流式布局(百分比布局)】【flex布局】【rem布局】【响应式布局】，每种布局有每一种布局的优点。关于这些布局的知识点将通过别人完善好的总结展示。在这一章节中重点是通过案例展示的方式说明,基础知识参见文档这里将不做赘述。

Flex 布局语法教程

CSS Grid 网格布局教程

Grid栅格布局（Grid-Layout）

Grid注意点及案例

Grid 控制的项目只能是容器的顶层子元素，不包含项目的子元素
默认情况下，容器元素都是块级元素，但也可以设成行内元素inline-grid

在这里插入图片描述

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

repeat()函数

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
   /*等于*/ 
  grid-template-columns: 33.33% 33.33% 33.33%;
   /*repeat()重复某种模式也是可以的*/
  grid-template-columns: repeat(2, 100px 20px 80px);
    /*第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。*/
}

auto-fill 关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}

上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

在这里插入图片描述

（3）fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container {
display: grid;
grid-template-columns: 1fr 1fr;
}

上面代码表示两个相同宽度的列。

fr可以与绝对长度的单位结合使用，这时会非常方便。

.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}

上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。

在这里插入图片描述

（4）minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);

上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。

（5）auto 关键字

auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

参考文献

鑫空间网络博客

阮一峰的网络日志

张鑫旭《CSS世界》

黑马程序员《Pink老师前端资料》

MDN Web Docs官方文档

css总结

前言

第一扎 CSS2.1

从DOM的角度认识CSS

CSS的专业术语及使用

1．属性

2．值

3．关键字

4．变量

5．长度单位

6．功能符

7．属性值

8．声明

9．声明块

10．规则或规则集

CSS引入和使用方式

一、行内样式

二、内部样式表

三、外部样式表

引入样式的说明

外链css为什么放在head

CDN引用技术

CSS2选择器的使用

一、基本选择器

二、多元素的组合选择器

三、CSS 2.1 属性选择器

四、CSS 2.1中的伪类

五、 CSS 2.1中的伪元素

CSS三大特性

层叠性

继承性

优先级（Specificity）

优先级权重叠加

优先级的特殊情况说明

CSS流的概念

CSS盒子模型

块级盒子(Block box)和内联盒子(lnline box)

块级盒子(Block box)

内联盒子(inline box)

超纲补充：内部和外部显示类型

dispaly:block的元素不等于块级元素

为什么list-item清除浮动不常用

为什么list-item元素会出现项目符号

怎么理解inline-block元素

什么是内部和外部显示类型

什么是CSS盒模型？

盒模型的各个组成部分

标准盒模型

替代（IE）盒模型

BFC结界

什么是BFC?

如何触发BFC?

BFC的作用

外边距塌陷问题

什么是外边距塌陷？

为什么会造成塌陷

发生外边距塌陷的三种情况

1.相邻的兄弟姐妹元素

2.块级父元素与其第一个/最后一个子元素

浮动

什么是浮动？

浮动特性(重难点)

浮动元素经常和标准流父级搭配使用

float的特性

包裹性

破坏文档流

脱离文档流

高度塌陷

在两列布局中的使用

float和inline-block的横向排列

浮动的缺点

如何清除浮动

利用BFC原理包裹浮动

父级添加overflow属性。

利用clear属性清除浮动

额外标签法

父级添加:after伪元素

父级添加双伪元素

清除浮动总结

clear使用不当的例子

`dispaly:block的元素`不等于块级元素