一站式Typora、PS、HTML、CSS基础知识汇总

前端体系介绍 （前端介绍、Typora、PS）

前端

五个阶段：

1. 网页设计（html+css）

   需要耐心，细心，多总结，多记，多背——布局技巧

   网页设计能力基本复合公司的要求，大大小小的网站可以实现，至少可以接私活

   • 第一周：Photoshop+HTML+css 简单制作网页

   • 第二周：css进阶：复杂网页制作

   • 第三周：企业级开发框架，sass+bootstrap

   • 项目周

2. JavaScript基础及数据交互——网页动态交互

3. JavaScript进阶+node.js(后台)+webpack+MongoDB（数据库）——前后端分离实战

4. vue+微信小程序

   • 早期需要安卓团队和IOS团队开发手机软件，前端既可以开发微信小程序，又可以跨平台开发app。行业发展趋势从app到微信小程序（中国特有）。

5. React+ React-native 扩展：typescript+flutter

6. 就业阶段

总课时：大概5个月（约20周）

typora笔记软件

typora软件

md是一种文件格式，typora是这种格式编辑器， markdown

常用快捷键

标题：ctrl+ 1 2 3 4 5 6 表格：ctrl+T

属性名	属性值	描述

代码块： esc下方的`,三个加对应的代码的类型

 <p></p>

单行代码或强调突出： esc下方的反引号包裹代码或者内容 ``

斜体：一个 代表斜体 或者 ctrl+i 文本*

加粗：一对星号包裹文本 或者 ctrl+b 粗体

无序列表：短横线 - 加空格

• 前端

• java

有序列表：数字加.加空格

1. UI

2. 网络安全

图片

• 图片默认是保存在安装typora软件的安装目录，可以进行修改

• 修改图片：偏好设置——图像

主题更改方式：

• 步骤：

  • 参考图片第一二步骤

  • 重启typora，在菜单栏进行更改

代码块显示行号

工具安装-软件开发流程

软件开发流程

• 老板or产品经理——拿到需求，可行性分析，设计出低保真的原型图——>客户进行沟通（定稿）

• UI设计师——根据产品经理的低保真的原型图，设计出高保真的交互图，设计PSD原稿

• 前端工程师——根据psd原稿页面的代码编写，设计动画，交互功能，数据渲染

• 后端工程师——架构选型、数据库设计，业务逻辑设计，设计接口供前端调用

  三个团队同时进行需求分析，产品设计，风险评估，开发时间

• 测试工程师——需求分析，需求评估，写测试用例（设计），自动化脚本设计（Python）

• 前端开发完成，后端未完成，前端使用模拟数据进行测试

• 前后端进行联调——完成整个项目设计

• 测试工程师——测试项目的bug——将bug交给开发——回归测试

• 上线（运维工程师）——网络环境的搭建，项目的维护上线，软硬件的设备管理，权限分配等

接口文档（规范文档，大家都按照这个文件进行设计）

图层介绍

图层

• 概念：将图像拆分为多个模块，每个模块就是一个图层，由多个图层最终组合构成完整图像效果

• 特点：上方图层会盖住下方的图层，透明图层可以看到下方的图层效果

• 新建图层：点击下方的创建新图层的图标即可

• 拷贝图层：鼠标左键点击图层进行拖拽到新建图层的图标上 或者 ctrl+c ctrl+v 或 ctrl+j

• 删除图层：选中图层点击删除图层的图标 或者 鼠标左键拖拽图层到删除图标上 或 delete

• 载入选区：（选择图层中有色块的区域）ctrl+鼠标左键点击图层的缩略图

• 取消选区：Ctrl+D

表情包的制作

打开多个psd文件或图片：将多个文件拖拽进窗口栏，会新开窗口进行显示

放大：ctrl+加号 缩小 ：ctrl+减号

填充前景色：alt+delete

填充背景色：ctrl+delete

• 步骤：

  1. 将表情包的图片和新五官的图片在ps中打开

  2. 去掉旧五官：通过套索工具进行框选旧五官，填充背景色或者按delete键进行删除配合相关操作

  3. 扣取新五官：在新五官图片上，通过套索工具框选新五官，ctrl+c，再到表情包图片上ctrl+v进行粘贴

  4. 新五官去色：ctrl+shift+U（图像——调整——去色）

  5. 调整新五官边缘：ctrl+m（调整曲线），双击图层调整图像的颜色模式，按住alt进行调整

  6. 调整图像大小和位置：选中新五官图层，Ctrl+T，鼠标移入定界框上按住shift可以进行等比例缩放，鼠标移入定界框中鼠标左键按住拖拽可以调整位置，鼠标移入定界框外面可以控制图像的旋转。调整完成后点击勾勾

  7. 调整文本：在原来图层上先通过套索工具去掉原来的文本，再通过文本工具，创建新文本

  8. 导出——存储为web所用格式

选区工具

移动工具

• 可以移动图层中的图像的显示位置

• 自动选中是否勾选：如果勾选时可以自动定位到鼠标左键点击图像所在的图层，如果不勾选可以按住ctrl进行自动切换到勾选状态

选区工具

标尺：ctrl+r

信息：窗口——信息

选区默认不叠加，会重新绘制新选区

选区的加、减、交：

• 加：按住shift键将新选区添加已有选区中

• 减：按住alt键将新选区从已有选区中减掉

• 交：按住shift+alt键选择新选区和已有选区重叠部分

移动选区：在选区选中时，鼠标移入选区中进行鼠标左键点击拖拽进行移动

载入选区：按住ctrl键鼠标左键点击图层的缩略图

取消选区：ctrl+D

选区反选：选区选中时移入选区中鼠标右键——选择反向 或 ctrl+shift+ i

编辑选区：alt+s+T，移动到定界框上可以更改选区的大小，移动到定界框中可以移动选区，移动到定界框外可以旋转选区（按住shift是可以以15°进行旋转）

注意：

• 绘制选区时按住shift键可以绘制正圆或者正方形

• 在绘制过程中（鼠标左键按住不放），可以按住空格键进行选区的移动

  微信图标设计

  微信图标的绘制

  显示隐藏参考线：ctrl+；

  步骤：

  1. 新建一个透明的画布，填充背景色

  2. 绘制男朋友图层：新建一个图层，借助椭圆选区工具和多边形套索工具绘制男朋友，注意：眼镜是镂空的

  3. 女朋友图层：拷贝男朋友图层，移动图层到指定的位置，ctrl+T 鼠标右键选择水平翻转，ctrl+T调整图像大小

  4. 裁剪男朋友图层：选中女朋友的选区（ctrl+左键点击图层缩略图），将眼镜区域加选进选区，再到男朋友上按住delete进行删除

  5. 男女朋友的安全距离：在女朋友图层上，ctrl+T，然后参考中心点等比例缩放图像（shift+alt，shift是等比例缩放，alt是参考中心点进行缩放）

  6. 可以按住ctrl键同时选中男女朋友图层，调整图像显示位置

  7. 导出——存储为web所用格式

     选区工具-套索工具

     套索工具——用于抠图

     • 套索工具——绘制不规则的选区

     • 多边形套索工具——绘制边缘为直线的选区

     • 磁性套索工具——自动识别图像边缘，形成锚点和连线的选区

     删除所有的锚点：ESC

     删除上一个锚点：delete

     注意：在抠图时，需要将图像放大进行选取区域，抠图更加精准

魔棒工具

魔棒和快速选择工具

1. 快速选择工具

   主要更加选中的区域的颜色来决定选取的范围

   色差越大，选取的范围越精准

2. 魔棒工具

   将相同的颜色建立选区，可以通过容差值来调整选择范围

   • 容差：指颜色的区分程度，容差值越大，选取的范围越广

   • 连续是否勾选：勾选时，选择的区域是在一起的

注意：在选区工具中，建立选区后，可以使用“选择并遮住”调整选区的边缘，使图像边缘更加平滑

印章工具

仿制图章工具——用于去水印

画笔调整：alt+鼠标右键 左右调整大小，上下调整硬度

• 按住alt键进行取样，然后点击鼠标左键进行绘制（去水印）

• 以周边近似色进行取样，更加精准

注意：对齐是否勾选：如果勾选默认是以取样点为参考进行取样，如果不勾选，每次点击鼠标左键都是取样点的效果

钢笔工具

钢笔工具

• 绘制图形时，使用路径进行绘制时，绘制完成之后，使用ctrl+enter转为选区

• 新建锚点：鼠标左键点击画布

• 绘制曲线：鼠标左键新建锚点时，按住不放进行拖拽就可以绘制曲线，绘制完成后，可以使用转换点工具选择对应的锚点进行拖拽

• 控制操纵杆：绘制过程中，可以按照alt选择对应的操纵杆进行拖拽，绘制完成后，可以使用转换点工具进行工具

• 取消两边的操作杆：使用转换点工具点击对应的锚点

• 取消后边的操纵杆：绘制过程中，按住alt键点击对应的锚点（取消半边操纵杆）

抖音图标绘制

步骤：

1. 新建一个透明画布，填充背景色

2. 使用钢笔工具绘制图形的路径，ctrl+enter转为选区（注意：需要在路径状态下调整好图形的形状，转为选区后无法调整）

3. 创建三个图层，根据选区填充不同的颜色

4. 使用移动工具调整图层的显示位置，并调整图层的顺序

5. 导出——存储为web所用格式

   图片分类讲解

   图片认识

   矢量图

   • 概念：是由点，线构成，是计算机软件生成

   • 特点：

     • 放大不会失真

     • 矢量图占空间比较少

     • 色彩比较单一，光影效果表达不到位

   位图（点阵图）

   • 概念：是由一系列像素点构成的图像，是有一个个小色块构成的图像

   • ps导出的图片都是位图

   • 特点：

     • 放大会失真，会出现锯齿状

     • 色彩比较丰富，光影表达到位

   图片的压缩模式

   有损压缩

   • 将肉眼不可见或者不敏感的色块删除，从视觉效果来看，图片是没有变化

   • 特点：

     • 可以减少图片的体积

     • 会降低图片的质量

   • 常见的图片格式：jpg/jpeg等

   无损压缩

   • 概念：将图片中相同的色块只保存一次，比如蓝天，记录相同色块的色值和对应的位置，但是从磁盘读取时，会将对应的色值填充到对应的位置，不会减少图片的体积

   • 特点：

     • 不会减少图片的体积

     • 能够保证图片的质量

   • 常见的图片格式：png、gif等

   常见的图片格式

   jpg/jpeg

   • 特点：

     • 采用有损压缩

     • 压缩比比较高，到达40:1

     • 色彩比较丰富

     • 图片体积比较小

   png

   • 特点

     • 支持透明

     • 采用无损压缩

     • 色彩相对较少

   gif

   • 特点:

     • 支持动画

     • 支持透明

     • 无损压缩

     • 色彩比较单一，只支持256种颜色

   svg

   • 基于可扩展的标记语言，用于构建二维的矢量图的一个文件格式

   • 文件体积比较大，比较消耗内存

   • 一般用于logo

   psd

   • photoshop的源文件，体积比较大，包含了图层、通道、滤镜效果等等信息

   webp

   • chrome提出图片格式，但是存在兼容问题

   • 支持动画

   • 采用有损压缩，牺牲图片的质量减少图片的体积

   • 压缩后的图片比jpg和png的体积还小

   图片选择

   • 一般色彩比较丰富的图片，采用jpg

   • 需要支持透明，采用png

   • 需要支持动画，采用gif

原稿切片

原稿切片

• 对psd原稿进行切片

• 步骤

  1. 先分析原稿，确定那些图片需要切图

  2. 确定图片有背景切，还是没有背景切，确定切图的图片的文件格式（jpg或png）

  3. 文件——导出——导出为web所用格式（进行图片重命名，图片格式的更改）

  4. 点击存储，选择“所用用户切片”，点击保存，保存所用用户切片到指定的位置

• 注意：在切片过程中，可以一次性切不玩，需要切多次

• 清除所有切片：视图——清除切片

• 清除所有参考线：视图——清除参考线

  雪碧图

  雪碧图

  又称为精灵图（css sprite技术），将多张图片有序地组合在一起形成一张图片，从而减少请求服务器的次数，达到优化网页的目的。

  步骤：

  1. 新建一个透明的画布

  2. 将所有的小图标添加到画布中，进行有序排列（为了方便后续代码编写）

  3. 可以使用裁剪工具裁剪图片的大小

  4. 导出——存储为web所用格式（png图片）

  网页优化的方案

  1. 使用雪碧图技术，可以减少请求服务器的次数，从而优化网页

  2. 合理使用图片的格式，也可以优化网页

网页介绍 （HTML）

前端的发展

网页开发，web开发，网站开发，小程序开发

web指的是网页、网站

91年，出来第一个网页，早期的网页主要用于论文的传输，学术研究等等

Tim Berners-LEE 李博士，互联网之父

94年，PHP诞生，实现数据的交互和动态页面的模板引擎，为web2.0时代做了铺垫

lee博士建立了W3C，主要制定前端的开发规则，包括HTML+CSS+JavaScript等

• web1.0：静态页面，页面中所有的内容都是写死的

• web2.0：动态页面。可以动态渲染页面上的数据

95年，JavaScript出现，只能实现动态交互，页面中动态效果

99年，ajax技术，异步技术，标志web2.0时代的到来

2007年，第一部iPhone发布

14年，H5发布

20年，vue3.0发布

前端学习的三部分：HTML（网页的骨架） CSS（网页的样式，美化网页） JavaScript（网页的动态效果）

vue、react等框架

HTML

Hyper Text Marckup Language 超文本标记语言

• 超文本：通过一系列的超链接，将不同空间的资源组合起床形成一个网状的结构，超文本其实就是超媒体的概率，不仅仅指的是页面中的文本，还包含了页面中的图片，视频音频等等

• 标记：指的是标签，一个超文本就需要一个标签进行链接

HTMl特点：

• 简单性：没有复杂逻辑结构，合理搭配标签就可以搭建网页

• 可扩展性：html标签每种标签都有每种标签用途，新增一种标签就会新增一种用途

• 跨平台：网页运行环境是浏览器，只有设备上有浏览器就是运行网页

• 通用性：网页写好之后，网页可以相互进行嵌套，在浏览器可以正常渲染

网页结构

HTML网页结构

• html文档就是描述网页

• html文档包含了文本和标签

文档结构

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>我的第一个网页</title>
       </head>
       <body>
           欢迎来到蜗牛学苑
       </body>
   </html>

• <!DOCTYPE html>:代表网页的文档类型，申明了浏览器解析网页的解析规则，大小写均可

• <html>：根标签，每个网页有且仅有一个根标签

• <head>:代表了网页的头部，<title>代表网页的标题（内容会显示在浏览器的窗口栏上），<meta charset="utf-8">定义的网页的编码集。

      <!-- 定义网页的关键字 -->
         <meta name="keywords" content="蜗牛学苑,蜗牛创想,IT培训,Java培训,Java开发,Java学习,Web培训,软件测试,成都IT培训,重庆IT培训,西安IT培训,it培训机构,Web,Web前端培训,自动化测试,软件测试培训,软件测试自学">
         <!-- 定义的网页描述 -->
         <meta name="description" content="【蜗牛学苑】高端IT人才培养，0基础0元入学，免积分试听，合同式保障就业，专家面授，项目驱动教学。专注Java全栈开发、软件测试、Web前端开发等课程方向，誓做IT培训界的一股清流。">

  • meta：可以定义网页的关键字和描述，用于搜索引擎收录，有利于SEO优化

• <body>：代表网页的主体，内容区域，body主要用于书写网页的结构代码

!DOCTYPE

h5：既可以采用严格模式，又可以采用混杂模式解析网页

   <!DOCTYPE html>

h4:

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/strict.dtd">

xhtml

   <?xml version="1.0" encoding="utf-8"?>
   <!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

作用：

 1. 声明文档类型
 2. 申明html版本，告诉浏览器采用哪种版本的解析规则解析网页
 3. 决定了浏览器的加载模式，告诉浏览器采用严格模式或者混杂模式解析网页

浏览器的加载模式

• 严格模式（标准模式）：严格按住w3c的规范解析代码

• 混杂模式（兼容模式）：浏览器按照自己的规则解析代码

!DOCTYPE不写

• 如果!DOCTYPE不写或者dtd约束条件不写或错误，浏览器采用兼容模式解析网页

• doctype申明正确并且dtd的约束条件正确时，浏览器采用严格模式解析网页

开发工具

开发工具

• 记事本

  • 编程太麻烦

• Dreamweaver

  • 更新太慢

• webstorm

  • 默认内置了很多插件，很多开发不会用到的插件都安装了，导致电脑出现卡顿

• HBuilder

  • vue推荐一款开发工具，一款小巧的开发工具，一边开发一边看网页效果，也内置一些插件，比较耗内存，启动慢

• vscode——目前市场上比较主流的开发工具

  • 微软开发的一款开发工具，不仅可以开发前端，还可以开发后端，前端需要使用什么插件自己安装，不会安装不用的插件。

插件的安装

• Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code汉化

• Auto Rename Tag：自动补全标签

• HTML CSS Support：在html中支持css提示

• HTML Snippets:自动生成html代码结构，专门针对html代码格式，h5版本的文档结构

• Image preview:可以在代码中显示引入的图片的缩略图

• IntelliSense for CSS class names in HTML:在HTML中显示css的class名的提示

• Live Server:将vscode作为一台服务器，让浏览器进行访问，可以实时更新数据

• open in browser:可以指定浏览器打开网页，需要刷新页面进行更新

文本标签

常用的HTML标签

所有的标签默认是没有样式，默认的样式是浏览器默认添加

文本标签

• 用于组织页面上的文本

标题标签 h1~h6

• 语法：

    <h1>h1标签</h1>
     <h2>h2标签</h2>
     <h3>h3标签</h3>
     <h4>h4标签</h4>
     <h5>h5标签</h5>
     <h6>h6标签</h6>

• 注意：

  • 数字越大，字号越小

  • 默认文本会加粗，默认标签上下有外边距margin

  • 独占一行

  • 优点：有利于搜索引擎收录，利于SEO优化

段落标签 p

• 语法：

    <p>
        文本
    </p>
  

• 注意：

  • 独占一行，默认标签上下有外边距margin

  • 一个段落就是一个p标签

  • p标签不能相互嵌套

span标签

• 用于一些简短的文本或者提示性的信息

• 语法：

   <span>文本</span>
  

• 注意 ：

  • 可以同行显示

label标签

• 语法：

    <label>文本</label>
  
  

• 注意：

  • 可以同行显示

  • label标签有特殊用法，需要配合表单元素一起使用

b/strong

• 用于文本加粗

• 语法：

    <b>文本</b>
    <strong>文本</strong>
  
  

• 注意：

  • 推荐使用strong标签

  • 可以同行显示

em/i

• 斜体

• 语法：

    <em>文本</em>
    <i>文本</i>
  
  

• 注意：

  • 推荐使用i标签

  • 可以同行显示

br

• 换行标签，是一个单标签

• 语法：

    <br>
    等价于
    <br/>
  
  

hr

• 文本中的分割线，是一个单标签

• 语法：

    <hr>
    等价于
    <hr/>
  
  

• 注意：独占一行

图片标签

图片标签 img

• 专门用了引入图片的

• 语法：

    <img  src="需要连接的图片的文件路径"  alt="图片加载失败时显示的解释说明的信息"  title="图片加载成功时鼠标移入显示的内容"   width="设置图片的宽度"   height="设置图片的高度" >
  
  

• 路径：是指目标文件的具体位置

  • 绝对路径：是指目标文件在目录下的具体的位置，直到找到目标文件为止

    在开发中，一般是指以http或https开头的路径或者磁盘盘符的路径

  • 相对路径：是指以某个文件出发找到目标文件的路径

    在开发中，一般是从当前文件出发找到目标文件

    返回上一级：../ 返回多个上一级：多个../

• 注意:

  • 图片设置宽度和高度时，如果只设置其中一个值，图片等比例缩放，如果同时设置两个值，图片可能会被拉伸变形

超链接标签

超链接 a

• 主要用于网页的跳转

• 语法：

  <a href="连接需要跳转的文件路径"   target="新开网页的打开方式" >文本或图片</a>
  
  

  • href：连接的文件路径可以是网络路径（是以http或者https开头的路径），还可以是本地路径（建议使用相对路径）

  • target：设置网页的打开方式

    • _self：默认值，当前窗口打开网页

    • _blank：新开窗口打开网页

• 注意：

  • href=""：刷新

  • href="#"：刷新

  • href="#id名"：锚点，可以指定跳转到网页的指定位置

    • id名是唯一的，同一个网页相同的id名只能出现一次

    • id命名规则：是以数字、字母、_或-构成，不能以数字开头，不能包含特殊的符号

Table标签

表格标签

• 主要用于网页上表格的制作

• 语法：

   创建一个3行3列的表格
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
  
  

  • table:代表表格，一个table就是一个表格

    • border：设置表格的边框的宽度

    • width：设置表格的宽度

    • height：设置表格的高度

    • align：设置表格在页面中对齐方式 left默认值，左对齐 center 居中 right 右对齐

    • bgcolor:设置表格的背景颜色 单词，#十六进制

    • cellspacing:设置表格中单元格与单元格之间的间距（重点）

    • cellpadding:设置表格单元格中内容与单元格边框自己的间距（重点）

  • tr：代表行，一个tr就是一行

    • height:设置整行的高度

    • align：设置整行文本在单元格中内容的对齐方式 left默认值，左对齐 center 居中 right 右对齐

    • bgcolor:设置整行的背景颜色

  • td：代表列，一个td就是一列，一个单元格

    • width：设置单元格的宽度，会影响整列的宽度

    • height：设置单元格的高度，会影响整行的高度

    • align：设置当前单元格中内容的对齐方式 left默认值，左对齐 center 居中 right 右对齐

    • bgcolor：设置当前单元格的背景颜色

• 注意：（重点）

  1. algin设置table上，是控制表格在页面中对齐方式，设置在tr或td控制的是单元格中内容在单元格中的对齐方式

  2. bgcolor设置背景颜色时，优先级：td>tr>table

  3. table里面只能放tr标签，tr标签中只能发td标签

  4. table表格是可以相互嵌套的，不能破坏外层表格的结构，内层表格只能放在外层表格的单元格td中

表格的合并（合并单元格）（重点）

• rowspan：跨行合并单元格，垂直方向上合并单元格

• colspan：跨列合并单元格，水平方向上合并单元格

• 注意：这两个属性写在td标签上，合并几个单元格，属性值就写几

表单组件

表单标签

• 登录注册等需要数据交互的标签

普通输入框

• 语法：

    <input type="text"  placeholder="文本框中提示性信息"    value="设置文本框中默认值">
  
  

密码框

• 语法：

  <input type="password">
  
  

• 注意：密码框输入的内容不可见

单选框

• 语法：

    <input type="radio" name="sex"  id="nan" ><label for="nan">男 </label>
    <input type="radio" name="sex" id="nv"> <label for="nv">女</label>
  
  

• 注意：

  • 单选框需要设置相同的name值进行绑定，才能实现单选的效果

  • label的特殊用法：通过label标签上for属性指定表单元素的id名，通过点击label里面的内容控制指定的表单元素获取焦点

复选框

• 语法：

    爱好：
    <input type="checkbox"  checked>LOL
    <input type="checkbox">吃鸡
    <input type="checkbox">斗地主
  
  

• 注意：

  • 单选框和复选框可以设置checked属性控制默认选中状态

选择文件

    <input type="file">

下拉列表

• 语法：

    <select name="" id="" multiple>
        <option value="">身份证</option>
        <option value="" selected>结婚证</option>
        <option value="">离婚证</option>
    </select>
  
  

• 注意：

  • 一个选项就是一个option标签

  • 下拉列表默认选中第一个选项，可以在option标签上设置selected控制默认选中的选项

  • 下拉列表默认只能选中一个选项，如果需要选中多个，可以在select标签上设置multiple属性

文本域

• 语法：

  <textarea  rows="设置文本域可以显示行数"  cols="设置一行显示的字符数" ></textarea>
  
  

• 注意:

  • rows和cols可以变相的控制文本域的宽度和高度

按钮

• 语法：

   input:
    <input type="button"  value="普通按钮">
    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
    button:
    <button>按钮</button>
    <button type="button">普通按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
  
  

• 注意：

  • 提交和重置按钮需要配合form标签一起使用，才有效果

表单标签

form标签

• 会将form标签中的表单标签的数据提交或重置

• 语法：

    <form  action="提交数据的服务器地址"  method="数据的提交方式">
    </form>
  
  

  • method：设置提交数据的方式

    • get：从服务器获取数据，也有提交数据的功能，数据会显示在浏览器的地址栏

    • post：提交数据给服务器，数据不会显示在浏览器的地址栏

列表标签

列表标签

无序列表ul

• 语法：

    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
    </ul>
  
  

• 注意：

  • ul标签默认上下有16px的外边距margin，有40px的左边内边距padding-left

  • ul、li标签独占一行

  • ul标签里面只能放li标签

• 应用：常用于导航等布局

有序列表 ol

• 语法：

    <ol>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
    </ol>xxxxxxxxxx   <ol>      <li>列表项一</li>      <li>列表项二</li>      <li>列表项三</li>  </ol>  <ol>      <li>列表项一</li>      <li>列表项二</li>      <li>列表项三</li>  </ol>html
  
  

• 注意：

  • ol标签默认上下有16px的外边距margin，有40px的左边内边距padding-left

  • ol、li标签独占一行

  • ol标签里面只能放li标签

定义列表 dl

• 语法：

    <dl>
        <dt>中国</dt>
        <dd>中华人民共和国</dd>
        <dt>可乐</dt>
        <dd>冒着泡泡的肥仔快乐水</dd>
    </dl>
  
  

• 注意：

  • dt：设置需要解释说明的名词

  • dd：针对名词进行解释说明

补充标签

其他标签

div标签

• 没有任何的样式，可以看作布局的容器

• 独占一行

marquee标签

• 跑马灯，内容会从右边进入页面，滚动到左边，从左边消失，无限循环，以后通过动画来实现

• 语法：

  <marquee behavior="" direction="">公告：明天不上课，是真是假？假的</marquee>
  
  

iframe标签

• 可以将网页嵌套进当前的页面中

• 语法：

   <iframe src="需要嵌套的网页的文件路径"  frameborder="1"  width="1000px"  height="500px"></iframe>
  
  

• 注意：

  • src：需要嵌套的网页的文件路径

  • frameborder：设置网页的显示区域的边框

  • 需要设置宽度和高度，显示不下时，会产生滚动条，不建议使用，因为网页的宽高无法确定

del标签

• 删除线标签

• 语法：

   <del>998</del>
  
  

fielset标签

• 带边框和标题的标签

• 语法：

    <!-- 带边框的标签 -->
    <fieldset>
    <legend>登录区域</legend>
        <form action="">
            用户名：<input type="text">
            <br>
            密码：<input type="password">
            <br>
            <button>登录</button>
        </form>
    </fieldset>
  
  

  • legend：设置的是边框上的标题

空格HTML

HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（       ‌‍）在不同浏览器中宽度各异。

&nbsp；

它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，

该空格占据宽度受字体影响明显而强烈。

 

它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，

就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

 

它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，

就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

&thinsp；

它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

‌

叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为（zero width non-joiner，U+200C），HTML字符值引用为‌；

‍

叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个原本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML字符值引用为‍ ‍）;

样式来源 （CSS）

CSS

网页主要由三部分构成：

• HTML：网页的骨架，网页的结构设计

• CSS：网页的样式，用于美化网页，有了css就可以实现像素级的还原

• JavaScript：动态脚本，控制页面中的动态效果、数据交互等

基本概念

• 概念：CSS（Cascading Style Sheets），主要用于控制网页的样式，不能单独使用，它需要作用在HTML

  标签上，控制标签的样式。

• 层叠：css样式可以写在多个地方，首先检查代码中有没有样式，有的话会将内联样式、内部样式、外部样式、浏览器默认的样式、浏览器用户自定义的样式叠加在一起，最新形成一套样式，相同的属性的样式层叠掉，不同的属性的样式直接作用在标签上。

• 样式表：指的是css样式代码，页面上通过css编写的代码渲染的样式。页面中通过标签上style属性书写的样式、在style标签中书写的样式代码，在外部css文件中书写的css代码。

网页中样式的来源

所有的标签默认都没有样式

浏览器默认的样式

• h标签、p标签等默认没有任何样式，浏览器在渲染页面时，默认给不同的标签添加不同的样式

浏览器用户自定义的样式

• 浏览器默认给每个标签添加样式，还提供了用户可以自己更改对应的一些样式，比如，字号，字体样式等

内联样式

• 通过在标签上添加style属性，在属性值中书写css样式代码

• 语法：

  <p  style="css属性名1:css属性值1;css属性名2:css属性值2; css属性名3:css属性值3;">文本</p>
  

• 注意：每个html标签上都有一个style属性

• 好处：

  • 哪儿需要添加在哪个标签上即可

• 缺点：

  • 多个标签需要设置相同的样式时，需要重复添加

内部样式

• 通过在head标签中，添加style标签，在style标签中通过选择器来书写css代码

• 语法：

    <head>
        <style>
            选择器{
                css属性名1:css属性值1;
                css属性名2:css属性值2;
                css属性名3:css属性值3;
            }
        </style>
    </head>
  

• 好处：

  • 结构代码和样式分离

  • 结构代码更加清晰，便于后期维护

  • 多个标签使用相同的样式时，可以提取公共样式，可以同时设置多个标签的样式

• 缺点：

  • 结构代码和样式没有完全分离

外部样式

• 先创建一个后缀名为.css的文件，在css文件中通过选择器书写代码，再在head标签中通过link标签引入的css文件

• 语法：

    <link rel="stylesheet" href="需要引入的css文件的文件路径">
  

• 好处：

  • 结构代码和样式代码完全分离

  • 便于后期维护，维护根据方便，一处改处处改

  • 以后我们可以将css文件进行压缩，减少文件的体积，优化网页

注意：

• 相同选择器时，优先级：内联样式的优先级（权重）最高，内部和外部样式采用的就近原则，离标签最近的优先作用

• 同一个标签上作用相同的css样式时，后面的样式盖住前面的样式

选择器

• 用来找到页面中满足条件的标签，作用的css样式

标签选择器

• 通过标签名找到满足条件的标签，默认找到页面中所有的标签

• 语法：

  法：
  
    标签名{
        css属性名1:css属性值1;
        css属性名2:css属性值2;
        css属性名3:css属性值3;
    }
  

选择器语法

选择器

• 用来找到页面中满足条件的标签，作用的css样式

标签选择器

• 通过标签名找到满足条件的标签，默认找到页面中所有的标签

• 语法：

   标签名{
        css属性名1:css属性值1;
        css属性名2:css属性值2;
        css属性名3:css属性值3;
    }
  

类选择器（class选择器）

• 通过标签上的class名找到满足条件的标签

• class可以重复，多个标签可以使用同一个class名，可以用于提取公共样式

• 同一个标签上，可以设置多个class名，中间使用空格隔开

• 语法：

    .class名{
        css属性名1:css属性值1;
        css属性名2:css属性值2;
        css属性名3:css属性值3;
    }
  

• 注意：

  • 选择器可以组合在一起使用，中间没有空格，代表并且的意思

      找到标签上的class名中既有aa又有bb的标签作用样式
      .aa.bb{
          css样式代码
      }
    

id选择器

• 通过标签上的id名找到对应的标签

• id是唯一的，一个页面同名的id只有一个，id选择器只能找到页面中的一个标签

• id命名规则：

  • 是以数字、字母、_和-构成

  • 不能以数字开头，不能包含特殊的符号

• 语法：

    #id名{
        css属性名1:css属性值1;
        css属性名2:css属性值2;
        css属性名3:css属性值3;
    }
  

• 注意：id是唯一的，以后的js会通过id名来找到页面中标签，id选择器慎用。

优先级（权重大小）

• 相同的选择器（相同权重）时，内联的权重最大，内部和外部样式采用就近原则，离标签最近的样式优先作用

• 相同选择器时，后面的样式会盖住前面的

• 不同选择器时，优先级：id选择器>类选择器>标签选择器

背景样式

背景样式

• background-color：设置背景颜色

  • 颜色单词

  • #十六进制 #FF0011 FF代表rgb中red，00代表rgb的green，11代表rgb中blue

  • rgb(0~255,0~255,0~255)

  • rgba(0~255,0~255,0~255,0-1)（颜色透明） 引申一下：整体透明度用 opacity:value写法，value取值为0-1 。

• background-image:设置背景图片

    background-image: url(背景图片的文件路径);
  

  • 如果背景颜色和背景图片同时设置，背景图片会盖住背景颜色

• background-repeat：设置背景图片是否平铺

  • repeat：默认值，沿着x轴和y轴都平铺

  • repeat-x：沿着x轴进行平铺

  • repeat-y：沿着y轴进行平铺

  • no-repeat：不平铺

  • 应用：像比较规则的渐变背景，可以使用1px的渐变背景平铺，减少图片的体积，优化网页

• background-size：设置背景图片的大小

  • contain：宽度和高度铺满一边，另一边不管

  • cover：两边都铺满，超出部分隐藏

  • 宽度 高度
    

    宽度 高度：如果只设置一个值，代表宽度，高度等比例缩放

    • 像素

    • 百分比：参考当前盒子的宽度和高度

• background-position：设置背景图片的显示位置

    background-position:x轴 y轴;
  

  • 方位单词：两两搭配使用

    left（左）、right（右）、center（居中）、top（上）、bottom（下）

  • 像素：0px 0px相当于左上角

  • 百分比：50% 50%相当于center center

    • 注意：默认是参考的当前盒子的宽高，如果一旦设置了背景图片固定，那么参考的是整个显示区域

• background-attachment:设置背景图片是否固定在页面上

  • scroll：默认值，随着滚动条滚动

  • fixed：固定在页面上

• background:复合属性

     background: pink url(img/img-3.jpg) no-repeat 100px 100px /50px 50px;  /前面代表显示位置，/后面代表背景图片的大小
  

  • 注意：设置两个值代表背景图片的显示位置，如果需要设置背景图片的大小，需要使用/将两组值分隔开，/前面代表显示位置，/后面代表背景图片的大小

雪碧图实现

雪碧图实现

• 概念:将多张图片有序地组合在一起，形成一张图片，可以减少请求服务器的次数，优化网页

• 原理：通过background-image引入雪碧图，再通过background-position调整背景图片的显示位置

• 步骤：

  1. 创建一个标签，设置宽高，宽高刚好是需要显示的图标的大小

  2. 通过background-image引入背景图片（雪碧图）

  3. 使用background-position调整雪碧图的显示位置

• 注意：在开发中，x轴的正方向是水平向右，y轴的正方向垂直向下

文本样式

文本样式

• color：设置文本的颜色

  • 单词

• 十六进制

• rgb(0~255,0~255,0~255)

  • text-align：设置文本的对齐方式

    • left：左对齐

    • center：居中对齐

    • right：右对齐

    • 注意：设置在标签上可以控制文本的对齐方式，也可以控制标签中行级元素的对齐方式

  • line-height：设置行高

    • 像素

    • 百分比或数字：参考的是当前标签的字体大小 font-size

    • 注意：针对单行文本的水平垂直居中，设置text-align:center;和line-height:盒子的高度;

  • text-decoration:设置文本的修饰

    • none：无，可以用于取消a标签的下划线

    • underline：下划线

    • line-through：中划线，删除线

    • overline:上划线

  • letter-spacing：设置字符间距，一个中文就是一个字符，一个英文字母就是一个字符

  • word-spacing：设置字间距，以空格来区分

  • text-transform：设置字母的大小写

    • none:默认值，无

    • capitalize: 首字母大写

    • uppercase:全大写

    • lowercase:全小写

  • text-indent：设置首行的缩进

字体样式

字体样式

• font-family：设置字体类型

  • 注意：

    • 可以设置多种字体，中间使用逗号隔开，浏览器先在系统中找第一种字体，如果有直接作用，如果没有找第二种字体，依次类推，直到找到最后一种字体。一般最后的serif字体或者其他字体都是通用字体

    • 多种字体风格比较类似，为了保证页面效果

    • 字体名称如果是中文或者多个英文单词，需要使用引号包裹

• font-size：设置字体大小，值越大，字号越大

• font-weight：设置字体的粗细

  • 100~900：数字越大，加粗效果越好，不能带单位

  • normal:默认值，正常

  • lighter：更细

  • bold：加粗

  • bolder：更粗

• font-style：设置字体的风格

  • normal:默认值，正常

  • italic：斜体

  • oblique:倾斜

字体引用技术

• 在网页中引用自己的的字体文件

• 语法：

    @font-face{
        font-family:字体的名称;
        src: url(引入的字体文件格式1的文件路径) , url(引入的字体文件格式2的文件路径)   ;
    }
    div{
        font-family: 字体的名称;
    }
  

• 注意：

  • 一个@font-face只能引入一种字体

  • 为了解决不同浏览器对字体文件格式的兼容问题，可以引入多种文件格式，中间使用逗号隔开

行和块分类

行和块分类

行内标签

• 一般用于组织页面中文本等信息

• 特点：

  • 可以同行显示，排列不下就会换行显示

  • 不支持宽高，由内容撑开

• 常见的标签：span，label，a，b/strong，i/em等

行内块级标签

• 介于行内元素和块级元素之间，既有行内元素的特点，又有块级元素的一些特点

• 特点：

  • 可以同行显示，排列不下就会换行显示

  • 支持宽高

• 常见的标签：img、input（text），button，td等

• 注意：行内块级元素之间存在5px的间距

块级标签

• 一般用于页面布局或者组织行级标签

• 特点：

  • 独占一行

  • 支持宽高

• 常见的标签：h，p，table，tr，ul，ol，li，div等

相互转换

• 通过display属性可以实现相互转换

• 取值：

  • display:inline;：转为行内元素

  • display:inline-block;：转为行内块级元素

  • display:block;：转为块级元素

  • dispaly:none;：隐藏元素，页面进行重新绘制

超链接

超链接

• 给超链接添加样式

• 语法：

  /* 向未被访问过的超链接添加样式 */
    a:link {
        color: green;
    }
    /* 向访问过的超链接添加样式 */
    a:visited {
        color: yellow;
    }
    /* 向鼠标悬停的超链接添加样式 */
    /* :hover必须放在:link和:visited之后 */
    a:hover {
        color: red;
    }
    /* 向获取焦点的超链接添加样式 */
    /* :active必须放在:hover之后 */
    a:active {
        color: blue;
    }
  

• 注意：:hover必须放在:link和:visited之后，:active必须放在:hover之后，顺序：link-visited-hover-active（L-V-H-A）

列表样式

列表样式

• 设置列表项的标志的效果

• 属性：

  • list-style-type：设置列表项标志的类型

    • none:无

  • list-style-position:设置列表项标志的显示位置

    • outside：默认值，标志显示在li标签内容之外

    • inside：标志现在li标签内容区域里面

  • list-style-image：设置图片作为列表项标志，该图片不能通过css来控制大小，只能通过图像软件更改原图的大小，不建议使用

  • list-style：复合属性

    • list-style:none;取消列表项的标志

• 注意：可以在ul或ol标签上，设置list-style属性，li标签上可以自动继承来使用

表格样式

将以下代码设置在table标签中

• border-collapse:collapse；:将表格边框合并为一（推荐使用）

• boder-spacing；:设置单元格与单元格之间的间距

• border-spacing: 设置单元格与单元格之间的间距

字体图标设计

字体图标

• 图标是以字体的形成显示，可以使用css字体相关的属性进行控制

• 设计师在设计字体时，字体是以图标的形状进行设计

• font awesome官网：Font Awesome，一套绝佳的图标字体库和CSS框架

• font awesome是通过设置不同的class名来使用不同的图标，图标是矢量图

网页优化的方案

1. 合理使用图片格式，可以减少图片的体积，优化网页

2. 使用雪碧图技术，减少请求服务器的次数，优化网页

3. 1px渐变背景平铺，可以减少图片的体积，优化网页

4. 使用外部样式，可以将css文件进行压缩，减少文件的体积，优化网页

5. 使用字体图标也可以优化网页

标准盒模型

准盒模型

标准盒模型

上图就是一个盒模型：

• content：代表内容区域，存放内容 的空间，存放文本或者其他的盒子

• padding：内边距，内容到边框之间的间距，相当于快递中泡沫

• border：盒子的边框，四周边框可以分别设置

• margin：盒子的外边距，盒子与盒子之间的间距（兄弟关系、父子关系）

边框

边框 border

• 设置盒子四周的边框

• 语法：

    边框三要素：
    border-方位-width: 宽度;
    border-方位-style: 类型;
    border-方位-color: 颜色;
    复合属性：
    设置一条边框：
    border-方位: 宽度  类型  颜色;
    同时设置四条边框的样式：
    border：宽度  类型  颜色;
  虚线：dashed
  

• 注意：

  • 边框在设置时至少设置两个值，宽度和类型，默认颜色为黑色

• 设置边框会撑大盒子，会改变盒子的大小

  • 边框的渲染原理：如果只设置一条边框，显示为矩形形状，如果设置了相邻的边框，相接的部分是沿着对角线均分

内边距

内边距padding

• 设置内容到边框之间的间距

• 语法：

    分别设置四周的内边距：
    padding-left
    padding-right
    padding-top
    padding-bottom
    复合属性：
    padding
    一个值：上下左右
    两个值：上下   左右
    三个值：上    左右    下
    四个值：上   右   下   左
  

• 注意：

  • padding会撑大盒子，会更改盒子的大小

  • 默认会添加背景的颜色，padding去会填充背景颜色

• 应用：

  • 可以使用padding撑大盒子，让内容居中

  • 设置内容到边框的显示位置

外边距

外边距margin

• 设置盒子与盒子之间的间距

• 语法：

    分别设置四周的外边距：
    margin-left
    margin-right
    margin-top
    margin-bottom
    复合属性：
    margin
    一个值：上下左右
    两个值：上下   左右
    三个值：上    左右    下
    四个值：上   右   下   左
  

margin重叠性

• 盒子与盒子之间是兄弟关系时，margin在垂直方向会发生重叠，以值大的为准

• 注意：水平方向的margin是叠加在一起，值相加

margin-top传递性

• 盒子与盒子之间是父子关系，子元素设置margin-top后，会传递给父元素显示

• 原因：子元素设置margin-top时会去找父元素的边界（参考位置），找不到父元素的边界就会传递父元素显示

• 解决方案

  • 给父元素设置border，会改变父元素的盒子的大小

  • 给父元素设置padding，会改变父元素盒子的大小

  • 给父元素设置overflow:hidden;

    • overflow:hidden;: 盒子中内容溢出隐藏掉，设置了该属性后，会产生一个BFC容器，该容器里面的元素不会影响盒子外面的元素的排列

IE盒模型

怪异盒盒模型

又称为ie盒模型，css中设置width包含了content+padding+border

目前浏览器默认都是标准盒模型，需要使用怪异盒模型，需要转化

盒模型转化：box-sizing

• border-box：设置为怪异盒模型

• content-box：默认值，设置为标准盒模型

怪异盒子大小的计算

真正的大小的计算

• 宽度 = width（包含了content+ padding+border）

• 高度 = height（包含了content+padding+border）

所占空间的大小的计算

• 宽度 = width（包含了content+ padding+border）+ margin * 2（左右）

• 高度 = height（包含了content+padding+border）+ margin * 2（上下）

IE盒模型-拓展知识

拓展

margin:0 auto；

• 让块级元素在父标签中水平居中

• 设置上下为0，左右为auto

• auto：代表自适应的意思，可以将父盒子水平方向的剩余空间均分子元素的左右两边

padding&margin设置百分比

• padding&margin设置百分比时，无论设置哪个方向的百分比，都是参考父元素的宽度

组合选择器

选择器

css主要由两部分构成：

1. 选择器：通过选择器去找到页面中的标签

2. css样式（多个css样式中间使用分号隔开）

对于选择器来说，我们丰富选择器的写法，种类非常多，能够更加的精确找到页面中标签

选择器

注意：选择器只能从父标签找到子标签，或者从前面的标签找到后面的标签（从外到内，或从前到后找标签）

id选择器

• 通过标签上的id名找到满足条件的标签

• 语法：

    #id名{
        css代码
    }
  

• 注意：id是唯一，只能找到页面中唯一的一个标签，以后js会通过id控制页面中标签，id选择器慎用

类选择器

• 又称为class选择器，通过标签上的class名找到满足条件的标签

• 一般用于提取公共样式，作用在不同的标签

• 语法：

    .class名{
        css代码
    }
  

标签选择器

• 通过标签名找到满足条件的标签，如果没有规定范围时，默认会找到页面中所有满足条件的标签

• 语法：

    标签名{
        css代码
    }
  

后代选择器（派生选择器）

• 通过找到指定标签里面所有满足条件的后代的标签，可以找到儿子、孙子、重孙子…

• 中间使用空格隔开

• 语法：

    找到class名为box1的标签里面的所有后代div标签
    .box1  div{
    }
  

子元素选择器

• 找到指定标签里面满足条件的直接子标签，只找儿子，不找孙子、重孙子…

• 中间使用>隔开

• 语法：

    找到class名为box1里面的直接子元素div标签
    .box1>div{
    }
  

兄弟选择器

相邻兄弟选择器

• 找到满足条件的标签后面相邻的第一个满足条件的兄弟标签

• 中间使用+隔开

• 语法：

    找到class名为box的标签后面相邻的第一个兄弟标签
    .box+p{
    }
  

后续兄弟选择器

• 找到满足条件的标签后面所有的满足条件的兄弟标签

• 中间使用~隔开

• 语法：

    找到class名为box的标签后面所有的兄弟p标签
    .box ~ p{ 
    }
  

选择器分组

• 中间使用逗号隔开，逗号前后的选择器找到对应的标签分别作用一次css样式

• 语法：

    p{
        color:red;
    }
    span{
        color:red;
    }
    label{
        color:red;
    }
    等价于
    p , span , label{
        color:red;
    }
  

属性选择器

属性选择器

• 根据标签上属性名及属性值找到满足条件的标签

选择器	描述
[属性名]	用于选取带有指定属性的元素。
[属性名=属性值]	用于选取带有指定属性和值的元素。（精确匹配）
[属性名*=属性值]	匹配属性值中包含指定值的某个元素。（模糊匹配）
[属性名~=属性值]	用于选取属性值中包含指定词汇的元素。
[属性名^=属性值]	匹配属性值以指定值开头的每个元素。
[属性名$=属性值]	匹配属性值以指定值结尾的每个元素。

[属性名|=属性值] ： 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

• 属性选择器一般用于提取公共样式

伪类选择器

伪类选择器

• 给标签添加一些功能性的效果

选择器	描述
:link	向未被访问过的超链接添加样式
:visited	向访问过的超链接添加样式
:hover	向鼠标悬停的标签添加样式
:active	向被激活的标签添加样式
:focus	向拥有键盘输入焦点的标签添加样式

• 注意：

  • :hover必须放在:link和:visited之后，:active必须放在:hover之后，才有效果

  • outline：设置边框外面的一圈轮廓线，使用方式border一样

    outline: 宽度   类型  颜色;
      取消input获取键盘输入焦点时默认样式
      input:focus{
          outline: none;
      }
    

//sass中hover案例：hover   .header-right2后.info显示
.header-right2 {
        &:hover .info{
          display: block;
        }
        .info {
          display: none;
        }
        
     }

伪元素选择器

伪元素选择器

• 概念：可以在HTML标签中通过css代码添加一块渲染区域，该区域可以设置样式

选择器	描述
::first-letter	找到指定的标签中的第一个字符添加样式
::first-line	找到指定标签中的第一行添加样式
::selection	向鼠标选中的区域添加样式
::before	在指定的标签的内容之前添加的一块渲染区域
::after	在指定的标签的内容之后添加一块渲染区域

• 注意：

  • ::before和::after都必须搭配content:"";一起使用

  • ::before和::after渲染出来的是一个行内元素，如果需要设置宽高，需要转化为行内块级元素或块级元素

  • 可以::before和::after来渲染三角形

通配符选择器

• 找到页面中所有的标签添加样式

• 语法：

    *{
        css代码
    }
  

选择器权重

选择器分类

• 基础选择器：id选择器、类选择器、标签选择器、属性选择器、伪类选择器、伪元素选择器、通配符选择器

• 组合选择器：后代选择器、子元素选择器、相邻兄弟选择器、后续兄弟选择器

选择器权重（优先级问题）

• 在相同的选择器下，内联的权重最大，内部和外部采用就近原则

• 基础选择器：id选择器 > 类选择器（属性选择器） > 标签选择器 > 通配符选择器 > 继承的样式

• 组合选择器的权重需要将所有的基础选择器的权重加起来一起比较

选择器权重的计算方法

加法运算

• 内联样式默认为1000

• id选择器默认权重为100

• 类（属性）选择器默认权重为10

• 标签选择器默认权重为1

  将所有的标签的权重进行相加，比较权重值的大小，值大的权重越高，如果权重值一样，后面的盖住前面

  注意：不满足满10进1的规则，十几个标签选择器都没有一个类选择器的权重高

4个0

（0,0,0,0）

• 第一个0代表是否有内联样式，有则为1，无则为0

• 第二个0代表id选择器的个数

• 第三个0代表类（属性）选择器的个数

• 第四个0代表标签选择器的个数

  计算出每种选择器的个数，从第一个0开始对比，值大的权重最大，值相同，对比第二个0，依次类推，如果最后一个0页相同，说明选择器权重值一样，后面样式盖住前面的样式。

拓展：

!important：比较暴力，会将css样式直接作用标签上，无视选择器的权重大小，比内联样式的权重都大，在开发中尽量少用，权重值的规则被破坏了，用多了样式没有规律，计算权重值失效，后期维护起来比较麻烦

• 语法：

   div{
        /* !important 比较暴力，会将css样式直接作用在标签上，无视选择器的权重 */
        color: blue !important;
    }
  

样式继承

CSS继承

继承的概念更多出现在编程语言中，js学习继承

css的继承是指子标签可以从父标签上将css样式继承过来，css样式可以作用在子标签上

CSS的继承分为两类：

• 自动继承：子元素不需要任何的操作，可以从父元素上继承css样式

• 手动继承：子元素需要敲代码，指定子元素某个属性从父元素上继承样式

  inherit:可以控制子元素的属性从父元素上继承该属性的值

  margin: inherit;
  

哪些属性可以被自动继承

• 文本样式可以被自动继承

  • color：设置文本颜色

  • text-align：设置文本的对齐方式

  • line-height：设置行高

  • text-decoration：设置文本修饰

  • letter-spacing:设置字符间距

  • word-spacing:设置字间距

  • text-indent:设置首行缩进

  • text-transform：设置大小写

• font系列的字体样式也可以被自动继承

  • font-size:设置字体的大小

  • font-family：设置字体的类型

  • font-weight:设置字体的粗细

  • font-style：设置字体的风格

• list-style属性，li标签可以从ul或ol标签上自动继承

• cursor鼠标样式可以自动继承 pointer 抓手，(cursor: pointer;可以修改鼠标为手指)

哪些属性不可以被自动继承

• width、height、margin、padding、background、border等等

浮动特点

块级元素同行显示

1. display:inline-block

   • 可以让块级元素同行显示，存在兼容问题

   • 盒子之间存在5px的间距

2. 浮动

浮动

• 可以让元素同行显示，排列不下会自动换行显示，不存在兼容问题

• 语法：

    float:left | right | none；
  

  • left：设置左浮动

  • right：设置右浮动

  • none：默认值，不浮动

• 特点：

  • 可以让元素同行显示，排列不下时会自动换行显示，不存在兼容问题

  • 浮动元素会脱离文档里，在标准文档流之上

  • 浮动元素不再占用原来的空间

  • 行内元素设置浮动后，行内元素支持宽高

• 注意：

  • 多个元素同时设置浮动时，后面浮动的元素会找到前面浮动元素的边界或第一个浮动元素找到父元素浮动的边界就停止下来

  • 只有设置了浮动的元素才可以同行显示，

  • 块级元素没设置宽度时，如果设置浮动，块级元素的宽度由内容决定

标准文档流

• 在页面布局过程中，页面中元素会按照从上到下，从左到右，块级元素独占一行，行级元素共享一行的排列规范

脱离文档流

• 在页面布局过程中个，元素不再遵循标准文档流的规范，按照自己的排列规范进行排列

清除浮动

浮动元素对非浮动元素的影响

• 非浮动的元素会挤占浮动元素原来的空间

• 非浮动元素中如果有文本，文本会被浮动元素挤开

  • 实现图文混排

      <style>
          img{
          float:left;
          }
      </style>
      <img src="引入图片">
      <p>
          文本
      </p>
    

• 子元素浮动时，父元素高度会塌陷

清除浮动

• 清除浮动元素对非浮动元素的影响

• 语法：

    clear: left | right | both;
  

  • left：清除左浮动的影响

  • right：清除右浮动的影响

  • both：清除左浮动和右浮动的影响

清除浮动的方法

1. 给受影响的元素添加clear样式

2. 使用<br clear="all">将浮动元素和非浮动元素隔开

3. 使用空白的div添加clear:both;将浮动元素和非浮动元素隔开

4. 给父元素添加伪元素选择器可以清除浮动的影响(推荐使用)

    .clearfix::after{
        content: "";
        clear: both;
        display: block;
    }
   

注意：overflow:hidden：可以解决子元素浮动，父元素高度塌陷的问题，借助是BFC容器的特点，不是清除浮动的方法

定位

如何让盒子移动到指定的位置

• margin-top设置负值

  • 会破坏文档流进行移动，移动完成之后会回到标准文档流之中

  • 应用：内容和前面部分重叠

• 定位

  • 是css提出一个比较重要的概念，可以让盒子按照指定的方向进行移动

标准文档流

• 在页面布局过程中，元素默认按照从上到下，从左到右，块级元素独占一行，行级元素共享一行的排列规范

脱离文档流

• 在页面布局过程中，元素不再遵循标准文档流的规范，按照自己的排列规范进行排列

破坏文档流

• 在页面布局过程中，元素在移动过程中不遵循标准文档流的规范，移动完成之后仍然在标准文档流之中

定位

静态定位

相对定位

绝对定位

固定定位

粘性定位

相对定位

相对定位

• 概念：元素参考原来的位置，按照指定的方向进行移动

• 语法：

    position: relative；
    top: ;
    bottom:;
    left:;
    right:;
  

• 定义偏移量：可以设置正值或负值

  • top：设置盒子与参考位置上边缘的距离

  • bottom：设置盒子与参考位置下边缘的距离

  • left：设置盒子与参考位置左边缘的距离

  • right：设置盒子与参考位置右边缘的距离

• 特点：

  • 设置了相对定位的元素，不会脱离文档流，会破坏文档流进行移动

  • 原来的空间还在

  • 只设置相对定位的元素，元素没有任何变化，一旦设置了偏移量，元素参考原来的位置进行移动

• 注意：

  • 子元素设置相对定位，如果父元素进行了移动，子元素会跟着移动，原因在于：父元素进行移动后，子元素原来的位置也会跟着移动，而相对定位的元素是参加原来的位置进行移动的，所以也会跟着移动

  • 相对定位一般不会单独使用，一般会配合绝对定位一起使用

绝对定位

绝对定位

• 设置绝对定位的元素会默认参考整个文档进行移动，按照指定的方向进行移动

• 语法：

    position: absolute;
  

• 设置偏移量：可以正值也可以负值

  • top：设置盒子与参考位置上边缘的距离

  • bottom：设置盒子与参考位置下边缘的距离

  • left：设置盒子与参考位置左边缘的距离

  • right：设置盒子与参考位置右边缘的距离

• 特点：

  • 绝对定位的元素会脱离文档流，在标准文档流之上

  • 原来的空间不存在

  • 只设置绝对定位的元素，只在当前位置脱离文档流，一旦设置偏移量，绝对定位的元素默认是参考整个文档进行移动或者参考最近的定位父级进行移动

• 注意：

  • 后面绝对定位的元素会盖住前面定位的元素

  • 行内元素设置绝对定位后，行内元素支持宽高

结构父级

• 标签在html代码结构中的父元素

定位父级

• 绝对定位的元素参考某个满足条件的父级标签进行移动，这个父元素就是定位父级，父级标签可以设置相对定位、绝对定位、固定定位作为定位父级

• 注意：

  • 可以设置相对定位、绝对定位、固定定位作为绝对定位的定位父级，但是一般会采用相对定位（子绝父相）

  • 多个定位父级时，绝对定位的元素是参考最近的定位父级进行移动

  • 定位父级可以父亲、爷爷、曾祖父…..

固定定位

固定定位

• 概念：固定定位的元素可以固定在页面上，不会随着滚动条而滚动

• 语法：

    position:fixed;
  

• 设置偏移量：可以正值也可以负值

  • top：设置盒子与参考位置上边缘的距离

  • bottom：设置盒子与参考位置下边缘的距离

  • left：设置盒子与参考位置左边缘的距离

  • right：设置盒子与参考位置右边缘的距离

• 特点：

  • 固定定位的元素会脱离文档流，在标准文档流之上

  • 原来的位置不再占用

  • 只设置固定定位的元素，元素会在当前位置脱离文档流，会固定页面上，不会随着滚动条而滚动，一旦设置了偏移量，固定定位的元素会参考整个文档进行移动

z-index

• 设置定位元素（相对定位、绝对定位、固定定位）的层级关系，显示的顺序

• 语法：

    z-index: 数字;
  

  • 所有元素相当于默认为0，数字越大，定位层级越高，会显示在上方，数字相同时，按照代码结构显示顺序依次显示

• 注意：

  • 相对定位、绝对定位、固定定位的元素默认后面定位的元素会盖住前面定位的元素

  • z-index只针对与相对定位、绝对定位、固定定位的元素才有效

拓展：绝对定位元素宽度设置百分比

• 没有设置绝对定位的元素的宽度设置百分比时，宽度是参考结构父级的宽度

• 设置绝对定位的元素，宽度设置百分比时，绝对定位的元素的宽度默认是参考整个文档的宽度，如果设置了定位父级，参考最近的定位父级的宽度

粘性定位

粘性定位position: sticky可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如:

.sticky-header {
  position: sticky;
  top: 10px; 
}

在 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到视口回滚到阈值以下。

粘性定位常作用在导航和概览信息(标题，表头，操作栏，底部评论等)上。这样，用户在浏览详细信息时，也能看到信息的概览和做一些操作，给用户带来便捷的使用体验。

粘性定位看着很简单，但也很容易出现不生效的情况。为帮助大家彻底理解粘性定位，本文会从 3 个方面来介绍：

• 粘性定位的原理。

• 不生效的情况。

• 具体的例子。

原理

为便于理解粘性定位，这里引入四个元素：视口元素，容器元素，粘性约束元素 和 sticky 元素。它们的关系如下：

视口元素：显示内容的区域。会设置宽，高。一般会设置 overflow:hidden。 容器元素：离 sticky 元素最近的能滚动的祖先元素。 粘性约束元素：粘性定位的父元素。有时，也会出现粘性约束元素就是容器元素的情况。 sticky 元素：设置了 position: sticky; 的元素。

滚动时，sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时，sticky 元素也会滚出视口。

不生效的情况

情况1: 未指定 top, right, top 和 bottom 中的任何一个值

此时，设置 position: sticky 相当于设置 position: relative。

要生效，要指定 top, right, top 或 bottom 中的任何一个值。

情况2: 垂直滚动时，粘性约束元素高度小于等于 sticky 元素高度

不生效的原因：当粘性约束元素滚出视口时，sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小，sticky 元素没有显示固定定位状态的机会。

同样的，水平滚动时，粘性约束元素宽度小于等于 sticky 元素宽度时，也不会生效。

情况3: 粘性约束元素和容器元素之间存在 overflow: hidden 的元素

该情况的示例代码:

<div class="viewport">
  <div class="container"> <!-- 容器元素 -->
    <div style="overflow: hidden">
      <div> <!-- 粘性约束元素 -->
        <div class="stick-elem">...</div>  <!-- sticky 元素 -->
        ...
      </div>
    </div>
  </div>
</div>

要生效，要把 overflow: hidden 的元素移除。

具体的例子

例子1: 页面滚动

这个例子，我们来实现页面滚动到文章内容时，文章标题吸顶的效果。

HTML 结构如下：

<div class="header">网站头部</div>
<!-- 粘性约束元素 -->
<div class="article">
  <!-- sticky 元素 -->
  <h2 class="title">彻底理解粘性定位 - position: sticky</h2>
  <div class="content">...</div>
</div>
<div class="footer">网站底部</div>

在这个例子中，视口元素和容器元素都是 body。sticky 元素是 .title，因此只要在 sticky 元素上设置如下样式即可:

.title {
  position: sticky;
  top: 0;
  background-color: #fff;
}

例子2: 文章列表

这个例子，我们来实现一块区域下有多篇文章，区域滚动到文章内容时，对应的标题和操作按钮吸顶的效果。

HTML 结构如下：

<!-- 视口元素 -->
<div class="viewport">
  <!-- 容器元素 -->
  <div class="container">
    <!-- 文章:粘性约束元素 -->
    <div class="article">
      <div class="sticky-header">
        <h2>彻底理解粘性定位 - position: sticky</h2>
        <div class="options">
          <button>转发</button>
          <button>点赞</button>
        </div>
      </div>
      <div class="article-content">...</div>
  </div>
  <!-- 文章 -->
  <div class="article">...</div>
  <div class="article">...</div>
</div>

在这个例子中，视口元素是 .viewport，容器元素是 .container。sticky 元素是 .sticky-header。核心样式如下:

/* 视口元素 */
.viewport {
  width: 50%;
  overflow: hidden;
  height: 200px;
}
/* 容器元素 */
.container {
  overflow: auto;
  height: 100%;
}
/* 粘性约束元素 */
.article {
  margin-bottom: 10px;
}
/* sticky 元素 */
.sticky-header {
  position: sticky;
  top: 0;
  padding: 5px 0;
  background-color:#fff;
}

例子3: 甘特图

最后，我们来做个复杂点的例子：甘特图。如下图所示：

需要实现：

• 左侧事项菜单总在最左侧。

• 菜单的头部和时间轴吸顶。

• 时间轴的年总在月的最左边。

实现代码有点多，就不在这里贴了。获取完整源码，关注公众号: 前端GOGOGO，回复: 粘性定位。

BFC基础

FC

FC

FC(Formatting Context)：格式化上下文。它是css 2.1提出一个视觉渲染的概念。

它是页面中一块渲染区域，并且有一套渲染规则，它决定了其子元素如何排列，和其他的元素相关之间的关系。

BFC和IFC是常见的FC。分别叫做Block Formatting Contexr 和 Inline Formatting Context。

BFC

Block Formatting Context ：块级格式化上下文

它是指页面上的一块渲染区域，它有自己的渲染规则，它其实就是页面中一个标签，标签不一定是块级标签，它只有满足条件，它就是一个BFC区域，决定了BFC的内部的HTML标签如何进行排列以及不同的BFC区域如何进行显示。

BFC区域的特点

1. 内部的Box会在垂直方向，一个接一个地放置。（标准文档流）

2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

   • 如果说不想让垂直方向上的margin发生重叠，我们可以形成一个新的BFC区域

3. 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。

4. BFC的区域不会与float box重叠。

   • 利于这点，可以实现非浮动元素（BFC）和浮动元素同行显示，可以实现三列布局

5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6. 计算BFC的高度时，浮动元素也参与计算

   • 可以解决子元素浮动父元素高度塌陷的问题

如何成为BFC容器（如何升级为BFC）

1. 根标签（html标签就是一个BFC容器）

2. float不为none

3. position为absolute或fixed

4. display为inline-block、table-cell、table-caption、flex（弹性盒子）

5. overflow不为visible;

BFC应用场景

应用场景

场景一：

每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素形成一个新的BFC区域

场景二：

BFC的区域不会与float box重叠。

• 实现三列自适应布局：左右两边固定宽度，中间自适应

ss:
<style>
    /* BFC的区域不会与float box重叠。 */
    .container{
        width: 100%;
        height: 500px;
        border: 1px solid red;
    }
    .left{
        width: 200px;
        height: 200px;
        background-color: pink;
        float: left;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: tomato;
        float: right;
    }
    .center{
        height: 400px;
        background-color: orange;
        /* 设置为BFC */
        overflow: hidden;
    }
</style>
html:
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">center</div>
</div>

场景三：

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

• margin重叠性问题解决方案：将其中给一个盒子放进一个新的BFC容器中

html:
<div class="box1"></div>
<!-- 形成一个新的BFC区域 -->
<div class="container">
    <div class="box2"></div>
</div>
css:
<style>
    /* Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 */
    /* 属于不同的BFC区域就不会发生margin的重叠 */
    .box1{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-bottom: 50px;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: tomato;
        margin-top: 80px;
    }
    .container{
        /* 设置为BFC容器 */
        /* overflow: hidden; */
        /* float: left; */
        /* position: absolute; */
        position: fixed;
    }
</style>

场景四：

计算BFC的高度时，浮动元素也参与计算

• 用来解决子元素浮动，父元素高度塌陷

IFC基础

IFC

IFC(Inline Formatting Context)：行内格式化上下文，和块级格式上下文一样，都是页面进行css渲染时一个视觉概念。

指的是一行区域的渲染规则，确定了一行中行级元素如何进行排列以及对齐。

IFC区域的特点

• 在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始

• 在盒子间margin和padding在水平方向有效

  • 行内元素在垂直方向上的margin和padding是没有效果

• 这些盒子会通过不同的方式进行对齐，有些底部和顶部对齐，底部和文本的基线进行对齐等等

• IFC负责的矩形区域称为行盒（line-box）

  • 行盒的宽度由内容决定

  • 行盒的高度由line-box的最高点和最低点决定

主要影响行盒高度的css属性（影响行盒的布局）

1. font-size：字体大小会影响行盒高度

2. font-family:字体类型会影响行盒的高度

3. height | line-height: 高度和行高也会影响行盒的高度

4. vertical-align：设置垂直方向上的对齐的方式，也会影响行盒的高度

IFC应用场景

主要影响行盒高度的css属性（影响行盒的布局）

1. font-size：字体大小会影响行盒高度

2. font-family:字体类型会影响行盒的高度

3. height | line-height: 高度和行高也会影响行盒的高度

4. vertical-align：设置垂直方向上的对齐的方式，也会影响行盒的高度

font-size

• 不同的字体大小会影响行盒的高度

• 字体越大，行盒的高度越高

font-family

• 不同的字体类型会影响行盒的高度

• 原因：设计师在设计字体时，不同的字体类型占据的高度时不一样

height | line-height

• 不同的高度和行高会影响行盒的高度

• 行高是指文本的最顶部到文本最底部，文字在当前的行高中垂直居中

vertical-align

• 设置行级元素垂直方向上对齐方式，也会影响行盒的高度

  

  绿色：顶线

  蓝色：中线

  红色：基线

  紫色：底线

• 取值：

  • baseline：默认值，基线对齐

  • middle：中线对齐

  • top：顶部对齐

  • bottom：顶部对齐

    

文本之间

• 文本与文本之间对齐方式，文本默认是以基线与其他元素对齐

• 设置vertical-align控制当前标签的文本的参考位置

文本与图片之间

• 文本默认是以基线和图片的底部进行对齐

• 给文本设置vertical-align：文本是以参考位置和图片进行对齐

• 给图片设置vertical-align：图片是以参考位置和文本进行对齐

表格

• 设置单元格中内容垂直方向上的对齐方式

• 取值：

  • middle：默认值，居中对齐

  • top：顶部对齐

  • bottom：底部对齐

H5标签

H5媒体标签

音频 audio

• 用于在页面中引入音频文件

• 语法：

    写法一：
    <audio src="连接音频文件的文件路径" controls loop muted autoplay></audio>
    写法二：为了保证不同的浏览器都可以正常播放音频文件，需要引入多种文件格式的音频文件
     <audio controls loop muted autoplay>
         <!-- 资源标签，用于引入多媒体的资源 -->
         <source src="连接音频文件格式1的文件路径"  type="audio/mp3">
         <source src="连接音频文件格式2的文件路径"  type="audio/ogg">
    </audio>
  

  • controls：这是一个控制器，控制音频文件的播放暂停等等

  • loop：循环播放，默认音频只播放一次

  • muted：静音

  • autoplay：自动播放

视频 video

• 用于在页面中引入视频文件

• 语法：

  写法一：
    <video src="连接视频文件的文件路径"  controls loop muted autoplay></video>
    写法二：为了保证不同浏览器都能正常播放音频文件，需要引入多种文件格式的视频文件
    <video controls loop muted autoplay>
        <source src="连接视频文件格式1的文件路径">
        <source src="连接视频文件格式2的文件路径">
    </video>
  

  • controls：这是一个控制器，控制视频文件的播放暂停等等

  • loop：循环播放，默认视频只播放一次

  • muted：静音播放

  • autoplay：自动播放

H5新增控件

H5表单标签

form、input（text）、input（password）、input（radio）、input（checkbox）、select、textarea

按钮：input和button

邮箱输入框

• 在提交数据时提供了邮箱格式的验证，验证不准确，以后通过js进行验证

• 语法：

  <input type="email">
  

数字输入框

• 只能输入数字，提供了数字的加减操作

• 语法：

   <input type="number">
  

网址输入框

• 可以进行网址格式的验证，必须是完整的网址，是以http或者https开头的网址

• 语法：

  <input type="url">
  

搜索框

• 在页面中加入搜索框，提供了清空内容的操作

• 语法：

   <input  type="search">
  

选取颜色

• 可以在页面中选择颜色色值

• 语法：

    <input type="color">
  

选取范围

• 语法：

    <input type="range">
  

文件上传

• 提供文件上传的功能

• 语法：

    <input type="file"  multiple>
  

• 注意：默认只能上传一个文件，如果需要上传多个文件，需要添加multiple属性

时间控件

• 提供时间的选择

• 语法：

    <!-- 某年某月某日 -->
    <input type="date">
    <!-- 某年某月 -->
    <input type="month">
    <!-- 某年第几周 -->
    <input type="week">
    <!-- 时/分 -->
    <input type="time">
  

选项列表

• 当在输入框中输入内容时，下方的提示相关开头的内容

• 语法：

   <input type="text"  list="datalist的id名">
    <datalist id="id名">
        <option value="">小猪佩奇</option>
        <option value="">小猪乔治</option>
        <option value="">小米手机</option>
        <option value="">小米电脑</option>
        <option value="">大米先生</option>
        <option value="">大米小姐</option>
    </datalist>
  

• 注意：输入框需要设置list属性指定datalist的id名进行绑定

表单属性

• required：必填项，必须填写才可以提交

• autofocus：自动获取焦点

• readonly：只读，不能修改，可以复制，可以提交

• disabled：禁用，不能修改，可以复制，不可以提交

语义化标签

语义化标签

• 通过标签名可以合理正确的表达标签中内容的含义

语义化标签的好处

• 易于用户阅读，样式丢失的时候让页面结构更加清晰明了

• 有利于SEO优化，搜索引擎可以根据根据标签名确定上下文和各个关键字之间的关系

• 方便其他设备的解析，比如盲人阅读器

• 有利于开发和维护，语义化具有可读性，代码更加好维护

常用的语义化标签

标签名	描述
<header>	代表网页的头部
<main>	代表网页的主体内容，页面上有且仅有一个
<footer>	代表网页的尾部
<nav>	代表导航
<aside>	代表侧边栏，可以放侧边导航或者推荐信息等等
<article>	代表一个独立的区域，存放内容
<section>	代表网页中一个模块
<thead>	代表表格的头部
<tbody>	代表表格的内容
<tfoot>	代表表格的尾部
<audio>	音频
<video>	视频
<source>	资源标签，用于引入多媒体资源
<canvas>	定义形状，在里面绘制图形

网页中标签的选择

• 最外层的标签尽量使用语义化标签，比如header、main、footer等等

• 标题尽量使用标题标签，主要为了SEO优化

• 对于网页中的内容区域，该用什么标签就用什么标签，超链接使用a标签，图片使用img等等

CSS兼容性问题处理

兼容性来源

内核是浏览器最底层、最核心的代码。决定了网页如何进行解析的，页面是如何被加载的，脚本如何执行。

不同的浏览器的内核是不一样，每种浏览器对相同的页面有不同的解析方式，最终的效果不一样，将这种情况称为兼容性问题。

同一个页面在不同的浏览器上运行的结果是不一样，就是兼容性。

主流的浏览器：Chrome、firfox、IE、safira

国产浏览器：QQ浏览器、360浏览器，UC浏览器，猎豹等等

目前国内是没有自己的内核，都用的国外的内核。360支持双核浏览器：IE Trident 和 safira 的webkit内核一起集成。

浏览器的内核

作用：用于解析网页

解析网页：

• html内容解析

• css内容解析

• JavaScript内容解析

内核中有个比较重要的概念：渲染引擎

渲染引擎

主要包含一些几部分：

• HTML解析器：会将html代码解析成一棵DOM数，每个标签就是dom树的一个节点

• CSS解析器：会将css样式计算出来，内存会跟着一起工作，会将每个标签上的最终样式计算出来

• JavaScript引擎：允许js脚本运行环境

• 布局：主要网页中模块定位、排列、浮动等等

网页是如何解析出来？

1. 加载网页内容

   • 判断是否为网络资源，是就利用网络模块从网页中加载代码

   • 如果是本地的资源，就直接从本地加载网页文件

2. 经过HTML解释器，对代码进行解析

   • 浏览器从代码的第一行进行解析，把不同类型的代码会交给对应的解释器进行解析

     • css代码——css解释器

     • html代码——html解释器

     • js代码——JavaScript引擎

3. 将各个解释器的结果进行综合梳理（内部表示）

   • 会把标签和对应的css样式结合起来，每个标签都有自己的渲染结果

4. 布局和绘图

   • 会把每个标签的样式、位置等绘制在页面上，如果有图片或视频音频，再利用对应的模块进行处理，处理完成之后直接显示在页面上。

兼容性的处理方案

hack代码

专门针对特点的浏览器设置的css代码

css hack：针对不同的浏览器或浏览器不同的版本写不同的css代码，书写css代码的这个过程就是css hack。

主要学习IE hack代码。

css hack分类

属性前缀法

• 针对不同的浏览器，在css属性的前面添加一些特点的浏览器的版本才能识别的前缀代码

• 多个属性需要设置时，每个属性前面都添加前缀

  

  选择器前缀法

• 在选择器前面添加一些特定浏览器才能识别的代码

条件注释法

• 在引入css文件时规定作业的浏览器版本或类型

  gte 大于等于 gt 大于 lte小于等于 lt小于 ! 不是

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

兼容性自查网址

Can I use... Support tables for HTML5, CSS3, etc

css兼容指导思想

渐进增强

• 先考虑大多数浏览器能够正常显示网页，针对高版本的浏览器单独设置样式，添加页面效果，浏览器的版本越高，页面效果越好

优雅降级（推荐）

• 先不管兼容问题，直接以目前主流的浏览器为基础，实现最佳效果，然后再考虑低版本的浏览书写css hack代码来保证低版本的浏览器能够正常显示

圆角原理

圆角

• css3提出的，盒子默认四个角都是直角，通过border-radius设置圆角的效果

• 语法：

  分别设置四个角的元素：
    border-top-left-radius
    border-top-right-radius
    border-bottom-left-radius
    border-bottom-right-radius
    复合属性：
    border-radius
    一个值：左上右上右下左下
    两个值：左上右下    右上左下
    三个值：左上   右上左下   右下
    四个值：左上   右上   右下   左下
    标准写法：八个值  /前面代表每个角的水平半径，/后面代表每个角的垂直半径
     border-radius: 30px 30px 30px 30px / 60px 60px 60px 60px;
  

• 圆角的形成：一个椭圆是由水平半径和垂直半径构成，正圆是特殊的椭圆，圆角是一个椭圆或正圆的一段圆弧构成。

• 如果水平半径和垂直半径相等时，圆角取得是正圆的圆弧，如果不相等，取得是椭圆的圆弧

  

内半径和外半径

• 当边框足够宽时，设置border-radius小于边框的宽度时，边框内边缘没有圆角，是直角，外边缘是圆角

• 当边框足够宽时，设置border-radius大于边框的宽度时，边框外边缘的圆角的半径就是外半径，边框内边缘的圆角的半径就是内半径

• 内半径=外半径-边框的宽度

  • 外半径就是设置border-radius的值

• 注意：

  • 当border-radius小于或等于边框的宽度时，内半径=外半径-边框，内半径为负或0，直接为0，显示为直角

  • 当border-radius大于边框的宽度，内半径=外半径-边框，内半径为正，边框内边缘就是圆角

弹性布局 (弹性盒模型)

传统的布局

• 基于盒模型，依赖display+float+position进行页面布局

• 这种方式兼容性比较好，但是布局比较繁琐

• 各种不便：

  • 各种盒子居中问题

  • 盒子之间的间距margin调整

  • 块级元素同行显示设置浮动——清除浮动

针对这些不便，css3提出一种自适应的布局方式——弹性布局，它用来替代或辅助传统布局

弹性盒模型

• 概念：是一种当页面需要适应不同的屏幕大小时，确保元素拥有恰当行为的布局方式。

• 目的：提供了一种布局方式，这种布局方式可以进行元素排列、空白空间分配等等

弹性盒模型结构

弹性盒子是由弹性容器和弹性项目构成。

• 弹性容器：包含弹性项目的父元素。

• 弹性项目：弹性容器里面每个子元素都是弹性项目。

• 主轴：弹性项目一行显示的方向就是主轴的方向

• 侧轴：与主轴垂直的方向就是侧轴的方向

给父元素（弹性容器）设置的属性

display:flex | inline-flex

• 设置盒子为弹性容器，里面子元素就是弹性项目

• display:flex;:设置块级弹性容器，对其他的兄弟元素来说，它就是一个普通的块级元素，对其子元素来说，它就是一个弹性容器，子元素按照弹性项目的方式进行显示

• display:inline-flex;：设置行级弹性容器，对其他的兄弟元素来说，它就是一个普通的行级元素，对其子元素来说，它就是一个弹性容器，子元素按照弹性项目的方式进行显示

弹性盒子特点

• 弹性容器里面的弹性项目可以同行显示，显示不下时按比例压缩显示

• 弹性容器没有设置高度时，高度可以自适应

• 弹性容器对兄弟元素没有影响

• 弹性容器对直接子元素有影响

flex-wrap

• 设置弹性项目是否可以换行

• 语法：

    flex-wrap: nowrap | wrap;
  

  • nowrap:默认值，不换行

  • wrap：换行

flex-direction

• 设置弹性容器中主轴的方向和弹性项目的排列方式

• 主轴：弹性项目同行显示的方向 侧轴：与主轴垂直的方向就是侧轴的方向

• 取值：

  • row：默认值，设置水平方向为主轴，弹性项目从左到右依次排列

  • row-reverse：设置水平方向为主轴，弹性项目从右到左依次排列

  • column：设置垂直方向为主轴，弹性项目从上到下依次排列

  • column-reverse：设置垂直方向为主轴，弹性项目从下到上依次排列、

富裕空间

给父元素（弹性容器）设置的属性

justify-content

• 处理主轴上的富裕空间的分配

• 取值：

  • flex-start：默认值，将主轴上的富裕空间放在弹性项目之后

  • flex-end：将主轴上的富裕空间放在弹性项目之前

  • center：将弹性项目在主轴上居中

  • space-between：首尾弹性项目紧靠弹性容器，中间均分

  • space-around：将主轴上的富裕空间均分到每个弹性项目两边

  • space-evenly: 每个弹性项目之间的间距均分，包括首尾和弹性容器的间距

align-items

• 处理侧轴上的富裕空间的分配

• 取值：

  • flex-start：默认值，当弹性项目设置了高度时，将侧轴上的富裕空间均分到每行弹性项目之后

  • flex-end:将侧轴上的富裕空间均分到每行弹性项目之前

  • center：每行弹性项目上下均分富裕空间，在每行弹性项目居中

  • stretch：默认值，当弹性项目没有设置高度时，默认将弹性项目拉伸撑满弹性容器

给子元素（弹性项目）设置的属性

align-self

• 设置当前的弹性项目在侧轴上的富裕空间分配

• 取值：

  • flex-start：默认值，当弹性项目设置了高度时，将侧轴上的富裕空间均分到每行弹性项目之后

  • flex-end:将侧轴上的富裕空间均分到每行弹性项目之前

  • center：每行弹性项目上下均分富裕空间，在每行弹性项目居中

  • stretch：默认值，当弹性项目没有设置高度时，默认将弹性项目拉伸撑满弹性容器

富裕空间

• 概念：在弹性容器中除弹性项目之外的剩余空间，就称为富裕空间。主要分为主轴上的富裕空间和侧轴上的富裕空间

• 分配：

  • 主轴上的富裕空间分配：justify-content

  • 侧轴上的富裕空间分配：align-items 和 align-self

弹性空间

给子元素（弹性项目）设置的属性

flex-shrink

• 设置弹性项目的压缩因子，压缩比例

• 原理：当弹性容器宽度不够时并且弹性项目在一行显示不换行，为了保证不换行，通过flex-shrink属性将弹性项目进行按比例压缩显示，以达到不换行的目的。

• 语法：

   flex-shrink: 数字;
  

  • 默认值为1，数字越大，压缩比例越大，盒子的大小越小

• 计算公式：

  总压缩空间=弹性项目总宽度 - 弹性容器的宽度
    每个弹性项目的压缩空间= 总压缩空间 / 压缩因子总数  * 弹性项目的压缩因子
    盒子的大小= 盒子原来的宽度  -  压缩空间宽度
  

flex-grow

• 设置弹性项目的弹性因子

• 语法：

   flex-grow:数字；
  

  • 默认值为0；数字越大，弹性空间越大，盒子的大小越大

• 计算公式

    富裕空间= 弹性容器的宽度 - 弹性项目的总宽度
    每个弹性项目的弹性空间= 富裕空间 / 弹性因子总数 * 弹性项目的弹性因子
    盒子的大小 = 盒子原来的宽度 + 弹性项目的弹性空间
  

弹性空间

• 概念：弹性项目消化掉的富裕空间，

• 目的：设置弹性因子，弹性项目可以撑满弹性容器，消化掉主轴上的富裕空间，通过flex-grow属性可以设置每个弹性项目消化空间的比例

弹性扩展属性

给子元素（弹性项目）设置的属性

order

• 能够更改某个弹性项目的显示的位置

• 语法：

    oreder: 数字;
  

  • 默认值为0，可以设置负值，数字越大，元素显示位置越靠后，数字相同时，按照代码顺序依次显示

• 应用场景：

  • js控制拖拽或点击让元素排列到最后

flex-basis

• 设置弹性项目的默认的宽度

• 语法：

    flex-basis: 300px;
  

• 注意：

  • 优先级：flex-basis > width >由内容撑开的

flex

• 复合属性，是flex-grow、flex-shrink、flex-basis的复合属性

• 语法：

    flex:  flex-grow   flex-shrink   flex-basis;
  

  • 默认值：0 1 auto

线性渐变 (CSS3基础)

渐变背景

像比较规则的渐变背景，使用1px的渐变背景的平铺，像不规则的渐变背景，则直接使用整张图片作为背景，图片开发维护性比较低，影响网页加载速率。

css3提出了渐变背景：线性渐变和径向渐变

渐变背景可以看作一张“图像”，使用css属性中的background-image

线性渐变

• 概念：线性渐变可以看作沿着一条直线进行颜色渐变。

• 注意：渐变背景至少设置2种颜色

• 语法：

   baclground-image: linear-gradient( 渐变方向 ,颜色1  位置1，颜色2  位置2，颜色2  位置2)
  

色标

• 是由一个颜色和一个位置构成的。控制渐变的范围

• 颜色：单词，#十六进制，rgb(),rgba(0-255，0-255，0-255，0.5)

• 位置：像素，百分比

  • 至设置颜色时，渐变默认为均匀渐变

  • 如果首尾色标的颜色不在0%或100%时，是以纯色进行填充

      0%~20%是红色，20%~60%是红色到绿色的渐变，60%~80%是绿色到黄色的渐变，80%~100%是黄色
      background-image:linear-gradient(red 20%,green 60%, yellow  80%);
    

  • 如果首尾色标的位置不设置时，默认0%或100%

  • 如果两个色标的位置相同时，中间的渐变的范围为0，会出现断层的效果。

渐变线

• 可以用来控制渐变方向

• to 结束方向

  • to bottom ——默认值，180deg或者-180deg

  • to top——0deg

  • to left—— 270deg 或-90deg

  • to right——90deg 或-270deg

  • to top left —— 315deg 或-45deg

  • to top right——45deg或-315deg

  • to bottom left——225deg或-135deg

  • to bottom right—— 135deg 或 -225deg

• 角度：必须带deg的单位，0deg的方向是垂直向上，顺时针是正方向，逆时针是负方向

  

重复线性渐变

• 将线性渐变进行重复铺设，使用repeating-linear-gradient

• 注意：只有首尾不在0%或100%时，重复线性渐变才有效

• 语法：

  background-image: repeating-linear-gradient(pink 0px,pink 20px,yellow 20px, yellow 40px);
  

  径向渐变

径向渐变

• 概念：径向渐变指的就是椭圆渐变，渐变效果就是沿着椭圆的半径方向进行渐变，正圆就是一种特殊的椭圆。

• 分为两部分：

  • 色标：是由一个颜色和一个位置构成，用来控制渐变过渡的颜色变化范围（参考线性渐变的用法）

  • 椭圆：用来控制径向渐变位置、大小、形状。

• 语法：

    background-image: radial-gradient(大小  形状  at x轴  y轴,   颜色1   位置1，颜色2   位置2，颜色3  位置3)；
  

• 大小：

  • farthest-corner:默认值，半径从圆心到最远的角

  • closest-corner： 半径从圆心到最近的角

  • farthest-side：半径从圆心到最远的边

  • closest-side：半径从圆心到最近的边

• 形状：

  • ellipse:默认值，椭圆

  • circle：正圆

• 圆心： at x轴 y轴

  默认在盒子的中心点，相当于center center

  • 单词： top bottom left right center 两两搭配使用

  • 像素：0px 0px相当于盒子的左上角

  • 百分比：参考盒子的宽度和高度，50% 50%相当于center center

重复径向渐变

• 将径向渐变进行重复铺设

• 注意：渐变首尾不在0% 或100%时，重复径向渐变才有效

盒子阴影

盒子阴影

• 给盒子设置阴影，通过box-shadow设置盒子阴影

• 语法：

    box-shadow: x轴偏移量  y轴偏移量  模糊程度  阴影大小   颜色；
    inset将外阴影设置为内阴影
    box-shadow: x轴偏移量  y轴偏移量  模糊程度  阴影大小   颜色  inset；
    可以设置多层阴影，中间使用逗号隔开
    box-shadow: x轴偏移量  y轴偏移量  模糊程度  阴影大小   颜色 , x轴偏移量  y轴偏移量  模糊程度  阴影大小   颜色 , x轴偏移量  y轴偏移量  模糊程度  阴影大小   颜色；
  

• 注意：模糊程度和阴影大小可以不写

文字阴影

• 给文本设置阴影，通过text-shadow设置阴影

• 语法：

  text-shadow:  x轴偏移量  y轴偏移量  模糊程度   颜色；
  

结构选择器

结构选择器

• 根据HTMl代码结构找到满足条件的标签，也是一种伪类选择器

:first-child

• 找到满足条件的标签，并且这个标签是某个标签的第一个子标签

• 语法：

    找到class名为box的标签里面所有的后代span标签，并且这个span标签是某个标签的第一个子标签
    .box span:first-child{
    }
  

:last-child

• 找到满足条件的标签，并且这个标签是某个标签的倒数第一个子标签（最后一个子标签）

• 语法：

    找到class名为box的标签里面所有的后代span标签，并且这个span标签是某个标签的倒数第一个子标签
    .box span:last-child{
    }
  

:nth-child(n)

• 找到满足条件的标签，并且这个标签是某个标签的第n个子标签

• 语法：

    找到class名为box的标签里面所有的后代span标签，并且这个span标签是某个标签的第n个子标签
    .box span:nth-child(n){
    }
  

  • n代表数字

• 注意：

  • :nth-child(2n-1)或:nth-child(2n+1)：找到奇数的子标签

  • :ntb-child(2n)：找到偶数的子标签

:nth-last-child(n)

• 找到满足条件的标签，并且这个标签是某个标签的倒数第n个子标签

• 语法：

   找到class名为box的标签里面所有的后代span标签，并且这个span标签是某个标签的倒数第n个子标签
    .box span:nth-last-child(n){
    }
  

  • n代表数字

:nth-of-type(n)

• 将满足条件的同类型的标签，将其筛选出来，重新排序，找到其中的第n个标签

• 语法

    找到class名为box的标签里面所有的后代span标签，将span标签筛选出来，重新排序，找到其中的第n个标签
    .box span:nth-of-type(n){
    }
  

:nth-last-of-type(n)

• 将满足条件的同类型的标签，将其筛选出来，重新排序，找到其中的倒数第n个标签

• 语法

    找到class名为box的标签里面所有的后代span标签，将span标签筛选出来，重新排序，找到其中的倒数第n个标签
    .box span:nth-last-of-type(n){
    }
  

SASS基础

原生css的不便

• 书写重复的选择器

• 修改属性，每次都需要修改，不能一处改处处改

• css代码重复编写

SASS

• 概念：less和sass都是一个css预处理器，可以为网站启用可定义、可管理和可重用的样式表，就是动态的样式表语言。

  • css预处理器其实就是一种脚本语言，可以扩展css语法并将其编译常规的css代码，方便的浏览器正常渲染。

  • sass就是css的扩展，通过提供嵌套、变量、混合等操作，通过编译都可以变成常规的css代码

• 作用：极大的提供开发者开发的效率

• 官网：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

SASS基本使用

使用vs code的easy sass插件来完成sass文件的编写

• 按照easy sass插件

• 新建以.sass或.scss为后缀的文件，在里面书写css代码

  • .sass：是老版本的sass文件

  • .scss是新版本的sass文件（推荐）

• easy sass插件可以将sass文件编译为css文件，在页面中引入css文件即可。

手动更改编译后的css文件存储路径

• 找到设置，搜索easy sass

• 注意：存储路径是从工作区出发，工作区必须有名字

  

嵌套

嵌套

• 概念：SASS支持选择器里面嵌套子选择器

• 作用：让sass代码对应css代码层级结构清晰明了，不会出现父子标签之间权重

• 语法：

    父选择器{
        父选择器的css代码；
        css属性：css属性值；
        子选择器{
            子选择器的css代码
                 子选择器{
                子选择器的css代码
            }
        }
    }
    示例：
    .header{
        width: 100%;
        height: 70px;
        background-color: pink;
        .container{
            width: 1200px;
            height: 70px;
            border: 1px solid red;
            margin: 0 auto;
            .logo{
                width: 200px;
                height: 70px;
                background-color: tomato;
            }
            .nav{
                width: 400px;
                height: 70px;
                background-color: yellowgreen;
                >ul{
                    list-style: none;
                    li{
                        background-color: red;
                        // &代表父选择器
                        &:hover{
                            background-color: blue;
                        }
                        &::before{
                            content: "";
                        }
                        &::after{
                            content: "after";
                        }
                    }
                }
                +.box{
                    border: 1px solid red;
                }
                ~div{
                    width: 300px;
                    height: 200px;
                }
            }
        }
    }
  
  

变量

变量

• 概念：变量可以看作一个保存数据的容器，可以在代码中重复使用

• 作用：可以实现一处改处处改

• 语法：

    定义变量：
    $变量名：数据;
    使用变量：
    .box{
        color: $变量名;
    }
  

  • 数据可以是任意的属性值，比如：100px，red，也可以复合属性的属性值，比如：1px solid red

  • 变量名规范：

    • 是以数字、字母、_和-构成

    • 不能以数字开头，不能包含特殊的符号

    • 多个单词之间尽量使用-分开

• 注意：

  • 变量需要先在文件的开头定义变量，再使用变量

  • sass语法中提供数学运算，符号前后加空格

CSS过渡

基本概念

• transition提供了一种在更改css属性时控制动画执行的速率或者时间，可以在指定的时间内执行动画效果，而不是立即执行。

属性

transition-property

• 设置过渡的css属性名

• 语法：

    transition-property: css属性名;
  

  • 默认值为all，代表所有的css属性

• 注意：

  • 仅仅设置过渡的属性名没有效果，需要配合过渡的执行时长一起使用

  • 多个属性同时设置过渡时，中间使用逗号隔开，时间和属性名一一对应

transition-duration

• 设置过渡的执行时长，控制整个过渡的动画在多长时间内执行完成

• 语法：

    transition-duration: 时间;
  

  • 默认为0s， s代表秒，ms代码毫秒，1s=1000ms

• 注意：

  • 如果过渡的属性名的个数多于执行时长的个数，时间一一对应，时间重复一遍

transition-timing-function

• 设置过渡的执行的速率

• 属性值：

  • ease：默认值，以低速开始，然后变快，在结束前变慢

  • linear：匀速

  • ease-in:是以低速开始

  • ease-out：以低速结束

  • ease-in-out：以低速开始和结束

  • cubic-bezier(x1,y1,x2,y2):贝塞尔曲线

贝塞尔曲线

• 概念：是一种构建二维图形的速度曲线，本质上是一个数学曲线

• 作用：在css中，可以用来控制动画的执行速率

• 语法：

  cubic-bezier(x1,y1,x2,y2)
  

  • 这两个坐标决定了曲线形状，不同的形状对应的速率不一样，可以为负

• 构建贝塞尔曲线的网址：cubic-bezier.com

transition-delay

• 设置过渡的延迟时长，就是过渡的效果从何时开始执行

• 语法：

   transition-delay: 时间;
  

  • 默认值为0s，

transition

• 复合属性

• 语法：

    transition: 过渡属性名   执行时长  延迟时长  执行速率; 
    多个属性同时过渡时，中间使用逗号隔开
    transition: 过渡属性名1   执行时长  延迟时长  执行速率 , 过渡属性名2   执行时长  延迟时长  执行速率 , 过渡属性名3   执行时长  延迟时长  执行速率;
  

• 注意：并不是所有的css属性都可以设置过渡，比如display

2D转换

基本概念

• CSS3 提出了一个transform属性来处理盒子（html标签）的变化或转换，包含移动、旋转、缩放和倾斜。

• 2D转换一般配合过渡的一起使用

• 注意：2D转换不会影响其他盒子的排列

位移 translate

• 让盒子进行移动

• 语法：

    transform: translate(x轴移动量 ，y轴移动量);
    transform: translate(x轴移动量);
    沿着x轴进行移动
    transform: translateX(x轴移动量);
    沿着y轴进行移动
    transform: translateY(y轴移动量);
  

  • 盒子是以原来的位置为起点进行移动

旋转 rotate

• 可以让盒子进行旋转

• 语法：

    围绕着盒子的中心点进行旋转
    transform: rotate(角度);
    围绕着x轴进行旋转
    transform: rotateX(角度);
    围绕着y轴进行旋转
    transform: rotateY(角度);
  

  • rotate(角度)：围绕着盒子的中心点进行旋转，设置正值，顺时针旋转，设置负值，逆时针旋转

缩放 scale

• 设置盒子进行放大或缩小

• 语法：

    transform: scale(宽度的倍数，高度的倍数);
    等比例缩放
    transform: scale(倍数）;
  

  • 0: 标签会缩放为原来的0倍，标签会从页面上消失不见

  • 0~1：盒子缩小

  • 1：盒子原来的大小

  • 1以上：盒子放大

• 注意：默认缩放会参考盒子的中心点进行缩放

倾斜 skew

• 让盒子沿着x轴或y轴进行倾斜

• 语法：

    沿着x轴进行倾斜
    transform: skew(角度);
    transform: skewX(角度);
    沿着y轴进行倾斜
    transform: skewY(角度);
  

  • skewX(角度)：沿着x轴进行倾斜，角度越大，越接近x轴，当角度为90deg时，会和x轴平行，消失不见

  • skewY(角度)：沿着Y轴进行倾斜，角度越大，越接近y轴，当角度为90deg时，会和y轴平行，消失不见

组合变换

组合变换

• 多个2D转换组合在一起，作用在同一个标签上，中间使用空格隔开

• 语法：

    transform: rotate(90deg)  translateX(200px)  scale(0.5);
  

• 注意：

  • 旋转会改变坐标轴的方向

基点设置

转换基点

• 基点：进行css的转换时的参考点

• 通过transform-origin属性可以设置转换基点的位置，盒子默认的转换基点是盒子的中心点，，默认值为center center

• 语法：

    transform-origin: x  y；
  

  • 单词：top bottom left right center 两两搭配使用

  • 像素：左上角相当于0px 0px

  • 百分比：参考的是盒子的宽度和高度，50% 50% 相当于center center

• 注意：

  • 对于旋转和缩放来说，因为其转换和盒子的中心点有关，改变了转换基点的位置，旋转和缩放会受影响

  • 对于位移来说，因为位移参考的盒子原来的位置，改变了转换基点的位置，原来的位置不会发生改变，位移不会受到影响

  • 如果盒子需要设置转换基点，需要设置在盒子样式未被更改时的位置，因为转换基点的默认值为盒子的中心点center center，如果在改变盒子样式时设置转换基点，转换基点相当于会从center center 改变为指定的位置，那么转换的效果容易错乱

3D空间介绍

3D转换

3D转换是2D转换的一种补充，基于css样式来完成页面中3D效果

在2D平面上，新增了一条z轴，形成了三维坐标系

三维坐标系

• 概念：在x轴和y轴的基础上，新增了z轴，形成了三维坐标系

• 三维坐标系：x轴的正方向默认水平向右，y轴的正方向是垂直向下，z轴的正方向是垂直屏幕向外

• 左手系统：食指是水平向右是x轴的正方向，中指垂直向下是y轴的正方向，大拇指垂直屏幕向外是z轴的正方向

  

有了三维坐标系，我们可以用（x,y,z）就表示三维空间中任意一个点

景深

• 概念：在摄像中，景深是指相机对焦点的相对清晰的成像范围，即物体和镜头之间的距离。

  在开发中，我们将景深转化物体在z轴上的显示距离。

• 作用：css可以通过perspective属性来设置盒子和屏幕之间的距离，即景深，景深越大，物体距离屏幕越远，景深越小，物体距离屏幕越近（一旦设置景深，盒子会呈现近大远小的效果）

• 语法：

    perspective: 距离;
  

• 注意：

  • 景深是给父盒子设置景深，子元素会在3D空间呈现效果，实现近大远小的效果

  • 景深越大，3D效果越小，景深越小，3D效果越明显

  • 景深配合3D转换一起使用

3D基础属性

3D转换

位移

• 让盒子进行移动

• 语法：

   沿着x轴进行移动
    transform: translateX(x轴移动量);
    沿着y轴进行移动
    transform: translateX(y轴移动量);
    沿着z轴进行移动
    transform: translateX(z轴移动量);
    同时设置三条轴进行移动
    transform: translate3d(x轴移动量,  y轴移动量 ，z轴移动量);
  

  • 注意：沿着z轴进行移动，会呈现近大远小的效果

缩放

• 让盒子进行放大和缩小

• 语法：

    沿着x轴进行缩放，宽度的缩放
    transfrom: scaleX(倍数);
    沿着y轴进行缩放，高度的缩放
    transfrom: scaleY(倍数);
    沿着z轴进行缩放，厚度的缩放，看不到效果
    transfrom: scaleZ(倍数);
  

  • 注意：沿着z轴进行缩放，缩放的是盒子的厚度，一般看不到效果，标签本身没有厚度

旋转

• 让盒子进行旋转

• 先确定旋转轴的方向，再设置旋转角度

• 语法：

  沿着x轴的方向进行旋转
    transform: rotateX(角度);
    沿着y轴的方向进行旋转
    transform: rotateY(角度);
    沿着z轴的方向进行旋转
    transform: rotateZ(角度);
    自定义旋转轴进行旋转
    transform:rotate3d(x,y,z,角度);
  

  • x,y,z确定了三维坐标系中的一个点

  • 旋转轴：是由坐标圆点（0，0,0）到指定的点的连线的方向就是旋转轴的方向

• 注意：无论旋转轴在哪个方向，旋转轴都会过转换基点

灭点

perspective-origin

• 设置视线的灭点，设置3D盒子的观察的位置，默认舞台的中心点，默认正对着舞台

• 作用：以不同的角度观察盒子的变换

• 语法：

  perspective-origin：x轴 y轴;xxxxxxxxxx perspective-origin：x轴 y轴;  perspective-origin：x轴 y轴;css
  

  • 默认值为center center，默认观察者正对着舞台的中心点观察盒子的变换

  • 单词：top bottom left right center 两两搭配使用

  • 像素：0px 0px相当于左上角

  • 百分比：50% 50%相当于center center

• 注意：

  • 这个属性是设置在设置景深的盒子上

  • 如果视线灭点在舞台的中心点，并且盒子也在舞台的正中心，盒子显示的效果是对称的

  • 一个舞台只有一个视线灭点

transform-style

• 定义里面嵌套元素是如何在3D空间中显示的，设置子元素如何在父元素中显示

• 语法：

    transform-style: flat | preserve-3d；
  

  • flat：默认值，代表所有子元素在2D平面上显示

  • preserve-3d：代表所有子元素在3D空间中显示

• 注意：

  • 需要结合景深的效果一起使用

Animation动画

完成自动播放的动画

• 使用flash技术可以完成动画的设计

• 编写JavaScript的脚本完成动画

• 借助某些动画标签，比如marquee

• h5提供了canvas技术（绘图技术），完成动画的设计

• css3提供了Animation动画可以完成自动持续播放

动画

• 概念：快速切换连续图片而达到流畅的画面，即动画

• 帧数：每秒切换图片的数量，数量越多，画面越流畅，60hz即每秒60帧，

• 关键帧：就是指每个关键的动作

关键帧

• 概念：是指盒子状态要发生改变的帧，就是将需要播放的动画拆分为多个步骤，每个步骤就是一个关键帧，将多个步骤连接起来，形成完整的动画

• 例子：盒子右移500px 关键帧有2个，开始状态和结束状态

• 例子：盒子变圆后，右移500px， 关键帧有3个，开始状态——变圆——右移500px结束状态

• css动画中，关键帧需要定义

Animation动画基本使用

• 通过Animation的相关属性调用关键帧，实现动画的自动播放

• 步骤：

  • 利用@keyframes属性来定义动画的所有关键帧，给动画取名

  • 给需要设置动画的盒子添加animation相关属性调用动画的关键帧

定义关键帧

• 利用@keyframes属性来定义动画的所有的关键帧

• 注意：这个关键帧属于css的代码，不需要写在任何选择器中

• 语法：

    先定义关键帧
    @keyframes 动画名称{
        from{
            开始状态
        }
        to{
            结束 状态
        }
    }
    还可以使用百分比来定义关键帧
    @keyframes 动画名称{
        0%{
        }
        10%{
        }
        20%{
        }
        100%{
        }
    }
    再在选择器中调用的关键帧
    div{
        animation-name: 动画名称;
        animation-duration: 动画的执行时长; 
    }
  

  • 关键帧在定义过程中，from相当于0%，to相当于100%

  • 使用百分比定义关键帧时，每一帧的执行时长和两帧之间的百分比有关系，跨度越大，分配的时间越多

  • 公式： 分配时间 = 总时间 * 两帧之间的百分比之差

动画属性

动画属性

• css3提供了很多css属性来控制动画的播放速率、次数等等

• 属性：

  • animation-name：设置动画的名称，需要配合动画的执行时长一起使用

  • animation-duration：设置动画的执行时长，默认为0s

  • animation-delay：设置动画的延迟时长，默认为0s

  • animation-timing-function:设置动画的执行速率，原理是贝塞尔曲线

    • ease：默认值，以低速开始，然后变快，在结束前变慢

    • linear：匀速

    • ease-in:是以低速开始

    • ease-out：以低速结束

    • ease-in-out：以低速开始和结束

    • cubic-bezier(x1,y1,x2,y2):贝塞尔曲线

  • animation-iteration-count：设置动画的播放次数

    • n：代表数字，动画执行几次，就写几，默认是1

    • infinite：无限次

  • animation-direction:设置动画的播放方向

    • normal:默认值，正常播放，正向播放动画

    • reverse：反向播放动画

    • alternate：奇数次正向播放动画，偶数次方向播放动画

    • alternate-reverse:奇数次反向播放动画，偶数次正向播放动画

  • animation-fill-mode：将第一帧或者最后一帧作用在元素上，

    • backwards：将第一帧作用在元素上，保持开始状态

    • forwards：将最后一帧作用在元素上，保持结束状态

    • both:同时将第一帧和最后一帧作用在元素上，保持开始和结束状态

  • animation-play-state：设置动画的播放状态

    • running：默认值，播放

    • pause：暂停

  • animation：复合属性

     animation:动画名称  执行时长  执行速率  延迟时长  执行次数  执行方向  是否保持开始或者结束状态;
      animation: name duration timing-function delay iteration-count direction fill-mode;
    

    • 至少设置动画的名称和执行时长，动画才能正常执行

布局分类

常见的布局方式

固定布局

• 原理：主要内容区域是采用固定的像素进行布局（固定尺寸比如960px~1200px等等），再水平居中

• 一般用于pc端，一般采用中间内容固定，两边自适应

• 好处：

  • 布局简单：大盒子设置固定宽度，在设置margin:0 auto;

• 缺点：

  • 无适应性（对移动端不友好）

  • 会产生滚动条

流式布局

• 原理：为了适应不同的屏幕，主要内容区域采用百分比进行布局，采用百分比替代固定像素，不同的屏幕的有一定适应性，无论宽度如何改变，页面的布局不会发生改变

• 好处：

  • 对不同的屏幕有一定的适应性

• 缺点：

  • 当屏幕足够小时，导致内容无法查看

响应式布局

• 原理：利用媒体查询技术，实现当使用不同的屏幕时采用不同的css代码，即一套HTML代码多套css样式代码，达到不同的屏幕有不同的用户体验

• 好处：

  • 有很好用户体验（对移动端友好）

• 缺点：

  • 大量的css代码，开发难道比较大，维护性下降n

移动端布局

• 专门针对移动端单独开发一套HTML和css代码，移动端代码和pc端的代码完全独立开

• 好处：

  • 移动端有极好的用户体验

• 缺点：

  • pc端和移动端的代码是独立，代码量比较大

媒体查询

响应式布局

• 概念：是指利用媒体查询技术，实现不同 的屏幕采用不同的css代码，实现不同的屏幕都有良好用户体验。核心在于媒体查询。

媒体查询

• 媒体：在网页中是指各种设备，比如：电脑、手机、电视等等

• 查询：检测当前的屏幕属于哪种设备，以及属于哪种类型，根据这些信息来使用对应的css代码，实现不同的屏幕有不同页面效果。

基本使用

• 在引入css样式文件时规定样式的作用的范围

    only 代表仅仅   print代表打印机  screen代表彩色屏幕
    <link rel="stylesheet" href="css文件文件路径"  media="only print">
  

• 在css样式中规定样式的作用范围

    @media  媒体类型{
        选择器{
            css代码
        }
    }
  

媒体类型

• 可以将不同的设备进行分类，通过针对不同的设备写不同的css代码

值	设备类型
All	所有设备
Print	打印设备
Screen	电脑显示器，彩色屏幕
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打印机
Handhelp	便携设备
Projection	投影设备
Speech	语音或者音频合成器
Tv	电视类型设备
Try	电传打印机或者终端

媒体特性

• 概念：媒体设备的特性，用来描述设备的特点，包含设备的宽度、高度、最大最小宽度、最大最小高度、或者横屏竖屏等

• 可以通过媒体的特性来区分pc端还是移动

值	描述
width	网页显示区域完全等于设备的宽度
height	网页显示区域完全等于设备的高度
max-width	网页显示区域小于等于设备宽度
max-height	网页显示区域小于等于设备高度
min-width	网页显示区域大于等于设备的宽度
min-height	网页显示区域大于等于设备的高度
orientation	portrait (竖屏模式) \	landscape (横屏模式)

媒体查询关键字

• 用于连接媒体特点的连接词，可以将多个媒体特性连接在一起

• 关键字：

  • and：代表并且的意思，既要满足前面的条件，又有后面的条件，同时满足才能作用css的样式

      /* 375px~750px */
      @media screen and (min-width:375px) and (max-width:750px) {
          .box{
              background-color: pink;
          }
      }
    

  • ,：代表或者的意思，满足其中一个条件即可

      /* 375以下或者750以上的屏幕 */
      @media screen and (max-width:375px),screen and (min-width:750px){
          .box{
              background-color: tomato;
          }
      }
    

    • 注意：逗号前后媒体类型是单独的

  • not：代表否定、不是、非的意思

      /* 除了320px之外 */
      @media not screen  and  (width: 320px) {
          .box{
              background-color: tomato;
          }
      }
    

    • 注意：not否定的是媒体的特性

  • only:代表仅仅的意思，强调

      @media only screen  and  (width: 320px) {}
    

    • 代表唯一，目前新版本的浏览器没有区别，在老版本中，用来排除一些不兼容的版本。

Bootstrap

基本概念

• Bootstrap就是可以快速构建响应式网站的一款前端框架

• 框架：指的是其他的开发人员或公司为了简化某一领域的开发流程，而设计出来的有序代码。简称第三方开发工具。

• Bootstrap内置了很多组件，只需要添加class名就可以使用样式

• Bootstrap内置很多js插件，比如轮播图

• Bootstrap3和Bootstrap4的区别：

  | BootStrap 3 | BootStrap 4 | | ———————————— | ———————————————————————— | | less语言编写 | sass语言编写 | | 4种栅格类 | 5种栅格类 | | 使用px为单位 | 使用rem和em为单位（除部分margin和padding使用px） | | 使用push和pull向左右移动 | 偏移列通过offset-类设置 | | 使用float的布局方式 | 选择弹性盒模型（flexbox） |

  • Bootstrap3的4种栅格：

    1. 特小（col-xs-） 适配手机(<768px)

    2. 小（col-sm-） 适配平板(≥768px)

    3. 中（col-md-） 适配电脑(≥992px)

    4. 大（col-lg-） 适配宽屏电脑(≥1200px)

  • Bootstrap4的5种栅格：

    1. 特小（col-）(<576px)

    2. 小（col-sm-）(≥576px)

    3. 中（col-md-）(≥768px)

    4. 大（col-lg-） (≥992px)

    5. 特大（col-xl-）（≥1200px）

  • Bootstrap4特点

    1. 新增网格层适配了移动端；

    2. 全面引入ES6新特性（重写所有JavaScript插件）；

    3. css文件减少了至少40%；

    4. 所有文档都用Markdown编辑器重写；

    5. 放弃对IE8的支持

• Bootstrap的官网：Bootstrap中文网

基本使用

• 步骤：

  • 下载Bootstrap的生成文件夹

  • 在页面中引入Bootstrap.css或者Bootstrap.min.css

  • 先引入jQuery的js文件

  • 再引入Bootstrap.bundle.js或者Bootstrap.bundle.min.js

• 语法：

    <!-- 使用本地的Bootstrap文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 先引入jQuery的js文件 -->
    <script src="js/JQuery2.1.4.js"></script>
    <!-- 引入Bootstrap的js文件 -->
    <script src="js/bootstrap.bundle.min.js"></script>
  

• 注意：必须先引入jQuery的js文件，再引入Bootstrap的js文件

js插件-拓展：hightchars图表

图表 框架

highcharts

• 实例丰富

• 文档是英文

• 稳定性比Echarts好

• Highcharts 演示 | Highcharts

Echarts

• 百度地图团队开发

• 能够结合百度地图一起使用

• 内部使用vue语法来写数据部分代码

页面布局

HTML

<body>
    <!-- 头部 -->
    <header>
        <!-- 顶部登录注册按钮 -->
        <div class="header-top">
            <div class="center-container">
                <a href="#">下载 APP</a>
                <div>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                </div>
            </div>
        </div>
        <!-- 导航栏 -->
        <div class="header-nav">
            <div class="center-container">
                <!-- logo -->
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="header-banner">
            <div class="center-container">

            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <main>
        <div class="center-container">
            <!-- 下拉列表 -->
            <div></div>
            <!-- 电影相关信息 -->
            <div>
                <!-- 电影列表 -->
                <div class="movies-list">
                    <!-- 正在热映 -->
                    <div>
                        <!-- 标题 -->
                        <div></div>
                        <!-- 正在热映的电影列表 -->
                        <div class="moviesList" id="hotMoviesList">
                            <!-- 每一个电影项 -->
                            <!-- <div class="movie-item">
                                <img src="./images/img-10.jpg" alt="">
                                <div class="movie-name">
                                    <span>怒火重案</span>
                                    <span>9.0</span>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <!-- 即将上映 -->
                    <div>
                        <div></div>
                        <div class="moviesList" id="comingMoviesList"></div>
                    </div>
                </div>
                <!-- 电影活动 -->
                <div></div>
            </div>
        </div>
    </main>
    <!-- 底部 -->
    <footer>
        <div class="center-container">
            1212124124124
        </div>
    </footer>

    <script src="./utils/jquery-3.6.0.min.js"></script>
    <script src="./utils/utils.js"></script>
    <script src="./js/getData.js"></script>
    <script src="./js/home.js"></script>
</body>

CSS

* {
    padding: 0;
    margin: 0;
}

.header-top {
    height: 40px;
    background-color: #f0f0f0;
}

.center-container {
    width: 1200px;
    margin: 0 auto;
    /* outline: 1px solid red; */
}

.header-top .center-container {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    /* align-items: center; */
}

.header-banner {
    height: 360px;
    background-image: url('../images/banner02.png');
    background-position: center;
}

.movies-list {
    width: 730px;
}

.moviesList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.movie-item {
    width: 160px;
    border: 1px solid #ddd;
    margin: 20px 0;
}

.movie-item > img {
    width: 160px;
    height: 220px;
}

.movie-item > .movie-name {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    padding: 0 10px;
}


footer {
    height: 290px;
    background-color: #262426;
}

解决margin塌陷问题

一：什么是margin塌陷 ？

在标准文档流中，竖直方向（左右方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin值，这就是margin的塌陷现象。

二：margin塌陷分类 ？

（1）兄弟盒子之间的塌陷问题。 （2）父子盒子之间的塌陷问题。

解决方案：

（1）给父元素father添加一个border边框，比如给box1添加样式：border：1px solid transparent这种方式造成贴合的样子；

（2）给父元素添加一个overflow: hidden; （3）给父元素添加一个position: fixed; （4）给父元素添加一个display: table; （5）将子元素都margin改为父元素的padding （6）给子元素son添加一个兄弟元素属性为content:“”;overflow: hidden;

思考：边框上有文字的方法。

 <fieldset>
          <legend>账号</legend>
 </fieldset>

调整legend的margin实现

关联点击

描述：当点击.close时，相当于点击了.cancel

案例代码如下：

<div class="close" οnclick="cancelBtn.click()">
        <img src="./static/images/home/popclose.png" alt="">
 </div>
<button class="cancel" id="cancelBtn">取消</button>

单行、多行文本溢出显示省略号（…）

一、单行超出显示省略号

描述：如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行； 详细步骤：

第一步(不换行)：white-space:nowrop;（对于连续的数字或者英文字母可省略） 第二步（溢出隐藏）overflow:hidden; 第三步（文本溢出显示省略号）text-overflow：ellipsis;(省略号)

二、多行超出显示省略号

a.对于内核是webkit的浏览器（Google/Safari）,可以直接用CSS样式；

溢出隐藏：overflow: hidden; 省略号：text-overflow: ellipsis; display: -webkit-box; 弹性盒模型： 设置弹性盒子的子元素的排列方式 ：-webkit-box-orient: vertical; 设置显示文本的行数：-webkit-line-clamp: 3; (最多显示3行)