前端之css
前端打字员
这个作者很懒,什么都没留下…
展开
-
px、em、rem、vm、vw 、vh、vmin 、vmax区分
Px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素(此像素与设备的物理像素有一定的区别,后续详细说明见文末说明1),利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font...原创 2019-12-20 10:42:20 · 1158 阅读 · 0 评论 -
学习《css世界》笔记之使用css实现凹凸效果
显示效果HTML<span class="ao"></span><span class="tu"></span>CSS .ao, .tu{ display: inline-block; width: 0; font-size: 14px; line-height: 18px...原创 2019-09-26 11:29:08 · 639 阅读 · 0 评论 -
使用css优雅解决文字两端对齐的方式之一
效果图HTML <body> <div>学校</div> <div>班级</div> <div>班主任</div> <div>上课时间</div> <div>名字</div> </body>CSSdiv { margi...原创 2019-09-26 14:58:44 · 250 阅读 · 0 评论 -
学习《css世界》笔记之loading三点动画效果
动画实例HTML<div>正在加载中<span>...</span></div>CSSspan { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -0.25em;/* 属性设...原创 2019-09-27 11:15:04 · 889 阅读 · 0 评论 -
学习《css世界》笔记之content自动添加开启闭合符号
实例HTML <p lang="zh"><q>啦啦德玛西亚</q></p> <p lang="en"><q>This book is very good!</q></p> <p lang="no"><q>denne bog er fantasisk!</q&...原创 2019-09-27 11:35:40 · 114 阅读 · 0 评论 -
学习《css世界》笔记之多行文本实现垂直居中
效果图HTML<div class="box"> <div class="content"> 具有行高实现的多行文字垂直居中效果,需要属性vertical-align帮助 </div></div>CSS .box{ width: 200px; line-height: 120px; bac...原创 2019-10-09 15:18:35 · 139 阅读 · 0 评论 -
学习《css世界》笔记之使用vertical-align数值实现文字和小图标对齐
效果图HTML<p>请选择<i class="icon-arrow"></i></p><p>请选择<i class="icon-arrow valing-1"></i></p><p>请选择<i class="icon-arrow valing-2"></i>...原创 2019-10-09 15:45:27 · 188 阅读 · 0 评论 -
学习《css世界》笔记之使用overflow做文字溢出点点点效果
效果图HTML <p class="p1">qwertyuiopasdfghjklzxcvbnm</p> <div class="d1"> <p> 冯塘村过去经济较为落后。几年前,镇里以400多年的冯塘古村为基础,引来社会资金投资休闲农庄和共享民宿,把这里建设成了一个集生态农业、创意农业、旅游观光、休闲体验、果蔬采摘、农产品生产加工...原创 2019-10-11 11:02:11 · 570 阅读 · 0 评论