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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值