随笔分类 - CSS 总结
记录 CSS 相关的基础知识
摘要：mixins.scss placeholder border radius position center ellipsis border 1px safe area flex
阅读全文
摘要：场景 当页面内容不够一屏时，footer固定到底部。当超过一屏时，根据实际高度，footer自动向下延伸。 实现
阅读全文
摘要：引导图是为了方便用户快速的了解产品的新功能，比较好的开源项目有driverJS、introJS。了解实现思路能更好的扩展第三方应用，特别是对于这种DOM操作相关的库。 思路：这个简单的DMEO没有JS，my类是等待引导的元素，pop是一个高亮区，用于突出显示my，mask是遮罩层。在使用z inde
阅读全文
摘要：伪元素和伪类比较容易混淆，视觉上为了区分两者，CSS3规定伪元素用双冒号表示，伪类用单冒号表示。伪元素包括但不限于 ，伪类包括但不限于 以 和`:first child ::first line :first child`表示选中第一个子元素，你不需要为这个子元素添加class就能选中它 伪元素示例
阅读全文
摘要：基本概念 使用 或者 让元素成为伸缩容器，采用flex布局的元素称为伸缩容器（flex container），容器内的子元素称为伸缩项目（flex item）。 注意： 浏览器会将直接将伸缩容器内的文字包起来成为匿名伸缩项目。 flex布局使元素FFC化（flex formating context
阅读全文
摘要：径向渐变 径向渐变就是椭圆渐变，圆是椭圆的特殊形式，径向渐变从圆心点以椭圆的形式向外扩散，渐变的实现由两部分组成：椭圆和色标，椭圆控制渐变的位置、大小和形状；色标控制渐变的颜色和位置。 语法： 演示效果 See the Pen radial gradient by wmui (@wmui) on C
阅读全文
摘要：径向渐变 渐变是两种或多种颜色之间的过渡，线性渐变是多种颜色沿着一条直线（渐变线）过渡，渐变的实现由渐变线和色标两部分组成，渐变线控制渐变的方向；色标控制渐变的颜色变化，色标包括颜色和位置。浏览器从每个色标的位置淡出到下一个位置，通过确定多个色标的位置可以制作多色渐变效果。 语法： 示例效果 See
阅读全文
摘要：本篇文章中涉及到的一些概念，在上篇文章中已有介绍： "理解CSS transform 2d变换" 示例效果 See the Pen transform 3d by wmui (@wmui) on CodePen. 坐标轴 3d变换是建立在三维坐标轴上，它比二维变换多了一个z轴。写代码的时候，眼睛与电
阅读全文
摘要：示例效果 See the Pen transition by wmui (@wmui) on CodePen. 属性介绍 transition property transition property定义应用过渡效果的CSS属性名称，默认值 ，表示所有属性都获得过渡效果；属性值 表示没有属性获得过渡
阅读全文
摘要：演示效果 See the Pen transform 2d by wmui (@wmui) on CodePen. transform origin transform origin表示变形操作的原点，默认位于元素的中心，初始值 ，可定义三个值，分别表示x轴、y轴和z轴，2d变换的原点由x轴和y轴确
阅读全文
摘要：上图中绿色为顶线，蓝色中线，红色基线，粉色底线。 基本概念 行高：上下文本行基线间的距离，图中粉线之间的距离 行距：文本的底线到下一行文本的顶线之间的距离，距离上等于距离上等于line height和font size的差值，图中粉线到绿线的距离 半行距：半行距即行距的一半，距离上等于line he
阅读全文
摘要：vertical align定义行内元素（inline和inline block）的基线相对于该元素所在行的基线在垂直方向上的对齐方式，即与匿名文本大写字母X底边对齐，默认值baseline，当属性值为数值或百分比时正负值均可。 属性值介绍： 表示元素基线和父元素基线对齐 表示降低元素的基线到父元素
阅读全文
摘要：color 设置文本的颜色，默认有继承性。属性值可以是颜色名、十六进制颜色值、rgb值，inherit关键字。 direction 设置文本的书写方向，默认值ltr，有继承性。属性值rtl，文本方向从右向左。 继承。 结果： Hello world. Hello world. 个人理解，rtl就是把
阅读全文
摘要：display属性规定元素生成框的类型，默认值inline。 属性值有很多，但常用且支持度较好的就那么几个。 block block元素当不设置宽度时，宽度为父元素的宽度，独占一行，支持设置宽高、外边距、内边距。不支持CSS的 属性 标签： inline inline元素宽度由内容撑开，不独占一行，
阅读全文
摘要：overflow overflow定义内容溢出时的如何处理，默认值 表示内容会出现在元素框外。属性值 表示溢出内容会被裁剪。 表示溢出时浏览器出现滚动条以便查看溢出内容，不溢出时也会出现滚动条。 表示当内容溢出时出现滚动条，当内容不溢出时不出现滚动条。 继承。 可通过 和`overflow y`单独
阅读全文
摘要：float float属性定义元素的浮动方向，任何元素都可以设置浮动，浮动元素会生成一个块级框，无论本身是什么类型的元素。默认值 不进行浮动，属性值 元素向左浮动，属性值 元素向右浮动， 继承。 浮动元素的特性： See the Pen float by wmui (@wmui) on CodePe
阅读全文
摘要：position属性建立元素布局所用的定位机制，默认值static，称作静态位置。任何元素都可以定位，CSS中的定位通常指absolute定位、fixed定位和relative定位，除了static定位外的其他定位都可以使用top, right, bottom, left设置偏移距离，可以是正值和负
阅读全文
摘要：border collapse border collapse属性定义表格的表框显示行为。默认值 表示表格的表框和单元格的边框分开，边框之间会有空白间隙。属性值 表示合并为一个边框，它们之间的空白将不存在，因此会忽略 和`empty cells inherit`继承。 border spacing
阅读全文
摘要：padding padding属性设置元素的内边距。属性值默认0。属性值 表示由浏览器计算内边距。属性值为百分比时是基于父元素的宽度计算。属性值可以是 。 这是一个简写属性，属性值最多为4个，分别表示上内边距，右内边距，下内边距，左内边距。属性值为三个时，分别表示上内边距、左右内边距、下内边距。属性
阅读全文
