随笔分类 - Stylus、CSS和HTML
摘要：一、减少渲染阻塞时间 今天许多 Web 应用必须满足许多形式因素，包括 PC、平板电脑和移动手机等。为了实现这种响应式特性，我们必须根据媒介大小编写新的样式。在页面渲染时，直到 CSS 对象模型（CSS Object Model，CSSOM）准备就绪，它才开始渲染阶段。 根据你的 Web 应用，你可
阅读全文
摘要：1、css动画介绍及用法 CSS 动画用于实现元素从一个 CSS 样式配置转换到另一个 CSS 样式配置。 动画包括两个部分: 描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧（即规则与关键帧） div { animation: change 3s; } @keyframes cha
阅读全文
摘要：1，vw、vh、vmin、vmax 的含义 （1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括
阅读全文
摘要：一、理解什么是伪类？什么是伪元素？ 1、伪类种类 伪类作用对象是整个元素 a:link{color:#111} a:hover{color:#222} div:first-child{color:#333} div:nth-child（3）{color:#444} 尽管这些条件不是基于DOM的，但结
阅读全文
摘要：一、内置方法 返回各种颜色的比重（如red(color)等） 颜色函数是CSS预处里器中内置的颜色函数功能，这些功能可以对颜色值进行处理，例如颜色的变亮、变暗、渐变颜色等处理十分的方便。 keys(pairs)/values(pairs)：返回给定pairs中的键/值 typeof(node)：字符
阅读全文
摘要：建立好项目后我们来安装stylus 这样就安装上了stylus。 接下来就可以使用了，使用方式分两种。一种是在.vue文件的style块中使用，一种是引用.styl文件的形式 一、选择器 缩排（基于缩进代替大括号，空格代替冒号）当然按之前css写也是可以的 规则集：使用逗号为多个选择器同时定义属性，
阅读全文
摘要：1、渐变字体 主要是看：-webkit-background-clip: text; 该属性 <style> .b1{ width: 500px; height: 200px; font-size: 100px; background-image: linear-gradient(to bottom
阅读全文
摘要：一、为什么<img>元素底部会有空白？ 要理解这个问题，首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline，这是一个西文排版才有的概念。 vertical align的有效取值为bas
阅读全文
摘要：一、内联元素空隙问题 当我们使用"display:inline-block"把块集元素转换为内联元素时，会发现每两个内联元素之间有一定的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车
阅读全文
摘要：border-image 可以实现实线渐变边框，但是如果需要虚线渐变边框，则设置 dashed 之后，还是实线，那么如何实现虚线渐变边框呢？ 一、反向镂空的方式 如果对边框的样式细节不是很在意，则可以借助反向镂空的方法实现，也就是虚线原本实色的地方和周围颜色融为一体，看上去透明，而原来虚框透明的部分
阅读全文
摘要：DataSet是ADO.NET的中心概念。可以把DataSet当成内存中的数据库，DataSet是不依赖于数据库的独立数据集合。所谓独立， 就是说，即使断开数据链路，或者关闭数据库，DataSet依然是可用的，DataSet在内部是用XML来描述数据的，由于XML是一种与平台无关、与 语言无关的数据
阅读全文
摘要：一、clip-path 属性定义及使用说明 clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。 IE浏览器不支持，且低版本webkit内核浏览器需要添加-webkit-前缀 语法：clip-path: clip-source|basic-
阅读全文
摘要：一、变量作为字符动态呈现 CSS var变量（CSS自定义属性）很好用，然而有时候，需要这些变量能够同时作为字符在页面中呈现，我们想到的是使用::before/::after伪元素配合content属性，但是，把CSS变量直接作为content属性值是没有任何效果的。那该如何呈现呢？ /* 无效 *
阅读全文
摘要：一、text-align-last 段落最后一行设置对齐方式 text-align-last 属性规定如何对齐文本的最后一行。 注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。 详见：text-align-last 属性 遇到问题：
阅读全文
摘要：两种类型的表格布局 你有两种方式使用表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。 HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。 在W3C关于<table>
阅读全文
摘要：一、px、em、rem 介绍 1、PX：px像素（Pixel）：相对长度单位。像素px是相对于显示器屏幕分辨率而言的 2、EM：em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点：（1）em的值并不是固定的（2）em会
阅读全文
摘要：场景：父元素 高度固定，如何使其中的文字垂直居中？ 1、table布局： 利用display:table+display:table-cell的方法 效果： 利用display:table-cell 效果： 优点：等高布局，无需设置高度，文字轻松实现垂直居中 缺点：ie7以下不兼容！ 2、利用lin
阅读全文
摘要：border-radius，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。 radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如下图），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通
阅读全文
摘要：查了一下MDN，上面说的就很直接： 要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。 1、实例验证 一方面说明顺序从左到右，另一方面要结果相乘，什么意思呢？验证一下： transform: translateX(200px) scale(
阅读全文
