CSS常见样式(二)——列表，背景，边框，行高，表格，verti

一、列表(list-style)

1.列表的特定样式

list-style有三个属性，这三个属性可以在<ul>或<ol>元素上面设置：

1.1 list-style-type: 设置列表的项目符号类型，例：无序列表的方形或者圆形符号，有序列表的数字，字母，或者罗马数字。
1.2 list-style-position：设置符号是在列表内还是列表外。
1.3 list-style-image ：设置项目符号为自定义图片

1.1 list-style-type:符号样式取值

/*去掉默认的符号，常用*/
ul, ol {
    list-style-type: none;
}

/*列表实心圆点（默认）*/
ul {
    list-style-type: disc;
}

/*无序列表空心圆点*/
ul {
     list-style-type: circle;
}

/*无序列表实心方块*/
ul {
     list-style-type: square;
}

/*有序列表十进制从1开始的阿拉伯数字，*/
ol {
     list-style-type: decimal;
}

1.2 list-style-position：项目位置

/*符号是在外面*/
ul {
     list-style-position: outiside;
}

/*符号是在块盒内的第一个行内盒，在元素内容流后面*/
ul {
     list-style-position: inside;
}

1.3 list-style-image ：设置自定义的项目符号图片

/*可以用图形符号*/
ul {
list-style-image: url(https://i.loli.net/2019/11/08/4vriKTQR6sXnFBW.png);
}

这3个属性可以用单独的list-style来设置。属性值可以任意顺序排列，例如：

ul { 
   list-style-type: circle;
   list-stye-position: inside;
   list-style-image: url(example.png);

可简写：

ul {
      list-style: circle inside url(example.png);

二、背景(background)

注意：默认情况下，背景区域覆盖内容+内边距+边框

1. background的常用样式：

1.1 background-color:设置背景颜色
1.2 background-image:设置背景图片
1.3 background-position: 设置背景图片的位置
1.4 background-repeat: 设置背景图片的重复值
1.5 background-size: 设置背景图片的大小，IE9以下不支持。
1.6 background-clip: 设置元素背景区域覆盖范围
1.7 background-attachment: 设置背景元素是否随元素滚动二产生动态。

背景样式常用值

1.1 background-color:
①英文名：red；②十六进制颜色：#000; ③rgba(0,0,0,0);

1.2 background-image:

• 普通的背景图片background-image: url(图片地址);
• 渐变背景background-image: linear-gradient(颜色, 颜色);
  渐变背景

1.3 background-position:
①数值偏移量(单位：px): x y; ②百分比偏移量：x% y%; ③横坐标和纵坐标的固定值：[top |center |bottom ] [left |center |right ];

1.4 background-repeat:
①不重复：no-repeat;②X轴重复：repeat-x; ③Y轴重复：repeat-y; ④XY轴都重复：repeat;

1.5 background-size(css3属性)：主要是设置背景图片的尺寸，IE9以下不支持。如果设置了background-attachment: fixed;会使background-size失效。

• 语法
  ①：cover: 缩放背景图片宽度或者高度完全覆盖背景区；容器和背景图片大小不同时，会被裁剪可能背景图片会看不见。
  ②：contain: 调整背景图片宽度和高度完全装入背景区，可能背景区部分空白。
  ③：设定指定宽度和高度，图片可能会失真。

PS：在no-repeat和repeat情况下，cover和contain的区别：

• no-repeat情况下：
  ①：cover铺满整个容器，图片多出来部分会被裁掉。
  ②：contain缩放背景图片完全装入背景区，可能背景区域会部分空白；
  no-repeat情况下，cover与contain区别

• repeat情况下：
  ①：cover铺满整个容器，图片多出来部分会被裁掉。
  ②：contain容器至少有一张完整的图，留白区域则平铺背景图，铺不下再裁掉。
  repeat情况下，cover与contain区别

PS：contain和cover都会保持背景图片的宽高比，直接写宽高图片有可能会失真。

1.6 background-clip: 设置元素背景区域福覆盖范围

• border-box: 覆盖至边框最外围
• padding-box: 覆盖至内边距最外围
• content-box: 仅覆盖元素内容区域

PS：background样式简写

• 属性合并简写

.box {
    background: #ccc url(images/bg.png) center no-repeat;
 }

• 多重背景

.box {
   background: #ccc url(images/bg.png) center no-repeat,#ccc url(images/bg2.png) 20px 20px no-repeat;

三、边框border

1. border有四个属性值，分别对应一个盒子的四条边，分别是上右下左，如图：

边框

//边框的四个基本值
.box {
        border-top: 1px;
        border-right: 1px;
        border-bottom: 1px;
        border-left: 1px;
}

2. boder三个常见属性

boder-width  //边框粗度
boder-style  //边框样式
boder-color //边框颜色

2.1 border-width: 边框粗度，通常用Npx固定单位直接表明，例：border-width: 1px;

2.2 boder-style: 边框样式，设定边框的样子，常用值：soild(默认实线)，dotted，dashed(虚线)

boder样式

3. border-radius边框半径

• 设置圆角

  
  边框圆角

• 实现圆形，宽高相等，border-radius设置为宽高的一半以上
  

  圆形

• 实现三角形

  
  三角形

• 实现扇形或者半圆

  
  image.png

四、行高(line-height)

• 定义一行文字占据的垂直空间

PS：文字占据的高度不是有font-size决定的，而是由line-height决定。

• 行高特性：

1. 有继承性；
2. 单位：①固定单位：px； ②相对单位(倍数)：2；③相对单位百分比：200%；

• 单行文字在元素中垂直居中

设置line-height与容器的高度一样就可以了

line-height垂直居中

• 相对单位中的倍数和百分比的区别：

例: (line-height: 2;与line-height: 200%)

1. 两者主要是区别是继承的计算方式区别；

2. line-height: 2;被继承的是倍数,是当前元素font-size的2倍,该倍数会继承给孩子会得到一个新的值；
   

   继承body的line-height倍数，30px*2=60px

3. line-height: 200%; 当前元素font-size的2倍，计算具体值，然后把具体值继承给孩子。

body里先计算好具体值，20px*200%=40px，在赋值给p，所以是40px。

五、表格(table)

• border-collapse设置表格边框是分开还是合并

1. collapse: 合并
2. separate: 分开

//表格合并应用代码
table {
        border-collapse: collapse;
}

简单的表格

六、inline-block特性

1.特性

• 呈现inline元素的特性：不占据一整行，宽度由内容宽度决定；
• 同时呈现block元素的特性：可以对其设置宽高以及上下padding和margin；
• 多个并排显示时存在inline元素的缝隙问题

inline-block缝隙问题

2.对齐方式
多个不同高度的inline-block元素并排显示时上下对齐的基线是文本内容的底线。

对齐方式

3. 缝隙问题产生的原因以及解决方案

• 产生的原因：

• 往前移动（TAB）、换行（LF）、换页（FF）、回车（CR）、SPACE都是空白字符

• 多个连续的空白字符会合并成一个空格，空格也占据一个字符的空间。

• white-space属性可以修改合并的原则

• 解决方案
  ①：HTML标签连写，没有连写还是会有缝隙：

  
  连写

②：设置父容器font-size: 0;，然后在设置inline-block的元素font-size

设置父容器font-size为0

③：设置浮动，有可能导致父容器高度塌陷

设置浮动

④：设置负margin挤掉空格，但是会导致元素溢出父容器

负margin

七、vertical-align垂直对齐

• 用处
  设置inline、inline-block、table-cell元素的垂直对齐方式
• 对齐方式
  ①、顶部对齐 vertical-align: top;
  顶部对齐

②、基线对齐vertical-align: baseline;

基线对齐

③、居中对齐vertical-align: middle;

居中对齐

④、底部对齐vertical-align: bottom;

底部对齐

参考：饥人谷课件