有木名凌霄,擢秀非孤标
当文字内容超出时,显示省略号 当文字内容超出时,显示省略号
项目中会遇到这么一种情况,就是当文字内容过长,超出某一部分区域时,会覆盖别的内容,所以需要设置,当文字内容超出某一部分区域时,显示省略号。 经常遇到的情况是表格中文字内容过长,这种情况一般是单行显示,还有一种是多行显示,分别说明: 单行文
2021-02-24
font-weight属性值在不同浏览器中展示效果 font-weight属性值在不同浏览器中展示效果
看CSS编码规范的时候看到font-weight属性,突然来了兴趣,想看font-weight的100-900的属性值在不同浏览器中的展示效果,顺便梳理一篇博客出来。 一般认为:font-weight属性值 400 相当于关键字 norma
2021-01-15
CSS编码规范 CSS编码规范
本篇文章是基于王叨叨大佬师父维护的文档梳理的,有兴趣可以去看一下原文CSS编码规范。 其实不管是HTML也好,还是CSS也好,有些规范其实是共通的。 命名class的命名应该偏向语义化,不是为了样式而去命名,而是通过class的命名能清楚
2021-01-07
背景透明(opacity vs background) 背景透明(opacity vs background)
最近在做项目的时候,遇到透明度的相关设置。 常用的背景透明设置可分为两种,分别是: 一是给background设置透明度。 二是利用opacity属性。 在跳了一些坑之后,本人更推荐给background设置透明度,为什么呢? 想一下,我
2021-01-05
图片铺满浏览器窗口且不变形 图片铺满浏览器窗口且不变形
今天项目中提到一个需求,需要把背景图片铺满浏览器全屏,且图片不变形。也就是说显示的宽高是不确定的,我第一反应就是background-size: 100% 100%;但是这样做有一个弊端。 下面结合代码图具体讨论一下:首先,设计一个背景颜色
2020-10-15
简单梳理下水平居中和垂直居中的实现方法 简单梳理下水平居中和垂直居中的实现方法
1. div盒子中文字的水平和垂直居中水平居中:text-align: center;,可继承,父盒子设置了该属性值,子盒子中的文字也是水平居中的。垂直居中就让包含文字盒子高度和文字行高设置成相等的。 div{ text-align
2020-10-15
Vertical-align属性值区分 Vertical-align属性值区分
先简单看一下官方文档上的Vertical-align这些属性值的描述,虽然只有简单的描述,但其实描述的很清楚,但有时只看文字并不能很好的理解其含义。下面结合代码图说明:首先,我建造了一个背景颜色为绿色的div盒子,div盒子内容中包含英文字
2020-10-14
background-attachment属性值scroll、fixed和local的区别 background-attachment属性值scroll、fixed和local的区别
首先看菜鸟教程中的解释:scroll:背景图片随着页面的滚动而滚动,默认值fixed:背景图片不会随着页面的滚动而滚动local:背景图片会随着元素的内容滚动而滚动 代码结合实例说明先看代码:主要包含两个盒子,class=”one”,cla
2020-10-12