BDawn的专栏

CSS是基础的样式语言，而SASS和SCSS是其预处理器，最终编译为CSS。SASS采用缩进语法（.sass文件），简洁但学习成本高；SCSS（.scss文件）兼容CSS语法，使用大括号和分号，更易上手。两者功能相同（变量、嵌套、混合等），但SCSS更主流。建议项目中使用SCSS，因其语法友好、社区支持完善且迁移成本低。安装sass和sass-loader即可在项目中启用SCSS功能。

产品经理设计了这样一个需求，通过拖动圆形滑块实现时间的设置功能，虽然看着有点复杂，但是确实有点复杂。

z-index属性的适用范围 z-index属性使用在下面两种html元素中才会生效 position属性设置为除static的其他属性值的元素 display设置为flex的子元素 设置position的情况 不设置position <style> .green{ width: 50px; height: 50px; z-index: 2; background: green; } .blue{ width: 100px; height: 50px; ma

css animation动画 animation为html元素不同style样式的切换过程添加过渡动画 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> .ani { width: 100px; h

css border-image 基本原理 将给出的图片分割为九宫格，将九宫格四个角位置的部分放置在元素四个角上， 然后将上下左右四个部分放置在元素四个边上再根据参数进行拉伸或者平铺 示例 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .

css float 使用方式 float:left; 可设置的值为：left | right | none 默认为none，开启浮动 元素开启浮动之后的特点 元素会向左或向右移动，直到碰到离他最近的盒子容器或者其他开启浮动的元素 文本或者行内元素会环绕在浮动元素周围 浮动元素如果未设置高度，它的高度会被浮动的子元素的内容撑开 元素的display属性的部分值会被改变 浮动前 浮动后 inline block inline-block block inline-table tab

两个div同时设置外边距时，他们中间的外边距会叠加在一起，以最大的为准，而不是两个相加 div{ width: 100px; height: 100px; } .div1{ background-color: pink; margin-bottom: 50px; } .div2{ background-color: orange; margin-top: 100px; } <div class="div1"></div> <div class="div2">

版权声明：本文为优快云博主「阿里技术官方号」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.youkuaiyun.com/alitech2017/article/details/107460459 简介：CSS是Web开发中不可或缺的一部分，随着Web技术的不断革新，CSS也变得更加强大。CSS的众多属性你知道了多少？具体开发中该使用什么属性才最适合恰当？如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中，现代CSS特性就可以更.

参考文档 MDN web docs 什么是网格容器 网格布局的特点 网格grid css属性介绍 网格item css属性介绍

不废话先看效果 代码分析 布局和js代码 <body> <div class="content"> </div> <template id="my-temp"> <div class="temp"> <div></div> <div></div> </d...