2020年7月14日
动画相关之线性渐变和径向渐变
摘要： 线性渐变 线性渐变，表示两种颜色或多种颜色之间的平滑过渡。由渐变线和色标组成，渐变线控制渐变方向，色标控制颜色变化(包含一个颜色值和位置)。 渐变线 渐变线的起点和终点与渐变框一个角垂直线相交，且经过渐变框中心。 角度 渐变线可以使用角度来指定方向，0deg表示沿着元素中心的Y轴从下到上，正直表示顺 阅读全文
posted @ 2020-07-14 20:31 绝弹笔记 阅读(759) 评论(0) 推荐(0) 编辑
动画相关之过渡和变换
摘要： 过渡 过渡(Transition)，指属性值从原值到最终值的过渡状态。这是个复合属性，包括transition-property、transition-duration、transiton-timing-function和transition-delay四个属性值。 过渡属性 过渡属性(transi 阅读全文
posted @ 2020-07-14 20:30 绝弹笔记 阅读(312) 评论(0) 推荐(0) 编辑
2020年6月29日
CSS布局之栅格布局
摘要： 栅格(grid)是一种自适应布局，能根据不同终端自动伸缩容器的宽高。flex根据轴线(axis)布局，看起来像是一维布局；而grid针对网格线(grid line)布局，看起来更像是二维布局。 跟flex一样，grid由栅格容器(grid container)和栅格项目(grid item)组成。 阅读全文
posted @ 2020-06-29 21:21 绝弹笔记 阅读(11397) 评论(0) 推荐(0) 编辑
CSS布局之弹性布局
摘要： Flex(弹性布局)，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。 弹性布局由弹性容器(flex container)和弹性项目(flex item)组成。 在弹性容器中，水平方向称为主轴(main axis)(起点main start,终点main end)；垂直方向称为纵轴(cross 阅读全文
posted @ 2020-06-29 21:19 绝弹笔记 阅读(10227) 评论(0) 推荐(1) 编辑
CSS布局之浮动布局
摘要： 布局(layout),指各个元素在网页里如何摆放以形成最终的页面,默认布局是从左到右、从上到下。改变元素的默认布局方式有很多种，浮动(float)就是其中一种。 1. 浮动(float) 浮动类似于word里面文字围绕图片的效果，可设置为向左(left)或向右(right)浮动。 // 元素默认没有 阅读全文
posted @ 2020-06-29 21:18 绝弹笔记 阅读(980) 评论(0) 推荐(0) 编辑
CSS布局之定位布局
摘要： 定位布局(Position)指元素可以脱离原来的位置，定位到页面中的任意位置。 定位布局以内边距(padding)区域的左上角为定位原点，分为相对定位(包括static及relative)和绝对定位(包括absolute及fixed)。 1. 静态定位(static) 静态定位是默认的文档布局方式， 阅读全文
posted @ 2020-06-29 21:16 绝弹笔记 阅读(573) 评论(0) 推荐(0) 编辑
CSS布局之盒子模型[二]
摘要： 元素有行内元素(inline)、块级元素(block)以及行内块元素(inline-block)之分，对应地它们之间的盒模型也会有不同。 1. 行内元素(inline) 通过display: inline可将元素声明为行内元素，顾名思义指在行里面的元素，因此没有换行的行为。 1.1 宽度和高度 行内 阅读全文
posted @ 2020-06-29 21:14 绝弹笔记 阅读(198) 评论(0) 推荐(0) 编辑
CSS布局之盒子模型[一]
摘要： 每个HTML标签都会生成一个盒模型，盒模型是正常流布局非常重要的概念。盒模型由内边距(padding)+长度(width)+高度(height)+边框(border)+外边距(margin)组成。 1. 宽度(width)和高度(height) 盒模型有2种类型，怪异盒模型和标准盒模型，在不同盒模型 阅读全文
posted @ 2020-06-29 21:13 绝弹笔记 阅读(265) 评论(0) 推荐(0) 编辑
2020年6月15日
CSS文本相关之垂直排列[5]
摘要： 行内元素的垂直布局跟font-size、line-height及vertical-align有很大关系，理解它们之间的关系才能更好理解行内元素的垂直布局。 内容区(font-size) 对于匿名文本或非替换元素，font-size的值表示内容区的高度； font-size: 14px; 行内框(li 阅读全文
posted @ 2020-06-15 20:36 绝弹笔记 阅读(798) 评论(0) 推荐(0) 编辑
CSS文本相关之水平排列[4]
摘要： 在正常流中，文本都是从左往右、自上而下排列显示，如果想要改变排列方向的话，可以通过CSS属性来改变。 text-align属性 文本排列(text-align)可改变文本在水平上的方向，但不改变内部的排列方向； // 可选值: left(靠左、默认),center(居中),right(靠右) .tx 阅读全文
posted @ 2020-06-15 20:35 绝弹笔记 阅读(1248) 评论(0) 推荐(0) 编辑