冰暮流星-优快云博客

原创 css3之网格布局1

摘要：CSS Grid布局是一种二维网格系统，通过将页面划分为网格单元来实现复杂布局。通过在容器元素设置display:grid开启网格布局，其子元素成为网格项。主要属性包括：grid-template-columns/rows定义列宽/行高（支持px、%、fr等单位及minmax()、repeat()函数）；grid-column/row-gap设置网格间距；支持网格线命名实现精确定位。网格布局通过简洁的CSS代码即可创建灵活的响应式布局结构。

2025-11-24 00:19:04 127

原创词法分析与语法分析

词法分析:从左到右逐个扫描源程序中的字符，识别其中如关键字，标识符，常数，运算符以及分隔符。语法分析:根据语法规则将单词符号分解成各类语法单位，并分析源程序是否存在语法上的错误。递归下降分析法，预测分析法。自底向上语法分析方法。

2025-11-18 21:57:55 371

原创 css之弹性盒子属性2

flex-start，子元素在交叉轴的起点对齐，由于flex布局是默认行方向布局，子元素会从顶部对齐。将内容向容器起始端对齐，第一行紧贴容器顶部（Flexbox）或起始边缘（Grid）。将内容向容器末端对齐，最后一行紧贴容器底部（Flexbox）或结束边缘（Grid）。均匀分布行，每行周围分配等量空间，首行和末行与容器边缘的间距为行间间距的一半。均匀分布行，首行在容器顶部，末行在容器底部，剩余行平均分配空间。均匀分布行，所有行与容器边缘及行间的间距完全相等。将内容居中对齐，行在容器中垂直居中。

2025-11-15 23:50:43 355

原创 css之flex属性

摘要：CSS3的flex布局通过设置display:flex创建弹性容器，容器内子元素称为弹性项目。主要属性包括：flex-direction控制项目排列方向（row/column及其反向）；flex-wrap处理换行（nowrap/wrap/wrap-reverse）；justify-content设置主轴对齐方式（flex-start/end/center/space-between/around/evenly）。示例演示了如何通过不同属性值调整700px容器内5个200px宽的子元素排列方式，包括水平

2025-11-11 23:58:49 359

原创 css之动画

CSS动画通过@keyframes定义动画效果，再通过animation属性应用。示例中定义了一个名为change的动画，使元素从100px宽高逐步变为300px。调用时设置动画持续5秒、匀速播放、延迟2秒、播放3次并正反交替。关键属性包括：animation-name（动画名）、animation-duration（时长）、animation-timing-function（速度曲线）、animation-delay（延迟）、animation-iteration-count（播放次数）、animatio

2025-11-08 00:01:19 386

原创 css3新增过渡

摘要：CSS过渡(transition)用于控制样式变化效果，包含四个属性：transition-property指定过渡属性（如width），transition-duration设置持续时间，transition-timing-function定义速度曲线（如ease-in-out），transition-delay控制延迟时间。这些属性可简写为transition: property duration timing-function delay，例如"transition: width 5s

2025-11-03 23:18:36 230

原创 css3新增属性变形

CSS3的transform属性实现了多种变形效果：移动(translate)、缩放(scale)、旋转(rotate)和倾斜(skew)。移动分为translateX(x)、translateY(y)和translate(x,y)；缩放有scaleX(x)、scaleY(y)和scale(x,y)；旋转使用rotate(deg)；倾斜包含skewX(deg)、skewY(deg)和skew(xdeg,ydeg)。多个变形效果可用空格分隔同时使用，如transform:translate(100px,50p

2025-10-30 23:38:37 387

原创投资，如何获得估值回归的收益？

经常有人问，什么样的品种，未来会上涨？A股历史上有大中小盘，价值与成长风格轮动的现象。都有估值回归的现象。如果估值偏高，未来会有回落的现象。如果估值偏低，未来某个时间段会上涨。所以在投资时，哪一种品种估值低了，适当增加比例，哪一种品种估值高了，可以止盈，买入低估品种。投资事可以分散配置不同风格的低估品种，未来总有一类低估品种会上涨，从而带动整个组合上涨。但是，我们没办法预测什么时候会上涨。时间拉长后，各个品种收益是差不多的。投资，如何获得估值回归的收益？根据估值水平，调整投资比例。

2025-10-26 23:55:32 282

原创 css如何设置阴影

CSS阴影效果可通过box-shadow属性实现，其语法为：box-shadow:h-shadow v-shadow blur spread color inset。其中h-shadow（水平偏移）、v-shadow（垂直偏移）必选，正值表示右下偏移；blur（模糊距离）、spread（模糊尺寸）、color（颜色）、inset（内阴影）可选。示例代码为.container类设置红色阴影：向右偏移10px，向下偏移10px，模糊5px，扩展3px。该属性可快速为元素添加立体视觉效果。

2025-10-26 22:41:09 213

原创 css新增盒子属性——尺寸调节

CSS3的resize属性允许用户调整元素尺寸，需配合overflow属性使用。主要取值：none(默认不可调)、both(可调宽高)、horizontal(仅调宽度)、vertical(仅调高度)。示例中，通过给父容器.container设置overflow:auto及不同resize值，实现可调整大小功能：resize:both显示斜箭头可任意调整；resize:horizontal仅水平调整；resize:vertical仅垂直调整。该功能特别适用于需要用户自定义尺寸区域的场景，如文本框、面板等。

2025-10-26 22:33:01 207

原创 css之box-sizing属性

摘要：box-sizing属性用于控制盒模型计算方式。默认content-box不调整宽高，添加边框和内边距会使元素实际尺寸增大；而border-box会自动调整内容区大小，确保总宽高（含边框、内边距）等于设定值。示例中，三个子div设置边框和内边距后溢出父容器，添加box-sizing: border-box后，系统自动压缩内容区使总宽度保持100px，完美适配父容器300px宽度。该属性能有效解决布局中因盒模型计算导致的尺寸失控问题。

2025-10-25 14:40:08 694

原创 css之放射性渐变与重复性渐变

放射性渐变的属性是background-image:radial-gradient，它是一个函数，里面有参数分别是type-position,fromcolor,tocolor。实验closest-corner属性值，指定径向渐变的半径从圆心到离圆心最近的角。closest-corner:指定径向渐变的半径从圆心到离圆心最近的角。实验farthest-corner:指定径向渐变的半径从圆心到离圆心最远的角。closest-side:指定径向渐变的半径从圆心到离圆心最近的边。

2025-10-22 23:27:01 308

原创价值投资四大准则

买指数基金，就是买一组公司，这些公司构成一个集团公司，这些公司财报就是这个集团公司的财报，当整体盈利增加时，指数会上涨。之所以要强调买的低，是因为即使继续下跌，跌不到哪里去了，只要来一波上涨行情，就盈利了，哪怕后来遇到回调，也不至于亏损。市场先生就是一个让人捉摸不透的人，他每天都在给你报价，平时市场先生不用管，只有他的报价非常低再买入，报价非常高就卖出。许多人之所以买股票，买基金赔钱，大多数是追高买入，一旦行情反转，就很容易被套住了。通俗讲，就是买的便宜，或者买的低。一块的东西，用六毛买。

2025-10-20 23:23:19 416

原创 css之线性渐变

也可以在颜色后面添加数值，用来控制颜色比例，一般浏览器默认渐变是均匀分布，一般第一个颜色，最后一个颜色不写数值，浏览器默认是第一个颜色从0%开始，最后一个颜色在100%结束。方向有to top,to right等，方向表示渐变结束的方向，to top表示从下向上，to right表示从左到右。这段代码表示红色从40%结束，开始黄色渐变，再60%处开始蓝色渐变。这段代码表示沿顺时针方向30度方向渐变，从红到黄，再从黄到蓝。渐变是线性渐变，从左向右，从红渐变到黄，从黄色渐变到蓝。tocolor表示结束的颜色。

2025-10-19 22:49:26 367

原创 css3新增背景图片样式

上面的css代码表示设置一个div盒子，宽300像素，高200像素，红色边款，宽度1像素，背景图片不重复，设置图片高宽均为100像素，效果如下图。最后一个属性值是contain,保持图片宽高比例不变，缩放至图片完全显示，但可能会留边距。这段代码表示图片宽度设置为200像素，高度随比例变化，效果如下图。上面代码表示用cover属性值，宽高比例保持不变，多余部分会裁剪。当然也可以设置一个值，用来设置宽度，高度随着比例缩放。它的值有两个，第一个设置宽度，第二个设置高度。

2025-10-19 22:30:12 354

原创 css之图片边框

CSS的border-image属性用于创建图片边框，包含五个子属性：border-image-source（图片路径）、border-image-slice（裁剪偏移量）、border-image-width（边框宽度）、border-image-outset（超出边框量）和border-image-repeat（平铺方式）。使用时需选择对称的正方形图片。示例展示了如何为一个div元素添加图片边框，包括设置26px的裁剪偏移和边框宽度，10px的超出量，以及round平铺方式。该属性可以实现特殊的边框效果

2025-10-14 21:53:47 158

原创 css如何通过border-radius绘制圆形和半圆

然后设置border-radius属性，属性值是正方形边长的一半，可以写数值也可以写百分比50%如果想绘制半圆，比如上半圆，需要在左上角，右上角设置圆角，高度是宽度的一半。比如说高度是100px,宽度是200px，背景颜色是蓝色,css值如下。比如说设置一个边长是200px的盒子，背景颜色是蓝色，在这个盒子画圆。绘制圆形的前提盒子必须是正方形，长方形就不行。

2025-10-06 22:35:12 347

原创 css如何设置圆角边框

如果想单独设置某一个角，属性值书写格式是border-上下-左右-radius，比如border-top-left-radius，这个属性就是给左上角设置圆角。比如说设置一个div盒子，宽高都是200px，背景颜色是红色，假定给四个角设置不同的圆角，比如说20px ,40px,60px,80px。现实中一般不会给四个角单独赋值，一般是四个角赋统一的值，这时候就填一个数值就可以了。border-radius可以分别给四个角单独赋值，写四个数值，也可以给单独某个角设置圆角。值可以是像素，也可以是百分比。

2025-10-06 22:25:29 180

原创 css3新增文本样式-文本阴影，文本裁剪，单词裁剪

h-shadow 设置水平阴影的偏移位置，右偏是正方向。v-shadow 设置垂直阴影的偏移位置，下偏是正方向。属性值是word-wrap与word-break。word-wrap的属性值是break-word。word-break的属性值是break-all。区别是前者是多余字母换行，后者是直接删掉多余字母。为文本添加阴影，属性值是text-shadow。文本裁剪是在文本溢出的情况下对文字进行裁剪。在文本裁剪要设置自动换行与遮掉多余的文字。clip 裁剪多余的文字。新增样式一：新增阴影。

2025-10-02 22:34:09 162

原创为什么说牛市是散户亏损的原因？

有统计，70%的账户在07年与15年大牛市开的，也就是说，大多数人在高位进场，股价从低位升到高位的过程没有享受到，下跌一个没有躲过。在熊市时，股价低，甚至一直下跌，交易量少，这时候愿意进场的散户很少，而这时候恰恰是股票资产投资价值最高的时候。牛市时，不是所有品种都上涨，牛市一般是结构性牛市，呈现风格轮动特点。等到股价开始上涨，短时间内盈利的人增加，愿意开户进场的人增加，随着牛市到来，来开户进场的散户达到高峰。许多散户是牛市时才开始进场的。但散户有许多人追涨杀跌，一天不交易皮痒痒，很容易错过上涨品种。

2025-10-02 12:01:53 140

原创 python算法题练习——在数组里找出相同的整数的个数

使用一个循环，让数组里的每个元素和指定的整数进行比较，设置一个计数变量，初始值为0，如果有相同的，这个变量值加1。设计一个计算复杂度为O(n)的算法，并找出N个整数a1到an中有多少个整数值v?这道题比较简单，在高手眼里可能是个小儿科。

2025-10-02 11:37:31 135

原创 css3新增的其他选择器——空选择器，否定选择器，根部选择器，同级选择器，描点选择器

如果要选择除了第一个，剩余两个div，字体设置为红色，css代码如下。语法格式是E:empty，是选择那些元素不含子元素或者文本的元素。上面的html代码里面有两个h3元素，第二个是空的没有任何内容。同级选择器，语法格式是E~F，是选择同级的E元素后面的F元素。可以看到第一个h3里面的welcome没有被设置任何样式。语法格式：E:not()，这里表示选择不是某个指定的元素。如果要选择span后面的p元素,并设置字体为绿色。:target，选择当前活动的锚点。根部选择器，和html效果一直。

2025-10-01 14:39:09 326

原创 css之属性选择器

CSS属性选择器用于根据元素属性匹配样式，主要语法包括：1) E[属性]选择含指定属性的元素；2) E[属性="val"]精确匹配属性值；3) E[属性^="val"]匹配属性值开头；4) E[属性$="val"]匹配属性值结尾；5) E[属性*="val"]匹配包含子串的属性值。例如p[title]选择含title属性的p标签，p[title^="t"]匹配title以"t"开头的元素。

2025-09-28 22:21:12 168

原创 css之状态选择器

CSS状态选择器用于设置不同表单元素状态的样式。:enabled设置可用表单的边框样式（如黄色边框）；:disabled为禁用元素设置样式（如蓝色边框）；:read-only针对只读元素（如绿色边框）；:focus设置获取焦点时的样式（如红色边框）；:checked用于选中的单选/复选框（如增加右边距）；::selection可设置选中文本的样式（如红色文字）。这些选择器能够根据表单元素的不同状态自动应用对应的样式效果。

2025-09-24 23:08:11 276

原创 css之type选择器

CSS3新增的type选择器用于选择父元素中特定类型的子元素。包括：:first-of-type选择第一个匹配元素（如第一个li），:last-of-type选择最后一个，:nth-of-type(n)选择第n个（如第三个li），以及:nth-last-of-type(n)选择倒数第n个元素。这些选择器比child选择器更方便精确控制同类元素的样式。示例代码展示了如何通过type选择器为不同位置的li元素设置背景色。

2025-09-24 22:04:41 283

原创 css之child选择器

CSS child选择器用于选择特定子元素。:first-child选择第一个子元素，:last-child选择最后一个子元素。:nth-child(n)可选择任意位置的子元素，n从1开始计数，支持表达式如3n+1。:nth-last-child(n)可从后往前选择元素。:only-child用于选择父元素中唯一的子元素。这些选择器适用于具有多个相同子元素的结构，如ul中的li元素。

2025-09-20 23:07:19 379

原创 css之rem单位

外层div是以body是父元素，body大小默认为16px，外层div是32像素，而内层div是以外边div为父元素，父元素大小为16像素，内层就是32像素。css设置div有一个边框,字体大小是父容器的2倍，类d1设置宽高均为500像素，类d2设置为200像素。rem是以html为根元素，而html默认大小是16px，2rem后为32px,内外div均为这么大小。如果设置为2rem，就以html为根元素，设置大小，效果如下图。rem是根据根元素对字体大小进行设置。html元素一般是16像素。

2025-09-20 21:34:40 175

原创如何制定定投策略？

这个时间按自己能够执行的时间定。我们无法预测未来涨跌，这次可能买高了，下次可能就买低了。定投就是为了解决择时问题，通过在时间点上分散投资避免犯大错。定投有按日，按周，按月，不管怎么选择频率，对最后的收益都不大。如果是急性子，可以选择按周，如果是慢性子，可以选择半月一投或者一个月一投。一般股票基金定投周期是3年以上，必须是长期不用的闲钱。小白初期先用不疼不痒的闲钱去定投，等经历一轮周期，有经验之后再考虑增加定投金额。如果比较自律可以手动定投，如果自律不是那么强，可以选择设置自动定投。

2025-09-18 22:37:32 297

原创 css之圣杯布局

这里宽度设置为100%，占满整个盒子，因为不知道盒子到底有多大，只能设置相对大小，设置浮动是左浮动，把左右侧边栏挤在下面。这段html代码表示主体，左右侧边栏，而且他们都放到了类名是wrapper的盒子里。圣杯布局指的是两边的侧边栏宽度不变，中间的主体内容在一定范围内变化，且优先加载。设置宽度为190像素是因为两边留了200像素宽，设置190可以和中间主体预留间距。padding设置外边距，上下边距为0，左右是200像素。浮动设置向左浮动，因为盒子被主体占据，只能挤在下方。接着对左右侧边栏设置统一样式。

2025-09-11 23:01:16 213

空空如也

空空如也