前端知识点总结——CSS

摘要：父元素没有上边框为子元素设置上外边距时在中嵌套一个子元素设置其尺寸为，并设置其背景颜色设置的上外边距为观察其结果。

1.什么是CSS?

</>复制代码 
CSS：Cascading Style Sheets层叠样式表，级联样式表（简称：样式表）

2.作用

</>复制代码 
设置HTML网页元素的样式

3.HTML与CSS的关系

</>复制代码 
HTML：负责内容的展示
CSS：负责内容（元素）的修饰

4.HTML与CSS之间的使用原则

</>复制代码 
W3C建议尽量使用CSS属性去取代HTML属性来修饰元素

1.使用CSS样式的方式(重点)

</>复制代码 
 1.内联样式
   又称为行内样式
   特点：将CSS样式定义在HTML开始标记中
   语法：
     
 样式声明：
      1.由样式属性和值来组成
      2.属性名与值之间用 冒号 连接
      3.多个样式声明之间用 分号 分割
        常用的CSS样式属性 和 值：
      1.设置文本颜色的属性和值
        属性：color
    值：合法的颜色值（英文）
      2.设置背景颜色的属性和值
        属性：background
    值：合法的颜色值（英文）
      3.设置文字大小的属性和值
        属性：font-size
    值：以px或pt为单位的数字
    ex：font-size:30px;
     
      2.内部样式
   在网页的头元素中增加一对
      
    样式规则：由选择器和样式声明组成
选择器：规范了页面中哪些元素能够使用定义好的样式（就是把声明好的样式匹配给页面中的元素）
元素选择器：由元素的名称作为选择器
div,p,h1,span,a,img
选择器{}
ex：div{}
    p{}
样式规则：
   选择器{
      样式声明；
   }
ex:
div{
   color:red;
   font-size:20px;
}
p{
  color:blue;
}
h1{...}
 3.外部样式
   独立于任何网页的位置处，声明一个样式表文件（***.css为后缀），
   在.css文件中保存样式规则，然后在网页中引入.css文件。
   使用步骤：
       1.创建样式表文件，并编写样式规则
   2.在网页中引入样式表文件
     
        
     

</>复制代码 
1.继承性
  大部分样式可以被继承（子元素继承父元素的样式特征）
  必须是有层级关系的嵌套
  
     
p
  
2.层叠性 
  可以为一个元素定义多个样式，当样式属性不冲突时，可以同时将这些样式应用到元素上
  div{
     color:red;
  }
  div{
     font-size:20px;
  }
  div{
     background:gray;
  }
  
3.优先级
  如果样式声明冲突时，会按照样式的优先级来应用定义的样式规则
      由低到高：
     浏览器默认设置       最低
     内部样式和外部样式   中(就近原则)
     内联样式             最高
4.调整显示的优先级
  !important规则：
  调整显示的优先级
  将!important添加在属性值之后，与值之间用空格隔开，就能优先使用当前样式
  ex:
    color:red !important;

</>复制代码 
1.选择器的作用
  规范页面中哪些元素能够使用定义好的样式
2.选择器详解
  1.通用选择器
    作用：可以修饰页面上的任何元素
语法：*{样式声明}
效率较低，尽量少用
ex:
  *{
    color:red;
    font-size:40px;
  }

2.元素选择器

</>复制代码 
    作用：设置页面上某种（类）元素的样式
语法：标记名称{声明样式}
ex：
  div{}
  p{}
  span{}  

3.类选择器

</>复制代码 
    作用：定义页面上某个或某些元素的样式(谁想用谁就可以引用)
特点：通过元素的class属性进行引用
语法：
   1.声明
     .类名{样式声明}
     注意：
       1.类名是自定义的，但是注意类名不能以数字开头
       2.类名不能包含特殊符号（&,^,%,$,#,@）
       3.可以包含（_,-）
   2.引用
     
    特殊用法：
       1.多类选择器
     让一个元素同时引用多个类选择器
     语法：
     
       2.分类选择器
     将元素选择器和类选择器联合使用
     对同一类元素中某些特殊的内容进行修饰
     语法：元素名称.类选择器{样式声明}
        ex:div.text{color:red;}
      
ffffdd
      
d1d1d1

4.id选择器

</>复制代码 
作用：设置指定ID元素的样式（专属定制）
语法：#id值{样式声明}
ex:
  
  #one{
    color:red;
  }

5.群组选择器

</>复制代码 
作用：将多个选择器放在一起进行样式的声明定义
语法：选择器1,选择器2,选择器3,...{样式声明}
 ex:
   div,#main,.mycolor,p.text{color:red;}
   等同于：
 div{color:red};
 #main{color:red};
 .mycolor{color:red};
 p.text{color:red};

6.后代选择器

</>复制代码 
作用：通过元素的后代关系匹配元素（多级嵌套）
语法：选择器1 选择器2 选择器3{样式声明}

7.子代选择器

</>复制代码 
作用：通过元素的子代（一层层级关系）关系匹配元素
语法：选择器1>选择器2{样式声明}

8.伪类选择器

</>复制代码 
作用：匹配元素不同的状态的选择器
语法：
   所有的伪类都是以：作为开始
   选择器：伪类选择器{样式声明}
1.连接伪类
     :link 匹配元素尚未访问的状态
 :visited 匹配元素访问过的状态
2.动态伪类
     :hover 匹配鼠标悬停在元素上时的状态
 :active 匹配元素被激活时的状态（超链接，文本框，密码框点击的时候）
 :focus 匹配元素获取焦点时的状态（文本框和密码框）
3.选择器的优先级
  权值：标识当前选择器的重要程度，权值越大优先级越高。
    元素选择器：1
类选择器：  10
伪类选择器：10
ID选择择器：100
内联样式：  1000
选择器的权值加到一起，大的优先
权值相同，以后定义的为主

1.单位

</>复制代码 
1.尺寸单位
  1.px：像素
    1024*768
  2.in:英寸
    1in=2.54cm
  3.pt：磅(1pt=1/72in)
    多数用于表示文字的大小
  4.cm:厘米
  5.mm:毫米
  6.em:相对于父元素乘以倍数(多个父元素2em)
  7.rem:根相对（元素字体大小乘以倍数，htmlody）
2.颜色单位（颜色取值）
  1.英文单词
    red,blue,gray,green,yellow,black....
  2.rgb(r,g,b)
    r:0-255
g:0-255
b:0-255
  3.rgba(r,g,b,alpha)
    alpha:透明度，取值为0-1之间的小数，值越大，不透明度越高
  4.#rrggbb
    由6位16进制的数字字母表示一个颜色
0-9或A-f
#000000:黑色
#ffffff:白色
#eeeeee:灰色
#ff11aa
  5.#rgb是上面的缩写形式
    #000:黑色
#fff:白色
#f1a

2.尺寸属性

</>复制代码 
1.作用
  设置元素的宽度和高度
2.语法
  1.宽度
    width:宽度
min-width:最小宽度
max-width:最大宽度
  2.高度
    height：高度
min-height:最小高度
max-height:最大高度
3.页面中哪些元素允许设置尺寸属性
  1.所有的块级元素都允许设置尺寸
    div,p,h1,h2..h6,ul,ol,dl,结构标记
  2.本身具备width和height属性的行内元素是可以设置的
    img,table
  3.行内块允许设置尺寸
    大部分的表单控件（单选按钮，复选框）
  4.大部分的行内元素是无法设置尺寸
    a,span,b,i,u,s等

3.溢出处理

</>复制代码 
当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。
属性：overflow,overflow-x,overflow-y
取值：
   1.visible
     可见的，默认值，溢出可见
   2.hidden
     隐藏的，溢出的内容全部隐藏，溢出内容不可见
   3.scroll
     显示滚动条，溢出时，可用
   4.auto
     自动，溢出时才显示滚动条并可用
   

4.边框

</>复制代码 
1.边框属性
  1.简写方式
    border:width style color;
     width:边框的宽度，以px为单位的数值
     style:边框的样式
       取值：
         solid:实线
     dotted:虚线边框(点)
     dashed:虚线边框(线)
     color:边框的颜色
         取值：合法的颜色值
     transparent:透明色
     注意：
       取消边框：border:0;或border:none;
       
  2.单边定义
    只设置某一条边的边框
属性：border-方向:width style color;
    方向：top/bottom/left/right
       上   下     左   右
  
  3.单属性定义
    只设置四条边框的一个属性
属性：border-width/style/color:值；
  ex:border-width:3px;
     border-style:dotted;
     border-color:red;
  4.单边单属性的定义
    只设置某一个方向的某一个属性
属性：
  border-方向-属性：值；
  方向：top/bottom/left/right
  属性：width/style/color
  ex：
    border-left-color:blue;
    border-right-style:solid;
    border-bottom-width:6px;
2.边框倒角
  将元素的直角倒换成圆角
  属性：border-radius
  取值：
        1.以px为单位的数值
        2.百分比 %  设置圆形（50%）
  单角设置：
     border-top-left-radius:左上角
 border-top-right-radius:右上角
 border-bottom-left-radius:左下角
 border-bottom-right-radius:右下角
3.边框阴影
 属性：box-shadow
 取值：h-shadow v-shadow blur spread color inset
    h-shadow:阴影在水平方向的偏移距离，必须值   
     取值为正：阴影向右偏移
     取值为负：阴影向左偏移
v-shadow:阴影在垂直方向的偏移距离，必须值   
     取值为正：阴影向下偏移
     取值为负：阴影向上偏移
blur:阴影模糊距离，取值越大，模糊效果越明显，以px为单位的数值（可选值）
spread:阴影的大小，指定要在基础阴影上扩充出来的大小，取值以px为单位的数值（可选值）
color:阴影颜色（可选值）
inset:将默认的外阴影改为内阴影（可选值）
 
4.轮廓
  轮廓指的是边框的边框，绘制于边框外围的一条线
  属性：
     outline:width style color;
 widht:轮廓的宽度
 style:轮廓的样式  
    取值：solid/dotted/dashed
 color:轮廓的颜色
  取消轮廓：
       outline:none/0;

1.什么是框模型

</>复制代码 
框模型：box model,定义了元素框处理元素的内容，内边距，外边距以及边框的一种计算方式。
外边距：元素与元素之间的空白间距
内边距：元素边框与元素内容之间的间距
框模型的计算模式：
    元素的实际占地宽度=左右外边距+左右边框+左右内边距+width;
元素的实际占地高度=上下外边距+上下边框+上下的内边距+height

1.什么是外边距

</>复制代码 
围绕在元素边框外的空白距离，就是外边距
也能表示当前元素与其他元素之间的空白距离

2.语法

</>复制代码 
属性：
   margin 定义某个元素四个方向的外边距
   margin-top/bottom/left/right 定义单边的外边距
取值：
   1.具体数值，以px为单位
   2.取值为负
     让元素向相反的方向移动
 margin-left:
  取值为正，让元素向右移动
  取值为负，让元素向左移动
 margin-top:
  取值为正，让元素向下移动
  取值为负，让元素向上移动
   3.取值为%
     外边距的值，是父元素的宽或高的占比（50%）
   4.取值为auto
     自动计算外边距的值（控制块级元素水平居中对齐）
 
简写方式：
    1.margin:value
  四个方向的外边距
2.margin:v1 v2;
  v1:上下外边距
  v2:左右外边距
3.margin:v1 v2 v3;
  v1:上外边距
  v2:左右外边距
  v3:下外边距
3.margin:v1 v2 v3 v4;
         上 右 下 左  （顺时针方向）

3.自带外边距的元素

</>复制代码 
body,h1~h6,p,ul,ol,dl,dd,pre
通过CSS Reset(css重写)的手段，来重置具备外边距的元素
 body,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,pre{
    margin:0;
 }

4.外边距的特殊效果

</>复制代码 
1.外边距合并
  当两个垂直外边距相遇时，他们将合并为一个，最终取决于两个外边距中距离较大的那个。
  如果两个外边距相遇时值相等，那么取其中一个值。
2.外边距的溢出
  在某些条件下，为子元素设置上外边距时，有可能会作用到父元素上。
      1.父元素没有上边框
  2.为子元素设置上外边距时
  
2.在d2中嵌套一个子元素div,id="d3",设置其尺寸为100*100，并设置其背景颜色
3.设置d3的上外边距为50px,观察其结果。
 解决溢出方案：
    1.为父元素增加上边框
  弊端：对父元素的高度有影响
2.使用父元素的上内边距来取代子元素的上外边距
  弊端：对父元素的高度有影响
3.在父元素的第一个子元素位置处，增加一个空(table)
 行内元素以及行内块元素的垂直外边距
     1.行内元素垂直外边距无效（img除外）
 2.行内块元素，设置垂直外边距时，整行元素都跟着发生改变

1.什么是内边距

</>复制代码 
元素边框与内容之间的空白距离
内边距会扩大元素边框占地区域

2.语法

</>复制代码 
属性：
   padding 四个方向的内边距
   padding-top/bottom/left/right 设置单边内边距
取值：
      以px为单位的数值
      以%形式设置
简写方式：
      1.padding:value;  四个方向的内边距
  2.padding:v1 v2; 
    v1:上下内边距
    v2:左右内边距
  3.padding:v1 v2 v3;
    v1:上
    v2:左右
    v3:下
  4.padding:v1 v2 v3 v4;
            上 右 下 左 （顺时针）

作用：指定框模型的计算方式

</>复制代码 
取值：
   1.content-box
     默认值，采用默认的计算元素的占地区域
 实际占地宽度=左右边框+左右外边距+左右内边距+width;
 实际占地高度=上下边框+上下外边距+上下内边距+height;
   2.border-box
     元素的尺寸，会包含border以及padding的值
 实际占地宽度=width(包含了border和padding)
 实际占地高度=height(包含了border和padding)
 

3.背景属性
背景：可以是单一颜色或图片填充元素
1.背景色

</>复制代码 
属性：background-color
取值：合法的颜色值
注意：背景颜色默认是从边框的位置处开始填充的

2.背景图片

</>复制代码 
属性：background-image
取值：url(图片的路径);
ex:background-image:url(a.jpg);

3.背景图片平铺

</>复制代码 
属性：background-repeat
取值：
   repeat 默认值，横向纵向都平铺
   no-repeat 不平铺（图片只显示一次）
   repeat-x 只在水平方向平铺
   repeat-y 只在垂直方向平铺

4.背景图片尺寸

</>复制代码 
属性：background-size
取值：
   1.width/height  (ex:200px 300px)
   2.width%/height%  (ex:50% 50% 是元素自己的高宽占比)
   3.cover
     将背景图等比放大，直到背景图完全覆盖到元素的所有区域为止。
   4.contain
     将背景图等比放大，直到背景图碰到元素的某一个边缘为止

5.背景图片固定

</>复制代码 
作用：将背景图固定在网页的某个位置处，一直在可视区域中，不会随着滚动条而发生位置的变化。
属性：background-attachment
取值：
   1.scroll 默认值，滚动
   2.fixed 固定

6.背景图片定位

</>复制代码 
作用：改变背景图在元素中的位置
属性：background-position
取值：
   1.x y  具体的数值（px）
     x:
   背景图水平偏移距离
   取值为正，向右移动
   取值为负，向左移动
 y:
   背景图垂直偏移距离
   取值为正，向下移动
   取值为负，向上移动
   2.x% y%
     0% 0% 背景图在左上角
 100% 100% 背景图在右下角
 50% 50% 背景图在中间位置
   3.关键字
 x:left/center/right
 y:top/center/bottom
 ex:background-position:right top;
 
  

7.背景简写属性

</>复制代码 
在一个属性中指定背景的多个属性值
属性：background
取值：color url() repeat attachment position
ex：
  background:gray url(a.jpg);
注意：
  如果不设置其中某个属性值的话，该位置采用默认值。

1.什么是渐变

</>复制代码 
渐变指定是多种颜色平缓变换的一种显示效果。

2.渐变的主要因素

</>复制代码 
1.色标：一种颜色及其出现的位置
2.一个渐变是由多个色标组成（至少两个）

3.渐变分类

</>复制代码 
1.线性渐变
  以直线的方向来填充效果
2.径向渐变
  以圆形的方式来实现填充
3.重复渐变
  将线性渐变或径向渐变 重复几次实现填充

4.渐变详解

</>复制代码 
1.线性渐变
  属性：background-image
  取值：linear-gradient(angle,color-point1,color-point2,....);
    1.angle
  表示渐变填充的方向或角度
  取值：
    1.关键字
      to top 从下向上填充渐变色
      to bottom 从上向下填充渐变色
      to left 从右向左填充渐变色
      to right 从左向右填充渐变色
    2.角度值
     0deg 从下向上填充，等同于to top
     90deg 从左向右填充，等同于to right
     180deg 从上到下填充，等同于to bottom
     270deg 从右向左填充，等同于to left
    2.color-point
  色标：颜色 及其 位置
  取值：颜色 以及 位置的组合，中间用空格分开
  ex:
    1.red 0%
      在填充方向的开始位置处颜色为红色
    2.green 50%
      到填充方向一半的位置处，颜色变为绿色
    3.blue 200px
      到填充方向的200px的位置处，颜色变为蓝色
2.径向渐变
  属性：
  background-image:radial-gradient([size at position],
  color-point1,color-point2,...);
  size at position: 
      size:半径，以px为单位的数值
  position:圆心所在位置
       1.x y 具体数值
       2.x% y% 元素宽和高的占比
       3.关键字
         x:left,center,right
     y:top,center,bottom
  ex：
    100px at right top 
半径     右上角位置
3.重复渐变
  1.重复线性渐变
    background-image:repeating-linear-gradient
    (angle,color-point1,color-point2,...);
color-point:位置一定要给绝对数值（px）,不要用相对单位%
  2.重复径向渐变
    background-image:repeating-radial-gradient
    ([size at position],color-point1,color-point2,...);

</>复制代码 
 各个浏览器的新版本都支持渐变属性
对于不支持的浏览器版本，可以通过增加浏览器前缀的方式，让浏览器支持渐变属性
Firefox:-moz-
Chrome & Sagari:-webkit-
Opera:-o-
IE:-ms-

2.文本格式化属性
1.字体属性

</>复制代码 
1.指定字体
  属性：font-family
  取值：字体名称，名称之间用逗号隔开
  ex：
  font-family:"微软雅黑",Arial,"黑体";
2.字体大小
  属性：font-size
  取值：以px或pt为单位的数字
3.字体加粗
  属性：font-weight
  取值：
     1.bold 加粗（b,hn）
 2.normal 正常
 3.value 无单位的数字（整百倍）
   400-900
   400：等同于normal
   900：等同于bold
4.字体样式
  属性：font-style
  取值：
     1.normal 正常显示 
 2.italic 斜体显示
5.小型大写字母
   将小写字符变成大写，但文本的大小与小写字符一致
   属性：font-variant
   取值：
      1.normal 正常
  2.small-caps 小型的大写字符
6.字体属性简写
  属性：font
  取值：style variant weight size family;
  注意：
    如果用简写方式，必须设置family的值，否则无效。
font:12px; 错误
font:12px "黑体"; 正确
 

2.文本格式

</>复制代码 
1.文本颜色
  属性：color
  取值：合法的颜色值
2.文本排列
  作用：指定文本，行内，行内块元素的水平对齐方式。
  属性：text-align
  取值：left/center/right/justify(两端对齐)
3.文字修饰（线条）
  属性：text-decoration
  取值：
    none:无任何线条修饰
underline:下划线修饰
overline:上划线修饰
    line-through:删除线修饰
4.行高
  作用:定义一行文本的高度
  特点：如果行高的高度大于字体本身的大小，那么该行文本将在指定的行高内呈现垂直居中的效果。
  属性:line-height
  取值：以px为单位数值
5.首行文本缩进
  属性：text-indent
  取值：以px为单位的数值
6.文本阴影
  属性：text-shadow
  取值：h-shadow v-shadow blur color;

1.表格的常用属性

</>复制代码 
1.边距属性：padding
2.边框属性：border
3.尺寸属性：width,height
4.文本格式化属性：font-*,text-*,line-height
5.背景属性：颜色，图片，渐变
6.vertical-align
  作用：指定单元格数据垂直对齐方式
  取值：
     top:上对齐
 middle:居中对齐
 bottom:下对齐
 练习：创建网页，并在网页中添加表格
     1.表格尺寸为400*400，4行4列;
 2.每个单元格的尺寸为100*100,内容随意;
 3.设置表格和单位元格的边框为1px solid #000;
 4.设置每个单元格的左内边距为20px;
 5.尝试为每个单元格增加上外边距15px。

2.表格的特殊属性

</>复制代码 
1.边框合并
  取值：border-collapse
  取值：
     1.separate
   默认值，即分离边框模式
 2.collapse
   边框合并
2.边框边距
  作用：设置单元格之间或单元格与表格之间的距离
  属性：border-spacing
  取值：
    1.给定一个值：水平和垂直的间距相同
2.给两个值：
  第一个值 表示水平间距
  第二个值 表示垂直间距
注意：只有在边框分离模式下，边框边距才有效果，即border-collapse:separate时，border-spacing才有效。
    

3.表格标题位置

</>复制代码 
属性：caption-side
取值：
    1.top:默认值，标题在表格内容之上
2.bottom:标题在表格内容之下

4.显示规则

</>复制代码 
作用：用来帮助浏览器指定如何布局一张表，也就是指定td尺寸的计算方式。
属性：table-layout
取值：
   1.auto
     默认值，即自动布局表格，列的尺寸实际上由内容来决定的。
   2.fixed
     固定表格布局，列的尺寸由设置的值为准
自动表格布局VS固定表格布局：
    1.自动表格布局
  1.单元格的大小会适应内容
  2.表格复杂时，加载速度较慢（缺点）
  3.自动表格布局会比较灵活（优点）
  4.适用于不确定每列大小时使用
    2.固定表格布局
  1.单元格的尺寸取决于设定的值
  2.任何情况下都会加载显示表格（优点）
  3.适用于确定每列大小时使用
  4.固定表格布局不够灵活（缺点）

1.定位

</>复制代码 
定位：指的是改变元素在页面中的默认位置

2.定位的分类

</>复制代码 
按照定位的效果，可以分成以下几类：
   1.普通流定位（默认的定位方式）
   2.浮动定位
   3.相对定位
   4.绝对定位
   5.固定定位

3.定位详解

</>复制代码 
1.普通流定位
  又称为文档流定位，页面中元素的默认定位方式
  1.每个元素在页面中都有自己的空间
  2.每个元素默认都是在其父元素的左上角开始显示
  3.页面中的块级元素都是从上往下排列，每个元素独占一行
  4.页面中的行内元素以及行内块都是按照从左到右的顺序来排列的
  要解决的问题：让多个块级元素在一行中显示
2.浮动定位
  1.什么是浮动&特点
    1.元素一旦浮动起来，将不占据页面空间（脱离了文档流），其它未浮动元素将上前补位。
2.浮动元素会停靠在父元素的左边或右边，或其它已经浮动的元素的边缘上。
3.浮动定位解决的问题：能够让多个块级元素在一行中显示。
  2.语法
    属性：float
取值：
   1.left
     左浮动，让元素停靠在父元素的左边或挨着左侧已经浮动的元素
   2.right
     右浮动，让元素停靠在父元素的右边或挨着右侧已经浮动的元素
   3.none
     默认值，即无任何浮动效果

1.元素一旦浮动起来以后就会变成块级元素

</>复制代码 
允许修改尺寸
能正常处理垂直方向外边距

2.当父元素显示不下所有已浮动元素时，最后一个将换行，但是，有可能被卡住；
3.元素一旦浮动起来后，宽度将以内容为主（未指定宽度情况下）；
4.文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会别浮动元素压在底下的，而会巧妙的避开浮动元素。

元素一旦浮动起来之后，就会对后续元素带来一定的位置影响（后续元素要上前补位），如果后续元素不想被影响（不想补位），那么就可以通过清除浮动的方式来解决
属性：clear
取值：

</>复制代码 
 1.left
   清除当前元素前面的元素左浮动所带来的影响
 2.right
   清除当前元素前面的元素右浮动所带来的影响
 3.both
   清除当前元素前面元素任何一种浮动所带来的影响
 4.none
   默认值，不做任何的清除浮动操作

1.元素的高度都是以未浮动元素的高度为准的，浮动元素是不占页面的高度的

</>复制代码 
 解决父元素的高度方案如下：
    1.直接设置父元素的高度
  弊端：不是每次都知道父元素的高度
2.设置父元素也浮动
  弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素
3.为父元素设置overflow
  取值：hidden或auto
  弊端：如果有内容需要溢出显示的话，也会一同被隐藏
4.在父元素中，追加空子元素(块级)，并设置其clear:both;

1.显示方式

</>复制代码 
1.什么是显示方式
  决定了元素在网页中的表现形式（块级，行内，行内块）
2.语法
  属性：display
  取值：
     1.none 不显示元素-隐藏
   特点：脱离文档流，不占据页面空间
 2.block
   让元素表现的和块级元素一致
   特点：
      独占一行，可是修改高宽
 3.inline
   让元素表现的和行内元素一致
   特点：
      不允许修改尺寸
      多个元素在一行中显示
      无法设置垂直外边距
 4.inline-block
   让元素表现的和行内块元素一致
   特点：
     多个元素在一行中显示，但是可以修改尺寸
 5.table
   让元素表现的与表格一致
   特点：
      尺寸以内容为准
      每个元素独占一行
      允许修改尺寸

2.显示效果

</>复制代码 
1.显示/隐藏
  属性：visibility
  取值：
      1.visible:默认值，元素可见
  2.hidden:元素不可见-隐藏
  面试：display:none和visibility:hidden的区别
        display:none 不占页面空间
    visibility:hidden 占页面空间
2.透明度
  属性：opacity
  取值：0.0（完全透明）~1.0（完全不透明）之间的小数
3.垂直方向对齐方式
  属性：vertical-align
  场合：
     1.表格中使用
   取值：top/bottom/middle
 2.图片（img）中使用
   取值：
      top：上
      bottom：下
      middle：中间
      baseline:基线对齐，默认值

1.作用

</>复制代码 
改变鼠标悬停在元素上时，鼠标的状态

2.语法

</>复制代码 
属性：cursor
取值：
    1.default: 默认
2.pointer: 小手
3.crosshair: +
4.text: I
5.wait: 等待
6.help: 帮助
 练习：
   新建一个div元素，当鼠标移入到div上时，让光标变成小手状态。

1.列表项标记

</>复制代码 
属性：list-style-type
取值：
   1.none
   2.disc
   3.circle
   4.square

2.列表项图像

</>复制代码 
作用：使用自定义图像作为列表项标识
属性：list-style-image
取值：url(图像路径);

3.列表项位置

</>复制代码 
作用：将默认的列表项标识的位置，放到li里面
属性：list-style-position
取值：
   1.outside 默认值，将标识显示在li外面的
   2.inside 将标识放于li里面

4.列表属性简写

</>复制代码 
属性：list-style
取值：type url() position;
常用方式：list-style:none;
列表的使用场合：
   横向排列或纵向排列的内容，都可以使用列表来实现。

相对定位，绝对定位，固定定位
1.定位相关属性

</>复制代码 
属性：position
取值：
   1.static:静态，默认值
   2.relative:相对定位
   3.absolute:绝对定位
   4.fixed:固定定位

2.偏移属性

</>复制代码 
top/bottom/left/right
以上四个属性的取值均为数字
ex:
  top:150px 元素向下移动150px
  left:20px 元素向右移动20px
  right:-150px 元素向右移动150px
注意：
  只有已定位元素才能使用偏移属性

3.定位详解

</>复制代码 
1.相对定位
  1.什么是相对定位
    元素相对于它原来的位置偏移某个距离
  2.使用场合
    做元素位置微调时使用
  3.语法
      position:relative;
      配合偏移属性来实现位置的移动
      left:10px;
      top:10px;
2.绝对定位
  1.什么是绝对定位&特点
    1.绝对定位的元素会脱离文档流-不占页面空间
2.绝对定位的元素会相对于离他最近的，已定位的，祖先元素 去实现位置的初始化。
3.如果没有已定位的祖先元素，那么该元素就相对于body去实现位置的初始化
4.配合偏移属性 实现元素位置的修改
  2.语法
    position:absolute;
配合偏移属性实现位置的修改
  3.使用场合
    1.有堆叠效果的元素
2.弹出菜单
  4.注意：
    1.脱离文档流-不占据页面空间
2.绝对定位元素会变成块级元素
  5.堆叠顺序
    一旦元素变为已定位元素的话，元素们则有可能出现堆叠的效果
属性：z-index
取值：无单位的数字，数字越大越靠上
    注意：
  1.只有已定位元素才能实现堆叠顺序的改变（z-index）
  2.父子元素间，z-index无效，永远都是子元素压在父元素上方
3.固定定位
  1.什么是固定定位
    将元素固定在网页的某个位置处，位置不会随着滚动条而发生改变，固定在可视区域中。
  2.语法
    position:fixed;
配合偏移属性使用
  注意：
    1.固定定位的元素永远都是相对于body去实现位置的初始化和偏移。
2.固定定位的元素会变成块级元素
3.固定定位元素会脱离文档流-不占页面空间