CSS（四）

一、布局方式

    1、布局：设置元素在网页中的排列方式和位置
    2、分类：

        1、标准流布局
        2、浮动布局
        3、定位布局

1、标准流布局 （普通流/文档流/静态流）

     默认布局方式
     特点 ：
          将元素按照书写顺序和元素类型，从左向右，从上至下排列

2、浮动布局

1、设置元素浮动
       属性：float
       取值：left / right / none(默认值)
           left :元素向左浮动，停靠在其他元素的边缘
           right : 元素向右浮动，停靠在其他元素的边缘
2、浮动元素的特点：
        1. 元素设置浮动（left/right）之后，会脱离文档流，脱流之后，元素在文档中不再占位，呈现一种浮动元素“漂浮”在文档流上方的效果
        2. 元素设置浮动，会从它当前所在的文档中的位置脱流向左或向右浮动。
        3. 多个元素同时左浮或右浮，浮动元素会依次停靠在前一个元素的边缘位置，第一个浮动元素会贴着父元素的边框显示，中间没有缝隙
        4. 浮动元素会在父元素的尺寸范围内浮动,多个浮动元素无法并排显示时,会自动换行,停靠在其他浮动元素边缘
        5. 任何元素只要设置浮动元素,就具有块元素的特征,就可以手动调整宽高，行内/行内块元素浮动之后，水平方向上就没有空隙了
3、浮动元素的特殊效果
         文字环绕效果：
               浮动元素脱流，在文档中不占位，后面正常元素会向前占位，可能被浮动元素遮挡，但是浮动元素只会遮挡正常元素的尺寸区域，不会遮挡正常（元素中内容的显示）文本内容，文本会自动围绕在浮动元素周围显示
4、浮动元素引起的问题（对父元素高度的影响）
     子元素如果全部设置浮动，在文档中不占位，父元素的高度就变成0：
           1、父元素的背景图片和背景颜色无法显示
           2、父元素后面的正常元素会上移，，影响后面元素的布局
     解决方式 ：
          1. 指定父元素的高度
              弊端 ：无法确认父元素的高度，不一定每次都清楚知道
          2. 父元素中设置overflow:hidden;
              弊端 ：如果父元素要显示溢出的内容，设置overflow :hidden之后，溢出内容就不显示了
          3. 清除浮动带来的影响：
              属性：clear
              取值：left / right / both
              使用：
                  为正常元素添加clear属性，清楚浮动元素带来的影响
                  left：代表正常元素左边不允许出现浮动元素。（不被遮挡）
                  right：代表正常元素右边不受浮动元素影响。
                  both：正常元素不受浮动元素影响。（正常元素两边都不能出现浮动元素）
              解决父元素高度为0的问题：
                  1、为父元素末尾添加空的块元素
                  2、为空的块元素设置clear:both;

3、定位布局

1、定位布局：通过调整元素的位置，实现网页布局
2、属性：position
     取值：
         1、static 默认值 按照文档流布局
         2、relative 相对定位
         3、absolute 绝对定位
         4、fixed    固定定位
      注意 ：只有元素设置position的属性为 relative / absolute / fixed三者之一,才认为元素是“已经定位的元素”
3、偏移属性
     属性 ： top /right / bottom/ left
     作用 ：配合已定位的元素实现位置移动
     取值 ：取像素值，可正可负。
         1、top : 正值表示元素向下移动，负值向上（以元素的上边界为基准移动元素）
         2、bottom : （以元素的底边界为基准移动元素）
         3、left : （以元素的左边界为基准移动元素）
         4、right : （以元素的右边界为基准移动元素）

4、分类：
     1、相对定位  position ：relative;
                元素设置相对定位之后，可以使用偏移属性调整元素的位置   
                相对定位的元素是参照元素在文档中的原始位置进行偏移
          特点：相对定位的元素不会脱离文档流，在文档中始终保留它的原始位置。
     2、绝对定位  position : absolute;（重点）
          特点 ：
              1. 绝对定位的元素，会脱离文档流，元素在文档中不占位，效果类似于浮动。
              2. 绝对定位的元素会参照一个离它最近的，并且已经定位的祖先元素进行偏移。
              3. 如果元素没有已定位的祖先元素，元素会参照(浏览器窗口左上角)body的(0,0)点位置进行偏移。
         注意 ：
              1. 元素一旦绝对定位，就可以设置宽高了
              2. 经常使用 “父相子绝”的方式实现页面布局
                 父元素采用相对定位，子元素采用绝对定位
              3. 浮动和绝对定位都可以实现元素脱流，采用浮动+外边距调整元素位置 等价于 绝对定位+偏移属性，浮动更常见于外围结构标签，做网页整体布局时使用，绝对定位更常用于内部元素的调整
              4. 浮动和相对定位可以共存的，设置的相对定位只是为了辅助内部子元素的定位布局
          使用：
                 采用“父相子绝”的方式实现元素绝对定位。
                 父元素采用相对定位，子元素使用绝对定位，
                 实现子元素参照父元素的（0,0）点偏移
     3、固定定位  position ：fixed;
         1. 固定定位可以使元素固定在浏览器窗口的某个位置，不会随网页内容滚动而滚动
         2. 语法 ：
             属性 ：position
             取值 ：fixed
             配合偏移属性实现元素位置的固定
         3. 注意 ：
             1. 固定定位的元素，永远是参照浏览器窗口进行偏移
             2. 固定定位的元素都会变成块元素，会被定位在窗口的某个位置，不会跟随网页滚动而滚动。
5、调整已定位元素的堆叠次序
      1、已定位的元素堆叠在一起时的排列顺序
      2、属性：z-index
           取值：无单位的数值，默认为0，数值越大,元素越靠上显示
           注意:
                1、z-index属性只能用在已定位的元素中使用
                2、兄弟元素之间，可以通过z-index数值的大小调整堆叠次序
                3、父子元素之间，永远是子元素在上，无法通过z-index调整父子元素的堆叠次序
                4、如果兄弟元素z-index取值相同，后来者居上

二、元素显示效果

1. display（设置元素的可见性）

2. visibility（转化元素类型）

3. 透明度设置

   1、属性 ：opacity 设置元素透明度
   2、取值 ：0（透明） - 1 （不透明）
   3、注意 ：
          1. 元素使用opacity设置半透明，所有显示的内容（背景颜色，文本颜色等）都会呈现半透明效果
          2. opacity是对元素整体透明度的设置，包含元素自身和内部的子元素。
          3. 子元素同时设置透明度,最终的透明度值是在父元素opacity取值的基础上再次进行透明度设置
        et :
           父元素 opacity : .5;
           子元素 opacity : .5;
           子元素最终的透明度为 .5 * .5 = .25

4、行内块元素的垂直对齐方式

    行内块元素 ：img input button
    属性 ：vertical-align
    取值 ：top / middle / bottom
    作用 ：调整行内块元素左右元素与其自身的垂直对齐方式

5、设置鼠标形状

   属性 ：cursor
   取值 ：
          1. default 默认值
          2. pointer 鼠标在元素上展现为手指的样式
          3. text     鼠标展示为 "I",表示普通文本 info
          4. crosshair 鼠标展示为 "+"

三、列表相关属性

  列表自带内外边距和项目符号

1、list-style-type

  设置项目符号
  取值 ：
        1. none (取消项目符号，最常用)
        2. disc 实心圆点
        3. circle 空心圆点
        4. square 实心方块
        5. ...

2、list-style-image   

  指定图片作为项目符号
  取值 ：url()

3、list-style-position

  指定项目符号的显示位置
   默认项目符号显示在内容外部,在左边的padding中展现
   取值 ：
      1. outside 默认值
      2. inside 设置项目符号显示在内容区域

4、属性简写 ：

    属性 ：list-style
    取值 ：type/image position
    常用 ：
        list-style:none;
        取消项目符号

四、过渡效果

   过渡指的是元素的CSS属性值发生变化时的一种平滑过渡效果

语法：

  1、属性：transition

    取值：property duration timing-fuction delay;
    注意：
        1、属性简写时，四个属性值中，duration是必填项，其他三个属性值可以省略
        2、transition属性如果在伪类选择器中设置，元素的过渡效果只发生在第一次属性值改变过程中，再有的属性值变化都不会添加过渡效果，为了保证页面效果，过渡属性在元素的默认样式中添加

  2、过渡详解

   1、属性：transition-property
        取值：CSS 属性名称
        作用：指定某一个CSS样式在发生值改变时改变时添加过渡效果
        注意：
             1、指定多个属性时，使用逗号隔开
             2、可以省略，省略时，所有涉及值改变的属性都会被自动添加过渡效果
             3、all 指定所有的CSS属性在值变化时产生过渡效果
     2、属性：transition-duration
          取值：以s为单位的数值
          作用：指定过渡时长
     3、属性：transition-timing-function
          作用：指定过渡效果的速度变化曲率
          取值：
             1、ease： 默认值，慢速开始，中间快速变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）。
             2、linear： 匀速变化（等于 cubic-bezier(0,0,1,1)）。
             3、ease-in：慢速开始,加速结束（等于 cubic-bezier(0.42,0,1,1)）。
             4、ease-out：快速开始，慢速结束（等于 cubic-bezier(0,0,0.58,1)）。
             5、ease-in-out 慢速开始和结束，中间先加速后减速（等于 cubic-bezier(0.42,0,0.58,1)）。
     4、属性：transition-delay
          取值：以s为单位的数值
          作用：指定过渡效果延迟几秒

五、转化属性

1、转换：改变元素的位置，角度或大小（平移，旋转，缩放）

2、语法：

  1、属性：transform
  2、取值：转换函数
      注意：多个转换函数之间使用空格隔开
      1、平移变换
          1、作用：改变元素的文档中的位置
          2、函数：translate(x,y)
              取值：x表示水平方向的平移距离
                       y表示垂直方向的平移距离
              正值表示向右或向下移动
              负值相反
           3、其他情况：
               1、translateX(value)
                  指定沿水平方向平移
               2、translateY(value)
                  指定沿垂直方向平移
               3、translate(value)
                  等价于translateX(value)
      2、旋转变换
        1、作用：将元素旋转一定角度，默认的转换原点是元素的中心
        2、函数：rotate(ndeg)
             取值：以deg角度为单位的数值，
                 正值表示顺时针旋转
                 负值表示逆时针旋转
                 ------------------
                元素3D变换
                rotateX(ndeg) 沿X轴翻转
                rotateY(ndeg) 沿Y轴旋转
      3、缩放变换
         1、作用：改变元素在页面中的大小
         2、函数：scale(value)
              取值：value为无单位的数值，表示缩放比例
                1、value=1 原始比例显示（默认值）
                2、value > 1 等比放大
                3、0 < value < 1 等比缩小
                4、value < 0 元素不仅会比例缩放，而且会翻转
         3、其他情况
              1. scaleX(v) 横向缩放
              2. scaleY(v) 垂直缩放
  3、转换原点
     1、转换原点实际上是元素发生平移，旋转或缩放变换的基准点，默认是元素的中心点
     2、属性：transform-origin
          取值：x y;
               1、像素值
               2、百分比
               3、方位值
                    left / center / right
                    top  / center / bottom
         注意：
              1、以元素左上角为(0,0)点，给出转换原点的坐标位置
              2、改变元素的转换基准点会影响元素转换的效果
              3、旋转操作会连带元素的坐标轴一起旋转，影响其他的转换效果
         et：
             transform : translate(50px,50px) rotate(45deg);
             transform : rotate(45deg) translate(50px);