a标签 margin负值 边框灵活使用 标准流 文字溢出省略号 精灵图 字体图标icomoon使用教程

负值 边框灵活使用 标准流 文字溢出省略号 精灵图 字体图标icomoon使用教程"/>

a标签 margin负值 边框灵活使用 标准流 文字溢出省略号 精灵图 字体图标icomoon使用教程

2020/12/22

a标签之间的空隙；

margin外边距的负值的灵活应用；

margin:0 auto; 给有宽度的块级元素用的；

边框的灵活使用；

清楚margin本质上的作用，撑开盒子

使用transition:transiform(-50%,-50%) 进行元素自身的移动

固定定位fixed 固定在版心旁边 放大缩小页面 元素不搜影响的方法：left:50%,再相对版心进行位移；

层级z-index 属于有定位的元素的属性；

脱离标准流的盒子的几个属性

float:left;
float：right;
position:absolute;
position:fixed;

1. 这些盒子不能再这些盒子不能使用 margin:0 auto ；居中

2. 失去块级元素独占一行的特性；

3. 隐性转化成display:block;

4. 不会触发外边距塌陷

   元素的显示与隐藏
   visibility:hidden; //元素隐藏
   visibility:visible; //元素显示
   display:block;
   display:none;
   区别 ：占不占位置；（v占 display不占位置）

溢出隐藏

overflow:hidden;  // 溢出部分隐藏
1.解决外边距塌陷；
2.清除浮动带来的影响；

文字溢出显示省略号 三部曲

white-space:nowrap;  //1.强制文字一行显示 
overflow:hidden;     //2.溢出隐藏
text-overflow:ellipsis; //3.显示省略号

精灵图

介绍： 把多张装饰性的小图片汇总到一张图中；
优点： 减少向服务器的请求次数 提高页面加载速度

background-position:-120px -120px; //想要的图片在精灵图上的位置

使用精灵图时 背景位置只能是负值或者0 不能为正值

三角形制作

width:0;
height:0;						//设置元素宽高为0
border:10px solid transparent;	//三个边框粗细 实线 透明
border-left:10px solid #ccc;	//需要设置的三角形朝向给颜色

光标样式

字体图标 icomoon 用法

1. 下载图标
2. 解压字体zip压缩包
3. 复制fonts文件夹到html文件所在目录
4. 在字体图标文件夹里的css文件中，拿到声明代码，放在html中
5. 在dome中挑选图标，复制白板到HTML中
6. 设置font-family