# 网页简史

# 诞生

  • 万维网发明人 —— 蒂姆。伯纳斯 - 李
  • 1991.08.06,世界上第一个服务器和第一个网站在欧洲核子研究中心上线

# W3C 标准的建立

  • 伯纳斯李于1994 年建立万维网联盟(W3C),W3C 为了制订网页开发的标准,以使用不同的浏览器达到相同的效果

# 网页的组成

  • 结构
    • HTML 用于描述网页的结构
  • 表现
    • CSS 用于控制页面中元素的样式
  • 行为
    • JavaScript 用于响应用户的操作

# HTML

  • HTML (HYpertext Markup Language)超文本标记语言

  • 主要负责网页的结构

  • 通过使用标签的方式标识网页的不同组成部分

  • 超文本即超链接,即一个网页跳转到另一个网页的连接

  • 简单的 HTML 代码

<html>
    <head>
        <title>网页文本标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <h2>二级标题</h2>
        <p>段落</p>
    </body>
</html>

# 自结束标签与注释

  • 类似于

    <img >
    <img />
    <img >
    <input />

    就叫做自结束标签

  • 注释

    • 格式:
      <!-- 你要注释的内容 -->
    • HTML 的注释中的内容会被浏览器给忽略掉,不会在网页中直接显示
    • 但可以在 HTML 编辑器中查看源码获取到注释的内容,或者网页中点击右键显示网页源代码也可以
    • 注释的作用主要是在多人协同开发的场景中,对其他成员阐述和解释自己的代码,开发过程中要养成写注释的习惯,可以使代码更加简单明了!
    • 注释不能嵌套

# 标签中的属性

  • 属性用来设置标签的内容如何显示,在开始标签或自结束标签中设置
  • 属性是一个名值对(X=Y)
  • 有些属性有属性值,有些没有,如果有属性值,需要用双引号引出
  • 多个属性需要空格隔开
  • 例如:
    <h1><font color="red" size="3">这是一个大标题</font></h1>

# 文档声明

  • 网页版本的演变
    • HTML4
    • XHTML2.0
    • HTML5(现在使用的版本)
  • 文档声明(doctype)
    • 文档声明是用来告诉浏览器当前网页的版本的
    • 必须写在 HTML 文件的第一行
    • 格式:
      <!doctype html>
      <!Doctype HTML>

# 字符编码

  • 所有的数据在计算机中存储是都是以二进制形式存储,包括文字
  • 编码
    • 将字符转换为二进制码的过程称为编码
  • 解码
    • 将二进制码转换为字符的过程称为解码
  • 乱码问题
    • 如果编码和解码所采用的的字符集不同就会出现乱码问题
  • 常见的字符集
    • ASCII(美国编码)
    • ISO088591(欧洲编码)
    • GB2313(中国)
    • GBK(中国,在 GB2313 基础下扩充)
    • UTF-8(万国码,编辑器的默认编码格式,微软记事本除外)
  • 在 HTML5 里面设置网页字符集的格式
    • 格式:
    <meta charset="utf-8">

# 文档的使用

  • 一个标准的 HTML 文档的代码
    <!doctype html>
    <html>
          <!-- head 是网页的头部,head 的内容不会在网页中直接出现,而是帮助浏览器或搜索引擎解析网页 -->
          <head>
          <!-- meta 标签用来设置网页的元数据 -->
          <meta charset="utf-8">
          <!--titlw 中的内容会显示在浏览器的标题栏中,搜索引擎会根据 title 中的内容来判断网页的主要内容 -->
          <title>
              网页解析标题
          </title>
          </head>
          <!-- 网页的内容主体 -->
          <body>
          
          <h1>一级标题</h1>
          
          </body>
    </html>

# vscode 编写 HTML 文档的一些常用快捷键

  • 打开一个文档的基本结构: ! + TAB 键
  • 段落: p + TAB 键
  • 光标下移: Ctrl + 回车

# HTML 实体

  • 在网页中编写多个空格时,默认情况下会被浏览器自动解析为一个空格
  • 当我们需要写一下特殊符号如大于号小于号等就需要用到 HTML 的实体
  • 实体的语法:
    • & 实体名;(全英文下)
      &nbsp;  空格 " "
      &gt;  大于号  " < "
      &lt;  小于号  " > "
      &copy;   版权符号
      &amp;   和号   " & "
      &quot;  引号   " " "
      (更多的实体语法参照 W3school 的 HTML 教程)

# meta 标签

  • 关于 meta

    • 通常所说的 META 标签,是在 HTML 网页源代码中一个重要的 html 标签。META 标签用来描述一个 HTML 网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。
    • META 标签是 HTML 标记 HEAD 区的一个关键标签,它位于 HTML 文档的 <head> 和 < title > 之间(有些也不是在 <head> 和 < title > 之间)。它提供的信息虽然用户不可见,但却是文档的最基本的元信息。
  • META 标签的组成

    • 两大部分
      • HTTP-EQUIV 和 NAME 变量
  • 属性

    属性 描述
    charset character_set 定义文档的字符编码
    content text 定义与 http-equiv 或 name 属性相关的元数据
    http-equiv content-typedefault-style  refresh 把 content 属性关联到 HTTP 头部
    name application-name   author   description   generator   keywords 把 content 属性关联到一个名称

    (摘自百度百科)

  • 各个功能

    • charset 指定网页的字符集
    • name 指定数据的名称
    • content 指定数据的内容
    • keywords 表示网站的关键字,可以同时设置多个关键字,使用逗号隔开
    • description 用于指定网站的描述(即搜索引擎的超链接)
    • title 标签的内容会作为搜索结果的超链接上的文本表示
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <title>淘宝网 - 淘!我喜欢</title>
    <meta name="spm-id" content="a21bo" />
    <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/" />
    <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖" />

# 语义化标签 01

# 概述

  • 语义化标签指具有其含义的标签,使开发者更直观、优雅的编写代码

# 标题标签 (块元素)

  • 一共有六级标题,从 h1 到 h6
  • 六级标题的重要性从 h1 到 h6逐级递减
  • h1 的标签在网页中的重要性仅次于 title 标签,在一般情况下一个网页只有一个 h1 标签
  • 在网页中独占一行的元素称为块元素(block element)

# hgroup 标签

  • hgroup 标签用来给标题分组,多个标题可以放进一个 hgroup 标签里
<hgroup>
  <h1>你好,服务器</h1>
  <h2>章节01</h2>
</hgroup>

# p 标签(段落标签,块元素)

  • p 标签在网页中表示一个段落

# em 标签

  • em 标签用于加重语句语调
  • 在网页中不会独占一行的元素称为行内元素(Inline element)
    <p>今天天气<em></em>不错</p>
    <p><em>真牛掰</em></p>

    今天天气不错

    真牛掰

# strong 标签

  • 表示强调重要的内容
    <p>你今天<strong>必须完成任务</strong></p>

    你今天必须完成任务

# blockquote 长引用标签

  • 表示长引用
    顾炎武说:
    <blockquote>
      天下兴亡,匹夫有责
    </blockquote>
    顾炎武说:
    天下兴亡,匹夫有责

# q 标签

  • 表示一个短引用
子曰:<q>温故而知新,可以为师矣</q>
    子曰:温故而知新,可以为师矣

# 块和行内

# 块元素(block element)
  • 在网页中一般通过元素对页面进行布局
# 行内元素(inline element)
  • 行内元素主要用来包裹文字
    • 例如标题标签 h1、段落标签 p
  • 一般情况下会在块元素中放入行内元素,但不会在行内元素中放入块元素
  • p 段落标签里不能放入任何块元素
  • 在浏览器解析网页时,会自动对网页中不符合规范的内容进行修改

# 语义化标签 02

# 布局标签(HTML5 新增!)

  • header 表示网页的头部
  • main 表示网页的主体部分,一个网页只有一个 main
  • footer 表示网页的底部
  • nav 表示网页中的导航
  • aside 表示网页侧边栏 (对主体部分的某个内容进行详细的解释,或作其他功能使用)
  • article 表示一个独立的文章
  • section 表示一个独立的区块,上面所有标签不能表示时使用
  • div 可以代替以上所有布局标签,无任何语义
  • span 行内元素,无语义
    <header></header>
    <main></main>
    <footer></footer>
    <nav></nav>
    <aside></aside>
    <article></article>
    <section></section>
    <div></div>
    <span></span>

# 列表

  • 列表分类
    • 有序列表
      • 使用 ol 来创建有序列表
      • 使用 li 作为列表项
        <ol>
          <li>文字</li>
          <li>图片</li>
          <li>动画</li>
        </ol>
        1. 文字
        2. 图片
        3. 动画
    • 无序列表(主要用于导航的使用)
      • 使用 ul 来创建无序列表
      • 使用 li 作为列表项
        <ul>
          <li>首页</li>
          <li>产品</li>
          <li>售后支持</li>
        </ul>
        • 首页
        • 产品
        • 售后支持
    • 定义列表
      • 使用 dl 来创建一个定义列表
      • 使用 dt 来表示定义的内容
      • 使用 dd 来对内容进行解释
      <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构,用来规范网页中哪里是标题,哪里是段落</dd>
      </dl>
      结构
      结构表示网页的结构,用来规范网页中哪里是标题,哪里是段落
  • 列表之间可以互相嵌套

# 超链接

  • 超链接可以让我们从一个网页跳转到其他页面
  • 使用 a 标签定义超链接
    • 它跳转的可以是外部的一个网址(绝对路径)
    • 也可以是该网页同一目录下的文档(相对路径)
  • 超链接也是一个行内元素,在 a 标签里可以嵌套除它本身以外的任何元素(Ctrl+shift + 向下 == 向下复制)
    <a href="https://baidu.com">百度</a>
    <a href="./同一目录的文档名">跳转到统一目录下的文档</a>
  • target 属性 用来指定超链接打开的位置
    • 可选值:
      • _self 表示默认值,在当前页面打开超链接
      • _blank 在新的窗口 / 标签栏中打开超链接
      <a href="index.html" target ="_blank">页面01</a> 
      <a href="index.html" target ="_self">页面02</a>
  • # 在 href 后面设置 #号超链接,点击此超链接回到页面顶部 (页面不会发生跳转)
  • id 属性;是元素的唯一标识,同一页面不可有重复的 id 属性(可以作为网页位置的别名)
  • 通过用 #号加 id 名可以形成一个超链接到达使用这个 id 名的标题 / 段落中
  • 可以使用 Javascript:; , 来作为 href 的属性,此时点击这个超链接没有任何作用
    <a href="javascript:;">这是一个无效果的超链接</a>
    <a id="bottom" href="#">回到顶部</a>
    <p  id =p1>这是第一个段落</p>
    <br></br>
    <a href="p1">去第一个段落</a>

# 相对路径

  • 当我们需要跳转到一个服务器内部的页面时,要用到相对路径,用。或… 开头
  •  ./ 表示当前文件所在的目录
  •  …/ 表示当前文件所在目录的上一级目录

# 图片标签

  • 图片标签用于在当前页面中引入一个外部照片
  • 图片标签 img 是一个自结束标签,属于替换元素(介乎于块和行内元素)
  • 属性:
    • src 属性指定的是外部图片的路径描述
    • alt 属性指图片的描述,这个描述默认情况下不会显示只有当图片无法被浏览器加载出来时,才会显示 alt 中的内容,如果不写 alt 则不会被搜索引擎所收录(有点类似于 meta 的 description)
    • width 表示设置图片的宽度
    • height 表示设置图片的高度
      • 一般情况下,只更改 width 和 height 中的一个,这样图片就会被等比例的缩放
      • 在 pc 端不建议更改图片大小,会导致内存增大或图片失真的情况
      • 但在移动端就要经常使用到缩放

# 图片格式

  • 格式分类
    • JPEG(jpg)
      • 支持的颜色比较丰富,不支持透明效果,不支持动图,一般用于显示照片
    • GIF
      • 支持的颜色比较少,支持简单透明,支持动图,一般用于动图
    • PNG
      • 支持的颜色丰富,支持复杂透明,不支持动图,网页专用格式
    • webp
      • 谷歌专属格式,具备其他格式所有优点,但兼容性不好
  • base64 编码
    • 将图片使用 base64 编码,这样可以让图片变成字符,通过字符的形式引入图片
    • 可以使图片更快的加载出网页中

# 音视频播放

  • audio 标签用来向页面导入一个外部的音频文件,当音频文件引入时,默认情况下不允许用户控制

    <audio src="音频文件路径"></audio>
  • 属性:

    • controls 设置允许用户对音频进行控制(播放 / 暂停)
    • autoplay 设置音频自动播放
      • 大部分浏览器不会自动对音频播放
    • loop 设置音频循环播放
    <audio src="音频文件路径" controls loop></audio>
    • 不是所有浏览器都支持 audio 标签
    • 可以使用如下写法:
    <audio controls>
      对不起,您的浏览器不支持播放此音频
      <source src="音频文件路径>
    </audio>
    • 这样写的好处是如果浏览器不支持 audio 标签,就会显示文字,反之则会显示音频,不会显示文字
  • video 标签用来向网页引入一个视频文件

<video controls>
  <source src="音频文件路径">
</video>
  • 对于网页引入音频视频,一般不会再本地播放,会通过代理进行音视频托管,减轻服务器内存,对带宽的要求也相应降低,成本也就减少

# CSS

  • CSS
    • 层叠样式表 (英文全称:Cascading Style Sheets) 是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[摘自百度百科]
    • CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

  • 三种方式修改元素样式
    • 第一种:(内联样式 / 行内样式)
      • 在标签内部通过 style 属性来设置元素样式
      • 但该样式只对当前标签内部有效,对在实际的开发应用过程中非常不友好,对后期的维护相当麻烦,需要一个个的去修改
      <p style="color:red; font-size=60px">牵一发而动全身</p>
      • 注意:千万不能在开发中使用,非常低效,不推荐,仅供学习使用
    • 第二种:(内部样式表)
      • 把 style 写在 head 标签中
      • 然后通过 CSS 的选择器选择元素并为其设置样式
      • 该方法的好处是:可以同时为多个标签设置样式,只需要修改一次即可对所有标签进行样式修改,方便样式进行复用
      <head>
        <style>
          p{
            color=red 
            font-size=50px
            }
        </style>
      </head>
    • 第三种:(外部样式表)
      • 可以将 CSS 样式编写到一个外部的 CSS 文件中,然后通过 link 标签来引入外部的 CSS 文件
      • 外部样式表需要通过 link 标签进行引入
        • 只要网页对其进行引用就可以使用这些样式
        • 可以使样式在不同的页面中进行复用 (推荐使用,尤其开发中必备)
        <link rel="stylesheet" href="需要引用的CSS文件路径">

# CSS 语法

  • 注释:注释里得到东西会自动被浏览器忽略
    • 格式 (快捷键 Ctrl+/)
    /*  注释内容 */
  • 基本语法:
    • 选择器(selector)
      • 通过选择器可以选中页面的指定元素,例如 p 的作用就是选中页面所有的 p 标签元素
    • 声明块
      • 通过声明块来指定要给元素设置的样式
      • 声明块由一个个声明组成,格式是名值对,以 ; 结尾
      p{
        color:red;
        font-size:60px;
      }
      h1{
        color:blue;
        font-size:80px;
      }

# class 属性

  • class 是一个标签的属性,它与 id 相似,但是可以重复使用,对元素进行分组
  • 语法:
    • .class {属性:属性值}
<p class="red">天苍苍,野茫茫</p>
<p class="red">风吹草低见牛羊</p>
.red{
  color:red;
  font-size:15px;
}

# 常用选择器

  • 元素选择器
    • 作用:根据标签名设置指定元素
    • 语法: 标签名 { }
    • 例如: p { }   h1
  • id 选择器
    • 作用:根据元素的 id 属性值选择一个元素
    • 语法: #id 属性值 { }
    • 例如: #green { } #bottom
  • 类选择器
    • 作用:根据元素的 class 属性值选中一组元素
    • 语法:  .class 属性值
    <h1 class="good">美好的一天</h1>
    .good{
      color:orange;
    }
  • 通配选择器
    • 作用:  选中页面的所有元素
    • 语法:*
    *{
      color:black;
    }

# 复合选择器

  • 交集选择器
    • 作用:选中同时复合多个条件的元素
    • 语法:选择器 1 选择器 2 选择器 n { }
    • 交集选择器如果有元素选择器,必须用元素选择器开头
    <body>
      <div class="red">我是div</div>
      <p class="red">我是段落</p>
      <div class="red2 a b ">我是div2</div>
    </body>
    <style>
      div.red{
        font-size:25px;
      }
      .a.b{
        color:blue;
      }
    </style>
  • 并集选择器 (选择器分组)
    • 作用:同时选中多个选择器对应的元素
    • 语法:选择器 1,选择器 2,选择器 n { }
    h1,span{
      color:orange;
    }

# 关系选择器

  • 各种元素类别
    • 父元素
      • 直接包含子元素的元素
    • 子元素
      • 直接被父元素包含的元素
    • 祖先元素
      • 直接或间接包含后代元素的元素
      • 一个元素的父元素也是其祖先元素
    • 后代元素
      • 直接或间接被祖先元素包含的元素
      • 子元素也是后代元素
    • 兄弟元素
      • 拥有相同父元素的元素
    <div>
      我是一个div
      <p>
        我是div的p元素
        <span>我是p元素中的span</span>
      
      </p>
      <span>我是div的span元素</span>
    </div>
  • 子元素选择器
    • 作用:选中指定父元素的指定子元素
    • 语法:父元素 > 子元素
    <style>
        div > span{
          color:yellow;
        }
    </style>
  • 后代元素选择器
    • 作用:选中指定元素内的指定后代元素
    • 语法:祖先 后代
    <style>
      div span{
        color:red;
      }
    </style>
  • 选择下一个兄弟元素
    • 语法: 前一个 + 后一个
    <style>
      p + span{
        font-size:30px;
      }
    </style>
  • 选择所有的兄弟元素
    • 语法: 兄~弟

# 属性选择器

  • 选择含有指定属性的元素
    • [属性名]
  • 选择含有指定属性和属性值的元素
    • [属性名 = 属性值]
  • 选择属性值一指定值开头的元素
    • [属性名 ^= 属性值]
  • 选择属性值以指定值结尾的元素
    • [属性名 $= 属性值]
  • 选择属性值中含有某值的元素的元素
    • [属性名 *= 属性值]
    <head>
      <style>
        p[title=abc]{
          color:orange;
        }
      </style>
    </head>
    <body>
      <p title="abc">黄沙百战穿金甲</p>
      <p titie="abcdef">不破楼兰终不还</p>
      <p titl="hello">一曲新词酒一杯</p>
    </body>

# 伪类选择器

  • 伪类:不存在的类,特殊的类
    • 伪类用来描述一个元素的特殊状态
      • 比如:第一个子元素,被点击的元素,鼠标移入的元素等
    • 伪类一般情况下都是 : 开头
      • :first-child 第一个子元素
      • :last-child 最后一个子元素
      • :nth-child 选中第 n 个子元素
        • 特殊值:
          • n 第 n 个 范围从 0 到正无穷
          • 2n 或 even 表示选中偶数位子元素
          • 2n+1 或 odd 表示选中奇数位的子元素
      • :first-of-type
      • :last-of-type
      • nth-of-type
      • 这些伪类和前面的基本一致,不同点在于它们是同类型元素排序
      • :not() 否定伪类
        • 将符合条件的元素从选择器中除去

# 超链接的伪类

  • :link  用来表示没访问过的链接
  • :visited 用来表示已经访问过的链接,由于隐私的原因,因此 visited 这个伪类只能修改链接的颜色
    • 这两个表示的是超链接的状态,可在同一个超链接中进行引用
    <style>
      a:link{
        color:red;
        font-size:60px;
      }
      a:visited{
        color:purple;
      }
      a:hover{
        color:orange;
      }
      a:active{
        color:green;
      }
    </style>
    <body>
      <a href="www.baidu.com">百度</a>
      <a href="www.sina.com">新浪</a>  
    </body>
  • :hover 用来表示鼠标移入的状态
  • :active 用来表示鼠标点击的动作

# 伪元素选择器

  • 伪元素表示页面中的一些特殊的并不真实存在的元素
  • 伪元素用 :: 开头
    • ::first-letter 表示第一个字母
    • ::first-line 表示第一行
    • ::selection 表示选中的内容
    • ::before 元素的开始
    • ::after 元素的结束
      • before 和 after 必须配合 content 属性来使用
    <style>
      p::first-letter{
        font-size:50px;
      }
      p::first-line{
        background-color:yellow;
      }
      p::selection{
        background-color:orange;
      }
      div::after{
        content:'#'
      }
      div::before{
        content:'#'
      }
    </style> 
    <body>
      <div>what a beautiful world</div>
      <p>
         I had traveled here to Henson's last home -- now a historic site that Carter formerly directed -- to learn more about a man who was, in many ways, an African-American Moses。 After winning his own freedom from slavery, Henson secretly helped hundreds of other slaves to escape north to Canada -- and liberty。
      </p>
    </body>

# 继承

  • 继承,指的是样式的继承,我们为一个元素设置的样式也会相应的应用到他的后代元素中
  • 继承是发生在祖先后后代之间的
  • 继承的意义是为了方便我们开发,使用继承的方式可以将一些通用的样式统一设置到共同的祖先元素中
  • 并不是所有的样式都可以被继承
    • 例如,背景相关的
<style>
  p{
    color:red;
  }
  div{
    background-color:yellow;
  }
</style>
<body>
  <p>
    这是一个段落
    <span>我是p元素中的span</span>
  </p>
  <span>我是p元素外的span</span>
  <div>
    我是一个div
    <span>我是div中的span</span>
  </div>
  <span>我是div外的span</span>
</body>

# 选择器的权重 (优先级)

  • 样式的冲突
    • 当我们通过不同的选择器,选中相同的样式设置不同的值时,此时就发生样式的冲突
    • 例如:
    <style>
      div{
        color:blue;
      }
      .red{
        color:green;
      }
    </style>
    <body>
      <div id="box" class="red">这是一个div</div>
    </body>
  • 选择器的优先级(从高到低)
    • 内联样式 1,0,0,0
    • id 选择器 0,1,0,0
    • 类和伪类选择器 0,0,1,0
    • 元素选择器 0,0,0,1
    • 通配选择器 0,0,0,0
    • 继承的样式 没有优先级
  • 比较优先级时,需要对所有的选择器的优先级进行相加计算,最后的样式优先级越高,则使用越高的样式
  • 选择器的累加不会超过其最大的数量级
  • 如果优先级计算后相同,此时则优先使用靠下的样式 (即最新的样式覆盖旧的样式)
  • 可以通过在某一个样式后面加上  !important  ,这样使样式达到最高优先级(但是在开发中慎用)

# 像素、百分比、HSL 值

  • 长度单位
    • 像素:
      • 屏幕,实际上是由一个个的小像素点组成
        • 例如,某屏幕参数 1920*1080 表示宽度有 1920 个像素,高度有 1080 个像素
      • 不同屏幕的像素是不同的,像素越小其屏幕的清晰度越高
      • 同样的 200px 在不同的屏幕下的显示效果也不同
    • 百分比:
      • 也可以将属性设置为相应的其子元素的百分比
      • 设置百分比可以使子元素跟随父元素的改变而改变
    • em
      • em 是相当于元素的字体大小来计算
      • ** 1em=100%font-size**
    • rem
      • rem 相对于根元素的字体大小计算
    • HSL 值
      • H 色相  一个彩虹环,范围 0-360(即 0-360 度)
      • S 饱和度  颜色的浓度,范围:0%-100%(必须加百分号)
      • L 亮度  屏幕亮度,范围:0%-100%(必须加百分号)
    <style>
      .box1{
        width:300px;
        height:300px;
        background-color:green;
      }
      .box2{
        width:600px;
        height:600px;
        background-color:red;
      }
      .box3{
        font-size:30px;
        width:10em;
        height:30em;
        background-color:orange;
      }
    </style>
    </body>
      <div class="box1">
        <div class="box2"></div>
      </div>
      <div class="box3"></div>
    </body>
  • 颜色单位
    • 在 css 中可以直接使用颜色的英文来设置,但是非常不方便
    • RGB 值(自然光)
      • RGB 通过三种颜色的不同浓度来调配出不同的颜色
      • R=Red G=Green B=Blue
      • 每一种颜色的范围是 0-255 之间
      • 语法:RGB (红,绿,蓝)
    • RGBA
      • 在 RGB 基础上增加透明度设置
      • 四个参数:R,G,B,透明度
      • 1 表示完全不透明,0 表示完全透明,.5 表示半透明
    • 十六进制的 RGB 值
      • 语法:# 红色绿色蓝色
      • 颜色浓度通 00-ff
      • 如果两位两位重复可以简写
      • ##aabbcc——>#abc
    <style>
      .box{
        width:100px;
        height:100px;
        background-color:rgb(255,0,0);
        background-color:rgb(0,255,0);
        background-color:rgb(0,0,255);
        background-color:rgb(0,0,0);
        background-color:rgb(255,255,255);
        background-color:rgba(255,153,210,.5);
        background-color:#FFFF00;
        background-color:#abc;
        background-color:hsla(95,40%,50%);
      }
    </style>
    <body>
    <div class="box"></div>
    </body>

## Layout布局 ### 01文档流 - **文档流(normal flow)** - 网页是一个多层的结构,层层叠着 - 通过css可以分别为每一层来设置样式 - **最底层就称为文档流,文档流是网页的基础** - 我们所创建的元素默认都是在文档流中进行排列的 - 元素的主要状态 - 在文档流 - 不在文档流 - 元素在文档流的特点 - **块元素** - 在页面中独占一行 - 默认宽度是父元素的全部 - 默认高度是子元素高度 - **行内元素** - 行内元素只占用自身大小 - 从左向右排列,如果一行无法完全显示,则会换行继续排列 - 行内元素的默认宽度和高度都是被内容撑开 ```html
我是div1
我是div2
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>

  </body> 
  ```

# 02 盒子模型(Box Model)

  • CSS 把页面中的所有元素都设置为一个矩形的盒子
  • 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置
  • 每个盒子都由几个部分组成
    • 内容区(content)
      • 内容区的大小通过 width 和 height 两个属性确定
    • 内边距(padding)
    • 边框(border)
      • 边框属于盒子的边缘,边框里面属于盒子内部,出了边框都是盒子的外部,边框的大小会影响整个盒子的大小
      • 要设置边框至少需要设置三个属性
        • 边框的宽度 border-width
        • 边框的颜色 border-color
        • 边框的样式 border-style
    • 外边距(margin)
      boxmodel
    <style>
      .box{
        /* 内容区设置 */
        width:200px;
        height:200px;
        background-color:#bfa;
        /* 边框的设置 */
        border-width:10px;
        border-color:orange;
        border-style:solid;
      }
    </style>
    <body>
    <div class="box"></div>
    </body>

# 盒子模型之边框

  • 边框包括:
    • 边框宽度
    • 边框颜色
    • 边框样式
  • 对于 border-width
    • 存在默认值 3px,即不设置边框宽度也会有 3 像素的边框
    • 属性值的情况:
      • 四个值: 上 右 下 左
      • 三个值: 上 左右 下
      • 两个值: 上下 左右
      • 一个值:上下左右
    • 不仅可以对边框的四个方向进行设置,还可以单独设置各个方向的边框宽度(其格式为:border-xxx-width)
      • 单独设置上边宽 border-top-width
      • 单独设置右边宽 border-right-width
      • 单独设置下边宽 border-bottom-width
      • 单独设置左边宽 border-left-width
  • 对于 border-color
    • 存在默认值 black
    • 其设置规则和 border-width 相同
  • 对于 border-style
    • 默认值为 none 无边框
    • 指定边框样式
      • solid 表示实线
      • dotted 点状虚线
      • dashed 虚线
      • double 双线
  • border 的简写: 同时设置边框的所有属性,各个属性用空格隔开
<style>
    .box{
      border:10px red solid;
      border-right:none;
    }
  </style>
  <body>
  <div class="box"></div>
  </body>

# 盒子模型之内边距

  • 内边距
    • 内容区和边框之间的距离
      • 四个方向的内边距
        • padding-top
        • padding-right
        • padding-bottom
        • padding-left
    • 所以一个盒子的可见区包括内容区、边框、内边距
    <style>
      .box{
        width:200px;
        height:200px;
        background-color:#bfa;
        border:10px orange solid;
        padding:100px;
      }
      .inner{
        width:100%;
        height:100%;
        background-color:yellow;
      }
    </style>
    <body>
    <div class="box">
      <div class="inner"><div>
    </div>
    </body>

# 盒子模型之外边距

  • 外边距(margin)
    • 外边距不会影响盒子的可见区大小
    • 但是会影响盒子的位置
  • 四个方向设置外边距
    • margin-top
      • 上外边距,设置一个正值,元素会向下移动
    • margin-right
    • margin-bottom
      • 下外边距,设置一个正值,其他元素会向下移动(没有其他像素则不会有效果产生)
    • margin-left
      • 左外边距,设置一个正值,元素会向右移动
  • 元素在页面中是按自左向右顺序排列的
    • 因此默认情况下如果我们设置外边距的上边和左边,自身会进行移动
    • 而设置外边距的右边和下边则会移动其他元素
  • margin 的简写 — 和 padding 一样
<style>
  .box{
    width:200px;
    height:200px;
    background-color:#bfa;
    border:10px orange solid;
    padding:100px;
    margin-top:100px;
    margin-left:100px;
    margin-right:150px;
    margin-bottom:150px;
  }
 
  .box2{
    width:220px;
    height:220px;
    background-color:yellow;
  }
</style>
<body>
<div class="box">
  
</div>
<div class="box2"></div>
</body>

# 盒子模型之水平方向布局

  • 水平方向布局
    • 元素在其父元素中水平方向的位置由以下几个属性共同决定
      • margin-left
      • border-left
      • padding-left
      • width
      • padding-right
      • border-right
      • margin-right
    • 一个元素在其父元素中,水平布局必须满足以下等式
      • margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的 width 值(必须满足)
      • 以上的情况必须满足,如果等式不成立,则称为过渡约束,等式自动进行调整
        • 调整方式:
          • 如果这七个值中没有 auto 的情况,则浏览器会自动调整 margin-right 的值以使等式成立
          • 可设置 auto 的值有:
            • width
            • margin-right
            • margin-left
              • 如果某个值为 auto,则会自动调整设置 auto 的那个值以令等式成立
              • 如果将一个宽度和一个外边距设置为 auto,则宽度会调整到最大,外边距会自动设置为 0
              • 如果三个值都设置 auto,则外边距两个都是 0,宽度最大化
              • 如果两个外边距设置为 auto,则宽度固定,两个外边距的值相同 (使一个子元素在其父元素中水平居中的方法)

# 盒子模型之垂直方向布局

  • 默认情况下父元素的高度别内容撑开
  • 子元素是在父元素的内容区中排列的
    • 如果子元素的大小超过了父元素,则子元素会从父元素中溢出
    • 使用 overflow 属性来设置父元素如何处理溢出的子元素
      • 取值:
        • visible 默认值,子元素会从父元素中溢出,在父元素外部的位置显示
        • hidden 溢出内容将会被剪裁不会显示
        • scroll 生成两个滚动条,通过滚动条来查看完整的内容
        • auto 根据需求生成滚动条
<style>
  .outer{
    background-color:#bfa;
    height:600px;
  }
  .inner{
    width:100px;
    background-color:yellow;
    height:100px;
    margin-bottom:100px;
  }
  .box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    overflow:auto;
  }
  .box2{
    width:100px;
    height:400px;
    background-color:orange;
  }
</style>
<body>
  <div class="outer">
    <div class="inner1"></div>
    <div class="inner2"></div>
  </div>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

# 垂直外边距的重叠

  • 相邻的垂直方向的外边距会发生重叠现象
  • 对于兄弟元素
    • 兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值的前提下)
    • 如果相邻外边距一正一负,则取两者之和
    • 如果相邻外边距都是负数,则取两者中绝对值较大的
  • 对于父子元素
    • 父子元素间相邻的上外边距,子元素的属性值会传递给父元素
    • 父子元素会影响页面的布局
<style>
  .box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    margin-bottom:100px;
  }
  .box2{
    width:100px;
    height:100px;
    background-color:red;
    margin-top:100px;
  }
  .box3{
    width:200px;
    height:200px;
    background-color:#bfa;
  }
  .box4{
    width:100px;
    height:100px;
    background-color:red;
  }
</style>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3">
    <div class="box4"></div>
  </div>
</body>

# 行内元素的盒模型

  • 行内元素的盒模型
    • 行内元素不支持设置宽度和高度
    • 可以设置 padding、border、margin,但这三个属性均对垂直方向的布局没有影响
  • display 设置元素显示的类型
    • 可选值:
      • inline 将元素设置为行内元素
      • block 将元素设置为块元素
      • inline-block 将元素设置为行内块元素
        • 行内块:既可以设置宽度和高度又不会独占一行(开发尽量避免使用)
      • table 将元素设置成表格
      • none 元素不会在页面显示
  • visibility 用来设置元素的显示状态
    • 可选值:
      • visible 默认值,元素在页面中正常显示
      • hidden 元素在页面中隐藏,但依然占用页面位置
<style>
    .s1{
      background-color:yellow;
      margin:100px;
    }
    .box1{
      width:200px;
      height:200px;
      background-color:#bfa;
    }
    a{
      display:none;
      visibility:visible;
      width:100px;
      height:100px;
      background-color:orange
    }
</style>
<body>
  <a href="javascript:;">超链接</a>
  <a href="javascript:;">超链接</a>
  <span class="s1">我是span</sapn>
  <span class="s1">我是span</sapn>
  <div class="box"></div>
</body>

# 浏览器的默认样式

  • 默认样式
    • 默认样式的存在会影响页面的布局,通常情况下编写网页时必须要去除浏览器的默认样式
    • 方法 1 :
      • 快速去除
    <style>
      *{
        margin:0;
        padding:0;
      }
    </style>
  • 方法 2、3:
  • 重置样式表
    • reset.css 直接去除了浏览器的默认样式
    • normalize.css 对默认样式进行统一

# 盒子的尺寸

  • 默认情况下,盒子可见区的大小由内容区、内边距和边框共同决定
  • box-sizing
    • 用来设置盒子尺寸的计算方式(设置 width 和 height 的作用)
      • 可选值:
        • content-box 默认值,宽度和高度用来设置内容区的大小
        • border-box 宽度和高度整个盒子可见框的大小
        • width = 内容区宽度 + 内边距宽度 + 边框宽度

# 轮廓与圆角

# 轮廓

  • outline 用来设置元素的轮廓线,用法与 border 相同
    • 轮廓不会影响可见区的大小
  • box-shadow 用来设置元素的阴影效果,阴影不会影响页面布局
    • box-shadow 属性
      • 第一个值:水平偏移量,设置阴影的水平位置,正值向右,负值向左
      • 第二个值:垂直偏移量,设置阴影的垂直位置,正值向下,负值向上
      • 第三个值:阴影的模糊半径(越大越模糊)
      • 第四个值:阴影颜色
      <style>
        .div{
          width:100px;
          height:100px;
          background-color:orange;
          box-shadow:10px 10px 10px red;
        }
      </style> 
      <body>
        <div class="box"></div>
      </body>

# 圆角

  • border-radius 用来设置圆角
    • 四个方向
      • border-top-left-radius 左上角
      • border-top-right-radius 右上角
      • border-bottom-left-radius 左下角
      • border-bottom-right-radius 右下角
    • 属性值
      • 一个值的情况:水平垂直方向的半径均相同
      • 两个值的情况:第一个为水平半径,第二个为垂直半径

# 浮动概述

  • CSS 的浮动(float),会使元素向左或向右移动,其周围的元素也会重新排列
  • Float 常用于图像,在布局中也一样有用
  • 通过浮动可以使一个元素向其父元素的左侧或右侧移动
    • 使用 float 属性来设置元素的浮动
      • 可选值
        • none 默认值,元素不浮动
        • left 元素向左浮动
        • right 元素向右浮动
    • 注意
      • 元素设置浮动后,水平布局的等式就不需要强制成立(即 width = 内容区宽度 + 内边距宽度 + 边框宽度不需要成立)
      • 元素下面的还在文档流的元素会自动向上移动

# 浮动的特点

  1. 浮动元素会完全脱离文档流,不再占据文档流中的位置
  2. 设置浮动以后元素会向父元素的左侧或右侧移动
  3. 浮动元素默认不会从父元素中移出
  4. 浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
  5. 如果浮动元素的上边是一个没有设置浮动的圆水泥,则浮动元素无法上移
  6. 浮动元素不会超过它上边的浮动兄弟元素,最多就是和它一样的高度
    • 总结
      • 通过浮动可以制作一些水平方向的布局

# 浮动元素的其他特点

  • 浮动不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以利用浮动来设置文字环绕图片的效果
  • 元素设置浮动之后,脱离文档流,并且其元素特性会发生变化
    • 脱离文档流的元素特点
      • 块元素
        1. 块元素不再独占页面的一行
        2. 脱离文档流后,块元素的宽度和高度默认被内容撑开
      • 行内元素
        • 脱离文档流会变成块元素,特点与块元素一致
      • 因此,脱离文档流的元素不再区分块元素和行内元素,统一变成块元素

# 高度塌陷问题

  • 图片例子

    • 原本效果:
      高度塌陷01
    • 高度塌陷效果:
      高度塌陷02
  • 高度塌陷的问题

    • 在浮动布局中,父元素的高度默认是被子元素撑开的
      • 当子元素浮动后,其余完全脱离文档流,子元素从文档流中脱离
      • 将会无法撑起父元素的高度,导致父元素的高度丢失
      • 父元素高度丢失后,其下边的元素会自动上移,导致页面的布局混乱
      • 所以高度塌陷问题是浮动布局中较为常见的问题,必须要处理!
  • 解决方法:

    • BFC

# BFC

  • 何为 BFC?
    • BFC(Block Formating Context)块级格式化环境
      • BFC 是 CSS 中一个隐含的属性,可以为一个元素开启 BFC,开启 BFC 后该元素变成一个独立的布局区域
  • 元素开启 BFC 的特点:
    1. 开启 BFC 的元素不会被浮动元素所覆盖
    2. 开启 BFC 的元素子元素和父元素的外边距(margin)不会重叠
    3. 开启 BFC 的元素可以包含浮动的子元素
  • 开启方法
    • 设置元素的浮动(不推荐)
    • 将元素设置为行内块元素(block-inline)(不推荐)
    • 将元素的 overflow 设置为一个非 visible 的值
      • overflow 设置 auto 或 hidden 最佳

# clear 属性与 clearfix 类

  • 情景:
    • 如果我们不希望某个元素因为其他元素浮动的影响而改变位置,可以通过 clear 属性来清除浮动元素对当前元素产生的影响
  • clear
    • 作用:
      • 清除浮动元素对当前元素所产生的影响
    • 可选值:
      • left 清除左侧浮动元素对当前元素的影响
      • right 清除右侧浮动元素对当前元素的影响
    • 原理
      • 设置清除浮动以后,浏览器会自动为元素添加一个上外边距,以使其位置不受其他元素的影响
  • clearfix
    • 这个样式可以同时解决高度塌陷和外边距重叠的问题
    <style>
      .clearfix::before,
      .clearfix::after{
        content:'';
        display:table;
        clear:both;
      }
    </style>