中枢叹号-优快云博客

原创 Less的简单介绍、使用、语法

less是将CSS简单化的工具，并且拥有更强的逻辑性和计算能力在使用Less时，首先需要下载Less插件，下载完成之后，代码写在less文件中，保存之后会自动生成css文件，并将生成的css文件引入网页文件中。

2023-01-30 17:55:10 2783

原创移动端适配REM、vw、vh、媒体查询@media以及flexible.js的作用

在使用rem适配移动端的时候的时候，根字号的取值有一定的讲究，尽量不能像上述代码一样随便写成20、30px，而是将视口宽度等分，为了便于计算，通常将宽度等分为10份，例如：iPhone SE的视口宽度为375px，则根字号设置为37.5px（375/10）适配的网页效果就是根据移动设备的屏幕大小实现网页元素的等比缩放。

2023-01-29 19:24:18 958

原创浏览器喜欢的结构化布局——Flex布局

flex是专门为了布局而研发的布局模型，在需要左右、左中右以及上下布局时非常适用。同时也因为加载速度快、渲染性能较高而深得浏览器偏爱。但是flex的兼容性不高，适合新版本的浏览器以及所有移动端，低版本的浏览器不兼容。

2022-11-21 21:10:44 914

原创动画-Animation/@keyframes

动画的使用流程有两步，分为定义动画和使用动画，定义动画相当于制作动画，有两种制作方法，一个是 from{}···to{}；另一个是百分比。制作完动画之后，再在需要的地方通过 animation 来使用制作好的动画效果。

2022-10-26 13:21:15 822

原创 CSS-transform 平面/空间（移动、旋转、缩放、过渡）略解以及示例

transform: translate(水平移动距离，垂直移动距离);//距离的取值可以是数字或百分比向右向下为正数，向左向上为负数括号内只填一个值，默认为水平方向移动的距离

2022-10-25 17:44:58 6628

原创 CSS精灵图-sprite

CSS精灵图是把一堆小的图片整合到一张大的图片上，这样可以减轻服务器对图片的请求数量，再利用CSS的 background-image，background- repeat，background-position 组合进行定位

2022-10-20 17:48:43 320

原创 vertical-align 垂直对齐方式、基线对齐

浏览器的默认对齐方式是baseline，也就是基线对齐，就以上面写的为例，如图所示，横线为基线，在基线对齐下，一些文字或字母的下面一部分会凸出来；而浏览器也会将行内以及行内块标签当作文字进行处理，也就是基线对齐，比如图片和文字，文本框和文字对齐时，会出现上面或下面对不准的情况。这时就需要使用vertical-align的其他属性进行对齐。

2022-10-20 15:42:05 2999