1.功能定位
功能定位是一类更为高阶的产业布局方式透过功能定位能将原素放置到网页 – 采用position特性来增设功能定位可选值：static 缺省，原素是恒定的没迈入功能定位relative 迈入原素的相较功能定位absolute 迈入原素的当然功能定位fixed 迈入原素的一般来说功能定位sticky 迈入原素的表面张力功能定位透过功能定位能将原素放置到网页的任一边线
1.1 相较功能定位
当原素的position特性值增设为relative时则迈入了原素的相较功能定位相较功能定位的特征：1.原素迈入相较功能定位之后，假如不增设差值原素不能出现任何人的变动2.相较功能定位是参考于原素在文件格式过程中将的边线展开功能定位的3.相较功能定位会提高原素的层次4.相较功能定位不能使元素瓦解文件格式流5.相较功能定位不能出现改变原素的物理性质块却是块，Lembron却是Lembronposition: relative;1.2 当然功能定位
当原素的position特性值增设为absolute时，则迈入了原素的当然功能定位当然功能定位的特征：1.迈入当然功能定位后，假如不增设差值原素的边线不能出现改变2.迈入当然功能定位后，原素会从文件格式过程中将瓦解3.当然功能定位会出现改变原素的物理性质，Lembron变为块，块的宽高被文本取下4.当然功能定位会使原素提高两个层级5.当然功能定位原素是相较于其包涵块展开功能定位的包涵块( containing block )正常情况下：包涵块就是离当前原素最近的祖先块原素当然功能定位的包涵块:包涵块就是离它最近的迈入了功能定位的祖先原素，如果所有的祖先原素都没迈入功能定位则根原素就是它的包涵块position: absolute;1.3 一般来说功能定位
将原素的position特性增设为fixed则迈入了原素的一般来说功能定位一般来说功能定位也是一类当然功能定位，所以一般来说功能定位的大部分特征都和当然功能定位一样唯一不同的是一般来说功能定位永远参考于浏览器的视口展开功能定位一般来说功能定位的原素不能随网页的滚动条滚动position: fixed;
1.4 表面张力功能定位
当原素的position特性设置为sticky时则迈入了原素的表面张力功能定位表面张力功能定位和相较功能定位的特征基本一致，不同的是表面张力功能定位能在原素到达某个边线时将其一般来说position: sticky;
1.5 当然功能定位原素的产业布局
水平产业布局left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包涵块的文本区的宽度当我们迈入了当然功能定位后:水平方向的产业布局等式就需要添加left 和 right 两个值此时规则和之前一样只是多添加了两个值： 当出现过度约束： 假如9个值中没 auto 则自动调整right值以使等式满足 假如有auto，则自动调整auto的值以使等式满足可增设auto的值 margin width left right因为left 和 right的值默认是auto，所以假如不指定left和right则等式不满足时，会自动调整这两个值垂直方向产业布局的等式的也必须要满足top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包涵块的高度
1.6 原素的层次
对于迈入了功能定位原素，能透过z-index特性来指定原素的层次z-index需要两个整数作为参数，值越大原素的层次越高原素的层次越高越优先显示假如原素的层次一样，则优先显示靠下的原素祖先的原素的层次再高也不能盖住后代原素z-index: 3;2. 差值（offset）
当原素迈入了功能定位之后，能透过差值来增设原素的边线top 功能定位原素和功能定位边线上边的距离bottom 功能定位原素和功能定位边线下边的距离功能定位原素垂直方向的边线由top和bottom两个特性来控制 通常情况下我们只会采用其中一top值越大，功能定位原素越向下移动bottom值越大，功能定位原素越向上移动left 功能定位原素和功能定位边线的左侧距离right 功能定位原素和功能定位边线的右侧距离功能定位原素水平方向的边线由left和right两个特性控制 通常情况下只会采用两个left越大原素越靠右right越大原素越靠左position: relative;
left: 100px;
top: –200px;
1. 手写体
font-face能将服务器中的手写体直接提供给用户去采用@font-face {
/* 指定手写体的名字 */
font-family:myfont ;
/* 服务器中手写体的路径 */
src: url(./font/ZCOOLKuaiLe-Regular.ttf) format(“truetype”);
}1.1 手写体相关样式
color 用来增设手写体颜色font-size 手写体的大小em 相当于当前原素的 两个font-sizerem 相较于根原素的两个font-size相关的单位font-family 手写体族（手写体的格式）可选值：指定手写体的类别，浏览器会自动采用该类别下的手写体serif 衬线手写体sans-serif 非衬线手写体monospace 等宽手写体font-family 能同时指定多个手写体，多个手写体间采用,隔开手写体生效时优先采用第两个，第两个无法采用则采用第二个 以此类推MicrosoftYaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,“\5B8B\4F53”,sans-seriffont-family: Courier New, Courier, monospace;2. 图标手写体
在网页中经常需要采用一些图标，能透过图片来引入图标但是图片大小本身比较大，并且非常的不灵活所以在采用图标时，我们还能将图标直接增设为手写体，然后透过font-face的形式来对手写体展开引入这样我们就能透过采用手写体的形式来采用图标fontawesome 采用步骤1.下载 https://fontawesome.com/2.解压3.将css和webfonts移动到项目中4.将all.css引入到网页中5.采用图标手写体 – 直接透过类名来采用图标手写体 class=”fas fa-bell” class=”fab fa-accessible-icon”透过伪原素来增设图标手写体1.找到要增设图标的原素透过before或after选中2.在content中增设手写体的编码3.增设手写体的样式fab
font-family: Font Awesome 5 Brands;
fas
font-family: Font Awesome 5 Free;
font-weight: 900;<i class=“fas fa-cat”></i>透过实体来采用图标手写体：
&#x图标的编码;
<span class=“fas”></span>3. 行高
能将行高增设为和高度一样的值，使单行文字在两个原素中垂直居中line-height: 200px;行高指的是文字占有的实际高度行间距 = 行高 – 手写体大小也能直接为行高增设两个整数假如是两个整数的话，行高将会是手写体的指定的倍数能透过line-height来增设行高行高能直接指定两个大小（px em）行高经常还用来增设文字的行间距手写体框手写体框就是手写体存在的格子，增设font-size实际上就是在增设手写体框的高度行高会在手写体框的上下平均分配/* line-height: 1.33; */
/* line-height: 1; */
/* line-height: 10 */
4. 手写体特性
font 能增设手写体相关的所有特性font: 手写体大小/行高 手写体族行高 能省略不写 假如不写采用缺省语法：font: 50px/2 微软雅黑, Times New Roman, Times, serif;font-weight 字重 手写体的加粗normal 缺省 不加粗bold 加粗100-900 九个级别（没什么用）可选值：font-style 手写体的风格normal 正常的italic 斜体font-weight: bold;
font-weight: 500;
font-style: italic;5. 文本样式
text-align 文本的水平对齐left 左侧对齐right 右对齐center 居中对齐justify 两端对齐可选值：text-align: justify;vertical-align 增设原素垂直对齐的方式baseline 缺省 基线对齐top 顶部对齐bottom 底部对齐middle 居中对齐可选值：vertical-align:baseline;text-decoration 增设文本修饰none 什么都没underline 下划线line-through 删除线overline 上划线可选值：text-decoration: overline;white-space 增设网页如何处理空白normal 正常nowrap 不换行pre 保留空白可选值：white-space: nowrap;
