文数据类型,定位,浮动

1.文档流

  • 所有的元素默认情况下都是在文档流中存在的

  • 文档流是网页的最底层

  • 元素在文档流中的特点:

    • 块元素

      1.默认宽度是父元素的全部
      2.默认高度被内容(子元素)撑开
      3.在页面中自上而下垂直排列

    • 内联元素

      1.默认高度和宽度都被内容撑开
      2.在页面中自左向右水平排列,如果一行不足以容下所有的元素,则换到下一行继续从左向右

2.浮动

  • 使用float来设置元素的浮动

  • 可选值:

    none 默认值,元素不浮动,就在文档流中
    left 元素向页面的左侧浮动
    right 元素向页面的右侧浮动

  • 浮动特点:

    1.元素设置浮动以后,会完全脱离文档流,并向页面的左上或右上浮动。直到遇到父元素的边框或其他的父元素时则停止浮动。
    2.如果浮动元素上边是一个没有浮动的块元素,元素不会超过该块元素。
    3.浮动元素的浮动位置不能超过他上边浮动的兄弟元素,最多一边齐
    4.浮动元素不会覆盖文字,文字会围绕在浮动元素的周围,所以可以通过浮动来实现文字环绕图片的效果。

  • 浮动以后元素会完全脱离文档流,脱离文档流以后元素会具有如下特点:

    1.块元素不独占一行
    2.块元素的宽度和高度都被内容撑开
    3.元素不在文档流占用位置
    4.内联元素会变成块元素

  • 高度塌陷

    • 在文档流中元素的高度默认被子元素撑开,当子元素浮动时,子元素会脱离文档流,

      此时将不能撑起父元素的高度,会导致父元素的高度塌陷。父元素高度塌陷会导致其他元素的位置上移,导致页面的布局混乱。
    • 可以通过开启元素的BFC来处理高度塌陷的问题。

      • BFC叫做Block Formatting Context

      • 它是一个隐含属性,默认情况是关闭,当开启以后元素会具有如下的特性:

        1.父元素的垂直外边距不会和子元素重叠
        2.开启BFC的元素不会被浮动元素覆盖
        3.父元素可以包含浮动的子元素

      • 开启BFC的方式:

        1.设置元素浮动
        2.设置元素绝对定位
        3.设置元素为inline-block
        4.将元素的overflow设置为一个非默认值

      • 一般我们采用副作用较小的方式:overflow:hidden;

3.定位

  • 通过定位可以将元素摆放到页面的任意位置

  • 使用position来设置元素的定位

    • 可选值:

      • static 默认值 元素不开启定位
      • relative 开启元素的相对定位
      • absolute 开启元素的绝对定位
      • fixed 开启元素的固定定位
    • 相对定位
      1.相对于元素自身在文档流中的位置进行定位
      2.相对定位的元素不会脱离文档流,定位元素的性质不会改变,块还是块,内联还是内联
      3.如果不设置偏移量,元素不会发生任何的变化
      4.会提升元素的层级

    • 绝对定位
      1.相对于离它最近的开启了定位的祖先元素进行定位,如果祖先元素都没有开启定位则相对于浏览器窗口进行定位。
      2.绝对定位会使元素完全脱离文档流,会改变元素的性质,内联变成块元素,块元素的宽度被内容撑开
      3.绝对定位的元素如果不设置偏移量,元素的位置不会发生变化
      4.会提升元素的层级

    • 固定定位

      • 固定定位也是一种绝对定位,它的大部分特点都和绝对定位是相同的。
      • 不同的是:
        • 固定定位永远相对于浏览器窗口进行定位
        • 固定定位会固定在浏览器的指定的位置,不会随页面一起滚动
    • 偏移量

      • 当元素开启了定位以后,可以通过四个偏移量来设置元素的位置
        top:相对于定位位置的顶部的偏移量
        bottom:相对于定位位置的底部的偏移量
        left:相对于定位位置的左侧的偏移量
        right:相对于定位位置的右侧的偏移量

      • 一般只需要使用两个值即可给元素进行定位
        top left
        top right
        bottom left
        bottom right

      • 偏移量也可以指定一个负值,如果是负值则元素会向相反的方向移动

    • 层级

      • 当元素开启定位以后,可以通过z-index来设置层级,
        它需要一个正整数作为参数,值越大层级越高,层级越高越优先显示
        如果层级一样,则后边的会盖住前边的,父元素永远都不会盖住子元素。

      • 文档流 < 浮动 < 定位

    • 元素的透明
      使用opacity来设置元素的透明度

      - 需要一个0-1之间的值
      - 0 表示完全透明
      - 1 表示完全不透明
IE8及以下的浏览器不支持该样式,需要使用如下方式来设置
    filter:alpha(opacity=透明度);
    - 需要一个0-100之间的值
    - 0 表示完全透明
    - 100 表示完全不透明  

4.输出

弹出警告框

alert("显示内容");

document.write("向body输出一个内容");

document.log("向控制台输出");//console.log();用于在控制台输出一个日志

外边有双引号的时候,括号里面用单引号,如有需要,使用\进行转义

script标签一旦用于引入外部文件就不能再在标签内部写了,如果需要,重新写一个script标签

  • js严格区分大小写,语句以分号结尾

  • 会忽略多个空格和换行

  • 标识符规范;首字母小写,每个单词开头大写

5.数据类型(6种)

  • Sring 字符串

    • JS中的字符串需要使用引号引起来双引号或单引号都行

    • 在字符串中使用\作为转义字符

      1
      2
      3
      4
      5
      \'  ==> '
      \" ==> "
      \n ==> 换行
      \t ==> 制表符
      \\ ==> \
    • 使用typeof运算符检查字符串时,会返回”string”

  • Number 数值

    • JS中所有的整数和浮点数都是Number类型

      - 特殊的数字
          Infinity 正无穷
          -Infinity 负无穷
          NaN 非法数字(Not A Number)
      - 其他进制的数字的表示:
          0b 开头表示二进制,但是不是所有的浏览器都支持
          0 开头表示八进制
          0x 开头表示十六进制
      
      - 使用typeof检查一个Number类型的数据时,会返回"number"
          (包括NaN 和 Infinity)

Number.MAX_VALUE

  • Boolean 布尔值

    • 布尔值主要用来进行逻辑判断,布尔值只有两个
      - true 逻辑的真
      - false 逻辑的假
      - 使用typeof检查一个布尔值时,会返回"boolean"
  • Null 空值

    • 空值专门用来表示为空的对象,Null类型的值只有一个null
    • 使用typeof检查一个Null类型的值时会返回”object”
  • Undefined 未定义

    • 如果声明一个变量但是没有为变量赋值此时变量的值就是undefined
    • 该类型的值只有一个 undefined
    • 使用typeof检查一个Undefined类型的值时,会返回”undefined”
  • Object 对象(引用数据类型)
    typeof:用于输出变量a的类型console.log(typeof a);

    类型转换

  • 类型转换就是指将其他的数据类型,转换为String Number 或 Boolean

    • 转换为String

      • 方式一(强制类型转换):

        • 调用被转换数据的toString()方法
        • 例子:
          var a = 123;a = a.toString();
        • 注意:这个方法不适用于null和undefined
          由于这两个类型的数据中没有方法,所以调用toString()时会报错
      • 方式二(强制类型转换):

        • 调用String()函数

        • 例子:
          var a = 123;a = String(a);

        • 原理:对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串,
          对于null值,直接转换为字符串”null”。对于undefined直接转换为字符串”undefined”

      • 方式三(隐式的类型转换): *****

        • 为任意的数据类型 +””

        • 例子:
          var a = true;a = a + "";

        • 原理:和String()函数一样

      • 转换为Number

        • 方式一(强制类型转换):

          • 调用Number()函数

          • 例子:
            var s = "123";s = Number(s);

          • 转换的情况:
            1.字符串 –> 数字

            - 如果字符串是一个合法的数字,则直接转换为对应的数字
            - 如果字符串是一个非法的数字,则转换为NaN
            - 如果是一个空串或纯空格的字符串,则转换为0

            2.布尔值 –> 数字

            - true转换为1
            - false转换为0

            3.空值 –> 数字

            - null转换为0

            4.未定义 –> 数字

            - undefined 转换为NaN
        • 方式二(强制类型转换):

          • 调用parseInt()或parseFloat()

          • 这两个函数专门用来将一个字符串转换为数字的

          • parseInt()

            • 可以将一个字符串中的有效的整数位提取出来,并转换为Number

            • 例子:
              var a = "123.456px";a = parseInt(a); //123

            • 如果需要可以在parseInt()中指定一个第二个参数,来指定进制

          • parseFloat()

            • 可以将一个字符串中的有效的小数位提取出来,并转换为Number
            • 例子:
              var a = "123.456px";a = parseFloat(a); //123.456
        • 方式三(隐式的类型转换):

          • 使用一元的+来进行隐式的类型转换
          • 例子:
            var a = "123";a = +a;
          • 原理:和Number()函数一样
      • 转换为布尔值

        • 方式一(强制类型转换):

          • 使用Boolean()函数

          • 例子:
            var s = "false";s = Boolean(s); //true

          • 转换的情况
            字符串 –> 布尔

            - 除了空串其余全是true

            数值 –> 布尔

            - 除了0和NaN其余的全是true

            null、undefined —> 布尔

            - 都是false

            对象 —> 布尔

            - 都是true
        • 方式二(隐式类型转换):

          • 为任意的数据类型做两次非运算,即可将其转换为布尔值
          • 例子:
            var a = "hello";a = !!a; //true