CSS day04

一、表格
 1.表格特有属性
   1.边框合并
    属性：border-collapse
    取值：
       separate 默认值，即分离边框模式
       collapse 边框合并
   2.边框边距
    作用：设置单元格之间或单元格与表格之间的距离
    属性：border-spacing
    取值：
       1.指定一个值，水平和垂直的间距相同
       2.指定两个值
         第一个值表示的水平间距
     第二个值表示的垂直间距
    注意：只有在分离边框的模式下才能设置边框的边距
   3.标题位置
    属性：caption-side
    取值：
         top:默认值，标题在表格正上方
     bottom:标题在表格的正下方
   4.显示规则
    作用：用来帮助浏览器指定如何去布局一张表，也就是指定td尺寸的计算方式
    属性：table-layout
    取值：1.auto  默认值，即自动表格布局，列的尺寸实际是由内容来决定的
          2.fixed  固定表格布局，列的尺寸将由设定的值为准
    自动表格布局和固定表格布局：
          1.自动布局
       (1)单元格大小适应内容
       (2)自动布局会比较灵活(优点)
       (3)表格复杂时，加载速度较慢(缺点)
       (4)适用于不确定每列大小并且表格不太复杂时使用
      2.固定
       (1)单元格的尺寸取决于设定的值
       (2)任何情况下都会加速显示表格(优点)
       (3)固定表格不够灵活(缺点)
       (4)适用于确定每一列的大小时使用

二、定位-浮动定位（重点）
 1.定位
  定位：指的是改变元素在页面中的位置。
 2.定位的分类
  按照定位的效果，可以分成以下几类：
    1.普通流定位(默认定位方式)
    2.浮动定位
    3.相对定位
    4.绝对定位
    5.固定定位
 3.定位-普通流定位
   普通流定位又称“文档流定位”，页面中元素们默认定位方式
      1.每个元素在页面中都是从父元素左上角开始来显示
      2.每个元素在页面中一定都有着自己的空间
      3.块级元素都是按照从上往下排列，每个元素独占一行
      4.行内元素以及行内块元素都是按照从左往右的方式来排列
      如何解决多个块级元素在一行中显示？
 4.定位-浮动定位
     1.什么是浮动定位&特点
       1.如果将元素的定位方式设置为浮动定位，元素将具备以下特点：
         ①元素将被排除在文档流之外(脱离了文档流)，不再占页面空间，其他未浮动的元素将上前补位
     ②浮动元素会停靠在其父元素的左边或者右边，或其他已经浮动元素的边缘上
     ③浮动定位解决的问题：让多个块级元素在一行中显示
       2.语法
         属性：float
     取值：
        1.none 默认值，即无任何浮动效果
        2.left 左浮动，让元素停靠在父元素的左边，或挨着左侧已经浮动的元素边缘
        3.right 右浮动，让元素停靠在父元素的右边，或挨着右侧已经浮动的元素边缘
       3.浮动引发的特殊效果
         1.当父元素显示不下所有已浮动元素时，最后一个将换行，但是，有可能被卡住。
     2.元素一旦浮动起来后，宽度将以内容为主(未指定宽度情况下)
     3.元素一旦浮动起来，将变为块级元素
       允许设置尺寸，正常处理垂直外边距
     4.文本，行内元素，行内块元素是采用环绕的方式排列的，是不会被浮动元素压在下方的，而且会巧妙的避开
       4.清除浮动所带来的影响
         元素一旦浮动起来之后，就会对后续元素带来影响（后续元素要上前补位），如果后续元素不想被影响（不想去补位），
     那么就可以通过清除浮动的方式来解决
     属性：clear
     取值：
        1.left 清除当前元素前面元素左浮动所带来的影响
        2.right 清除当前元素前面元素右浮动所带来的影响
        3.both 清除当前元素前面任何一种浮动所带来的影响
        4.none 默认值，不做任何清除操作
      
      5.浮动元素对父元素高度带来的影响
        元素的高度，都是以未浮动元素的高度为准，浮动元素是不占页面空间的，所有一旦子元素都浮动起来，那么父元素高度将为0
    解决方案：
        1.直接设置父元素高度
          弊端：不是每次都知道父元素高度
        2.设置父元素也浮动
          弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素（后续元素会上前补位）
        3.设置父元素的overflow
          取值：hidden/auto
          弊端：如果有内容要溢出显示的话，也会一同隐藏起来
        4.在父元素中，追加一个空的块级元素，并且设置其clear:both;
三、显示
1.显示方式
  1.显示方式
    决定元素在网页中的表现形式 (块级，行内，行内块等)
  2.语法
    属性：display
    取值：
    (1)none 不显示元素-隐藏
    (2)block  让元素表现的与块级元素一致
        中
    (3)inline  让元素表现的与行内元素一致
       特点：排列方式从左往右在一行中显示，并且不能修改尺寸
    (4)inline-block 让元素表现的与行内块一致
       特点：排列方式如同行内元素，但是具备块级元素特征，允许修改尺寸，也可以设置垂直外边距，但会影响整行
    (5)table 让元素表现的如同table
       特点：尺寸以内容为主
            每个元素独占一行
         允许修改尺寸
    注意：一般将行内元素显示为块级或行内块，很少将块级元素转换为行内。
2.显示效果
  1.显示/隐藏
    属性：visibility
    取值：
        1.visible 可见的，默认值
    2.hidden  元素不可见，隐藏
    问：display:none和visibility:hidden的区别？
    答：display:none;会脱离文档流，不占页面空间
        visibility:hidden;不脱离文档流，占据页面空间
   网页中新建两个div，id分别为d1和d2,设置各自的尺寸和背景颜色，先设置第一个div的display:none,查看页面效果，
   注释掉第一步的代码，然后再设置第一个div的visibility:hidden;再查看页面效果
  2.透明度
    属性：opacity
    取值：0-1 值越小越透明
    问：rgba和opacity的区别？
    答：opacity作用于元素，跟元素相关的颜色都会发生透明度的变化
        rgba只作用于当前的某一个颜色值
  3.垂直对齐方式
    属性：vertical-align
    使用场合：
      1.表格中使用
        取值：top/middle/bottom
      2.图片中使用
        取值：top/middle/bottom/baseline基线对齐（默认值）
    注意：编写网页时，通常都会将图片的垂直对齐方式更改为除baseline以外的任何一个值
  4.光标
    作用：改变鼠标悬停在元素上时的鼠标的状态
    属性：cursor
    取值：default 箭头
          pointer 小手状态
      crosshair +
      text      I
      wait      等待（转圈）
      help      帮助（箭头+问号）

四、列表
  1.列表项的标识
    属性：list-style-type
    取值：
        none  无标识
    disc  实心圆
    circle  空心圆
    square
  2.列表项图像
    属性：list-style-image
    取值：url(图片路径)
  3.列表项位置
    属性：list-style-position
    取值：
      outside:默认值，将标识放在li的外面
      inside:将标识放在li的里面
  4.列表属性简写方式
    属性：list-style
    取值：type url() position;
    常用方式：list-style:none;