css
Sunshine_qqqqiu
源码很重要
展开
-
less导出css文件的方法
首先需要安装Easy less插件 less导出css文件的方法: 配置Easy less插件,实现所有Less有相同的导出路径 1.vscode中点击设置 2.输入Easy找到我们需要更改的配置,点击在settings.jion中编辑 3.在"less.compile"中添加一行代码 "out":"../css/" 这样我们的Less文件保存之后,css文件就可以保存到和less文件夹同级别的css文件夹之中了。 ...原创 2022-04-18 10:41:59 · 2476 阅读 · 0 评论 -
移动适配,媒体查询
网页元素的宽高,都要随着设备的宽度等比缩放。 设备宽度大,网页元素的宽度就增大,设备宽度小,网页元素的宽度就变小。 面试题:HTML网页的根是谁? 答:html标签 1rem=1HTML字号大小(HTML字号又称为根字号) 媒体查询 示例 @media (width:375px) { html { font-size: 40px; } } @media (width:320px) {原创 2022-04-18 10:20:38 · 132 阅读 · 0 评论 -
视口标签与flex布局
视口标签的作用 实现网页的宽度跟设备的宽度是一样的。规定html网页大小用的。 没有视口标签,网页的宽度是980px。 搜索某些奇数支持的浏览器版本 caniuse.com flex布局 display: flex; flex-wrap: wrap;换行 flex-direction: column;垂直排列(以副轴方向垂直排列) /* 水平对齐 */ align-items: center; /* 垂直对齐 */ justify-conten原创 2022-04-15 11:12:21 · 354 阅读 · 0 评论 -
css杂记
1.自定义过渡动画效果 在线生成贝塞尔函数——cubic-bezier.com 2.transform旋转 3.透明度opacity 1-0 4.scale()缩放 5.animation-iteration-count: infinite 无线循环 6.animation-direction reverse 动画反向播放。 alternate 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 alternate-reverse 动画在奇数次(1、3、5...)原创 2022-04-04 18:41:17 · 219 阅读 · 0 评论 -
什么是css sprites?
css sprites原创 2022-03-25 21:39:15 · 445 阅读 · 0 评论 -
阐述清楚浮动的几种方法
阐述清楚浮动的几种方式(常见问题) 1.父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。 优点:简单、代码少、容易掌握 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 2,结尾处加空div标签 clear:both 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度 优点:简单、代码少、浏览器支持好、不容易出现怪问题 缺点:不少初学者不理解原...原创 2022-03-25 18:48:53 · 155 阅读 · 0 评论