前端笔记3

1.CSS样式
        - display
        - 用来设置元素的显示类型
        - 可选值：
        none 元素不会在页面显示，并且不会占据页面的位置
        block 元素作为块元素显示
        inline 元素作为内联元素显示
        inline-block 元素作为行内块元素显示

        - visibility
        - 用来设置元素的显示状态
        - 可选值：
        visible 默认值，元素在页面中可见
        hidden 元素在页面中隐藏，但是会占据页面的位置

        - overflow
        - 设置元素如何处理溢出的内容
        - 可选值：
        visible 默认值，溢出的内容会在父元素以外的位置显示
        hidden 溢出的内容会被裁剪不会显示
        scroll 会为父元素添加水平和垂直双方向的滚动条以完整的查看内容
        auto 会根据需要自动添加滚动条

        2.文档流
        - 文档流指的是网页中的一个位置，文档流可以说是网页的基础，
        我们所创建的元素默认情况下都在文档流中。
        - 元素在文档流中的特点：
        块元素
        1.块元素在文档流中自上向下垂直排列
        2.块元素在文档流中默认宽度是父元素的100%，默认高度被内容（子元素）撑开

        内联元素
        1.内联元素在文档流中自左向右水平排列，
        如果一行不足以容纳所有的元素，则另起一行继续自左向右水平排列
        2.内联元素在文档流中高度和宽度都被内容撑开

        3.浮动
        - 使用float来设置元素的浮动
        - 可选值：
        none 默认值，元素不浮动，在文档流中
        left 元素向左浮动
        right 元素向右浮动
        - 浮动的特点：
        1.当元素设置浮动以后，元素会向页面的左上或右上浮动
        2.当浮动元素遇到父元素的边框后，会停止移动。
        3.当浮动元素遇到其他浮动元素时，也会停止移动。
        4.如果浮动元素上是一个没有浮动的块元素，浮动元素不会超过他
        5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
        6.浮动元素不会覆盖文字，文字会环绕在浮动元素的周围
        7.浮动元素会完全脱离文档流

        - 元素脱离文档流以后的特点：
        内联元素
        - 内联元素脱离文档流以后会变成块元素

        块元素
        - 脱离文档流以后，块元素就不会独占一行了
        - 脱离文档流以后，块元素的宽和高都被内容撑开

        - 高度塌陷
        - 默认情况下父元素的高度被子元素撑开，
        如果这时子元素开启了浮动，则会脱离文档流，导致无法撑起父元素的高度，
        造成父元素的高度塌陷，将页面的布局打乱。
        - 解决方式：
        - 可以通过开启父元素BFC来处理高度塌陷问题。
        - BFC
        - Block Formatting Context 块级格式化环境
        - 默认情况下BFC是关闭的，当开启元素的BFC以后，元素会具有如下的特性：
        1.元素不会被浮动元素所覆盖
        2.子元素的垂直外边距不会传递给父元素
        3.元素可以包含浮动的子元素
        - 开启BFC的方式：
        1.设置元素的浮动
        2.设置元素的display为inline-block
        3.设置元素的绝对定位
        4.设置元素的overflow为hidden  *****

        4.定位
        - 定位是一种更高级的布局方式，比浮动更加的灵活，通过定位可以将元素摆放到页面中的任意位置
        - 定位一共分成三种：相对定位 绝对定位 固定定位
        - 通过position属性来设置元素的定位：
        可选值：
static 默认值 元素没有开启定位
        relative 开启元素的相对定位
        absolute 开启元素的绝对定位
        fixed 开启元素的固定定位

        - 相对定位：
        - 当元素的position属性设置为relative时，则开启了元素的相对定位
        - 相对定位的特点：
        1.当给元素开启相对定位而不设置偏移量时，元素的位置不会发生任何变化
        2.相对定位的元素是相对于元素自身在文档流中的位置进行定位的
        3.相对定位的元素不会脱离文档流
        4.相对定位不会改变元素的性质，块还是块 内联还是内联
        5.相对定位会提升元素的层级

        - 偏移量（offset）
        - 当元素开启了定位以后，可以通过四个偏移量来设置元素的位置
        top 元素距离定位元素的上边的偏移量
        bottom 元素距离定位元素底部的偏移量
        left 元素距离定位元素左侧的偏移量
        right 元素距离定位元素的右侧的偏移量
        - 一般偏移量只需要使用两个，一个水平方向一个垂直方向就可以为一个元素定位
        top left
        top right
        bottom left
        bottom right

        - 层级（z-index）
        - 当元素开启了定位以后，会提升层级，我们也可以通过z-index来为定位元素来设置层级
        - z-index需要一个正整数作为参数，值越大层级越高，层级越高越优先显示，层级一样显示靠后的
        - 父元素永远都不会盖住子元素