软件
软件的分类
- 系统软件：Windows、Linux、macOS.
- 应用软件：office、qq
- 游戏软件：王者荣耀
软件的组成
通常情况下，现在的软件由两个部分组成：
-
客户端：用户通过客户端来使用软件。
客户端的形式：
（1）文字客户端：古老的方式，通过命令行来使用软件。
（2）图形化界面：通过点击拖动等来使用软件。
（3）网页：通过访问网页来使用软件。所有的网站都属于这个范畴。（B/S架构：Browser/Sever）
网页的特点：相较于传统的图形化界面，网页具有如下一些优点：
不需要安装；无需更新；跨平台。
-
服务器：服务器负责在远程处理业务逻辑。
服务器开发的语言：
Java
、PHP、
Node.js
(用前端的js语言编写)
历史
-
蒂姆·伯纳斯-李爵士：万维网的发明人。
1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。 -
浏览器和网页
有了浏览器我们只需要一个网址便可以访问任何的网站。
前端工程师负责编写网页的源代码。
浏览器负责将网页渲染成我们想要的样子。 -
浏览器的问题：
在万维网的初期，网页编写并没有标准。 -
W3C的建立
伯纳斯李1994年建立万维网联盟（W3C）
W3C的出现为了制定网页开发的标准，以使同一个网页在不同浏览器有相同的效果。 -
网页的结构：
根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。
（1）结构：HTML用于描述页面的结构。
（2）表现：CSS用于控制页面中元素的样式。
（3）行为：JS用于响应用户操作。
HTML
- HTML（Hypertext Markup Language）：超文本标记语言。
- 它负责网页的三个要素之中的结构。
- HTML使用标签的形式来标识网页中的不同组成部分。
- 所谓的超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。
- 属性：在标签中还可以设置属性，属性是一个名值对。
- 文档声明：告诉浏览器当前网页的版本 不区分大小写
- 进制：
| 进制 | 特点 | 单位数字 | 使用 |
|---|---|---|---|
| 十进制 | 满10进1 | 10个（0-9） | 日常使用 |
| 二进制 | 满2进1 | 2个（0-1） | 计算机底层的进制 |
| 八进制 | 满8进1 | 8个（0-7） | 很少用 |
| 十六进制 | 满16进1 | 16个（0-f） | 一般显示一个二进制数字时，都会转换为十六进制 |
所有数据在计算机底层都会以二进制的形式保存。
8bit=1byte(字节)
1024byte=1kb(千字节)
1024kb=1mb(兆字节)
1024mb=1gb(吉字节)
1024gb=1tb(特字节)
1024tb=1pb
-
字符编码
一段文字存储到内存中，都需要转换为二进制编码。当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读。
编码：将字符串转换为二进制码的过程
解码：将二进制码转换为字符的过程
字符集（charset）:编码和解码所采用的规则。
乱码：如果编码和解码所采用的字符集不同就会出现乱码问题。
常见的字符集：ASCII（美国）、ISO88591（欧洲）、GB2312（中国）、GBK（中国）、UTF-8（万国码）。 - head标签帮助浏览器或搜索引擎来解析网页。
- 在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格。
-
如果在网页中书写特殊的符号，则需要用html中的实体（转义字符）。
实体的语法：&实体的名字；
  ;空格
>:大于号
<:小于号
©:版权符号 -
MDN（火狐浏览器开发文档）
meta标签用来设置网页的元数据。
charset:指定网页的字符集
name:指定数据的名称
content:指定数据的内容
title标签的内容会作为搜索结果的超链接上的文字显示。
<!-- 设置关键字，用户在搜索购物时就会将此网站显现 -->
<!-- keywords表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开 -->
<meta name="keywords" content="购物"/>
<!-- 用于指定网站的描述，网站的描述会显示在搜索引擎的搜索的结果中 -->
<meta name="description" content="该网站不错"/>
<!-- 网站两秒后会跳转至百度 -->
<meta http-equiv="refresh" content="2;url=https://www.baidu.com"/>
-
em标签表示语音语调的加重（行内元素）。
strong标签标识强调重要内容。
blockquote长引用标签。
q短引用标签。
br换行标签。hgroup标签用来为标题分组，可以将一组相关的标题放入hgroup中。 -
块元素（block element）:在网页中一般通过块元素对页面进行布局。
行内元素（inline element）:行内元素主要用来包裹文字。
一般情况下不会在块元素中放行内元素，而不会在行内元素中放块元素
p元素中不能放任何的块元素。浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。
-
布局标签（
h5新增
）- header:表示网页的头部；
- main：表示网页的主体部分（页面中只会有一个）；
- footer:表示网页的底部；
- nav:表示网页中的导航；
- aside:表示和主体相关的其他内容；
- article：表示一个独立的文章；
- section：表示一个独立的区块；
- div:主要布局元素。
- span：行内元素，在网页中用于选中文字。
-
列表（list）
- 有序列表：使用ul来创建，使用li来表示列表项。
- 无序列表：使用ol来创建，使用li来表示列表项。
-
定义列表：使用dl标签来表示定义的内容，dt来对内容解释说明。
列表可以互相嵌套。
-
超链接（行内元素），a标签中可以嵌套任何元素（除自身外）。
-
href指定跳转的目标路径。
-
target属性：用来指定超链接打开的位置
可选值：
_self:默认值 在当前页面中打开超链接
_blank:在一个新的页面中打开超链接 -
将超链接的页面设置为#，这样点击超链接后，页面不会发生跳转，而是转到当前页面的顶部的位置。
-
跳转至页面的底部
<a href="#bottom">dianwo</a> <a href="#" id="bottom">回</a> -
使用javascript来作为href的属性，点击这个链接时什么也不会发生。
<a href="javascript"></a>
-
-
当我们需要跳转至一个服务器内部的页面时，一般我们都会使用相对路径。
相对路径都会使用.或…开头。./可以省略不写（默认写了）。
./表示当前文件所在的目录。
…/表示当前文件所在目录的上一级目录。 -
图片标签：用于向当前页面中添加一个外部图片。
img属于替换元素（基于块元素与行内元素之间），具有两种元素的特点
使用img标签，img标签是一个自结束标签。
属性：- src:属性指定的是外部图片的路径（路径规则和超链接是一样的）
-
alt属性：对图片的描述。当图片无法加载时显示。
搜索引擎会根据alt内容来识别图片。如果不写alt属性则图片不会被搜索引擎所收录。
- width:图片宽度（单位：像素）
-
height：图片高度
如果只修改二者其中之一，另一个会等比例显示。
在pc端，不建议修改图片的大小。图片放大，失真；放小实际保存原大小，浪费内存。
在移动端，需要对图片进行缩放。
-
图片的格式：
-
jpeg（jpg）:支持的颜色比较丰富，不支持透明效果，不支持动图。
一般用来显示图片
-
gif:支持的颜色比较少，支持简单透明，支持动图。
颜色单一的图片，动图
-
png:支持颜色丰富，支持负责透明，不支持动图。
颜色丰富，复杂透明图片（转为网页而生）
-
webp:谷歌新推出的专门用来表示网页的图片的一种格式。具备了其他图片格式的所有优点，而且文件还特别小
。兼容性不好。
效果一样，用小的（gif）。
效果不一样，用效果好的(png)
base64:将图片使用base64进行编码，对数据进行加密。将图片转换为字符，然后通过字符的形式来引入图片。
一般用于一些需要与网页一起加载的图片才会使用base64.
-
jpeg（jpg）:支持的颜色比较丰富，不支持透明效果，不支持动图。
-
iframe：用于向当前页面中引入一个其他页面
- src:指定要引入网页的路径。
-
frameborder:指定内联框架的边框。
内联框架里的网页不会被搜索引擎检索。
-
音视频播放
-
audio:标签用来向页面中引入一个外部的音频文件的。
音视频文件默认情况下，不允许用户自己控制播放停止。
(1) control：是否允许用户控制播放；
(2)autoplay:自动播放；目前大部分浏览器都不会对音乐自动播放。
(3)loop：循环播放。
通过src指定文件地址IE8及以下不支持。
除了通过src来指定外部文件的地址外，还可以通过source来指定文件的路径。IE8还不支持<audio controls > 对不起，您的浏览器不支持播放音频，请升级浏览器。 <source src="../img/1.mp3"></source> <source src="../img/1.odj></source> </audio>写两个source，第一个不行，就会换第二个，此时还不支持时就会显示文字，相对友好。
-
audio:标签用来向页面中引入一个外部的音频文件的。
embed标签登场了！！！
得设置大小不然太小了，自动播放。还得设置类型
<embed src="../img/1.mp3" width="200" height="100" type="audio/mp3"></embed>
综上，最好的办法就是结合。
<audio controls >
<source src="../img/1.mp3"></source>
<!--可能存在不支持.mp3格式的 -->
<source src="../img/1.odj"></source>
<embed src="../img/1.mp3" width="200" height="100" type="audio/mp3"></embed>
</audio>
-
video:使用该标签向网页中引入一个视频文档。
使用方式与基本上一致。
<video controls>
<source src="../img/video_20201105_152850.mp4"></source>
</video>
1. 买服务器直接上传视频、音频。受带宽等影响，烧钱。
2. 负责托管视频的网站；
3. 上传至腾讯视频等直接将地址引用。
-
表格（table）
在table中使用tr来表示表格的每一行。
在table使用td来表示一个单元格。
colspan横向的合并单元格。
rowspan纵向的合并单元格。 -
长表格
可以将一个表格分成三个部分
头部 thead
主体 tbody
底部 tfoot
分成如此结构即使将以上三个标签顺序颠倒也没有关系。 - 表格相关的样式
| 属性 | 作用 |
|---|---|
| border-spacing | 指定边框之间的距离 |
| border-collapse | 指定边框的合并 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
table{
width: 50%;
border: 1px solid black;
margin: 40px auto;
/* 用来设置边框的合并 */
border-collapse: collapse;
}
td{
border: 1px solid black;
height: 100px;
/* 默认情况下td是垂直居中的，可以通过vertical-align来设置*/
vertical-align: bottom;
text-align: center;
}
/* 奇数行变色 */
/**
如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody，并且将tr全部放到tbody里
tr不是table的子元素
*/
tbody> tr:nth-child(odd){
background-color: cadetblue;
}
</style>
</head>
<body>
<table>
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>孙悟空</td>
<td>男</td>
<td>18</td>
<td>花果山</td>
</tr>
<tr>
<td>2</td>
<td>猪八戒</td>
<td>男</td>
<td>28</td>
<td>高老庄</td>
</tr>
<tr>
<td>3</td>
<td>沙和尚</td>
<td>男</td>
<td>16</td>
<td>流沙河</td>
</tr>
<tr>
<td>4</td>
<td>唐僧</td>
<td>男</td>
<td>18</td>
<td>女儿国</td>
</tr>
</table>
</body>
</html>
box2在box1中居中
/* box2在box1中居中 */
.box1{
width:300px;
height: 300px;
background-color: cadetblue;
display: table-cell;
vertical-align: middle;
}
.box2{
width:100px;
height: 100px;
background-color: rgb(138, 214, 157);
margin: 0 auto;
}
-
表单
网页中的表单用于将本地的数据提交给远程的服务器。
使用form标签来创建表单
form的属性：
action:表单要提交的服务器的地址
表单项：
（1）文本框 ：
🐖数据要提交到服务器中，必须为元素提供一个name属性。
<input type="text" name="username autocomplete="on">
autocomplete=”on”开启自动补全功能
readonly:将表单项设置为只读
disabled:将表单项设置为禁用。
只读数据会提交，禁用不会提交数据
autofocus:设置表单自动获得焦点
（2）提交按钮
<input type="submit" value="注册">
（3）密码框
<input type="password" name="password" >
（4）单选按钮(两个单选按钮里面选一个，必须设置相同name,还得指定一个value属性，最终作为用户填写的值传递给服务器。checked将单选按钮设置为默认选中)
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b">
（5）多选框（checkbox）
<input type="checkbox" name="hello" value="b">
（6）下拉列表<select name="haha" id=""> <option value="i">选项一</option> <option value="ii">选项二</option> <option value="iii">选项三</option> <option valiiue="iiii">选项四</option> </select>（7）自结束标签
<input type="submit" >
<input type="email" >
不同浏览器支持效果不同
<input type="tel" >以上两个在移动端键盘会自动转换到输入数字或字母的键盘页面。
<input type="button" value="按钮" >
将输入的值恢复为默认值
<input type="reset" >
非自结束标签
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
CSS （层叠样式表）
-
第一种方式（内联样式，行内样式）
在标签内通过style属性来设置元素的样式。
使用内联样式，样式只能对一个标签生效。
注意：开发时绝对不要 使用内联样式。
-
第二种方式（内部样式表）
将样式编写到head种的style标签中。
更加方便对样式进行复用。 -
第三种方式（外部样式表）
可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。<link rel="stylesheet" type="text/css" href="地址"/>
将样式编写到外部的CSS文件中,可以使用到浏览器的缓存机制,从而加快网页的加载速度,提高用户的体验.
如果A B C窗口同时使用一个.css文件,在加载A窗口时已经缓存过该css文件,则在B C窗口加载时直接读取就好.此时访问B C时速度都会提升. -
CSS语法:选择器:声明块.
(1)选择器:通过选择器可以选中页面中的指定元素.
(2)声明块:通过声明块来指定为元素设置的样式.
声明块由一个一个的声明组成.
声明是一个名值对结构. -
常用选择器:
(1)元素选择器:
作用:根据标签名来选中指定的元素.
语法:标签名{}
例子:p{} h1{}
(2)id选择器:
作用:根据元素的id属性值来选中一个元素
语法:#id属性值()
例子:#box1()
(3)类选择器:
与id类似,但可以重复使用.可以通过class属性来为元素分组.
语法:.class属性值
可以为一个元素指定多个class属性.
(4)通配选择器:
作用:选中页面的所有元素.
语法: * -
复合选择器:
(1)交集选择器:
作用:选中同时符合多个条件的元素
语法:选择器1选择器2选择器n{}
注意点:交集选择器如果有元素选择器,必须使用元素选择器开头.
class属性为red的元素设置为red,class为red的div字体大小设置为30px;<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .red{ color: red; } div.red{ font-size: 30px; } .a.b.c{ color:blue; } </style> </head> <body> <div class="red">我是div</div> //三个类 <p class="red a b c "></p> <span>hi</span> </body> </html>(2)选择器分组(并集选择器)
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器n{}p,span{ color: gray; } -
关系选择器
(1)父元素:直接包含子元素的元素;
(2)子元素:直接被父元素包含的元素;
子元素选择器:选中指定父元素的指定子元素
语法:父元素>子元素
(3)祖先元素:直接或间接包含后代元素的元素;
一个元素的父元素也是它的祖先元素
:
(4)后代元素:直接或间接被祖先元素包含的元素;
后代元素选择器:选中指定元素内指定后代元素.
范围更大
语法:祖先 后代
(5)兄弟元素:拥有相同父元素的元素.
兄弟元素选择器:选择下一个兄弟
语法: 前一个 + 后一个
选择下边所有的兄弟
语法: 兄~弟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 为div的子元素span设置一个字体颜色红色 */
div>span{
color: red;
}
/* 范围更大 */
div span{
color: darksalmon;
}
p+span{
color: mediumblue;
}
p~span{
color: blueviolet;
}
</style>
</head>
<body>
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div元素中的span元素</span>
<span>我是div元素中的span元素</span>
<span>我是div元素中的span元素</span>
</div>
</body>
</html>
-
属性选择器
（1）[属性名]选择含有指定属性的元素
（2）[属性名=属性值]选择含有指定属性和属性值的元素。
（3）[属性名^属性值]选择属性值以指定值开头的元素。
（4）[属性名$=属性值]选择属性值以指定值结尾的元素。
（5）[属性名*属性值]选择属性值中含有某值的元素的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span[title]{
color:seagreen;
}
span[title=abc]{
font-family: "楷体";
}
span[title^=abc]{
color: red;
}
span[title$=c]{
color: pink;
}
span[title*=abc]{
font-size:30px;
}
</style>
</head>
<body>
<div>
我是一个div
<p >
我是div中的p元素
<span title="abc">我是p元素中的span元素</span>
</p>
<span title="ab123">我是div元素中的span元素</span>
<span title="abc">我是div元素中的span元素</span>
<span>我是div元素中的span元素</span>
</div>
</body>
</html>
-
伪类选择器
（1）伪类（不存在的类，特殊的类）
伪类用来描述第一个元素的特殊状态。
伪类一般情况下都是使用：开头
：first-child：第一个子元素
：last-child:最后一个子元素
：nth-child():选择第n个子元素
以上这些伪类都是根据所有的子元素进行排序。
特殊值：
n 第n个 n的范围是0到正无穷
2n或even 表示选择偶数位的元素
2n+1 或odd 表示选择奇数位的元素
：first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似，
不同点是他们是在同类型元素进行排序的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul>li{ color: red; } ul>li:first-child{ color: orange; } ul>li:last-child{ color: yellow; } ul>li:nth-child(2){ color: green; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
（2） not()否定伪类：将符合条件的元素从选择器中去除。
ul>li:not(:nth-child(3)){
color: blue;
}
（3）超链接的伪类
| 语法 | 功能 |
|---|---|
| a:link | 用来表示没访问过的链接（正常的链接） |
| a:visited | 用来表示访问过的链接 |
| a:hover | 用来表示鼠标移入的状态 |
| a:active | 用来表示正在点击的链接 |
由于隐私的原因，所以visited这个伪类只能修改链接的颜色。
（4）伪元素选择器
伪元素：表示页面中的一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用: ::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection表示选中的内容
::before元素的开始位置
::after元素的最后
before与after必须结合content属性来使用
10. 样式的继承
我们为一个元素设置的样式同时也会应用到它的后代元素上。
继承是发生再祖先与后代之间的。
继承的设计是为了方便我们的开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式。
但不是所有的样式都会被继承。例如：背景相关的，布局相关等这些样式都不会被继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
color: salmon;
background-color: skyblue;
}
</style>
</head>
<body>
<div>我是div<p>hello ，我是p</p></div>
</body>
</html>
此时p标签背景颜色也是蓝色的原因是标签的默认背景颜色是透明的，而div的背景颜色透到了p中。
11. 选择器的权重
样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生冲突时，应用哪个样式由选择器的权重来决定。
选择器的权重：
内联样式 1，0，0，0
id选择器 1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0， 1
通配选择器 0，0，0，0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加运算，最后优先级越高，则越优先显示（分组选择器单独计算）。
选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器。
可以再某一个样式的后边加！important，则此时该样式会获取到最高的优先级，甚至超过内联样式。
注意：在开发中慎用。
12. 像素和百分比
长度单位：
（1）像素：-屏幕（显示器）实际上是由一个一个的小点点构成的。
不同屏幕像素大小是不同的，像素越小的屏幕显示的效果越清晰。
所以同样的200px在不同的设备下显示效果不一样。
（2）百分比可以将属性值设置相对于其父元素属性的百分比。
设置百分比可以使得子元素跟随父元素的改变而改变。
（3）em:相对于元素的字体的大小来计算的
1em=1font-size
em会根据字体大小的改变而改变
（4）rem:相对于根元素的字体的大小来计算的
-
RGB值
颜色单位：
（1）在CSS中可以直接使用颜色名来设置各种颜色。 但是在CSS中直接使用颜色名不方便。
（2）RGB值：RGB通过三种颜色的不同浓度来调配出不同的颜色。
R :red G:green B:blue
每一种颜色的范围在0-255之间
语法：RGB(红色，绿色，蓝色)
（3）RGBA：在rgb的基础上增加了一个a表示不透明度。
需要四个值，前三个和rgb一样，第四个表示不透明度。
1 表示完全不透明 0表示完全透明 .5表示半透明。
（4）十六进制的RGB值
语法：#红色绿色蓝色
颜色浓度通过00-ff
如果颜色两位重复，可以进行缩写。
#aabbcc–>#abc -
HSL值 HSLA值
H：色相（0-360）
S：饱和度即颜色的浓度（0%-100%）
L：亮度（0%-100%） -
文档流
文档流：网页是一个多层的结构，一层落着一层。通过CSS可以分别为每一次来设置样式。作为用户来讲只能看到最顶上一层。
在这些层中，最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。
元素主要有两个状态：在文档流中，不在文档流中（脱离文档流）。
（1）块元素：在页面中独占一行。默认宽度是父元素全部。默认高度是被内容撑开。自上向下垂直排列。
（2）行内元素：在页面中不会独占一行，在页面中自左向右水平排列。行内元素的默认宽度和高度都是被内容撑开。 -
盒子模型（框模型）
CSS将页面的所有元素都设置为了一个矩形的盒子。
将元素设置为矩形的盒子后，对页面的布局变成将不同的盒子摆放到不同的位置。
每个盒子都由以下几个部分组成。
内容区（content）:
元素中的所有的子元素和文本内容都在内容区排列。width:设置内容区的宽度；
height：设置内容区的高度。
边框（border）：
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部。要设置边框，需要至少三个样式。边框的大小会影响到整个盒子的大小。
边框的高度：border-width
边框的颜色：border-color
边框的样式：border-style
外边距（margin）
-
边框
边框的宽度 border-width:默认值：一般都是3个像素
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
边框的颜色 border-color：用来指定边框的颜色
边框的样式 border-style：solid dot(点状虚线) dashed(线状虚线) double(双线) ，默认值为none. -
内边距：padding
内边距的设置会影响到盒子的大小。背景颜色会延伸至内边距上。
eg. height:100px width:100px
padding-top:50px
一个盒子可见框的大小，由内容区、内边距和边框共同决定。所以在计算盒子大小时，需要将这三个区域加到一起计算。 -
外边距：不会影响盒子可见框的大小。但会影响盒子的位置。
元素在页面中时按照自左向右的顺序排列的。所以默认情况下如果我们设置
左和上外边距则会移动元素自身
。而设置下和右外边距会移动其他元素。
margin也可以设置为负值，如果是负值则会向相反的方向移动。
默认情况下设置margin-right不会产生任何效果。 -
水平方向的布局
元素在其父元素中水平方向的位置由以下几个属性共同决定。
margin-left、border-left、padding-left
width 、padding-right、border-right、margin-right。
一个元素在其父元素中，水平布局必须满足以下的等式。
margin-left+border-left+padding-left
+width+padding-right+border-right+margin-right=其父元素内容区的宽度。
以上等式必须满足，如果相加结果使等式不成立，则成为过渡约束。则等式会自动调整。
调整的情况：如果这七个值没有为auto的情况，则浏览器会自动调整margin-right值以使得等式满足。
这七个值有三个值可以设置为auto
width,margin-left,margin-right.
如果某个值为auto，则会自动调整为auto的那个值以使等式成立。
width的值默认为auto.
如果将一个宽度和一个外边距设置为auto,则宽度会调整至最大，设置为auto的外边距会自动为0.
如果将两个外边距设置为auto,宽度为固定值，则会将外边距设置为相同的值。
所以我们这个会经常利用这个特点来使一个元素在其父元素中水平居中
eg. width:px;
margin:0,auto; -
垂直方向的布局
默认情况下父元素的高度会被内容撑开。
子元素是在父元素的内容区中排列的 ，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。
使用overflow属性来设置父元素如何处理 溢出的子元素。
可选值：
visible:默认值。子元素会从父元素中溢出，在父元素外部的位置显示。
hidden:溢出内容将会被裁剪不会被显示。
scroll:生成两个滚动条，通过滚动条来查看完整的内容。
auto:根据需要生成滚动条。
-
外边距的折叠
相邻的垂直方向外边距会发生重叠现象。
🐱🐉兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）。
特殊情况：
如果相邻的外边距一正一负，则取两者的和。
如果相邻的外边距都是负值，则取两者中绝对值较的重叠，对于开发是有利的，所以我们不需要进行处理。
兄弟之间的外边距
🐱🐉父子元素：父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）。父子外边距的折叠会影响页面的布局，必须要进行处理。
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 100px;
background-color: salmon;
padding-top: 50px;
}
.box2 {
width: 100px;
height: 100px;
background-color: rgb(243, 234, 156);
}
</style>
</head>
<body>
<!-- 让box2下移50px ,设置父元素height及padding-top-->
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
-
行内元素的盒模型
行内元素不支持设置高度与宽度。
行内元素可以设置padding、border、margin,但是垂直方向padding、border、margin不会影响页面的布局。
行内元素不存在外边距的折叠。
行内元素转块元素：
🍦display属性：
（1）inline：将元素设置为行内元素
（2）block：将元素设置为块元素
（3）inline-block:行内块元素（即可设置宽度和高度，不会独占一行）尽量避免使用。
（4）table:将元素设置为表格
（5）none:将元素隐藏。
🍦visibility：用来设置元素的显示状态。
可选值：
（1）visible默认值，元素在页面中正常显示。
（2）hidden元素在页面中隐藏不显示，但依然占据页面的位置。 -
浏览器的默认样式
通常情况下，浏览器会元素设置一些默认样式。
默认样式的存在会影响到页面的布局。通常情况下编写网页时必须要去掉浏览器的默认样式（pc端的页面）
*{
margin:0;
padding:0;
}
上述方法会有残留，做小demo可以用该方法。
所以在实际开发中应逐个清除，外部引入.css文件。
重置样式表reset.css直接去除浏览器的默认样式。normalize.css是将所有的标签进行统一。
reset.css
normalize.css
当设置img的width为100%时，此时img-list的宽度就是图片的宽度。
练习
24 . 盒子的大小
默认情况下，盒子可见框的大小由内容区、内边距和边框决定。
boxs-sizing:用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
🐷content-box：默认值。宽度和高度用来设置内容区的大小。
🐷border-box:宽度和高度用来设置整个盒子的可见框的大小。 -
轮廓阴影与圆角
（1）outline:用来设置元素的轮廓线，用法与border一模一样，轮廓与边框不同的是轮廓不会影响到可见框的大小。
（2）阴影：box-shadow:用来设置元素的阴影效果，阴影不会影响页面布局。
第一个值：水平偏移量 设置阴影的水平位置，正值向右移动，负值向左移动。
第二个值：垂直偏移量 设置阴影的垂直位置，正值向下移动，负值向上移动。
第三个值：阴影的模糊半径。
第四个值:阴影的颜色。（使用rgba效果具有透明效果）box-shadow:0 0 10px rgba(0, 0, 0, .5);
（3）圆角：border-radius:用来设置圆角,用来设置圆的半径大小。
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius 可以分别指定四个角的圆角
四个值 左上 右上 右下 左下
三个值 左上 右上/左下 右下
两个值 左上/右下 右上/左下 -
浮动
通过浮动可以使一个元素向其父元素的左侧或右侧移动。
使用float属性来设置元素的浮动。
可选值:none 默认值 元素不浮动
left 元素向左浮动
right 元素向右浮动
注意：元素设置浮动以后，水平布局的等式不强制成立。
元素设置浮动后，会完全从文档流脱离，不在占用文档流的位置，所以在元素下边 的还会在文档流中的元素会自动向上移动。
浮动的特点：
1. 浮动元素会完全脱离文档流，不再占据文档流中的位置。
2. 设置浮动元素以后元素会向父元素的左侧或右侧移动。
3. 浮动元素默认不会从父元素中移出。
4. 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素。
5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移。
6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高。
浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动元素可以制作一些水平方向的布局
浮动元素不会盖住文字。文字会自动环绕在元素周围。可以用此来设置文字环绕图片。
元素设置浮动以后将会从文档里中脱离，从文档流中脱离以后，元素的一些特点也会发生改变。
脱离文档流后（不是浮动特有的特点，只要脱离文档流就会发生）块元素不再独占一行。块元素的高度和宽度默认都会被内容撑开。
对于行内元素，在脱离文档流后就可以设置高度宽度，特点与块元素一样。
脱离文档流后，不再区分块与行内。
27. 高度塌陷
在浮动布局中，父元素的高度默认是被子元素撑开的。当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失。父元素的高度丢失后，其下的元素会自动上移，导致页面的布局混乱。
BFC（Block Formatting Context）块级格式化环境
BFC是一个CSS中的隐含属性，可以为元素开启BFC，开启BFC后该元素会变成一个独立的布局区域。
元素开启BFC后的t特点：
1. 开启BFC后的元素不会被浮动元素所覆盖。
2. 开启BFC后的元素子元素和父元素的外边距不会重叠。
3. 开启BFC后的元素就可以包含浮动的子元素
通过特殊方式开启元素的BFC
１. 设置元素的浮动（存在副作用）。
２. 将元素设置为行内块元素（存在副作用）。
３. 将元素的overflow设置为
非
visible的值
overflow:hidden（开启BFC）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../css/reset.css">
<style>
.box1{
border: 3px solid red;
/* 否则会高度塌陷 */
overflow: hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: rgb(188, 230, 134);
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(56, 31, 199);
}
</style>
</head>
<body>
<div class="box1"><div class="box2"></div></div>
<div class="box3"></div>
</body>
</html>
-
开启BFC较好的方式 clear
清除浮动元素对当前元素的影响。
clear:left;
clear:right;
clear:both;清除两侧浮动中最大的
原理：设置清除浮动后,浏览器会自动为元素设置一个上外边距，使其位置不受其他元素的影响。
- 使用after伪类解决高度塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
border: 1px solid forestgreen;
}
.box1::after {
content: "hello";
/* 默认情况下after伪元素是行内元素 */
display: block;
clear: both;
}
.box2 {
width: 100px;
height: 100px;
background-color: blueviolet;
float: left;
}
/* .box3{
clear: both;
} */
</style>
</head>
<body>
<div class="box1">
<div class="box2">123</div>
<!-- 通过添加box3使得div1高度改变，使用的是结构处理表现，但此时希望使用css来改变-->
<!-- <div class="box3"> as</div> -->
</div>
</body>
</html>
- clearfix 解决垂直方向相邻外边距折叠。
/* clearfix这个样式可以同时解决高度塌陷和外边距重叠的问题 */
.clearfix::before,.clearfix::after{
content: "";
display: table;
clear: both;
}
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: #ffbbaa;
}
/* .box1::before{
content: "";
/* 实现父元素与子元素外边距隔开 */
/* display: table; */
/* } */
.box2{
width: 50px;
height: 50px;
background-color: #94c4a0;
/* 此时发生父元素与子元素共同下移，为解决该问题需将二者的外边距隔开 */
margin-top: 30px;
}
/* clearfix这个样式可以同时解决高度塌陷个外边重叠的问题 */
.clearfix::before,.clearfix::after{
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
-
position
定位是一种更为高级的布局手段
通过定位可以让元素摆放到页面的任意位置。
1. static 默认值。元素是静止的没有开启定位。
2. relative:相对定位。
（1）元素开启相对定位后，如果不设置
偏移量
元素不会发生任何的改变。
偏移量：当元素开启了定位以后，可以通过偏移量来设置元素的位置。
top:定位元素与
定位位置
上边的距离。
botton:定位元素与定位位置下边的距离。
定位元素垂直方向的位置由top与bottom两个属性来控制。
right:定位元素与定位位置右边的距离。
left:定位元素与定位位置左边的距离。
通常情况下只会设置一个。
相对定位
参照于元素在文档流中的位置进行定位。
相对定位会提升元素的层级，但不会使元素脱离文档流，不会改变元素的性质块还是块，行内还是行内。
4. absolute:绝对定位。
绝对定位的特点：
（1）如果不设置偏移量，
元素的位置
不会发生改变。
（2）元素会从文档流中脱离
（3）绝对定位会改变元素的性质。行内变成块，块的高度会被内容撑开
（4）绝对定位会使元素提升层级。
（5）绝对定位元素是相对于其包含快进行定位的。
包含块(containing block)
正常情况下，包含块就是距离当前元素最近的祖先元素。
绝对定位的包含块就是离他最近的开启了定位的祖先元素.如果所有的祖先元素都没有开启定位则相对于根元素进行定位.
html(根元素,初始包含块)
5. fixed:固定定位.固定定位也是一种绝对定位,但不同的是固定定位永远参照与浏览器的视口(浏览器的可视窗口)进行定位.固定定位的元素不会随网页的滚动条滚动.
6. sticky:粘滞定位.和相对定位的特点基本一致.
-
绝对定位元素的位置
(1)水平布局: margin-left+padding-right+border-left+width+left+margin-right+padding-right-border-right+right=包含块的内容区的位置
当我们开启了绝对定位后,水平方向的布局等式就需要添加left 和right两个值.此时规则和之前一样只是多添加了两个值.当发生过度约束时,如果9个值中没有auto,则自动调整right值以使等式满足.如果有auto,则会调整auto的值以使得等式满足.
可设置auto的值:margin left right
因为left和right的值默认是auto,如果不设置left和right,则等式不满足时,会自动调整这两个值.
(2)垂直方向布局的等式也必须要满足
top+margin-top/bottom+padding-top/bottom+border-top/bottom+height=包含块的高度. -
元素的层级
对于开启了定位的元素,可以通过z-inde属性指定元素的层级.
z-index需要一个整数作为参数,值越大元素的层级越高,元素的层级越高越优先显示.
如果元素的层级一样,会优先显示
祖先元素的层级再高,也不会盖住后代元素.
通过z-index实现图片轮播
大体浮动，细节定位进行微调。
-
字体族
（1）color：用来设置字体颜色
（2）font-family字体族（字体的格式）
可选值：
serif衬线字体
sans-serif 非衬线字体
monospace 等宽字体（编写代码时用的就是该字体）
指定字体的类别，浏览器会自动使用该类别下的字体。
font-face可以将服务器中的字体直接提供给用户去使用。
/* font-face可以将服务器中的字体直接提供给用户去使用。出现问题：（1）加载过慢（2）版权（3）字体格式 */ @font-face { /* 指定字体的名字 */ font-family:'myfont' ; /* 服务器中字体的路径 */ src: url('./font/1.ttf'); }
-
图标字体简介（icon-font）
在网页中会经常使用一些图标，可以通过图片来引入，但是图片大小比较大且不灵活。所以在使用图标时，可以将图标直接设置为字体，然后通过font-face的形式对字体进行引用，这样就可以用字体的形式来使用图标。
fontawesome使用步骤-
解压
-
将css与webfonts移动到项目中。
-
将all.css引入到网页中
-
使用图标字体
（1）通过类名来使用图标字体
<i class="fas fa-bell"></i>
<i class="fab fa-bell"></i>
fa-bell是图标名
（2）通过伪元素设置图标字体
（1）找到要设置图标的元素通过before或after选中。
（2）在content中设置字体的编码（在zeal中查找（要在里面下载Font AweSome哦））
（3）设置字体的样式
fab:（第一个代码）
fas:（第二个代码）
font-family: 'Font Awesome 5 Brands'; font-weight: 400;font-family: 'Font Awesome 5 Free'; font-weight: 900;示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/css/all.css"> <style> li { list-style: none; } /* 通过伪元素设置图标字体 */ li::before { content: '\f6ed '; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: rgb(231, 184, 167); } </style> </head> <body> <ul> <li> 锄禾日当午</li> <li> 汗滴禾下土</li> <li> 谁知盘中餐</li> <li> 粒粒皆辛苦</li> </ul> </body> </html>
（3）通过实体的方式
通过实体来使用图标字体。
&#x图标的编码
<span class="fas"></span>
- iconfont
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./ali-iconfonts/iconfont.css">
<style>
i.iconfont{
font-size: 50px;
}
p::before{
content: '\e607';
font-family: 'iconfont';
font-size: 100px;
}
</style>
</head>
<body>
<!-- class名字必须为iconfont -->
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont icon-weixin"></i>
<p>hello</p>
</body>
</html>
38. 行高(line-height)：文字占有的实际高度。
（1）行高可以直接指定一个大小（px,em）,也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数。
（2）字体框就是字体存在的格子，设置font-size实际上就是设置字体框的高度。
（3）行高会在字体框的上下平均分配。
使单行文字在一个元素中垂直居中，可以设置行高与高度一致。
div{
font-size: 30px;
height: 100px;
line-height: 100px;
border: 1px solid forestgreen;
}
行高可以用来设置文字的行间距
行间距=行高-字体大小
39. 字体的简写属性
font可以设置字体相关的所有属性。
语法： font: 字体大小/行高 字体族
行高可以省略不写 如果不写会使用默认值
字体大小与字体族必须写，且为语法的倒数第二与第一。
（1）font-weight:
normal
bold
100-900 九个级别。（一般不用）
（2）font-style:字体的风格 normal（默认） 、italic(斜体)
文本的水平与垂直对齐
（1）text-align文本的水平对齐
可选值：left right center justify(两端对齐)
(2)vertical-align文本的垂直对齐(子元素与父元素)
可选值：baseline(基线对齐，默认值)、top、bottom、middle（居中对齐）、指定值也可以
消除图片与边框margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img1 {
border: 1px solid darkgreen;
}
img {
/* 消除基线 */
vertical-align: middle;
}
</style>
</head>
<body>
<p class="img1"><img src="./ecercise/img/5.jpg" ></p>
</body>
</html>
- text-decoration
font-size: 30px;
font-family: 楷体;
/* IE不支持颜色等设置 */
text-decoration: underline rgb(76, 76, 155) dotted;
white-space:用来设置网页中如何处理空白。
可选值：normal 、nowrap（不换行）、prep(保留空白)。
多余位置用省略来代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis numquam magnam quam tempore voluptatem dicta neque, deserunt sunt, voluptas nostrum assumenda voluptate placeat unde nemo perspiciatis eveniet rerum veniam sed.
</div>
</body>
</html>
京东导航栏
41. 背景
（1）background-color
（2） background-image:url(“图片路径”)
二者可以同时设置，此时背景颜色会变为图片的背景颜色。
如果背景的图片小于元素，其会自动平铺将元素填满
如果背景的图片大于元素，将会有一个部分背景无法完全显示。
如果背景的图片与元素一样大，完全显示。
（3）background-repeat:设置背景的重复方式。
选值：repeat（默认值） repeat-x repeat-y no-repeat
（4） backround-position:用来设置背景图片的位置。
可选值：top left right bottom center
使用方位词时必须同时指定两个值，如果只写第一个则默认第二个为center。
<font=“楷体” color=“LightCoral”>也可用像素来指定位置（类似于margin，可以设置为负值）。
设置背景的范围（border里也会出现背景），IE8不支持。
（5） background-clip:
可选值：
border-box默认值，背景会出现在边框的下边。
padding-box：背景不会出现在边框，只会出现在内容区和内边距。
content-box:背景只会出现在内容区。
（6）background-origin:背景图片的偏移量计算的原点。
可选值：
padding-box:默认值，backg-position从内边距开始计算。
content-box：背景图片的偏移量从内容区开始计算。
border-box:背景图片的偏移量从边框处开始计算。
（7）background-size:背景图片的大小。
第一个值表示宽度，第二个值表示高度。
如果只写一个，第二个值默认auto。
可选值：cover:图片的比例不变，将元素撑满。
contain:图片比例不变，将图片在元素中完整显示。
background-attachment:设置图片是否根据元素移动。
默认值：scroll
fixed:背景图片会固定在元素中。
（8）background：背景图片的简写。size写在position后面，并且使用/隔开。background-origin在background-clip前面。
图片属于网页中的外部资源，其都需要浏览器单独发送请求加载。浏览器加载外部资源时是按需加载，用则加载，不用则不加载。
解决图片闪烁问题：可以将多个小图片同时保存到一个大图片中，通过调整background-position来显示网页。这样图片会同时加载到网页中，这样就可以有效的避免出现烁的问题。
这个技术在网页应用是十分广泛，被称为CSS-Sprite,这种图成为雪碧图。
雪碧图的使用步骤：
1. 先确定要使用的图标。
2. 测量图标的大小。
3. 根据测量结果的大小创建一个元素。
4. 将雪碧图设置为元素的背景图片。
5. 设置一个偏移量以显示正确的图片。（background-position）
雪碧图的特点：一次性将多个图片加载到页面，降低请求的次数，加快访问速度，提升用户的体验。
42. 渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果。
渐变是图片，需要通过background-image来设置。
(1)线性渐变：颜色沿着一条直线发生改变。linear·gradient()
background-image: linear-gradient(rgb(224, 164, 164),#9292eb);
线性渐变的开头，我们可以指定一个渐变的方向。
×××deg deg表示度数。
turn:圈
background-image: linear-gradient(to right, rgb(224, 164, 164),#9292eb);
渐变可以指定多个颜色，多个颜色默认情况下平均分布。
也可以手动指定渐变的分布情况。
.box1{
width: 200px; height: 200px;
background-image: linear-gradient( rgb(224, 164, 164) 80px,#9292eb);
}
repeating-linear·gradient() 可以平铺的线性渐变。
background-image: repeating-linear-gradient(red 50px ,yellow 100px)
43. 径向渐变
radial-gradient() 径向渐变（放射性的效果）
默认情况下径向渐变圆心的形状是根据元素的形状来计算的。
background-image: radial-gradient(rgb(240, 144, 144),rgb(198, 198, 252));
正方形–>圆形
长方形–>椭圆形
我们也可以手动指定径向渐变的大小。
circle ellipse 或者直接自己指定。
background-image: radial-gradient(ellipse,rgb(240, 144, 144),rgb(198, 198, 252));
我们也可以指定渐变的位置。
radial-gradient（大小 at 位置，颜色 位置，颜色 位置，颜色 位置，颜色 位置）
background-image: radial-gradient(10px 10px,rgb(240, 144, 144),rgb(198, 198, 252));
background-image: radial-gradient(10px 10px at 0 0,rgb(240, 144, 144),rgb(198, 198, 252));
动画
-
过渡（transition）
通过过渡当一个属性发生变化时的切换方式。
通过过渡效果可以创建一些非常好的效果，提升用户的体验。
(1)transition-property:指定要过渡执行时属性，多个属性间用逗号隔开，如果所有属性都需要过渡，则使用all属性
🐖过渡时必须是从一个有效值向另外一个有效值进行过渡
（2）transition-duration: 表示指定过渡效果的持续时间。
时间单位：s和ms 1s=1000ms
（3）transition-timing-function:过渡的时序函数
指定过渡的执行的方式。
可选值：
😊 ease 默认值。慢速开始先加速再减速
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.box1 {
width: 800px;
height: 800px;
background-color: cornflowerblue;
/* 解决外边距折叠问题 */
overflow: hidden;
}
.box1 div {
width: 100px;
height: 100px;
/* 此时会出现外边距折叠 */
margin-bottom: 100px;
}
.box2 {
background-color: crimson;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease;
}
.box1:hover .box2 {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
😊 linear 匀速运动
😊 ease-in 加速运动
😊 ease-out 减速运动
😊 ease-in-out 先加速后减速
😊 cubic-bezier(.17,.67,.83,.67)
cubic-bezier
😊 steps() 分布执行过渡效果
可以设置一个第二个值：
end:在时间结束时执行过渡（默认值）
start:在时间开始时执行过渡
（4）transition-delay: 过渡效果的延迟（等待一段时间后）
transition 可以同时设置过渡 相关的属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间。
transition: 3s margin-left 2s;
-
animation(动画)
动画于过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发。而动画可以自动触发动图效果
设置动画效果，必须要先设置一个关键帧。关键帧设置了动画执行的每一个步骤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 800px;
height: 800px;
background-color: darkolivegreen;
}
.box2 {
width: 200px;
height: 200px;
background-color: darkorange;
/* 设置box2的动画 */
/* animation:name 要对当前元素生效的关键帧的名字 */
animation: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
/* animation-iteration-count: 动画执行的次数
可选值:infinite:无限执行
*/
/* animation-direction: 指定动画运行的方向
默认 normal 从from向to运行，每次都是这样
reverse 从to向from运行，每次都是这样
alternate 从from向to运行，重复执行动画时反向执行
alternate-reverse：从to向from运行，重复执行动画时反向执行
*/
/* animation-play-state: 设置动画执行状态
可选值：
running 默认值动画执行
paused 动画停止
*/
/* animation-fill-mode: 动画的填充模式
可选值；none动画执行完毕，回到原始位置
forwards: 动画执行完毕，会停止在动画结束位置
backwards:动画延时等待时，元素就会处于开始位置
both:结合了forwards和backwards
*/
}
@keyframes test {
/* from 表示动画的开始位置,也可以使用0% */
from {
margin-left: 0;
background-color: darkorange;
}
/* to表示动画的位置,也可以使用100%*/
to {
margin-left: 600px;
background-color: darkslategrey;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
-
变形（transform）
变形就是通过CSS来改变元素的形状或位置
变形不会影响到页面的布局
(1)平移：
🐖translateX() 、translateY() 、translateZ()
🐖平移元素，百分比是相对于自身计算的.box2 { background-color: chocolate; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
以上居中方式，只适用于元素的大小确定
background-color: chocolate;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%) translate(-50%);
完美解决
小米div鼠标滑过向上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(212, 224, 245);
}
.box1,
.box2 {
width: 200px;
height: 460px;
background-color: white;
float: left;
margin: 20px 10px;
transition: all .3s;
}
.box1:hover,
.box2:hover {
transform: translateY(-4px);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
z轴平移：调整元素在z轴的位置，正常情况下就是调整元素和人眼之间是距离。
距离越大，元素离人越近。
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果，必须要设置网页的视距。
4. 旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
//不可少
perspective: 800px;
}
.box1 {
width: 100px;
height: 100px;
background-color: rgb(164, 176, 209);
margin: 200px auto;
transition: .2s;
}
html .box1:hover {
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
- 关键帧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 320px;
height: 142px;
margin: 30px auto;
background-image: url(../../img/timg.jpg);
background-size: 100%;
animation: move .5s steps(3) infinite;
}
/* 创建关键帧 */
@keyframes move {
from {
background-position: 0 0;
}
to {
background-position: 0 426px;
}
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
asas
</div>
</body>
</html>
6. 缩放scaleX()、scaleY()、scale()
less
- less是一门css的预处理语言，less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式。
-
css的缺点：
(1)兼容性不好,很多浏览器不支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
/* css原生也支持变量的设置 --变量名 */
--color: rgb(228, 156, 156);
--length: 100px;
}
.box1 {
/* calc()计算函数 */
width: calc(200px*2);
height: var(--length);
background-color: var(--color);
}
.box2 {
width: var(--length);
;
height: var(--length);
;
color: var(--color);
}
.box3 {
width: var(--length);
;
height: var(--length);
;
border: 1px solid var(--color);
}
</style>
</head>
<body>
<div class="box1">aaa</div>
<div class="box2">aaa</div>
<div class="box3">aaa</div>
</body>
</html>
-
在less中添加了许多的新特性，像对变量的支持，对mixim的支持…
-
less的语法大体上和css语法一致，但是less中添加了许多对css的扩展，所以浏览器无法直接执行less代码，要执行less代码，必须将其转换为css,然后再由浏览者执行。（安装easy less）
//less中的单行注释，注释中的内容不会被解析到css中 /* css中的注释，它的内容会被解析在css文件中 */ .box1{ background-color: rgb(218, 199, 238); width: 100px; height: 100px; .box2{ background-color: rgb(171, 231, 197); width: 50px; height: 50px; .box4{ background-color: seashell; } } } //变量，在变量中可以存储一个任意的值 //并且我们可以在需要时，任意的修改变量中的值 //变量的语法： @变量名 @a:100px; @b:#bfa; @c:box6; .box5{ // 使用变量时，如果是直接使用则以@变量名的形式使用即可 width: @a; color: @b; } // 作为类名，或者一部分值使用时必须以@（变量名）的形式使用 .@{c}{ width:@a; background-image: url("@{c}/1.png"); } @d:220px; @d:320px; div{ // 变量名发生重名时。会优先使用比较近的变量 width: @d; height: @e; } // 可以在变量声明前就使用变量 @e:110px; // $引用color的颜色，color改变，其随之改变 div{ color: red; background-color: $color; } -
父元素和扩展
.box1{
// 后代
.box2{
color: red;
}
//子元素
>.box3{
color: red;
}
// 为box1设置一个hover,&就是表示外层 的父元素
&:hover{
color: orange;
}
div &{
width: 100px;
}
}
.p1{
width: 100px;
height: 200px;
}
//:extend()对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
color: red;
}
.p3{
// 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制
//mixin混合
.p1();
}
//使用类选择器时可以在选择器后面添加一个括号，这时实际上就是创建了一个mixmins
//代码重复，一般不这样使用
.p4(){
width: 100px;
height: 100px;
background-color: orangered;
}
.p5{
.p4;
}
//混合函数，在混合函数中可以直接设置变量
.test(@w,@h){
width: @w;
height: @h;
border: 1px solid red;
}
.div{
//调用混合函数，按顺序传递参数
.test(200px, 300px);
// .test(@h:300px,@w:200px);
}
// 可以设置默认值
.test(@w:100px,@h:200px){
width: @w;
height: @h;
border: 1px solid red;
}
.div{
.test(300px)
}
// less带了很多函数
span{
color: average(red,blue);
}
- less的补充
// 多个less文件进行合并,方便后期的维护
@import "style.less";
.box1{
// 在less中所有的数值都可以直接进行运算 + - * /
width: 100px+30px;
height: 100px-20px;
background-color: blue;
}
// 在调试时显示的是css中的位置,但css是通过less编写的,所以需要知道需要修改的位置在less中的地方.
// 1. Easy Less 中找到Example settings.json file 复制
// 2. 打开设置扩展的easy less configuration
// 3. 在settings.json进行配置,粘贴所复制的代码(记得在代码之前加',')
// 4. 会出现.css.map
// "less.compile": {
// "compress": true, 是否压缩
// "sourceMap": true,是否生成源码地图
// "out": true,是否生成css文件
// },
-
less的继承
（1）
#test{ &:extend(.father)}
(2)
#test:extend(.father){}
(3)继承所有和.father相关的声明块：all -
less的避免编译：
~“不会被编译的内容”
变量在less中属于块级作用域，延迟加载。
弹性盒
-
简介：
flex(弹性盒、伸缩盒)是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局。
flex可以使元素具有弹性，让元素可以根据页面的大小改变而改变。 -
弹性容器：要使用弹性盒，必须先将一个元素设置为弹性容器。
display:flex; display:inline-flex; -
弹性元素：弹性容器的子元素是弹性元素（弹性项）。
一个元素可以同时是弹性容器和弹性元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 600px;
border: 10px solid red;
/* 将ul设置为弹性容器 */
display: flex;
/* flex-direction 指定容器中弹性元素的排列方式
可选值:
row:默认值弹性元素在容器中水平排列(左向右)
主轴:自左向右
row-reverse:弹性元素在容器中反向水平排列(右向左)
主轴:自右向左
colum:弹性元素纵向排列(自上向下)
column-reverse:弹性元素反向纵向排列(自下向上)
主轴:
弹性元素的排列方向
侧轴:
与主轴垂直方向
*/
flex-direction: row;
}
li {
width: 100px;
height: 100px;
background-color: #bfa;
line-height: 100px;
font-size: 50px;
text-align: center;
display: flex;
/*
弹性元素的属性:
flex-grow:指定弹性元素的伸展的系数.
当父元素有多余的空间时,子元如何伸展.
父元素的剩余空间会按照比例进行分配.
flex-shrink:指定弹性元素的收缩系数
当父元素的空间不足以容纳所有的子元素,对子元素进行收缩
*/
/* flex-grow: 1; */
}
li:nth-child(2) {
background-color: pink;
}
li:nth-child(3) {
background-color: rgb(170, 66, 83);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
像素
- 屏幕是由一个一个发光的的小点构成的，这一个个的小点就是像素。
-
分辨率：1920×1080 说的就是屏幕中的小点的数量
在前端开发中像素分成两种情况讨论：css像素和物理像素。
物理像素：上述所说的小点点就是物理像素。
css像素：编写网页时，我们所用像素就是CSS像素。
浏览器在显示网页时，需要将ｃｓｓ像素转换为物理像素然后再呈现。
一个css像素等于一个物理像素（pc端默认情况下） -
视口（viewpoint）：视口就是用来显示网页的区域。
可以通过查看视口的大小，来观察css像素和物理像素的比值。
默认情况下视口宽度是1920像素。1920（物理像素）此时1：1.
放大两倍的情况下：视口宽度960px（css像素）1920（物理像素）1：2
我们可以通过改变视口的大小，来改变css像素和物理像素的比值。 -
手机像素
在不同的屏幕中，单位像素的大小是不同的。
像素越小，屏幕越清晰。
智能手机的像素点远远小于像素点。
默认情况下，移动端的网页都会将视口设置为980像素（css像素），以确保pc端网页在移动端正常显示。但是如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放以完整显示网页。
所以基本大部分的pc端都可以在移动端中正常浏览，但往往都不会有一个好的用户体验，为了解决这个问题，大部分网站都会专门为移动端设置网页。 - 完美视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!-- 设置视口大小，width=device-width表示设备的宽度（完美视口） -->
<meta name="viewport" content="width=device-width">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<!--
移动端默认的视口是980px(css)
默认情况下，移动端的像素比就是 980/移动端宽度
如果直接在网页中编写移动端代码，这样在980的视口下，
像素比是非常不好的，导致网页中的内容非常非常小。
在编写移动端页面时，必须确保有一个比较合理的像素比
1css像素 对应 2个物理像素
1css像素 对应 3个物理像素
可以通过meta标签来设置视口大小
每一款移动设备设计时，都会有一个最佳的像素比
一般我们只需要将像素比设置为该值即可得到一个最佳效果
-->
<div class="box1">
</div>
</body>
</html>
-
vw单位
不同的设备完美视口的大小是不一样的，同样的375个像素在不同的设备下意义不同。所以在移动端开发时，就不能再使用px来进行布局了。
（1） css单位，表示视口的宽度
100vw等于一个视口的宽度
1ve等于1%视口宽度
vw这个单位永远相对于视口宽度进行计算（放 心在移动端使用）
（2） 设计图的宽度：
750px 1125px
使用vw作为单位
100vw=750px
0.1333333333333333333vw=1px
响应式布局
-
网页可以根据不同的设备或窗口大小呈现出不同的效果。
-
使用响应式布局，可以使一个网页适用于所有的设备。
-
响应布局的关键就是媒体查询
通过媒体查询可以为不同的设备或设备不同的状态来分别设置样式. -
使用媒体查询
语法:@media 查询规则()
媒体类型:all 所有设备
print 打印设备
screen 带屏幕的设备
speech 屏幕阅读器
可以使用,连接多个媒体类型,这样他们就是一个或的关系
在媒体类型前添加一个only,表示只有.
only的使用主要是为了兼容一些老版本浏览器
@media all{
body{
color:red;
}
} -
媒体的特性
媒体特性：
width:视口的宽度
height：视口的高度
min-width：视口的最小宽度（视口大于指定宽度时生效）
max-width：视口的最大宽度（视口小于指定宽度时生效）@media(min-width:500px){
body{
background-color:#bfa;
}
}样式切换的分界点：我们称之为断点，也就是网页的样式会在这个点时发生
一般比较常用的断点
小于768 超小屏幕 max-width=768px
大于768 小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200 大屏幕 min-width=1200px
@media(min-width:400px),(max-width:600px){}之间是或的关系
@media(min-width:400px)and(max-width:600px){}之间是与的关系
快捷方式
-
生成div的快捷方式。
.box1+.box2+.box3回车
- 快速复制 shift+alt+↓
- 强制清除缓存 CTRL+f
-
快速复制给多行里的部分代码
shift alt+如下操作
-
多行代码变一行
全选——>ctrl shift+P——>输入join lines即可 -
css最小化
搜索JS & CSS Minifier——>Minify:File
-
less转css
保存即可生成。
- hover改变兄弟元素的样式：（需要在hover之后添加“+”）
- hover改变子元素的样式:在hover后面直接加子元素