网页简史

诞生

  • 万维网发明人——蒂姆.伯纳斯-李
  • 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** 作为列表项 ```html
    1. 文字
    2. 图片
    3. 动画
    ```
    1. 文字
    2. 图片
    3. 动画
    - **无序列表**(主要用于导航的使用) - 使用 **ul** 来创建无序列表 - 使用 **li** 作为列表项 ```html
    • 首页
    • 产品
    • 售后支持
    ```
    • 首页
    • 产品
    • 售后支持
    - **定义列表** - 使用 **dl** 来创建一个定义列表 - 使用 **dt** 来表示定义的内容 - 使用 **dd** 来对内容进行解释 ```html
    结构
    结构表示网页的结构,用来规范网页中哪里是标题,哪里是段落
    ```
    结构
    结构表示网页的结构,用来规范网页中哪里是标题,哪里是段落
  • 列表之间可以互相嵌套

超链接

  • 超链接可以让我们从一个网页跳转到其他页面
  • 使用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属性来设置元素样式 - 但该样式只对当前标签内部有效,对在实际的开发应用过程中非常不友好,对后期的维护相当麻烦,需要一个个的去修改 ```html

      牵一发而动全身

      ``` - **注意:千万不能在开发中使用,非常低效,不推荐,仅供学习使用**
    • 第二种:(内部样式表)
      • 把style写在head标签中
      • 然后通过CSS的选择器选择元素并为其设置样式
      • 该方法的好处是:可以同时为多个标签设置样式,只需要修改一次即可对所有标签进行样式修改,方便样式进行复用</font>
        <head>
        <style>
          p{
            color=red 
            font-size=50px
            }
        </style>
        </head>
        
    • 第三种:(外部样式表)
      • 可以将CSS样式编写到一个外部的CSS文件中,然后通过link标签来引入外部的CSS文件
      • 外部样式表需要通过link标签进行引入
        • 只要网页对其进行引用就可以使用这些样式
        • 可以使样式在不同的页面中进行复用(推荐使用,尤其开发中必备)</font>
          <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;
      }
      

关系选择器

  • 各种元素类别

    • 父元素
      • 直接包含子元素的元素
    • 子元素
      • 直接被父元素包含的元素
    • 祖先元素
      • 直接或间接包含后代元素的元素
      • 一个元素的父元素也是其祖先元素
    • 后代元素
      • 直接或间接被祖先元素包含的元素
      • 子元素也是后代元素
    • 兄弟元素

      • 拥有相同父元素的元素
        ```html

        我是一个div


        我是div的p元素
        我是p元素中的span

      </p>
      我是div的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属性来使用
        ```html
        这是一个div
        ``` - **选择器的优先级**(从高到低) - **内联样式** 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%(必须加百分号) ```html
        ``` - **颜色单位** - 在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 ```html
        ``` ---
        ## 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一样
            ```html