前端知识点总结—

1.CSS的概述

1.什么是CSS?

CSS：Cascading Style Sheets层叠样式表，级联样式表（简称：样式表）

2.作用

设置HTML网页元素的样式

3.HTML与CSS的关系

HTML：负责内容的展示

CSS：负责内容（元素）的修饰

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

W3C建议尽量使用CSS属性去取代HTML属性来修饰元素

2.CSS语法规范

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

 1.内联样式

   又称为行内样式

   特点：将CSS样式定义在HTML开始标记中

   语法：

     <ANY style="样式声明1；样式声明2"></ANY>

 样式声明：

      1.由样式属性和值来组成

      2.属性名与值之间用 冒号 连接

      3.多个样式声明之间用 分号 分割

        常用的CSS样式属性 和 值：

      1.设置文本颜色的属性和值

        属性：color

    值：合法的颜色值（英文）

      2.设置背景颜色的属性和值

        属性：background

    值：合法的颜色值（英文）

      3.设置文字大小的属性和值

        属性：font-size

    值：以px或pt为单位的数字

    ex：font-size:30px;

      2.内部样式

   在网页的头元素中增加一对<style>标记，在<style>标记声明该网页用到的样式规则

   语法： <head>

             <style>

        /*注释*/

        样式规则1

        样式规则2

        ...

     </style>

      </head>

    样式规则：由选择器和样式声明组成

选择器：规范了页面中哪些元素能够使用定义好的样式（就是把声明好的样式匹配给页面中的元素）

元素选择器：由元素的名称作为选择器

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.在网页中引入样式表文件

     <head>

        <link rel="stylesheet" href="**.css">

     </head>

3.CSS样式特征

1.继承性

  大部分样式可以被继承（子元素继承父元素的样式特征）

  必须是有层级关系的嵌套

  <div style="color:red;">

     <p>p</p>

  </div>

2.层叠性

  可以为一个元素定义多个样式，当样式属性不冲突时，可以同时将这些样式应用到元素上

  div{

     color:red;

  }

  div{

     font-size:20px;

  }

  div{

     background:gray;

  }

3.优先级

  如果样式声明冲突时，会按照样式的优先级来应用定义的样式规则

      由低到高：

     浏览器默认设置       最低

     内部样式和外部样式   中(就近原则)

     内联样式             最高

4.调整显示的优先级

  !important规则：

  调整显示的优先级

  将!important添加在属性值之后，与值之间用空格隔开，就能优先使用当前样式

  ex:

    color:red !important;

4.CSS基础选择器（重点）

1.选择器的作用

  规范页面中哪些元素能够使用定义好的样式

2.选择器详解

  1.通用选择器

    作用：可以修饰页面上的任何元素

语法：*{样式声明}

效率较低，尽量少用

ex:

  *{

    color:red;

    font-size:40px;

  }

2.元素选择器

    作用：设置页面上某种（类）元素的样式

语法：标记名称{声明样式}

ex：

  div{}

  p{}

  span{}

3.类选择器

    作用：定义页面上某个或某些元素的样式(谁想用谁就可以引用)

特点：通过元素的class属性进行引用

语法：

   1.声明

     .类名{样式声明}

     注意：

       1.类名是自定义的，但是注意类名不能以数字开头

       2.类名不能包含特殊符号（&,^,%,$,#,@）

       3.可以包含（_,-）

   2.引用

     <ANY class="类名">

    特殊用法：

       1.多类选择器

     让一个元素同时引用多个类选择器

     语法：

     <ANY class="类名1 类名2 类名3 ...">

       2.分类选择器

     将元素选择器和类选择器联合使用

     对同一类元素中某些特殊的内容进行修饰

     语法：元素名称.类选择器{样式声明}

        ex:div.text{color:red;}

      <div class="text">dddd</div>

      <div>d1d1d1</div>

4.id选择器

作用：设置指定ID元素的样式（专属定制）

语法：#id值{样式声明}

ex:

  <div id="one"></div>

  #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

选择器的权值加到一起，大的优先

权值相同，以后定义的为主

5.尺寸与边框

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:根相对（元素字体大小乘以倍数，html\body）

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;

6.框模型

1.什么是框模型

框模型：box model,定义了元素框处理元素的内容，内边距，外边距以及边框的一种计算方式。

外边距：元素与元素之间的空白间距

内边距：元素边框与元素内容之间的间距

框模型的计算模式：

    元素的实际占地宽度=左右外边距+左右边框+左右内边距+width;

元素的实际占地高度=上下外边距+上下边框+上下的内边距+height

7.外边距

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.行内块元素，设置垂直外边距时，整行元素都跟着发生改变

8.内边距

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;

            上 右 下 左 （顺时针）

9.属性：box-sizing

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

取值：

   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);

注意：

  如果不设置其中某个属性值的话，该位置采用默认值。

8.渐变

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,...);

9.浏览器兼容性

 各个浏览器的新版本都支持渐变属性

对于不支持的浏览器版本，可以通过增加浏览器前缀的方式，让浏览器支持渐变属性

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;

10.表格

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.固定表格布局不够灵活（缺点）

11.定位-浮动定位

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

     默认值，即无任何浮动效果

12.浮动引发的特殊效果

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

允许修改尺寸

能正常处理垂直方向外边距

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

13.清除浮动带来的影响

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

 1.left

   清除当前元素前面的元素左浮动所带来的影响

 2.right

   清除当前元素前面的元素右浮动所带来的影响

 3.both

   清除当前元素前面元素任何一种浮动所带来的影响

 4.none

   默认值，不做任何的清除浮动操作

14.浮动元素对父元素高度的影响

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

 解决父元素的高度方案如下：

    1.直接设置父元素的高度

  弊端：不是每次都知道父元素的高度

2.设置父元素也浮动

  弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素

3.为父元素设置overflow

  取值：hidden或auto

  弊端：如果有内容需要溢出显示的话，也会一同被隐藏

4.在父元素中，追加空子元素(块级)，并设置其clear:both;

15.显示

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:基线对齐，默认值

16.光标

1.作用

改变鼠标悬停在元素上时，鼠标的状态

2.语法

属性：cursor

取值：

    1.default: 默认

2.pointer: 小手

3.crosshair: +

4.text: I

5.wait: 等待

6.help: 帮助

 练习：

   新建一个div元素，当鼠标移入到div上时，让光标变成小手状态。

17.列表

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;

列表的使用场合：

   横向排列或纵向排列的内容，都可以使用列表来实现。

18.定位

相对定位，绝对定位，固定定位 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.固定定位元素会脱离文档流-不