前端学习笔记——CSS基础

HTML专注去做结构呈现，样式交给CSS

引入CSS样式表（书写位置）

1.行内式（内联样式表）
写在标签内部的，通过style属性来设置元素样式

<标签名 style="属性1:属性值1;属性2:属性值2;...;">内容

2.内部样式表（内嵌样式表）
写在head里
H5中type="text/css"可以省略

3.外部样式表（外链式）
将所有样式表放在一个或者多个以.css为扩展名的外部样式表文件中
可以实现样式共享
通过link标签将外部样式表文件链接到HTML中
ref定义当前文档与被链接文档之间的关系
H5中type="text/css"可以省略
.css文件中不需要style标签，之间写选择器和属性即可

---

CSS选择器

1.CSS选择器作用
找到特定HTML元素，进行样式处理
2.CSS基础选择器
#1.标签选择器（元素选择器）
选择HTML标签名称作为选择器

选择器{
  属性1:属性值1;
  属性2:属性着2;
  ...；
}

#2.类选择器
差异化样式控制
通过.类名（自定义）
H5通过<标签名 class="类名">...调用
可以多次使用
样式修改使用较多

.类名（自定义）{
  属性1:属性值1;
  属性2:属性着2;
  ...；
}

#3.类选择器特殊用法——多类名
给标签指定多个类名，空格分隔
H5调用<标签名 class="类名1 类名2">...
#4.id选择器
id选择器使用#id标识
H5调用<标签名 id="id名">...
与类选择器相似，但只能有一个标签使用，使用次数只有1次
js中用的比较多

#id{
  属性1:属性值1;
  属性2:属性着2;
  ...；
}

#5.通配符选择器
通过*使用
会匹配页面所以元素，但会降低页面响应速度

*{
  属性1:属性值1;
  属性2:属性着2;
  ...；
}

---

font字体

1.font-size:大小
谷歌默认大小16px，浏览器不同默认大小不同

选择器{
  font-size:16px;
}

2.font-family:字体
多个字体逗号分隔，从前向后选择，没有该字体则选择下一个
英文字体名不需要加引号，但多字符需要引号
如果字体中文不支持，可使用Unicode编码

选择器{
  font-family:Arial,"微软雅黑",...;
}

3.font-weight:字体粗细
属性值有：
normal 默认值，不加粗
bold 定义粗体，加粗
100-900 整数，没有单位 400=normal 700=bold

选择器{
  font-weight:属性值;
}

4.font-style:字体风格
字体倾斜
属性值有；
normal 默认值
italic 斜体
一般让倾斜的不倾斜
em标签具有语义，所以可通过这个标签包含部分字段的语义，再用font-style将斜体变为不倾斜

选择器{
  font-style:属性值;
}

5.font:综合设置字体样式
严格按照下面顺序填写对应值，空格隔开
不需要设置的可以忽略，使用默认值
必须保留font-style和font-family，否则font属性无效

选择器{
  font: font-style font-weight font-size/line-height font-family; 
}

---

CSS外观属性

1.color:文本颜色
定义文本颜色
属性值三种方式：预定义颜色值（red…）、十六进制（#FF0000）、RGB代码（rgb(255,0,0)或rgb(100%,0,0)）

选择器{
  color:属性值;
}

2.line-height:行间距
设置行间距，一般情况下行距比字号大7-8像素左右

选择器{
  line-height:属性值;
}

3.text-align:文本水平对齐方式
属性值：
left 左对齐（默认）
right 右对齐
center 居中对齐

选择器{
  text-align:属性值;
}

不仅可以让文本对齐，还可以使行内元素和行内块对齐
4.text-indent:首行缩进
属性值：
不同单位的数值
em字符宽度的倍数（1em是一个字的宽度，如果是汉字段落就是1个汉字的宽度，缩进两字符用2em）

选择器{
  text-indent:属性值;
}

5.text-decoration:文本的装饰
属性值：
none 默认，取消下划线（最常用）
underline 定义下划线（常用）
overline 定义文本上方的一条线（不用）
line-through 定义穿过文本的一条线（不常用）

选择器{
  text-decoration:属性值;
}

---

CSS复合选择器

1.后代选择器
更准确更精确选择标签
由多个基础选择器复合而成
父类在前，子类在后，空格间隔
覆盖所有的子孙

父亲标签 子标签 孙子标签 ...{
  ...;
}

例如：类下面的所以a标签的样式

.类 a{
  ...;
}

2.子元素选择器
只作用于子类，孙子不管

父亲标签>子标签{
  ...;
}

3.交集选择器
由两个标签组成，作用于同时满足两个标签的元素
标签中间无间隔

标签1标签2（p.类  p#id...）{
  ...;
}

4.并集选择器
由多个标签组成，作用于多个标签的并集元素
逗号隔开

标签1, 标签2, 标签3..（p, .类, #id）{
  ...;
}

5.链接伪类选择器
：标签伪类 给默写选择器添加特殊效果
链接伪类（交集选择器变种）：
a:link:未访问的链接
a:visited:已访问的链接
a:hover:鼠标移动到链接上
a:active:选定的链接（鼠标点击不松开）
顺序尽量不要颠倒，按照lvha，不用全部实现，用那个写那个
标签a在浏览器中有默认样式，需要单独指定

a:link{
  ...;
}
a:visited{
  ...;
}
a:hover{
  ...;
}
a:active{
  ...;
}

---

标签显示模式（display）

三种显示模式
可以互相转化
1.块级元素（block-level）
常见的块元素：
、

、

、

、
、
1. 等
   特点：
   #1.一行只有一个
   #2.高度，宽度，外边距以及内边距都可以控制
   #3.宽度默认是容器（父级宽度）100%
   #4.是一个容器及盒子，里面可以放行内或者块级元素，但、

   、

   等只由文字组成不能放块级元素

   2.行内元素（inline-level）
   常见的行内元素：
   、、、、、、、、、等
   特点：
   #1.一行可以显示多个
   #2.不可以控制宽高，自身的宽高由内容撑开
   #3.只能容纳文本或者其他的行内元素
   注意：
   #1.链接内不能放链接
   #2.特殊情况内可以放块元素，但是给转换一下块级模式最安全

   3.行内块元素（inline-block）
   常见的行内元素：
   、、
   特点：
   #1.和相邻行内块元素在同一行，中间会有白色缝隙，一行可以显示多个
   #2.默认宽度就是它本身内容的宽度
   #3.高度、行高、外边距以及内边距都可以控制

   4.标签显示模式转化（display）
   块转行内：display:inline;
   行内转块：display:block;
   块、行内转行内块：display:inline-block

   ---

   行高（line-height）

   css中没有垂直居中，通过行高设置实现
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ur4ioAu-1585452605014)(:storage/28348148-478c-449b-92e3-8ff1250400d6/1a67e814.png)]
   行高：基线和基线的垂直距离（不一定是基线，四条线都可以）
   通过行高可以使文本在盒子中垂直居中对齐（只对单行文本有效）
   行高等于高度垂直居中
   行高大于高度文字偏下
   行高小于高度文字偏上

   ---

   CSS背景

   1.背景颜色（color）
   属性值：
   默认为transparent透明

   选择器{
     background-color:属性值;
   }
   

   2.背景图片（image）
   属性值：
   默认为none无图片
   默认会平铺，覆盖背景颜色

   选择器{
     background-image: url(图片路径)（路径没有引号）;
   }
   

   3.背景平铺（repeat）
   属性值：
   repeat默认会平铺
   no-repeat不平铺
   repeat-x水平平铺
   repeat-y纵向平铺

   选择器{
     background-repeat: 属性值;
   }
   

   4.背景位置（position）
   属性值：
   数值百分数|浮点数+单位组成的长度
   方位top|center|bottom|left|right
   必须指定background-image
   如果指定了一个方位，另一个默认居中为50%
   如果指定了一个数值，那该数值作用于x坐标，y坐标默认居中
   如果指定两个方位，无顺序
   如果指定两个值，数值和方位混用，第一个值为x，第二个为y
   坐标系原点在左上角，y向下递增

   选择器{
     background-position: 属性值1（数值或方位） 属性值2（数值或方位）;
   }
   

   5.背景滚动
   属性值：
   scroll背景图像是随对象内容滚动，默认
   fixed背景图像固定

   选择器{
     background-attachment: 属性值;
   }
   

   6.背景简写
   不像font，无顺序
   默认就不写

   选择器{
     background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
   }
   

   7.背景透明（css3）
   最后一个参数为alpha透明度0～1之间
   0.3的0可以去掉.3
   盒子背景半透明，内容不影响

   选择器{
     background: rgba(0,0,0,0.3)
   }
   

   ---

   CSS三大特性

   1.层叠性
   如果一个属性通过两个相同的选择器设置到同一个元素上，那么排在后面的会将前面的属性覆盖掉
   样式不同不会覆盖
   2.继承性
   子标签会继承父标签部分样式
   属性以text-、font-、line-开头以及color属性可以被子类继承
   3.优先级
   如果选择器不同，通过权重来决定
   每个选择器种类 权重公式
   继承或者* 0,0,0,0
   标签选择器 0,0,0,1
   类、伪类 0,0,1,0
   id 0,1,0,0
   行内样式style= 1,0,0,0
   !important 无穷大

   选择器{
     属性名: 属性值 !important；
   }
   

   权重计算：
   相加不进位
   逗号左边恒大于逗号右边
   继承权重是0，无论父亲的权重多高，如果没指定标签通过继承获得，则权重为0

   ---

   盒子模型

   1.盒子模型（Box Model）
   将HTML页面的布局元素哦看作一个承装容器的盒子
   由内容、边框、内边距、外边距四个部分组成
   盒子的内容是content
   盒子的厚度是border
content与盒子边的距离是内边距padding
   盒子与其他盒子的距离是外边距margin
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LnwFrz0y-1585452605015)(:storage/28348148-478c-449b-92e3-8ff1250400d6/f5c9a099.png)]
   2.盒子边框（border）
   属性值：
   border-width边框粗细，单位px
   border-style边框样式，none默认无边框，solid单实线，dashed虚线，dotted点线
   border-color边框颜色

   选择器 {
     border-width:属性值;
     border-style:属性值;
     border-color:属性值;
   }
   

   简写：
   无顺序

   选择器 {
     border: 边框粗细 边框样式 边框颜色;
   }
   

   单独指定某个边框的样式：
   方位参数：top、bottom、left、right

   选择器 {
     border-方位-width:属性值;
     border-方位-style:属性值;
     border-方位-color:属性值;
   }
   

   简写：

   选择器 {
     border-方位: 边框粗细 边框样式 边框颜色;
   }
   

   由于相邻边框叠加导致边框变粗，通过cellspase属性将边框合并

   选择器 {
     border-collapse: collapse;
   }
   

   3.内边距（padding）
   方位参数：top、bottom、left、right

   选择器 {
     padding-方位:属性值;
   }
   

   配置完，盒子会被撑开变大
   简写：
   属性个数不同，代表含义不同
   写一个属性 代表上下左右全是该属性值
   写两个属性 代表上下是第一个属性 左右是第二个属性值
   写三个属性 代表上是第一个属性 左右是第二个属性 下是第三个属性
   写四个属性 代表上 右 下 左 （顺时针）

   选择器 {
     padding:属性值1 属性值2 属性值3 属性值4;
   }
   

   盒子的实际大小=内容大小+内边距+边框
   要想盒子不变，增大内边距，就要减小内容width、height大小特殊情况：
   如果盒子没有设置高度（宽度），则padding不会撑大盒子（继承也不会）
   4.外边距（margin）
   盒子与盒子、盒子与边界的距离
   与内边距相似
   方位参数：top、bottom、left、right

   选择器 {
     margin-访问:属性值；
   }
   

   简写也与内边距一样：
   属性个数不同，代表含义不同
   写一个属性 代表上下左右全是该属性值
   写两个属性 代表上下是第一个属性 左右是第二个属性值
   写三个属性 代表上是第一个属性 左右是第二个属性 下是第三个属性
   写四个属性 代表上 右 下 左 （顺时针）

   选择器 {
     margin:属性值1 属性值2 属性值3 属性值4;
   }
   

   块级盒子可以设置水平居中(只能左右)，必须有宽度，设置左右外边距为auto即可

   选择器 {
     margin-left:auto;
     margin-right:atuo;
   }
   

   简写:

   选择器 {
     margin:auto;
     margin:0 auto;
   }
   

   背景和插入图片的区别：
   插入的图片可以通过padding进行移动
   背景图片只能通过background-position
   5.清除元素的默认内外边距
   基本以后写css的第一句话
   行内元素没有上下内外边距

   *{
       margin:0;
       padding:0;
   }
   

   6.外边距的塌陷
   只出现于垂直外边距
   #1.上下两个盒子
   上边的盒子有下外边距margin-bottom下边的盒子有上外边距margin-top，那么他们之间的垂直外边距不是两者之和，而是两者中较大的那个一方的外边距，这就是相邻外边距的塌陷。
   解决方法：只添加一个外边距（相邻）
   #2.嵌套父子两个盒子
   父盒子中嵌套一个子盒子，想让子盒子下移，设置margin-top，结果会是使父子两个盒子同时下移，父子相对位置不变，这就是嵌套外边距塌陷。
   解决方法：
   为父元素定义上边框
   为父元素定义上内边距
   为父元素添加属性overflow:hidden;
   7.盒子模型布局稳定性
   width>padding(撑开盒子)>margin(塌陷)

   ---

   去掉列表默认样式
   二话不说，直接去掉

   li{
     list-style:none;
   }
   

   ---

   圆角边框（CSS3）

   属性值为圆的半径，可以是数值或者百分比
   矩形采用高度的一半的数值
   正方形采用百分比（同时将高度和宽度取%）

   选择器{
     border-radius:属性值;
   }
   

   圆角也可根据四个角进行设置：

   选择器{
     border-top-left-radius:属性值;
     border-top-right-radius:属性值;
     border-bottom-right-radius:属性值;
     border-bottom-left-radius:属性值;
   }
   

   简写：

   选择器{
     border-radius:左上角 右上角 右下角 左下角;
   }
   

   ---

   盒子阴影（CSS3）

   属性值：
   h-shadow 必须，水平阴影的位置，允许负值
   v-shadow 必须，垂直阴影的位置，允许负值
   blur 可选，模糊距离
   spread 可选，阴影的尺寸
   color 可选，阴影颜色
   inset 可选，将外阴影改为内阴影，默认外阴影

   选择器{
     box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 内/外阴影;
   }
   

   ---

   浮动（float）

   1.CSS布局的三种机制：标准流、浮动和定位
   标准流：
   块级元素独占一行 div hr p hx ul ol dl form table
   行内元素从左向右排列span a i em，碰到父级元素换行
   浮动：
   让盒子在标准流中浮起来，主要作用是让多个块级盒子一行显示
   定位：
   将盒子定在浏览器某一个位置
   2.浮动语法
   浮动的盒子，脱离标准流（脱标），浮动在标准流上面
   float相当于（但不是）改变元素的display，改为inline-block，相比行内块inline-block块之间没有缝隙
   属性值：
   none 元素不浮动（默认）
   left 元素向左浮动
   right 元素向右浮动

   选择器{
     float:属性值;
   }
   

   3.搭配
   由于浮动的盒子会影响下面的标准流元素，因此我们一般会给浮动盒子一个标准流父亲，最大化减少对其他标准流的影响
   4.浮动元素与父盒子的关系
   子盒子不会压到父盒子的border和padding（在父盒子的content内浮动）
   5.浮动元素与兄弟盒子的关系
   如果两个兄弟，上一个是浮动，下一个是标准流，则下一个盒子会浮动在标准流上面
   如果两个兄弟，上一个是标准流，下一个是浮动，则不会浮动在上一个盒子，俩兄弟上下排列
   如果两个兄弟都是浮动的，会横行排列
   浮动只会影响当前和后面的标准流，前面不会影响

   ---

   清除浮动

   很多情况下父亲盒子不方便给高度，通过子盒子自动撑开比较合理
   但是子盒子为浮动，父盒子又没有高度，会导致下面的标准流上移，导致布局变乱
   1.清除浮动的本质
   解决父级元素因为子级元素浮动引起高度为0的问题
   通过清除浮动，父级元素会根据子级元素自动检测高度
   2.清除浮动语法
   属性值：
   left 不允许左侧有浮动元素（清除左侧浮动的影响）（基本不用）
   right 不允许右侧有浮动元素（清除右侧浮动的影响）（基本不用）
   both 同时清除左右两侧浮动的影响（最常用）

   选择器{
     clear:属性值;
   }
   

   3.清除浮动的方法
   #1.额外标签法（隔墙法）
   在一个盒子里最后一个浮动元素末尾添加一个空标签，将清除浮动的语法赋给它

   优点：简单
   缺点：增加额外的标签
   #2.父级添加overflow属性方法
   给父级元素添加overflow属性，属性值可以是hidden、auto、scroll
   优点：代码简洁
   缺点：内容增多时候容易造成不会自动换行，导致内容被隐藏，无法显示益处的元素
   #3.使用after伪元素清除浮动
   :after方法为空元素额外标签法的升级版，好处就是不需要单独加标签
   通过父类class=".类名"进行使用
   语法：

   .类名:after{
     content:"";
     display:block;
     height:0;
     visibility:hidden;
     clear:both;
   }
   ie6、ie7清除
   .类名{
     *zoom:1;
   }
   

   优点：不添加标签，符合闭合浮动思想
   缺点：对ie6、ie7需要特殊支持
   #4.使用双伪元素清除浮动
   通过:after和:before两个伪元素进行
   语法：

   .类名:before,.类名:after{
     content:"";
     display:table;
   }
   .类名:after{
     clear:both;
   }
   ie6、ie7清除
   .类名{
     *zoom:1;
   }
   

   优点：代码更简洁
   缺点：对ie6、ie7需要特殊支持

   ---

   CSS属性书写顺序

   1.布局定位属性：
   display/position/float/clear/visibility/overflow
   2.自身属性：
   width/height/margin/padding/border/background
   3.文本属性：
   color/font/text-decoration/text-align/vertical-align/white-space/break-word
   4.其他属性（CSS3）：
   content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

   ---

   子盒子可以比父盒子大

   ---

   定位（position）

   将盒子定位在某个位置，自由漂浮在其他盒子（标准流、浮动）上面
   最底层（标准流）-中间层（浮动）-高层（定位）
   定位=定位模式+边偏移
   1.边偏移
   属性值可以是像素数值或百分比
   top 顶端偏移量，定义元素相对于其父元素上边线的距离
   bottom 底部偏移量，定义元素相对于其父元素下边线的距离
   left 左侧偏移量，定义元素相对于其父元素左边线的距离
   right 右侧偏移量，定义元素相对于其父元素右边线的距离
   定位的盒子有边偏移才有意义
   top和bottom不能同时使用
   left和right不能同时使用

   选择器{
     top: 属性值;
     bottom: 属性值;
     left: 属性值;
     right: 属性值;
   }
   

   2.定位模式（position）
   属性值:
   static 静态定位
   relative 相对定位
   absolute 绝对定位
   fixed 固定定位

   选择器{
     position:属性值;
   }
   

   #1.静态定位（static）
   默认，无定位，按照标准流特性摆放，没有偏移，几乎不用
   #2.相对定位（relative）
   相对于该元素原来在标准流的位置进行的偏移
   原来在标准流的区域继续占有，后面的盒子仍以标准流的方式对待它
   #3.绝对定位（absolute）
   元以带有定位的父级元素的位置来移动的
   完全脱标
   如果父级没有定位，则以浏览器为准进行偏移
   如果父级有定位，则以父亲的定位为准
   如果多层子结构，子一层一层向上找，直到有定位的父级进行偏移
   子绝父相-父类相对定位，子类绝对定位
   #4.固定定位（fixed）
   是绝对定位的一种特殊形式
   完全脱标
   根据浏览器可视窗口来设置元素的位置：跟父元素没有任何关系；不随滚动条滚动（以浏览器为准进行偏移）

   ---

   定位扩展

   1.绝对（固定）定位的盒子居中
   水平居中：
   绝对（固定）定位不能通过margin:auto;进行水平居中
   通过left和margin-left组合使用：

   选择器{
     width:宽度;
     position:absolute;
     left:50%;
     margin-left: -宽度的一半;
   }
   

   垂直居中：
   同理

   选择器{
     height:高度;
     position:absolute;
     top:50%;
     margin-top: -高度的一半;
   }
   

   2.堆叠顺序（z-index）
   绝对定位的默认堆叠顺序为后面覆盖前面
   可以通过z-index属性改变堆叠顺序
   z-index的属性值为正整数或者负整数，数值越大，盒子越往上
   数字后面没有单位
   只存在于定位，标准流和浮动没有这个属性

   选择器{
     z-index:数值;
   }
   

   3.定位改变display属性
   相当于行内块，但不是
   4.其他
   #1.由于绝对定位相当于行内块，如果需要通栏需单加width属性
   #2.因为绝对定位是脱标的，为防止遮挡下面盒子的内容，将下面的盒子添加margin-top属性，数值为绝对定位的高度

   ---

   如何盒子是浮动或者绝对（固定）定位，不会出现外边距塌陷问题

   ---

   让固定定位紧贴版心

   选择器{
     left:50%;
     margin:-（版心宽度的一般+自己的宽度）
   }
   

   ---

   CSS高级技巧

   1.元素的显示与隐藏
   让一个元素消失或者重新显示出来
   #1.display显示
   属性值：
   none 隐藏对象，且不保留位置
   block 除了转为块级元素，也可以显示对象

   选择器{
     display:属性值;
   }
   

   配合js做特效，十分常用
   #2.visibility可见性
   属性值：
   visible可见的
   hidden隐藏对象，但保留位置

   选择器{
     visibility:属性值;
   }
   

   使用较少
   #3.overflow溢出
   对于溢出的部分进行处理
   属性值：
   visible 不剪切内容，也不增加滚动条，默认，超出部分正常显示
   hidden 不显示超过对象尺寸的内容，超出的部分隐藏
   scroll 不管是否有超出的内容，都显示滚动条 基本不用
   auto 内容超出自动显示滚动条，不超出不显示 基本不用

   选择器{
     overflow溢出:属性值;
   }
   

   可以清除浮动，保证内容不会超出范围
   在鼠标经过父类使，让它的其中某一个子类作变化：

     a:hover .子类{
     ...
     }
   

   2.CSS用户界面样式
   #1.鼠标样式cursor
   设置鼠标指针在对象上移动的样式
   属性值：
   default 小白箭头 默认
   pointer 小手
   move 移动
   text 文本输入
   not-allowed 禁止

   选择器{
     cursor:属性值;
   }
   

   #2.轮廓outline
   用于绘制元素周围的一条线，位于边框边缘的外围
   选中突出的用处
   默认都是有的
   属性值：
   outline-color 颜色
   outline-style 样式
   outline-width 宽度

   选择器{
     outline: 颜色 样式 宽度;
   }
   

   由于不同浏览器样式不一样，一般是使用它去掉默认轮廓线
   outline:0;
   #3.防止拖拽文本域resize
   默认文本域是有轮廓线，而且可以拖砖，要禁止拖拽

   选择器{
     resize:none;
   }
   

   3.vertical-align垂直对齐
   #1.图片、表单与文字对齐
   只针对行内元素和行内块元素，块通过margin=行高
   属性值：
   baseline 默认，图片的基线与文字的基线对齐
   top 图片的顶线与文字的顶线对齐
   middle 图片的中线与文字的中线对齐
   bottom 图片的底线与文字的底线对齐

   选择器{
     vertical-align:属性值;
   }
   

   #2.去除图片低侧空白缝隙
   因为默认是基线对齐，所以有个小白块
   将垂直对齐改成其他即可
   用来控制图片或表单与文字的对齐
   或者将图片转换为块元素就不会基线对齐的问题了
   4.溢出的文字省略号隐藏
   #1.white-space
   设置文本显示方式，通常使用强制单行内显示内容
   属性值：
   normal 默认，内容显示不时开自动换行
   nowrap 强制单行内显示文本，直到文本结束，或者遇到br标签

   选择器{
     white-space:属性值;
   }
   

   #2.text-overflow文字溢出
   设置是否使用省略标记（…）标记溢出文本内容
   属性值：
   clip 不显示省略标记，简单裁切
   ellipsis 溢出部分使用省略标记
   选择器{ text-overflow:属性值; }
   #3.三步曲
   先强制一行内显示文本（单行显示）
   white-space:nowrap;
   超出部分隐藏
   overflow:hidden;
   文字用省略号代替超出部分
   text-overflow:ellipsis;
   5.CSS精灵技术（sprite）
   为了有效的减少服务器接受和发送请求，提高加载速度，通过CSS精灵技术将多个图片放在一张图（精灵图）内，减少请求次数
   主要用于背景图片，一般不用插入图片
   通过background-position实现
   测量所需图标大小和在图中位置，通过width和height设定好图片大小，在通过background-position将大图（精灵图）上移，显示所需图标，注意，上移像素数值为负数
   6.滑动门
   滑动门技术可以实现对于各种特殊形状的背景能够自适应元素中文本内容，常用于导航栏
   一般的导航栏布局：

   
     
       导航栏内容
     
   
   

   通过a设置左侧滑动门，span设置右侧滑动门
   因为需要通过文字将盒子撑开，所以将a和span要转为inline-block
a设置左侧滑动门，设置背景左侧，padding撑开合适宽度
   span设置右侧滑动门，所以需要右对齐，padding撑开合适宽度，其余用文字自动撑开

   ---

   margin负值

   1.margin负值（盒子宽、高）+定位（50%）=水平垂直居中
   2.通过margin负值（border宽）压住浮动的盒子相邻边框（浮动的盒子会自动对齐）
   3.由于上一步，浮动盒子边界会被后面压住，所以进行选中高亮会出现边界被后面盒子压住不能显示全的问题，所以将高亮设置成相对定位

   ---

   CSS三角形

   通过border可以模拟三角形
   1.宽度、高度为0
   2.设置border-方位（四个边框都需要）
   3.将所需三角形的底部设置颜色，其他设置为transparent透明色，但不能省略
   4.为了兼容性，要设置font-size:0;和line-height:0;
   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KK51WCZD-1585452605016)(:storage/28348148-478c-449b-92e3-8ff1250400d6/7ce836fe.png)]

   ---