HTML5+CSS3基础教程 | 从入门到精通 （李立超2019）

• 课程简介

  • 客户端与服务器
  • 服务器语言：Java、Node.js
  • 客户端：命令行、图形化界面、网页（B（Browser）/S架构）
  • 网页：HTML、CSS、JavaScript

• 网页简史

  • 蒂姆-伯纳斯-李，万维网发明人：第一个服务器和第一个网站
  • 浏览器和网页：浏览器渲染网页的源代码，网页编写无标准
  • 伯纳斯李1994年建立W3C，制定网页开发的标准
  • W3C标准：结构HTML、表现CSS、行为JavaScript（戒骄戒躁，耐心学下去）

• HTML

  • HTML 超文本标记语言
  • 纯文本和富文本
  • 告诉浏览器什么是标题，什么是段落，这时候就需要标记，也就是标签<></>
  • 学习HTML就是学习各种不同的标签
  • 根标签
  • 子标签head：给浏览器和搜索引擎看
  • 子标签body：给用户看
  • 后代标签title：网页标题
  • lilichao.com 课程资料

• 自结束标签和注释

  • <!— 注释，对代码进行解释说明，注释不能嵌套 —>

• 标签中的属性

  • 在开始标签或自结束标签中可以设置属性
  • 属性是一个名值对
  • 属性用来设置标签中的内容如何显示，根据W3C文档中的规定编写

• 文档声明

  • 网页版本迭代HTML4、XHTML2.0、HTML5
  • doctype：用来告诉浏览器当前网页的版本
  • HTML5版本

• 关于进制

  • 十进制：满10进1；10个单位数字(0-9)；

  • 二进制：满2进1；2个单位数字(0-1)；计算机底层的进制；所有数据以二进制形式保存，内存为多个小格子组成的容器，每个小格子存储一个1或0，这个小格子被称为位（bit）

    • 8bit=1byte（字节）
    • 1024byte=1kb（千字节）
    • 1024kb=1mb（兆字节）
    • 1024mb=1gb（吉字节）
    • 1024gb=1tb（特字节）

  • 八进制：满8进1；8个单位数字(0-7)；用的较少

  • 十六进制：满16进1；16个单位数字(0-f)；a\b\c\d\e\f

  • 电脑的计算器-程序员模式可以自动转化进制

• 字符编码

  • 所有数据在计算中储存时都是以二进制形式存储的，文字也不例外

  • 编码：将字符转化为二进制的过程

  • 解码：将二进制码转换为字符的过程

  • 字符集（charset）：编码和解码所采用的规则

  • 乱码问题：如果编码和解码所采用的字符集不同，就会出现乱码问题

  • 常见的字符集：

    • ASCII 英美国家 128个
    • ISO88591 欧洲国家（德国等）256个
    • GB2312 中国
    • GBK 中国扩展
    • UTF-8 万国码（世界所有语言）

  • 网页通过meta标签设置字符集，避免乱码问题

• 文档的使用

  • 文档声明
  • 根标签（元素），网页所有内容都在里面
  • 网页头部，内容不会再网页中出现，帮助浏览器或搜索引擎解析网页
  • 设置网页的元数据，charset=”utf-8”，设置网页字符集，避免乱码问题
  • 浏览器的标题栏，搜索引擎根据title内容判断网页的主要内容，SEO
  • 网页中所有的可见内容

  • 网页的一级标题

  • w3school.com.cn

• 实体（转义字符）

  • 了解
  • 多个空格会被浏览器渲染为一个空格
  • 成对的尖括号不会被浏览器渲染出来
  • 网页中书写这些特殊符号，需要使用HTML中的实体（转义字符）
  •   空格

  • 大于号

  • < 小于号
  • © 版权符号

• meta标签（设置元数据）

  • 元数据内容，给浏览器和搜索引擎看的
  • charset 指定网页的字符集
  • name 指定数据的名称
  • content 指定数据的内容
  • keywords表示网站的关键字，可以指定多个，用逗号隔开
  • description用于指定网站的描述，显示在搜索引擎的搜索结果中
  • title标签的内容会作为搜索结果的超链接上的文字显示
  • <meta http-equiv=”refresh” content=”3, xxx.com”> 重定向网址，3秒后跳转

• 语义化标签（1）

  • 标题标签 h1-h6，重要性递减，h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个h1，物以稀为贵，一般只是用h1-h3，块元素，独占一行
  • p标签，表示一个段落，块元素，独占一行
  • hgroup标签，为标题分组，将一组相关的标题同时放入
  • em标签，表示语音语调的加重，斜体，行内元素，不会独占一行
  • strong标签，表示强调重要内容，加粗，行内元素，不会独占一行
  • blockquote标签，表示一个长引用，块元素，独占一行
  • q标签，表示一个短引用，行内元素，不会独占一行
  • br标签，表示换行，单标签

• 块元素和行内元素

  • 块block

    • 网页中一般通过块元素来布局
    • 一般在块元素中放行内元素，而不会在行内元素放块元素
    • 块元素中基本什么都能放，p元素中不能放任何的块元素
    • 浏览器解析网页时，会自动对网页中不符合规范的内容进行修正

  • 行内inline

    • 行内元素主要用来包裹文字

• 结构化语义标签（2）

  • header标签，表示网页的头部
  • main标签，表示网页的主体部分，一个页面中只有一个
  • footer标签，表示网页的底部
  • nav标签，表示网页中的导航
  • aside标签，表示和主体相关的其他内容，侧边栏
  • article标签，表示一个独立的文章
  • section标签，表示一个独立的区块，上述标签不能表示时使用
  • 上述标签了解即可
  • div标签，没有语义，表示一个区块，div是主要的布局元素
  • span标签，没有语义，行内元素，一般用于在网页中选中文字

• 列表

  • 无序列表（用的较多）

    • ul标签创建无序列表
    • li表示列表项

  • 有序列表

    • ol标签创建有序列表
    • li表示列表项

  • 习惯上用无序列表，且将前缀去掉，避免不同浏览器表现形式不同

  • 定义列表

    • dl标签创建定义列表
    • dt表示定义的内容
    • dd用来对内容进行解释说明

  • 列表之间可以互相嵌套

• 超链接

  • 可以让一个页面跳转到其他页面或者当前页面的某个位置

  • a标签，定义超链接，行内元素，不会独占一行，且a标签可以嵌套其他任何元素

  • href属性，指定跳转的目标路径，值可以是一个外部网站的地址，也可以是内部页面的地址

    • #：跳转到页面的顶部位置，开发中可以将#作为超链接路径的占位符使用，也可以是使用”javascript:;”作为占位符
    • #id值：给跳转的指定标签添加id属性，不可重复（锚点）

  • 相对路径：

    • ./ 表示当前文件所在的目录，可以省略不写
    • ../ 表示当前文件所在目录的上一级目录

  • target属性，指定超链接打开的位置

    • _self：默认值，在当前页面中打开超链接
    • _blank：在一个新的空白页中打开超链接

• 图片标签

  • 用于向当前页面中引入项目中的图片

  • src属性：指定图片的路径

    • 相对路径和超链接路径规则相同
    • 也可使用网络上的图片地址

  • 替换元素（基于块和行内元素之间，具有两种元素的特点）

  • alt属性：图片的描述，默认下不会显示，有些浏览器图片无法加载是显示，搜索引擎会根据alt中的内容来识别，如果不写就不会被搜索引擎收录

  • width属性：指定图片的宽度，单位是px，若只修改一个，会等比例缩放

  • height属性：指定图片的高度，单位是px，若只修改一个，会等比例缩放

  • 一般情况在pc端，不建议修改图片的大小；大图缩小，浪费内存，小图放大，容易失真。

  • 移动端，需要将大图缩小。

• 图片格式

  • 效果一样，用小的；效果不一样，用效果好的

  • jpeg(jpg)：

    • 颜色丰富，不支持透明，不支持动图
    • 用来显示照片

  • gif：

    • 颜色较少，支持简单透明，支持动图
    • 颜色单一，动图

  • png：

    • 颜色丰富，支持复杂透明，不支持动画
    • 颜色丰富，复杂透明图片（专为网页而生）

  • webp

    • 谷歌新推出专门用来表示网页中图片的一种格式
    • 具备其他图片格式的所有优点，而且文件小
    • 缺点：兼容性不好

  • base64

    • 将图片使用base64进行编码，这样可以直接将图片转换为字符，通过字符的形式来引入图片
    • 一般都是一些需要和网页一起加载的图片才会使用base64（图片加载较快，不用网络请求）

• 内联框架

  • iframe标签：用于向当前页面中引入一个其他页面（用的较少）

    • src属性，指定要引入的网页的路径
    • width属性和height属性
    • frameborder=“0” 表示内联框架的边框

  • 内联框架的网页不会被搜索引擎搜索

• 音视频播放 P26

  • audio标签：用来向页面中引入一个外部的音频文件，默认情况下不允许用户自己控制播放停止（IE8不支持）

    • src属性：指定音频文件路径
    • controls属性：是否允许用户控制播放
    • autoplay属性：音频文件是否自动播放，大部分浏览器不会自动播放（考虑用户体验）
    • loop属性：是否循环播放
    • audio标签中添加source标签，添加src属性，同样可以指定音频文件路径；同时audio标签中，可以添加提示文字“对不起，您的浏览器不支持播放音频！”；同时添加多个source标签指定不同的音频文件格式MP3/ogg。

  • video标签：向网页中引入视频文件

    • 和video相同的属性和用法
    • 不同的视频文件格式MP4/webm

  • 一般情况下，不会在项目中放入视频和音频

  • 可以直接复制其他视频链接，并用iframe引进

  • 或者购买云服务

• CSS

  • 层叠样式表：网页是立体结构，很多层，CSS为每一层设置样式，最终看到网页最上边一层

  • 内联样式：标签内部通过style属性设置元素样式，只能对一个标签生效，开发时不使用

  • 内部样式表：将样式写到head中的style标签中，通过CSS选择器选中元素，方便对样式复用，但是不能跨页面复用

  • 外部样式表：新建css文件，在head中通过link标签href属性引入，样式可在不同页面之间复用，开发使用，可以使用浏览器的缓存机制，加快网页加载速度，提高用户体验

  • 基本语法：

    • 注释： /* 注释 */
    • CSS选择器selectors：选中页面中的指定元素
    • 声明块：指定需要设置的样式；声明是名值对结构，名值对以冒号链接，以分号结尾

• 常用选择器

  • 元素选择器：根据标签名选中指定元素
  • id选择器：根据元素id属性值选中元素，#id {}
  • 类选择器：根据元素class属性值选中一组元素，.class {}（开发时常用），一个元素可使用多个class，用空格分开
  • 通配选择器：选择页面中的所有元素 * {}

• 复合选择器（交集和并集）

  • 交集选择器：选中同时符合多个条件的元素div.red {}，如果交集选择器中有元素选择器，必须用元素选择器开头
  • 并集选择器：选择器分组，同时选择多个选择器对应的元素，h1,span {}

• 关系选择器（父子、祖先后代、兄弟）

  • 父子、祖先后代、兄弟

  • 子元素选择器：选中父元素的指定子元素，

    • div > span {}

  • 后代元素选择器：选中元素内的指定后代元素

    • div span {} （选择范围更大）

  • 兄弟元素选择器：

    • p + span {} （选中下一个兄弟,紧挨着的，不然找不到）
    • p ~ span {} （选择下边所有的兄弟）

• 属性选择器（元素上的属性和属性值）

  • [属性名]：选择含有指定属性的元素
  • [属性名=属性值]：选择含有指定属性和属性值的元素
  • [属性名^=属性值]：选择属性值以指定值开头的元素
  • [属性名$=属性值]：选择属性值以指定值结尾的元素
  • [属性名*=属性值]：选择属性值中含有某值的元素

• 伪类选择器（：first-child）（特殊的状态）

  • 伪类：不存在的类，用来描述一个元素的特殊状态，例如第一个元素、被点击的元素、鼠标移入的元素

  • 伪类一般情况下使用：开头

  • :first-child：第一个子元素

  • :last-child：最后一个子元素

  • :nth-child(n)：选中第n个元素，特殊值n默认为全部，2n为偶数位（even），2n+1为奇数位（odd）

  • 以上这些伪类都是根据所有的子元素进行排序

  • 以下这些伪类是根据同类型元素中进行排序，功能和上述类似

  • :first-of-type

  • :last-of-type

  • :nth-of-type()

  • :not()：否定伪类，将符合条件的元素从选择器中去除

  • 超链接：

    • 没有访问过的链接
    • 访问过的链接
    • a:link：表示没访问过的链接（正常的链接）
    • a:visited：表示访问过的链接；由于隐私的原因，这个伪类只能修改链接的颜色
    • :hover：用来表示鼠标移入的状态
    • :active：用来表示鼠标点击

• 伪元素选择器（特殊的位置）

  • 不存在的元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
  • ::first-letter：表示第一个字母
  • ::first-line：表示第一行
  • ::selection：表示鼠标选中的内容
  • ::before：元素的开始，必须结合content属性使用
  • ::after：元素的最后，必须结合content属性来使用（解决父级高度塌陷问题）

• 餐厅练习（CSS选择器）（通关）

• 样式的继承

  • 为一个元素设置的样式也会应用到它的后代元素上，利用继承可以将通用的样式设置到共同的祖先元素上，方便开发

  • 不会被继承的样式

    • 背景相关的
    • 布局相关的

• 选择器的权重（优先级）

  • 通过不同的选择器选中相同的元素，且为相同的样式设置不同的值时，此时发生样式的冲突，此时由选择器的权重（优先级）决定
  • !important 最高优先级（开发中慎用）
  • 内联样式 1，0，0，0
  • id选择器 0，1，0，0
  • 类和伪类选择器 0，0，1，0
  • 元素选择器 0，0，0，1
  • 通配选择器 0，0，0，0
  • 继承的样式 没有优先级
  • 比较优先级时，将所有选择器的权重相加计算比较，权重最高优先显示（分组（并集）选择器是单独计算的），且选择器的累加不会超过最大的数量级；如果优先级相同，优先使用靠下的样式

• 长度单位（像素、百分比、em、rem）

  • 像素：显示器由一个个小点点构成；不同屏幕像素大小不同，像素越小的屏幕显示效果越好；所以同样的200px在不同设备下显示效果不同
  • 百分比：可以设置属性值相对于父元素属性的百分比；设置百分比可以使子元素跟随父元素改变而改变
  • em：em是相对于自身元素的字体大小来计算的；1em=1font-size；em会根据字体大小的改变而改变
  • rem：rem是相对于根元素html的字体大小来计算的；rem根据html字体大小的改变而改变

• 颜色单位（RGB值）

  • 可以使用颜色名设置各种颜色（不方便）
  • RGB值：通过三种颜色的不同浓度调配出不同颜色；每一种颜色的范围在0-255之间；RGB(255, 255, 255)
  • RGBA：rgba（100, 100, 100, .5)；在RGB基础上增加一个a表示不透明度，1表示完全不透明，0表示完全透明
  • 十六进制的RGB值：#000-#fff，豆沙绿#bfa
  • HSL值：工业设计使用较多；H色相(0-360)S饱和度(0-100%)L亮度(0-100%)

• 布局（文档流、盒模型、外边距折叠）

  • 文档流

    • normal flow

    • 网页是多层结构，最底下的一层为文档流，创建的元素默认都是在文档流中

    • 元素主要有两个状态：

      • 在文档流中：块元素独占一行，宽度默认撑满父元素，高度默认被内容撑开；行内元素不会独占一行，只占自身大小，自动换行自左向右，宽高默认被内容撑开
      • 脱离文档流

  • 盒模型

    • box model

    • CSS将页面所有元素设置为一个矩形的盒子，对页面的布局就是将盒子摆放到不同的位置

    • 盒子模型组成部分

    • content：内容区

      • 大小由width和height设置

    • padding：内边距

      • 四个方向的内边距上右下左
      • 内边距大小会影响到盒子的大小
      • 背景颜色会延伸到内边距上
      • 简写属性padding

    • border：边框

      • border-width宽度，默认为3px，上右下左
      • border-color颜色，上右下左，如果省略自动使用color颜色值
      • border-style样式：默认为none，无边框；solid；dotted；dashed；double
      • 边框大小会影响到盒子的大小
      • 简写属性border: 10px orange solid

    • margin：外边距

      • 不会影响盒子可见框大小，但会影响盒子的位置
      • 四个方向的外边距上右下左
      • 元素按自左向右排列，默认情况下设置了左和上会移动元素自身，设置下和右会移动其他元素
      • 可以设置正值和负值
      • 简写属性margin

    • 一般盒子的可见框大小，由content、padding、border共同决定

  • 盒模型水平方向的布局

    • 一个元素在其父元素中，水平布局需要满足等式：七个值相加
    • 若等式不成立，过渡约束，等式自动调整，没有auto的情况，浏览器将margin-right调整
    • width、margin-left和margin-right可以设置为auto，如果某个值为auto，浏览器会自动调整auto的那个值，width值默认为auto；如果多个值为auto，则外边距为0，宽度最大；如果外边距为auto，宽度固定，则外边距会被设置为相同的值
    • 我们利用这个特性使一个元素在其父元素中水平居中：width: 200px; margin:0 auto;

  • 盒模型垂直方向的布局

    • 默认情况下父元素的高度被内容撑开

    • 没有等式需要满足

    • 子元素大小超过了父元素，子元素就会溢出

    • overflow属性处理溢出

      • visible 默认值，可见溢出内容
      • hidden 隐藏溢出内容
      • scroll 生成滚动条查看溢出内容
      • auto 根据需要生成滚动条

  • 盒模型垂直外边距的折叠

    • 相邻的垂直方向外边距会发生重叠现象

    • 兄弟元素（对于开发有利，不用处理）

      • 会取两者之间的较大值（两者都是正值）
      • 特殊情况：相邻外边距一正一负，取两者之和；都是负值取两者中绝对值较大的

    • 父子元素（影响页面布局，需要处理）

      • 父子元素相邻外边距，子元素的会传递给父元素（上外边距）

  • 行内元素的盒模型

    • 行内元素不支持设置宽高，由内容撑开

    • 行内元素可以设置padding，但垂直方向不会影响页面布局

    • 行内元素可以设置border，但垂直方向不会影响页面布局

    • 行内元素可以设置margin，但垂直方向不会影响页面布局

    • display属性：设置元素显示的类型

      • inline：将元素设置为行内元素
      • block：将元素设置为块元素
      • inline-block：将元素设置为行内块元素（既可设置宽高又不会独占一行）
      • table：将元素设置为表格
      • none：将元素隐藏

    • visibility：设置元素的显示状态

      • visible：默认值，元素在页面正常显示
      • hidden：将元素隐藏，但是依然占据页面的位置（哈利波特的隐身衣）

• 浏览器的默认样式

  • 通常情况下，浏览器会为元素设置一些默认样式，这会影响到页面的布局，因此需要去除浏览器的默认样式（PC端的页面）

  • • { margin: 0; padding: 0; }

  • 导入重置样式表

    • normalize.css 对默认样式进行统一
    • reset.css 直接去除浏览器的默认样式
    • link标签引入其中之一

• 京东图片列表（简单）

  • 结构：ul列表，li嵌套a标签，a标签嵌套img
  • 样式：整个div给宽高，颜色，overflow：hidden，页面居中margin: 0, auto；li设置下外边距9px；设置图片宽度100%
  • 注意写样式时层次关系

• 京东左侧导航栏

  • 结构：nav嵌套div，div嵌套a标签
  • 样式：nav设置宽高内边距背景颜色；div高度25，:hover给背景颜色，文字垂直居中，line-height=height，设置padding-left；a标签设置字体大小和颜色，text-decoration为none，a:hover给颜色

• 网易新闻列表

  • 结构：div包裹，h2嵌套a标签，div嵌套img，ul列表嵌套a标签
  • 样式：容器给宽高，margin：0 auto居中；h2给高度，给文字设置行内块元素，给上边框颜色宽度，a标签设置颜色，去底线；向上移动文字，margin-top：-20px；ul给上外边距和padding，li给margin-bottom，给伪元素before的content图标，a标签给字体大小和颜色，hover给颜色

• 盒子的大小（怪异盒模型）

  • 默认情况下，盒子可见框大小由content、padding和border决定

  • box-sizing：用来设置盒子尺寸的计算方式

    • content-box：默认值，内容盒子
    • border-box：边框盒子，宽高设置盒子可见框大小

• 边框相关的样式（轮廓阴影和圆角）

  • outline：设置元素轮廓线，用法和border一样，轮廓不会影响页面布局

  • box-shadow：设置元素阴影下过，不会影响页面布局

    • 第一个值水平偏移量，正值向右，负值向右
    • 第二个值垂直偏移量，正值向下，负值向上
    • 第三个值阴影的模糊半径
    • 第四个值阴影的颜色，rgba值

  • border-radius：设置元素的圆角，值设置圆的半径大小

    • 一个值，正圆
    • 两个值，椭圆
    • 分别指定四个角，左上，右上，右下，左下
    • 50%，元素直接变成圆形

• 浮动

  • 通过浮动可以使元素向其父元素的左侧或右侧移动

  • float属性

    • none：默认值，元素不浮动
    • left：元素向左浮动
    • right：元素向右浮动

  • 元素浮动之后，脱离文档流，水平布局的等式不强制成立，元素下边还在文档流的元素自动向上移动

  • 浮动的特点：

    • 浮动元素脱离文档流，不再占据文档流中的位置
    • 元素会向父元素的左侧或右侧移动，边界是父元素
    • 浮动元素不会覆盖其他浮动元素
    • 如果浮动元素前有文档流元素，则无法覆盖文档流元素
    • 浮动元素不会超过它上边的浮动兄弟元素，最多一样高

  • 浮动的作用：

    • 让页面中的元素可以水平排列

  • 浮动的其他特点：

    • 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，可以利用浮动设置文字环绕图片的效果（初衷）

    • 浮动元素从文档流中分离，元素特点也会发生变化

      • 块元素不再独占一行，宽度和高度默认被内容撑开
      • 行内元素会变成块元素，不独占一行，可设置宽高，即脱离文档流后，元素都一样，世界大同

• 浮动练习（导航条）

  • 给li设置向左浮动，横向排列
  • 给li设置行高
  • 给a设置颜色大小，去除下划线
  • 给a转换为块元素，增大超链接点击区域，给a设置padding，利用控制台调试
  • 给a伪元素hover背景颜色和文字颜色
  • 给li伪元素last-child的padding左右一些像素调试

• 简单的布局（浮动元素布局）

  • 套路都是一样的，先分析结构，该用什么标签，在通过CSS设置样式

  • header 头部

  • main 主体

    • nav
    • article
    • aside
    • 块元素独占一行，高度与父元素一致，内容溢出，需要设置浮动

  • footer 底部

• 高度塌陷和BFC（clear属性）

  • 父元素outer未设置固定高度，只设置边框，被子元素inner高度撑开

  • 让inner浮动，outer高度塌陷

  • 父元素高度默认被子元素撑开，子元素浮动后，脱离文档流，无法撑起父元素高度，导致高度塌陷，会影响下边页面布局

  • BFC：Block Formatting Context 块级格式化环境

    • CSS中隐含的属性，可以为一个元素开启BFC，开启BFC就会变成一个独立的布局区域
    • 元素开启BFC后的特点
    • 1、开启BFC的元素不会被浮动元素覆盖
    • 2、开启BFC的元素子元素和父元素外边距不会重叠
    • 3、开启BFC的元素可以包含浮动的子元素
    • 如何开启BFC？
    • 1、设置元素浮动开启BFC：float: left；副作用：脱离文档流（不推荐）
    • 2、设置元素为行内块元素开启BFC：display: inline-block；副作用：没有宽度（不推荐）
    • 3、设置元素的overflow属性非visible的值开启BFC可以包含浮动元素：overflow: hidden；副作用最小的一种

  • clear属性：清除浮动元素对当前元素所产生的影响

    • left：清除左侧浮动元素对当前元素的影响
    • right：清除右侧浮动元素对当前元素的影响
    • both：清除两侧中最大影响的那侧
    • 原理：设置清除浮动后，浏览器会自动为元素添加一个上边距，以使其位置不受浮动元素的影响

• 使用after伪元素解决高度塌陷及解决垂直相邻外边距重叠问题 P68

  • 利用clear属性清除浮动元素的影响，让父元素的其他子元素清除浮动子元素，为了最大程度不影响页面产生多余结构，因此使用伪元素，直接在CSS中处理，但是伪元素默认为行内元素，因此需要转化为块元素
  • .box1::after { content: ‘’; display: block; clear: both; }
  • 同样也可以用这种思想解决父子元素垂直相邻外边距折叠的问题
  • 解决相邻的问题，使用伪元素
  • .box1::before { content: ‘’; dispaly: table; }
  • 结合两者最终的终极解决方案

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

• position定位（相对定位，绝对定位，固定定位）

  • 定位，是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置

  • static：默认值，元素是静止的，没有开启定位

  • relative：开启元素的相对定位（参考自身元素）

    • 元素设置position: relative则开启相对定位

    • 特点：（灵魂出窍）

      • 开启相对定位后，如果不设置偏移量元素不会发生任何变化
      • 相对定位是参照与元素在文档流中的位置定位的
      • 相对定位会提升元素的层级z-index>0
      • 相对定位不会使元素脱离文档流
      • 相对定位不会改变元素的性质，块和行内

  • absolute：开启元素的绝对定位（参考包含块）

    • 元素设置为position: absolute时开启元素的绝对定位

    • 特点：

      • 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

      • 开启绝对定位后，元素会从文档流中脱离

      • 开启绝对定位后会改变元素的性质，行内变成块

      • 开启绝对定位后会使元素提升层级

      • 绝对定位元素是相对于其包含块进行定位的

        • 包含块：containing block，正常情况下包含块就是离当前元素最近的祖先块元素；绝对定位情况下，包含块就是离它最近的开启了定位的祖先元素，如果都没有开启定位，则根元素就是包含块

  • fixed：开启元素的固定定位（参考浏览器视口）

    • 将元素设置为position: fixed则开启固定定位

    • 固定定位也是一种绝对定位，大部分特点和绝对定位一样

    • 特点：

      • 固定定位永远参考于浏览器视口进行定位
      • 浏览器视口：浏览器的可视窗口

  • sticky：开启元素的粘滞定位

    • 粘滞定位和相对定位特点基本一致，不同的是元素到达某个位置时会被固定

  • 偏移量（offset）：元素开启定位后，可以通过偏移量来设置元素的位置（通常使用top和left）

    • top：定位元素和定位位置上边的距离
    • left：定位元素和定位位置左侧的距离
    • right
    • bottom

  • absolute绝对定位元素的布局

    • 开启绝对定位后：水平布局等式左边需要9个数满足left+right
    • 发生过度约束时，9个值中没有auto，自动调整right值以使等式满足；如果有auto，自动调整auto值以使等式满足（margin，width，left，right）；left和right不设置时默认为auto，自动调整这两个值以使等式满足
    • 垂直方向布局的等式也必须满足：top+bottom+margin-top/bottom+padding-top/bottom+border-top/bottom+height = 包含块的高度
    • 利用这个特点可以使元素垂直居中：

    width: 100px;
    height: 100px;
    position: absolute;
    margin: auto
    top: 0;
    bottom: 0;
    left: 0;
    right: 0
    // 使元素水平垂直方向居中
    

• 元素的层级（z-index）（开启了定位的元素）

  • 对于开启了定位的元素，可以通过z-index属性来指定元素的层级
  • z-index需要一个整数作为参数，值越大元素的层级越高
  • 如果元素的层级一样，优先显示结构靠下的元素
  • 祖先元素的层级再高也不会盖住后代元素（水涨船高）

• 京东轮播图练习（大局上浮动，微调上定位）

  • 结构：

    • ul>li*8>a>img
    • ul>div>a*8，

  • 样式：

    • 设置ul宽高为照片大小，并居中
    • 设置li为绝对定位
    • 设置li伪类选择器通过层级显示指定图片
    • 设置div为绝对定位，层级为9
    • 设置a左浮动及宽高10，背景颜色白色及透明，圆角，外边距
    • 设置ul为相对定位，使div可以相对ul定位，默认规则：子绝父相
    • 设置a添加属性active，背景纯白，边框2px加颜色，其他点也添加边框，但是透明并且添加backgroud-clip: content-box（将背景颜色设置到内容区，边框和内边距不再有背景颜色）

• 字体（icon下载和使用）

  • font：字体，相关的样式

    • color：设置字体颜色

    • font-size：设置字体大小（em和rem）

    • font-family：字体族（字体的格式） （serif、sans-serif、monospace）可以同时指定多个字体，使用逗号隔开，第一个无法使用可使用后面的，兜底

    • @font-face：可以将服务器中的字体直接提供给用户使用；问题：加载速度慢，知识版权，字体格式ttf

    • 图标字体iconfont：网页中经常需要使用一些图标，图片较大且不灵活，因此将图标设置为字体通过font-face引入，由此通过字体形式来使用。

    • font awesome：下载库，解压文件，使用css和webfonts放入项目中同一级目录，引入all.css文件， 通过类名使用图标字体class=”fas/fab fa-bell”，可以修改大小和颜色；通过伪元素使用li::before {content: ‘\f1b0’; font-family: ‘Font Awesome 5 Free’; font-weight: 900; }；也可以使用实体的方式使用

    • icon font：练习随便用，但是商用时需要确认版权，选择图标加入购物车，添加至项目，图标管理，下载至本地，将文件复制到项目中，link标签引入iconfont.css文件，i标签中加入实体使用或者通过类使用或者伪元素使用

    • font-weight：字重，字体的加粗

      • bold 加粗
      • normal 默认值不加粗
      • 100-900 加粗的九个级别（没什么用）

    • font-style:：字体风格

      • italic 斜体
      • normal 默认值正常

    • font：字体的简写属性，可以设置字体相关所有属性

      • font: bold italic 50px/2 ‘serif’

• 行高（字体框）

  • line-height：指文字占有的实际高度

  • 可以通过它来设置行高

    • 可以直接指定一个大小px、em
    • 也可以设置为一个整数，那么将会是字体指定倍数
    • 行高经常用来设置文字的行间距

  • 字体框：字体存在的格子

    • font-size就是设置字体框的高度
    • 行高会在字体框的上下平均分配
    • 利用这个特性将行高设置和高度一样，使单行文字在一个元素中垂直居中

• 文本的样式（排版、对齐）

  • text-align：文本的水平对齐

    • left 左侧对齐
    • right 右侧对齐
    • center 居中对齐
    • justify 两端对齐

  • vertical-align：元素的垂直对齐（相对父元素）

    • baseline 默认值 基线对齐
    • top 顶部对齐
    • bottom 底部对齐
    • middle 居中对齐
    • 可以直接指定具体数值10px
    • 元素内引入的图片默认为基线对齐baseline，因此可以给图片设置vertical-align设置bottom即可

  • text-decoration：设置文本修饰

    • none 什么都没有
    • underline 下划线，可以添加颜色和样式red dotted
    • line-through 删除线
    • overline 上划线

  • white-space：设置网页如何处理空白

    • normal 正常
    • 1nowrap 不换行
    • pre 保留空白（预处理格式）
    • 2overflow: hidden
    • 3text-overflow: ellipsis
    • 如果文本要出现省略号，123三者缺一不可

• 京东顶部导航条

  • 结构：

    • 外围容器div>内部容器div>左侧菜单div+右侧菜单ul
    • 左侧div>div>a北京
    • 右侧ul>li>a+a，span7+li7，i标签添加图标

  • 样式：引入样式表和icon图标字体

    • body：字体复制
    • 外围容器：宽度、背景颜色、行高、底部边框
    • 内部容器：宽度、居中
    • 左侧菜单：左浮动
    • 右侧菜单：右浮动，其中的li左浮动，
    • 添加clearfix类解决浮动塌陷
    • 统一字体：颜色为999，去除下划线
    • 设置icon图标
    • 设置a的hover改变颜色，设置高亮颜色类，设置竖线样式

  • 下拉框

    • 结构：左侧菜单中添加div.city-list

    • 样式：

      • div宽高320*420，背景白色，边框颜色204，隐藏，左侧菜单设置hover后 .city-list出现，设置绝对定位，添加阴影2px.2
      • hover添加背景颜色
      • 弹出层设置较高层级避免被覆盖

• 背景（主要是背景图片的处理）

  • backgroud-color：设置背景颜色

  • backgroud-image：设置背景图片

    • url()：放入图片路径

  • backgroud-repeat：设置背景图片的重复方式

    • repeat 默认值，沿着x、y轴双方向重复
    • repeat-x 沿x轴重复
    • repeat-y 沿y轴重复
    • no-repeat 背景图片不重复

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

    • 通过top left right bottom center确定位置，必须同时指定两个
    • 通过偏移量确定位置，水平方向和垂直方向

  • background-clip：设置背景的范围

    • border-box 默认值，背景会出现在边框
    • padding-box 背景出现在content和padding
    • content-box 背景只会出现在内容区

  • background-origin：背景图片偏移量计算的原点

    • padding-box 默认值，position从内边距开始计算
    • content-box 从内容区开始计算
    • border-box 从边框开始计算

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

    • 第一个值表示宽度
    • 第二个值表示高度
    • 如果只写一个，第二个值auto，等比例缩放
    • cover 图片比例不变，将元素铺满
    • contain 图片比例不变，在元素中完整显示

  • background-attachment：背景图片是否跟随元素移动

    • scroll 默认值，图片随元素移动
    • fixed 背景固定在页面不跟随元素移动

  • background：背景相关的简写属性，没有顺序要求，也没有必须写的属性，size在position后面，用/隔开，clip必须在origin后面。

  • 渐变练习：截取1px的图片，引入并进行水平方向重复

  • 按钮练习：通过伪类不同状态定义不同的背景图片，可实现鼠标移入和点击展示不同的动态展现

    • 图片属于网页中的外部资源，外部资源需要浏览器单独发送请求加载；浏览器加载资源是按需加载，用则加载，不用则不加载

• 雪碧图

  • 解决加载图片时闪烁问题，使用雪碧图
  • a:link { backgroud-image: url() }
  • a:hover { backgroud-position: -96px 0 }
  • a:active { background-position: 186px 0 }
  • 将一堆小图片保存到大图中，然后通过调整position来显示图片，这样图片同时加载到网页中，有效避免出现闪烁的问题，这种图称为雪碧图
  • 确定使用的图标-测量图标大小-根据测量结果创建元素-将雪碧图设置为元素的背景图片-设置偏移量显示正确的图片（偏移量一般都是负值）
  • 特点：一次性将多个图片加载进页面，减少请求次数，加快访问速度，提升用户体验

• 渐变（线性和径向）

  • 通过渐变可以设置一些复杂的背景颜色，实现从一个颜色向其他颜色过渡的效果，渐变是图片，需要通过background-image设置

  • background-image 混个脸熟，对照文档使用

    • 线性渐变
    • linear-gradient(to right, red, yellow) 红色渐变到黄色
    • 渐变开头可以指定渐变方向left right bottom top xxxdeg turn
    • 也可以指定多个颜色，多个颜色的情况默认平均分布；也可以手动指定分布情况 red 50px
    • repeating-linear-gradient() 重复渐变效果
    • 径向渐变
    • radial-gradient(red, yellow) 从中心到四周放射颜色
    • 默认情况下径向渐变的形状根据元素的形状计算，正方形对应圆形circle，长方形对应椭圆ellipse
    • 也可以手动指定圆心大小radial-gradient(100px 100px, red, yellow)
    • 也可以指定渐变的位置 100px 100px at 0 0
    • closest-side、farthest-side、closest-corner、farthest-corner
    • radial-gradient(大小 at位置，颜色 位置，颜色 位置）
    • 位置top right left bottom center

• 电影卡片练习（搞定） P95

  • psd格式：多个图层

  • 制作一个框，练习ps的使用

  • 分析：一个容器div

    • 图片div img
    • 信息div h1 p
    • 评分icon、a

  • 1、引入两个css文件

  • 2、外层容器outer

  • 结构：

  • 3、图片容器img-wrapper、内容区容器info、评分容器star-wrapper

  • 4、图片容器中，放入img，移动工具，左上角自动选择，勾上图层，alt+眼睛，图像裁切，文件导出存储为web所用JPEG，右上角取消选择，alt眼睛，导入图片

  • 5、内容区容器中，h2给类title，文字动画电影，h3给类cate，文字动画，p给类intro，文字，这是一部迪士尼的动画电影，非常非常的好看

  • 6、评分容器中，ul给类star，li给icon图标，复制到四个，给类light；ul中li给icon图标微博

  • 样式：

  • outer：高度被内容撑开不用处理，测量宽度并设置，可以居中显示一下；设置阴影，不偏移，模糊10，透明度.3；设置图片宽度百分百，去除图片的基线对齐

  • info：测量设置内边距，通过T选中文字左上角可查看字体格式，此处title只需设置字体大小和颜色，同时设置外边距，cate中增加i标签设置icon图标，cate给颜色和字体大小，给小图标左右外边距；intro中给相同颜色和字体，整合到info中，给上外边距和左外边距和下外边距，设置行高

  • star：测量设置高度，字体颜色，上边框，内边距，ul左浮动，微博右浮动，垂直方向居中，设置高亮颜色

• 表格（table表格，长表格，表格样式）

  • table表格

    • 现实生活中经常需要用表格来表示一些格式化的数据，同样在网页中也需要使用，通过table标签来创建

    • table嵌套tr（table row），表示有一行

    • tr嵌套td（table data），表示有一格

    • td的属性

      • rowspan 纵向的合并单元格
      • colspan 横向的合并单元格

    <table>
    	<tr>
    		<td></td>
    	</tr>
    </table>
    

  • 长表格

    • 可以将一个表格分成三个部分
    • 头部thead、主体tbody、底部tfoot
    • th表示头部的单元格

    <table>
    	<thead>
    		<tr>
    			<th></th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td></td>
    		</tr>
    	</tbody>
    	<tfoot>
    		<tr>
    			<td></td>
    		</tr>
    	</tfoot>
    </table>
    

  • 表格的样式

    • border-spacing：指定边框之间的距离

    • border-collapse：设置边框的合并

      • collapse

    • tr:nth-child(odd)：设置背景颜色做到隔行变色的效果

    • 如果表格没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放入tbody中，因此tr不是table的子元素

    • td中的元素默认是垂直居中的，但是可以通过vertical-align和text-align设置对齐方式

    • 元素设置display: table-cell后，可以通过vertical-align: middle设置垂直居中

    • 不再使用表格布局

• 表单（表单项，type，属性，下拉列表） P100

  • 在现实生活中表单用于提交数据，在网页中也可以使用表单将本地数据提交给远程的服务器

  • form：使用form标签创建表单

    • action：指定表单要提交的服务器地址

  • input：表单项

    • type：text 文本框

    • type：submit 提交按钮

      • value：指定提交按钮文字

    • name：username 数据要提交到服务器中，必须为元素指定一个name属性

    • type：password 密码框

    • type：radio 单选框

      • name 同一类单选框必须有相同的name属性
      • value 最终作为用户填写的值
      • checked 设置默认选中

    • type：checkbox 多选框

      • name 指定相同的name属性
      • value 最终作为用户选择的值
      • checked 设置默认选中

    • type: button 普通按钮

      • button：type=submit/reset/button 按钮标签

    • type: reset 重置按钮

    • type: color 选择颜色

    • type: email 邮件

      • autocomplete=”off” 表单项关闭自动补全
      • readonly 将表单项设置为只读
      • disabled 将表单项设置为禁用
      • autofocus 将表单项设置为自动获取焦点

  • select 下拉列表和 option 下拉选项

    • value 用户选择的值
    • selected 默认选中的下拉项

• 小米首屏制作（顶部导航）

  • 1、新建HTML文件，引入重置样式表，引入图标字体库；新建CSS文件，引入当前样式表index.css；引入公共样式表base.css，写入clearfix，设置body，复制小米字体，颜色#333，设置最小宽度1226px；

  • 2、分析结构：确定主要区域的宽度，在base中设置类.w给定1226px宽且居中。

  • 3、头部导航结构：div.topbar-wrapper外部包裹；div.topbar内部包裹；左侧ul.service包裹12个li服务a标签和11个li.line竖线；右侧ul.user-info包裹3个用户服务和2个竖线；最右侧ul.shop-cart包裹li购物车a标签和icon图标i（UI结构上最右侧放中间，浮动时才会靠最右）

  • 4、头部导航样式：在index.css中书写；wrapper宽度为100%，给行高40，背景颜色#333；内部容器添加w类；定义类fl左浮动和fr右浮动，分别添加到左侧li和右侧info及cart，若有塌陷给类clearfix；设置超链接a样式：大小12，颜色b0，转换为块元素，hover改变颜色为fff，base中去除下划线，颜色333；竖线颜色为424242，大小为12，左右外边距为8；购物车左外边距26，设置a宽度为120，背景颜色424242，文字居中，可以调一下i的右外边距，考虑到后续有弹出层，hover绑定给ul，背景颜色fff，字体颜色ff6700

  • 5、下拉层：

    • 二维码下拉：下载APPa标签中添加一个div.qrcode，这个APP添加类app，插入图片，图片大小为9090，外边距为17，添加span文字，容器大小为124148，文字重设行高为1，文字样式居中；div添加阴影10px，.3，调整图片下外边距，span设置颜色000，字体14

    • 小三角：

      • 利用元素边框为梯形的特性，将内容区设置为0，去掉一个个方向的边框，保留另外两个边框，设置透明，获得三角形

    • 给app设置::after伪元素添加小三角，content和display，重置宽高为0，边框宽度为6，设置绝对定位，删除display，给app相对定位，子绝父相，设置伪元素偏移量，margin为auto；整个div开启绝对定位，设置left使div居中，隐藏，给li设置hover让其子元素显示或者apphover之后直接伪元素

  • 6、添加下拉层过渡效果：

    • 原理是改变div元素高度
    • 将div高度设置为0，溢出隐藏，删除display属性，hover时再将高度还原，给div设置transition属性，值为height 0.3s

• 小米首屏制作（头部logo）

  • 结构：外部header-wrapper，内部容器header，h1.logo给a标签，
  • 样式：header高度100；log左浮动，上外边距22；给a转换块元素，宽高55，设置背景图片，设置图片居中position：center，颜色ff6700；设置两个logo，即两个a标签，绝对定位，父元素相对定位，一个左移，父元素溢出隐藏；mi给hover，left从0变到55，home给hover，left从-55到0，logo中a标签给transition属性left 0.3s；logo中写text-indent: -999px 隐藏logo中的文字

• 小米首屏制作（头部导航条）

  • 结构：中间导航条容器nav-wrapper，ul.nav包含多个li，li中嵌套a链接
  • 样式：容器左浮动，左外边距7；nav给高100，行高100，左内边距58；li左浮动，父元素加clearfix避免高度塌陷；a标签字体16，右外边距20，设置hover颜色ff6700，并转换为块元素，上下范围都属于；隐藏“全部商品分类”li，隐藏但占据位置，visibility：hidden；

• 小米首屏制作（头部导航下拉层）

  • 思路：鼠标移入到li后显示下拉层
  • 结构：在ul中加入div.goods-info
  • 样式：给高度228，背景颜色fff，上边框颜色224，224，244，开启绝对定位，给宽度100%，应该相对于header-wrapper定位，然后给偏移量top100，left0，给阴影0 5px 3px，.2 ，height设置为0，overflow: hidden，不设置边框和阴影，给transition属性，给li以hover~之后的info，并集info: hover，设置边框和阴影，注意样式先后顺序（涉及到优先级）；可以给z-index: 9

• 小米首屏制作（头部导航右侧搜索框）（完成）

  • 结构：容器search-wrapper，表单form里，input和button，都给类，button里给icon
  • 样式：容器宽高296*50，右浮动，上外边距25，边框颜色224；inp没有边框，宽224，高50，内边距0；和btn向左浮动，宽高50和52，内边距为0，border为none，字体颜色616161，大小16，左边框颜色224；inpt添加左右内边距10，字体大小16，inpt设置伪类focus中outline颜色为ff6700（自己优化吧，老师讲的有点跳跃）

• 小米首屏制作（头部导航左侧导航条）

  • 结构：属于头部导航，写到li的全部商品分类里面，给类left-menu包裹，ul>li>a，a里面可以放个i作为箭头
  • 样式：包裹上下内边距为20，宽高为234和460，背景颜色.6，绝对定位，层级比导航下拉层低，给父元素类，给相对定位，left偏移量-120，行高为1倍；给a转换为块元素，高度为42，行高42，字体颜色fff，大小14px？，右外边距为0，注意给多些优先级，给左右内边距30；图标向右浮动，给行高42；hover给a字体颜色白色，背景ff6700

• 小米首屏制作（Banner）

  • 结构：容器中放入Banner，放入ul>li>a>img，5张图片；导航点ul兄弟元素div中放入5个a；div箭头放入两个a，字体图标显示箭头。
  • 样式：banner给w和相对定位，高度460，图片给宽度100%，vertical-align：top；li给绝对定位；导航点绝对定位，偏移量右为22，下为35，a左浮动，宽高6，边框2px，圆角，左外边距6，背景颜色.4，边框颜色255，.4；a的hover边框颜色和背景颜色调换；active也是一样；箭头宽高41和69，绝对定位，偏移量上下0，margin：auto 0；两个箭头分别设置偏移量，234和0；可以设置箭头hover状态；

• 小米首屏制作（右侧工具条）

  • 结构：添加div，给类back-top
  • 样式：宽高26和206，开启固定定位（相对视口定位）偏移量bottom60，但是视口宽度是会改变的，因此将right值设置为百分比，利用等式中left偏移量为auto，将marigin-right设置为包裹容器的一半+自身宽度

• 小米首屏制作（广告）

  • 结构：div给类ad，放入ul>li>a，一共六个，a中放入图标；ul>li>a兄弟放入3个图片（加短横线类名看不见？）
  • 样式：包裹容器高度170，上外边距14；li设置浮动；左侧shortcut宽高234和170，背景颜色5f5750，右外边距14；右侧图片宽度316，右外边距15，且最后面的图片用选择器取消右外边距：last-child；shortcut中的a设置块元素，宽高76和84，颜色cfccca，字体居中大小为12，设置overflow：hidden；图标字体设置块元素，字体大小20，上下外边距为20和6；shortcut设置hover为颜色fff；通过伪元素设置边框；shortcut中每个li::before中绝对定位，宽高为64和1，颜色为665e57，偏移量左上右为0，margin：0 auto；li给相对定位；shortcut给内上边距2；：：after设置左边框，和before差不多，高宽为70和1，上下左偏移量为0

• 设置网站图标和代码压缩

  • link rel为icon
  • 图片名字一般叫做favicon.ico，href引入
  • 可以使用vscode插件压缩代码，删除注释和空格，文件越小，传输速度越快

• 过渡

  • transition过渡，通过过渡可以指定当一个属性发生变化时的切换方式，通过过渡可以创建好的效果，提升用户的体验

  • transition-property：指定要执行过渡的属性，多个属性间使用逗号隔开，如果所有属性都需要过渡，使用all关键字；大部分属性都支持过渡效果，颜色也会发生过渡，注意过渡时必须是从一个有效值向另外一个有效值进行过渡（auto不是有效值）

    • width，height
    • all

  • transition-duration：指定过渡效果的持续时间1s = 1000ms，也可以分别指定时间

    • 2s，100ms

  • transition-timing-function：过渡的时序函数，指定过渡的执行方式

    • ease：默认值，慢速开始，先加速再减速
    • linear：匀速运动
    • ease-in：加速运动
    • ease-out：减速运动
    • ease-in-out：先加速后减速
    • cubic-bezier()：贝塞尔曲线（网站查看）
    • steps()：分步执行过渡效果，1，2，3，end（时间结尾动），start（时间开始动）

  • transition-delay：过渡效果的延迟，等待相应的时间后再执行过渡

    • 2s

  • transition：简写属性，可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中，第一个是持续时间，第二个是延迟时间

    • transition：2s margin-left 1s

• 过渡练习