1、定位：position

1>通过定位我们可以将元素摆放到页面中的任意位置

2>使用 position 属性来设置元素的定位

可选值：

static默认值 开启定位

relative开启相对定位

absolute开启绝对定位

fixed开启固定定位

1）相对定位（relative）：变换后的位置相对于自身原来的位置进行定位。（左边对左边，右对右，上对上，下对下）

1>当为元素设置 position: relative; 则开启元素的相对定位。

1.开启相对定位，元素不会发生任何变化

2.开启相对定位后，元素不会脱离文档流

3.相对定位的元素，是相对于其在文档流中的位置进行定位的。

4.相对定位会使元素提升一个层级

5.相对定位不会改变元素的性质，块还是块行内还是行内

2>当元素开启定位以后，可以通过四个方向的偏移量的来控制元素的位置：

top元素与其定位位置的顶部距离

bottom元素与其定位位置的底部距离

left元素与其定位位置的左侧距离

right元素与其定位位置的右侧距离        

一般只需要使用两个值即可确定一个元素的位置（水平、垂直两个值）

3> [endif]层级

开启定位元素都会提升一个层级，定位元素层级可以用z-index来设置。

1z-index需要一个整数作为参数，值越大层级越高，层级高的盖住层级低的。

2如果z-index的值相同，则后边的元素会盖住前边元素。

3父元素的层级再高，也会盖住子元素

[if !supportLists]4> [endif]透明度

opacity用来设置元素的不透明度，需要一个 0 - 1 之间的值

rgba()这是一个透明的颜色，

opactiy()让元素整个透明

2）[endif]绝对定位（absolute)

将position设置absolute则开启元素的绝对定位

1> ]绝对定位的特点：

1.绝对定位为会使元素完全脱离文档流

2.绝对定位会改变元素的性质，行内变块，块宽高被内容撑开。

3.开启绝对定位后如果不设置偏移量，元素的位置不会发生变化

4.绝对定位会相对于离它最近的开启了定位的祖先元素进行定位，

如果所有的祖先元素都没有开启定位，则相对于HTML标签进行定位

2> [endif]所以一般情况，我们为一个元素开启了绝对定位，会同时为它的父元素开启相对定位

3> [endif]绝对定位元素会相对于它的包含块进行定位。

4> [endif]包含块：

对于绝对定位元素来说，包含块就是离它最近的开启了定位块元素，如果没有开启定位的祖先元素，则其包含块是网页中的初始包含块html就是初始包含块。

5> [endif]绝对定位会使元素提升一个层级

6> [endif]绝对定位元素水平方向布局的等式

left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right=包含块的宽度  

此时就有了5个值可以设置为auto

                left

                right

                margin-left

                margin-right

                width

1

Width:一个值

Left:0

Right:0

Margin： auto； --------水平居中（宽高为定值）

2

Width:一个值

Top: 0;

Bottom:0;

Margin:auto;    ----------垂直居中（宽高为定值）

3）固定定位（fixed）

1> 将元素的position:设置为fixed时则开启了元素的固定定位。

固定定位的特点大部分都和绝对定位一样。

2> [endif]固定定位大的特点:  (4)

不同的是固定定位总是相对于浏览器的窗口（视口viewport）进行定位。

设置了固定定位后，元素不随浏览器的滚动条来回滑动

4) 粘滞定位（sticky)

2、字体

1）

字体颜色：color: red;

字体大小：font-size: 50px;

font-family用来指定字体的家族。可以指定一个字体的分类，也可以指定一个具体的字体。

可以同时指定多个字体,多个字体之间使用,隔开

例：

font-family: serif;

            font-family: sans-serif;

            font-family: monospace;

            font-family: Helvetica;

font-family: Arial,华文彩云,serif;

（多个字体，先看第一个是否符合，不符合接着往下看，直到找到符合的为止）           

font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

2）

使用font-face引入字体  

例：

<style>

      @font-face{

/*指定字体的名称 */

            font-family:'test';

/*本地字体的路径，要求字体必须是本地的字体*/

            src:url('./font/ZCOOLKuaiLe-Regular.ttf');

          }

.box1{     

            font-family: test;

}

</style>

4）字体大小单位

em :相对于自身的font-size 大小

1 em=1 font-size

rem :相对于html 标签的font-size 大小

     1rem =1 font-size

[if !supportLists]5) [endif]行高:文本在网页中显示时，CSS会为每一个文本行都设置一个文本框，以容纳这些文字。（文本框的高度=字体高度+上下平分的两个高度） 

 通过line-height来设置行高          

1 >行高可以直接设置一个整数，则行高等于字体大小的倍数            line-height: 1;            

默认行高：line-height: 1.33

2>基线： 在文字框中，文字并不是贴着行的底部排列，它是沿着行框的基线（base-line）排列的。

3>文字基本是在行高中居中 : line-height =设置的块元素的height

4>行间距=行高-字体高度    

6)字重（字体加粗） ：font-weight  

字体是否加粗，可设置为100-900之间的值，值越大，字体越粗

注意：200不一定比100粗，也有可能和100一样

7）斜体：font-style

   font-style: italic

   font-style:none;

8）字体变形：font-variant

font-variant : small-caps  :小型大写字母

9）字体简写

后边两个必须是字体大小/行高和字体族，必须写

font:[加粗 斜体 变形] 大小/行高 字体族;

例：font: 40px/1.5 '微软雅黑';

3、图标字体

4、文本样式

1） [text-align :文本对齐方式

left:默认值 左对齐

right靠右对齐

center居中对齐

justify两端对齐

2） vertical-align垂直对齐

baseline基线， 延基线对齐

top和父元素的顶部对齐

bottom和父元素的底部对齐

super上标

sub下标

middle居中(近似居中)

数值

3） text-decoration文本修饰

underline下划线

overline上划线

line-through删除线

    none            

4）]text-indent首行缩进

em为单位

5） white-space如何处理空白内容

normal默认，自动换行

nowrap不换行

pre保留文本格式，预格式

6）text-overflow：ellipsis    如何处理溢出的文本， 使用省略号表示溢出的内容

7）Letter-spacing字符间的距离

]8）World-spacing单词间的距离