1.复习内容

• em单位
  • 默认是父元素字体大小，1em=16px
• 行内元素
  • 是包裹内容的，text-align不生效
  • text-align: justify（是两端对齐）

2.灵感代办

• 学的东西可以做出什么东西

3.学习内容

• 文本溢出，背景图片处理

  • 溢出容器，要打点展示

    • 单行文本

      • 三件套 解决单行截断

        • white-space:nowrap 不换行
        • overflow:hidden 超出隐藏
        • text-overflow:ellipsis; 圆点显示
      • 包裹文字的要是块元素

  • 多行文本

    *   后端判断前端展示多少字符
    *   只做截断，不做打点
    

    • overflow:hidden

• 当网速不好，会屏蔽js和css

  *   动态添加的图片元素一般都是IMG标签的图片，不动的一般都是背景属性设置
  

  • 处理方法：把文字进行缩进，text-indent:，然后不能换行white-space:nowrap;在设置超出隐藏overflow:hidden;文本内容就会被图片顶出去，如果图片不加载，则显示文字
    • padding里面可以填充图片,高度设置为0，padding-top设置为实际宽度，然后设置overflow:hidden;文本内容就会被图片顶出去，如果图片不加载，则显示文字

  • 元素嵌套规则

    • 行级元素只能嵌套行级元素
    • 块级元素可以嵌套任何元素
  • p是例外，不能用p套住div
    • a标签不能套a标签

  • inline inline-block都是文本类元素

    • 具有文本类特点（文本之间会有分隔符）
  • 只要文本类元素途中有空格，就会被分割，（一个空格）
    • 解决办法就是直接去掉空格

  • 自动转换为inline-block的属性

    • position:absolute
  • float:left/right
    • display:inline-block

  • 行内块块元素对其

    • 行内块元素有问题，行内块外的对其是和文本底部对齐
    • verity-align:设置属性

• Javascript

  • 1.网页中常用在：

    • 网页动态效果，用户交互，实现网络请求，游戏制作等

  • 2.组成（主要的三部分）：

    • 核心语法（ECMAScript）版本区别很小
    • BOM（浏览器对象模型）window对象
      • 提供浏览器窗口操作的方法
    • DOM（文档对象模型）document对象
      • 操作HTML文档的方法

  • 3.如何使用：

    • 1.元素绑定事件

      • 事件：用户的行为或者元素的状态：
      • 事件处理：元素监听到时间发生后做出的响应
      • 事件名称（常用）：
        • onclick() 单击事件
        • ondblclick(双击事件)
      • 语法：
        • 将事件名称以便签属性的形式绑定到元素上

    • 2.内嵌方式

      • <script type=“text/javascript”></script>书写js语句
      • 标签可以书写任意位置，浏览器解析到script会执行内部脚本代码
      • type属性标明类型，src标明外部路径

    • 3.外链方式

      • 创建外部的JS文件（.js）
      • script src=“引入”，引入就不要再使用内嵌方式书写代码

  • 4.语法规范：

    1. JS区分大小写
    2. JS可以结尾可以加分号，避免意外错误
    3. Js注释 //单行 、/** 多行 **/

  • 5.输出语句

    • console.log(“”) 控制台输出
    • alert(“”) 网页警告框
    • prompt(“”) 带输入框的弹框
    • document.write(“”) 在网页中输出，可以识别标签语法
      1. 代码的书写位置极为添加位置
      2. 使用元素绑定的方式去动态添加，因为页面已经加载完毕，所以会将页面覆盖重写

  • 变量声明

    • 字母数字下换线$组成
    • 变量声明用var，省略var就是全局变量
    • 常量用const来定义
    • undefined 没有赋值的变量
    • 引用未声明对象，报错is not defined
    • 变量提升，先使用 后声明（执行js之前，会检索所有的var关键字声明，只要有声明就不会报错is not defined，显示undefined）
    • 变量声明用多个单词，小驼峰表示,getElementById()
    • 保留n位小数位，toFixed(n)

  • 数据类型

    1. 基础数据类型（值）

       1. number
       2. string
       3. boolean
       4. undefined
       5. null（是object类型）
       6. chrome等浏览器打印类型可能会有一些不同，带引号的是字符串，string也是字符串

    2. 引用类型（对象）

    3. 检测数据类型typeof()

  • 数据类型转换

    1. 强制类型转换

       • 转换字符串 object.toString()
       • 转换number
         1. Number(n) 将变量n转换为number值，返回转换后的结果，如果有非Nomber字符，转换就失败，返回NaN(not a number ，计算机无法操作的数据)
         2. parseInt(n)/parseFloat(n)解析number部分（方法属于字符串类型）传递一个参数，参数不是是字符串会转成字符串类型（true也会被转为字符串类型），每一位都进行转换操作，遇到解析失败，停止解析，返回转换的结果
         3. 转化布尔值
            1. Boolean()将变量转化布尔值，除了空值，其余都是真

    2. 自动类型转换

       1. 字符串与其他类型+运算，一律按照字符串拼接
       2. 其他情况下，自动转成Numer，参与数学运算
          1. 字符串与其他类型做非加法运行
          2. 布尔进行运算
          3. Number值与其他类型进行数学运算

    3. 运算符

       1. 赋值运算符 =
       2. 数学运算符 + -
       3. 复合运算符 += -=
       4. 自增自减运算符 ++ --
          1. 单独使用：就是加一或者减一，字符串自动转换为数字
          2. 复合使用：要看具体情况
       5. 比较运算符/关系运算
          • === 全等：是严格比较，类型一致，值相等
          • !== 不全等：
          • == 综合比较，值相等
          • 关系运算一定是布尔值
          • 运算规则，
            • 字符串之间比较是Unicode编码值,也是一位比较出大小，就返回结果
            • 其他情况（数字跟字符串比较，布尔和数字比较，等等）也是转换Number进行比较
            • NaN参与运算，一律是false
       6. 逻辑运算符 && and ,|| or

4.扩展延伸知识

5.知识内容个人梳理

• float浮动元素：

  • 最开始是为了展示报纸效果而设立
  • 对行内块元素，行内元素，不遮挡显示，但是不被遮挡的前提是不能设置float属性，要是块元素

• !important

  • https://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html

• 三大元素总结：行内元素，块元素，行内块元素

  • 行内元素：

    • (1)设置宽高无效
    • (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
    • (3)不会自动进行换行

  • 块状元素

    • (1)能够识别宽高
    • (2)margin和padding的上下左右均对其有效
    • (3)可以自动换行
    • (4)多个块状元素标签写在一起，默认排列方式为从上至下

  • 行内块状元素

    • (1)不自动换行
    • (2)能够识别宽高
    • (3)默认排列方式为从左到右

• 换行的几种方法

  • 1. 强制不换行

    div{
        white-space:nowrap;
    }

    2. 自动换行

    div{
        word-wrap: break-word;
        word-break: normal;
    }

    3. 强制英文单词断行

     div{
        word-break:break-all;
     }

6.今天都复习了之前的什么内容