随笔分类 - CSS3
1
摘要：在不指定背景颜色渲染区间的情况下, repeating-linear-gradient与linear-gradient的没有区别 <div class="test test1"></div> <div class="test test2"></div> .test { width: 150px; h
阅读全文
摘要：在开发中经常遇到需要图片按某个纵横比显示, 并且等比缩放; 比如现有以下需求: 一张header图片, 按照长宽比5:2进行显示并能进行等比缩放 思路: 当padding/margin 的值是百分比时, 是以父元素的宽度来进行计算的 <div id="container"> <div id="con
阅读全文
摘要：<div id="container"> <div id="mask"></div> </div> #container { width: 500px; height: 300px; position: relative; border: 1px solid #ccc; background-ima
阅读全文
摘要：搜索文本超出部分省略, 可以搜索到如下代码 white-space: nowrap; /*超出的空白区域不换行*/ overflow: hidden; /*超出隐藏*/ text-overflow: ellipsis; /*文本超出显示省略号*/ 但是如果某个元素是flex盒子的子项, 且宽度自适应
阅读全文
摘要：目录animate.css官网入场动画的加载入场动画的持续时间 animate.css官网 官网 入场动画的加载 <transition enter-active-class="animate__aniamted animate__bounceIn" leave-active-class="anim
阅读全文
摘要：html <div id="modelContainer" class="init"> <div class="mask"></div> <div class="model_content"> <div class="attention_container"> <div class="dot"> <
阅读全文
摘要：< table > < table > 标签的特有属性 cellpadding:用于设置td，th中的内容与边框的距离 cellspacing:用于设置td，th之间的距离 ATTENTION: 给td,th设置margin属性是无效的。想要设置单元格之间的间距只有通过table的内联属性cells
阅读全文
摘要：通过letter-spacing属性设定字符间的间距时发现，原本居中的段落在设定字符间距后整体向左偏移。 给文字添加一个标签可以看到最后一个字符也同样添加了字符间距 一个比较hack的解决方法：使用text-indent将文字整体缩进，缩进距离与设定的letter-spacing值相同 text-a
阅读全文
摘要：有如下代码 <p class="text"> <span>H</span> <span>e</span> <span>l</span> <span>l</span> <span>o</span> </p> .text { display: block; text-align: center; fon
阅读全文
摘要：水平格式化有七个属性，分别是：margin-left,border-left,padding-left,width,padding-right,border-right,margin-right七个。其中只有margin-left,width,margin-right三个属性允许被设置为auto。
阅读全文
摘要：line-height与font-size之间的差值就是行间距。行间距除以二，将行间距的一半分别应用到内容区的顶部和底部。其结果就是该元素的行内框。 假设有以下样式： p{ font-size:16px; line-height:20px; } 那么行间距就是4px，字体上下分别延展2px的空白。如
阅读全文
摘要：今天写字符打印DEMO时注意到了ch这个单位，经查询它是等宽字体相对于数字0的大小，1ch就是0的宽度。3ch宽的div就只能装下三个0. 等宽字体 等宽字体（monospaced font）是指字符宽度相同的电脑字体。东亚语言中，方块字基本上都作为等宽字体处理，如各个地区的汉字、日语假名的全形字符
阅读全文
摘要：##简述 通过getImageData方法取得图像的原始数据,这个原始数据中包含有width,height,data三个属性，其中data是一个数组，包含有每一个像素的rgba值。也就是说data数组每4个元素为一组rgba值，第一个像素就保存在index为0到3的元素中。 问题：非同源图像数据不可
阅读全文
摘要：##容器与项目 容器：父元素下的子元素如果要布局成弹性布局，则父元素称之为容器。 项目：弹性布局的元素称之为项目，它是容器的子元素。 ##主轴与交叉轴 主轴：项目们排列的方向称之为主轴。若项目们横向排列，主轴就是x轴；若项目们纵向排列，主轴就是y轴。（此处的x轴与y轴和直角坐标系不同，y轴是由上到下
阅读全文
摘要：@media可以正对不同的屏幕尺寸设置不同的样式 @media mediatype and|not|only (media feature) { CSS-Code; } 针对不同的媒体使用不同的stylesheet： <link rel="stylesheet" media="mediatype a
阅读全文
摘要：ul元素右浮动，li元素右浮动会反向排列。 li元素会按从上到下依次浮动。如果需要li元素的内容从左向右阅读，那么li元素的浮动只能是float:left； <ul id="nav"> <li>a</li> <li>b</li> <li>c</li> </ul> #nav{ float: left;
阅读全文
摘要：对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。 font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。 但是，我们可以用以下两种定义进行抗锯齿渲染 -webkit-font-smo
阅读全文
摘要：毛玻璃特效在日常的网页中都是寻常可见的，其大概结构为三层：背景层+毛玻璃层+内容层。 下面写一下自己试验的毛玻璃特效： 1.首先在html文件上写一个毛玻璃框架： <div class="container"><!--该层主要用于设定毛玻璃位置以及对毛玻璃的溢出进行限制，即作为毛玻璃的容器--> <
阅读全文
摘要：需要了解的几个css属性： 1.hsla H是色度，取值在0度~360度之间，0度是红色，120度是绿色，240度是蓝色。360度也是红色。 S是饱和度，是色彩的纯度，是一个百分比的值，取值在0%~100%，0%饱和度最低，100%饱和度最高 L是亮度，也是一个百分比值，取值在0%~100%，0%最
阅读全文
摘要：<input>原始标签输入框的样子： code： 请输入用户名：<input type="text"> 对其进行样式设定，包括输入框的长宽（width、height）、边框（border、border-radius）、预设定内容（placeholder）： code： 请输入用户名：<input t
阅读全文
1