第七篇 css - 样式 - 【 列表样式 + 表格样式 + 其他样式 】

列表样式

1、list-style-type
 
2、list-style-position
 
3、list-style-image

列表样式解析

1、html 有三种类型的列表
 
   1、无序列表
   
   2、有序列表
   
   3、自定义列表
   
2、设置列表标记有
     
     序号
     
     圆点
     
     圆圈
     
     图片
     
     ...
     
3、list-style
 
   简写属性，用于把下边三个属性声明到一起
   
4、list-style-type
 
    属性指定列表项标记的类型  实心圆、空心圆、方框等 
    
5、list-style-position
 
    设置列表中标记项的相对位置    
    
6、list-style-image
 
   将图像设置为列表项标志    

list-style-type 的属性值
 
 1、none：无标记。
 
 2、disc：标记实心圆。不设置的时候默认disc
 
 3、circle：空心圆
 
 4、square：实心方块
 
 5、decimal：标记是数字
 
 6、lower-roman：小写罗马数字 (i,ii,iii,iv……)
 
 7、lower-latin：小写拉丁字母 (a,b,c,d……)……
 
 8、还有一些比较见得少的，此处不添加，需要了可自行到 w3c 中查看。

list-style-position 的属性值
 
  1、inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
  
  2、outside：默认值，保持标记位于文本的左侧
  
  3、inherit：从父级继承list-style-position属性值

list-style-image
 
ol,ul{
  list-style-image: url("cat.svg")
}

表格样式

1、caption-side 
 
  定义表格标题在表格上方或下方
 
    1、top  上方  默认
    
    2、bottom  下方
    
      table{
        caption-side: bottom;
      }
 
2、border-collapse 
 
   表格边框合并，去除边框之间的间隙
   
    1、separate  边框分开，默认值
    
    2、collapse  边框合并
    
      table{
        border-collapse: collapse;
      }
 
3、border-spacing
 
   定义表格边框间距
   
   表格边框不合并的情况下生效
   
      table{
         border-spacing: 10px;
      }

其他样式

1、outline
 
2、display
 
3、visibility
 
4、opacity
 
5、overflow

其他样式解析

1、outline
 
  轮廓，指边缘；物体的外周或图形的外框
  
  outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
  
  outline 属性设置元素周围的轮廓线
  
  outline 分为两部分
   
    1、shorthand CSS property:  outline  三个属性组成
    
       1、outline-style
       
        定义要绘制的线的类型
        
        它的值可以是以下任何关键字
       
          auto
          dotted
          dashed
          solid
          double
          groove
          ridge
          inset
          outset
          none （默认值，没有轮廓）
          
outline-style: auto | dotted | dashed | solid | double | groove | ridge | inset | outset
       
       2、outline-width
       
        定义要绘制的线的厚度
        
        其值可以是任意长度值，也可以是以下任意关键字
        
          thin
          medium（默认值）
          thick
          
outline-width: 2(px, em, rem) | thin | medium | thick     
       
       3、outline-color
       
         设置 outline 的文字部分和装饰部分的颜色
         
         可以通过关键字、十六进制值、RGB/RGBA 值和 HSL/HSLA 值来指定
         
outline-color: currentColor | red | #eee | rgb(255, 255, 255) | hsl(0,0,0)         
       
    2、独立的 outline-offset   
    
      1、outline-offset 的 initial value 为 0
      
      2、允许正负值，负值时outline会收缩，正值时会扩张       

2、display
 
用于 设置和修改 元素的 显示模式 如
 
  1、block：让元素显示为块级元素
  
  2、inline：让元素显示为行内级元素
  
  3、inline-block：让元素同时具备行内级、块级元素的特征
  
  4、none：隐藏元素
  
  5、flex：伸缩盒子

3、overflow
 
用于控制内容溢出时的行为
 
 1、visible：溢出的内容照样可见
 
 2、hidden：溢出的内容直接裁剪
 
 3、scroll：溢出的内容被裁剪，但可以通过滚动机制查看
 
   会一直显示滚动条区域，滚动条区域占用的空间属于 width、height
 
 4、auto：自动根据内容是否溢出来决定是否提供滚动机制

4、visibility
 
  控制元素是否可见
  
   1、visible：默认值，元素可见
   
   2、hidden：元素不可见
   
   3、collapse：表格中使用，表示该列或列组的所有单元格不显示。
   
     如果用于非表格元素，collapse 与 hidden 含义相同
     
   4、inherit：一个大众属性了，指定一个属性应从父元素继承它的值
 
补充
 
display：none 和 visibility：hidden 的比较
 
 1、visibility: hidden 不脱离文档流，保留在文档之中，并且保存原有的物理空间
 
 2、display: none 则是将对应元素从文档中删除，如果需要重新显示则需要重新绘制页面
 
 3、visibility: hidden 的 子元素 可通过设置 visibility: visible 在文档中显示
 
 4、display:none 的 子元素 是无法通过设置自身的 display 属性重新显示的
 
 5、设置 visibility 的元素，可以通过 transition 属性监听属性值变化，具有过渡的属性
 
 6、display 不支持 transition 属性，它是瞬间完成的

5、opacity
 
 指定一个元素的不透明度
 
 指定了当前元素对后面背景的不透明程度
 
 默认值是 1，表示当前元素完全不透明，完全会遮挡住后面的背景
 
注意
 
  子元素的不透明度 与 父不透明度 的影响
  
  实际展现效果的 opacity = 父元素的 opacity * 自身的 opacity
  
  一个元素其自身的 opacity 最后展现的效果，应该是是其 父元素的 opacity * 其自身的 opacity