CSS基础
文章平均质量分 75
youhebuke225
这个作者很懒,什么都没留下…
展开
-
scss 颜色变浅
使用SCSS的lighten()或函数可以方便地调整颜色的亮度,使颜色变得更浅。根据你的具体需求选择合适的函数和调整量。如果你有其他关于颜色调整的问题或需求,请随时提问!原创 2024-09-06 23:33:49 · 452 阅读 · 0 评论 -
SCSS darken函数
在 SCSS 中,如果你想要生成一个比某个颜色更深的颜色,可以使用darken()函数。这个函数接受一个颜色和一个百分比作为参数,返回一个加深了指定百分比的颜色。原创 2024-09-04 15:59:41 · 419 阅读 · 0 评论 -
scss中的mix函数
函数还可以用于带有透明度的颜色,这时候第三个参数就显得尤为重要,因为它不仅影响颜色的比例,还会影响最终颜色的透明度。在这个例子中,红色颜色定义为半透明(50% 不透明度),所以混合后的颜色也会带有一定的透明度。函数用于混合两种颜色,并返回一种新的颜色。该函数可以根据给定的比例将两种颜色混合在一起。在这个例子中,通过将红色的比例设置为 70%,我们可以得到一个更偏向于红色的混合颜色。原创 2024-09-04 15:09:57 · 375 阅读 · 0 评论 -
scss中常用的函数
SCSS(Sassy CSS)是一种CSS预处理器,它扩展了CSS的功能,使得编写样式表更加高效、模块化和可维护。SCSS支持许多内置函数,这些函数可以帮助开发者更方便地处理颜色、数字、字符串、列表等。原创 2024-09-04 15:06:41 · 779 阅读 · 0 评论 -
元素在文档流中和非文档流中的特点
脱离文档流后的元素,变不再遵循文档流中的规则,浮动和定位他们各有一套自己的规则。脱离文档流有两种操作。原创 2022-09-27 09:22:13 · 260 阅读 · 0 评论 -
grid项目属性之grid-area&justify-self/align-self
grid-area。原创 2022-09-06 09:18:23 · 1010 阅读 · 0 评论 -
grid布局之项目属性grid-column&grid-row
grid-row。原创 2022-09-04 11:52:36 · 2631 阅读 · 0 评论 -
grid布局之容器属性grid-auto-columns&grid-auto-rows
margin;padding;}ul{width;height;border;;color;text-align;;}{;repeat(,);repeat(,);gap;/* 用来设置多出来的项目的宽和高 */}原创 2022-09-02 18:17:34 · 644 阅读 · 0 评论 -
grid布局之容器属性justify-content与align-content
使用当前属性的时候,我们不要设置项目的大小,他会拉伸项目知道沾满空间。这个属于默认效果,整体从左上角开始排列。原创 2022-09-01 09:28:16 · 937 阅读 · 0 评论 -
gird布局之容器属性justify-items与align-items
他的意思是延申,最终沾满容器空间。原创 2022-08-30 13:32:55 · 1142 阅读 · 0 评论 -
css之gird布局的容器属性
这里会使用到使用的前提是,我们需要使用grid-area给子元素定义名称他一般适用于当分割成网格布局的时候,子元素比网格布局少,然后使用来在容器中摆放子元素的位置原创 2022-08-29 13:43:39 · 334 阅读 · 0 评论 -
height:100%与height:inherit的区别
结果MDN原创 2022-07-13 20:54:24 · 365 阅读 · 0 评论 -
CSS常用属性以及使用场景
CSS常用属性以及使用场景white-space原创 2020-05-28 19:16:36 · 379 阅读 · 0 评论 -
我所使用的reset.css
* { margin: 0; padding: 0;}body,html { width: 100%; height: 100%;}ul,ul li { list-style: none;}/* a 标签的默认样式,点击时的无样式 */a { text-decoration: none; outline: none; color: black; -webkit-tap-highlight-color: rgba(255, 0, 0, 0);}...原创 2020-06-02 00:07:11 · 336 阅读 · 0 评论 -
less基础知识总结
目录less学习笔记1. 预处理器及less注释2. 变量2.1 声明2.2 使用2.3 变量的延迟加载3. 嵌套规则4. 混合(Mixins)4.1 普通混合4.2 参数4.3 匹配模式4.4 arguments5. 运算6. 避免编译7. 继承less学习笔记1. 预处理器及less注释种类lessSassstylus使用 点击命令行浏览器端(注意引入文件的位置:代码的下面)注释以 // 开头的注释,不会被编译到css文件中以 /**/ 包裹的注释会被编译到css文件中原创 2020-05-29 20:27:59 · 3092 阅读 · 0 评论 -
flex响应式布局详解
align-item原创 2020-06-11 18:59:19 · 5465 阅读 · 1 评论