css基础二

less

1. css的预处理语言，有着比css更强大的功能，浏览器只能编译css，vscode需要安装easy less进行文件格式转换less—>css
2. // less中的单行注释不会被解析到css；/* less中的多行注释，能被解析到css文件中*/
3. 子选择器嵌套在父选择器里面
4. 变量，在变量中可以存储一个任意的值，在需要时直接改变变量的值
   • 变量的语法：@变量名：值；(大小写敏感，不能带特殊字符，不能以数字开头)

   // 定义一个粉色的变量
   @color: pink;
   // 错误的变量名  @1color   @color~@#
   // 变量名区分大小写  @color  和  @Color 是两个不同的变量
   // 定义了一个 字体为14像素的变量
   @font14: 14px;
   body{
       background-color: @color;
   }
   
   div{
       color: @color;
       font-size: @font14;
   }
   
   a{
       font-size: @font14;
   }
   

   • &表示外层的父元素：&: hover
   • :extend() 对当前选择器扩展指定选择器的样式（选择器分组）(包括指定选择器的样式)
   • 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就是创建了一个mixins(相当于一个模板，别的选择器可以直接引用，引用时不用括号)
   • 可以使用混合函数，在类选择器括号中传参@变量名
   • @import用来将其他的less引入到当前的less
   • 在less中所有的数值都可以直接进行运算
5. less基础（补充）
   • Less是一门CSS预处理语言，它扩展了CSS的动态特性
   • Less编译：包含一套自定义的语法及解析器，编译生成对应CSS文体

   //后代直接放在父级里
   .heard {
   	...
   	.login{
   	...
   	}
   }
   //如果遇见（交集|伪类|伪元素选择器）前面加&
   

   • Less运算☆
     • 注意：运算符中间左右空格隔开；对于两个不同单位的值之间的运算，结果取第一个值单位

转换

1. 转换(transform)是使元素改变形状、尺寸和位置的一种效果。
2. translate()方法

   // 元素从其当前位置移动，根据给定的left(x坐标)和top(y坐标)位置参数
   transform: translate(50px,100px);
   

3. rotate()方法

   // 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
   transform: rotate(30deg);
   

4. rotateX()、rotateY()方法

   // 元素围绕其 X 、Y轴以给定的度数进行旋转。
   transform: rotateX(120deg);
   transform: rotateY(130deg);
   

5. scale() 方法

   // 通过scale()方法，元素的尺寸会倍数增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
   transform: scale(2,4);
   

6. scaleX(x)、scaleY(y)、scaleZ(z)
   • 定义 3D 缩放转换，通过给定一个 X、Y、Z 轴的值。
7. skew()方法

   // 元素翻转给定的角度，根据给定的水平线(X轴)和垂直线(Y轴)参数
   transform: skew(30deg,20deg); // 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
   

8. matrix()方法

   // matrix()把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
   transform:matrix(0.866,0.5,-0.5,0.866,0,0);
   

过渡

1. CSS3 过渡(transition)是元素从一种样式逐渐改变为另一种的效果

   // 规定您希望把效果添加到哪个 CSS 属性上
   // 规定效果的时长
   transition: width 2s;
   transition: width 2s, height 2s, transform 2s;
   

动画

1. CSS3 @keyframes 规则

   // 在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
   @keyframes myfirst
   {
   	from {background: red;}
   	to {background: yellow;}
   }
   // 多层改变
   @keyframes myfirst
   {
   	0%   {background: red; left:0px; top:0px;}
   	25%  {background: yellow; left:200px; top:0px;}
   	50%  {background: blue; left:200px; top:200px;}
   	75%  {background: green; left:0px; top:200px;}
   	100% {background: red; left:0px; top:0px;}
   }
   
   //@keyframes 中创建动画时，请把它捆绑到某个选择器：规定动画的名称、规定动画的时长
   div {
   	animation: myfirst 5s;
   }
   
   div {
   	animation-name: myfirst;
   	animation-duration: 5s;
   	animation-timing-function: linear;
   	animation-delay: 2s;
   	animation-iteration-count: infinite;
   	animation-direction: alternate;
   	animation-play-state: running;
   }
   
   div {
   	animation: myfirst 5s linear 2s infinite alternate;
   }
   

多列

1. column-count 属性规定元素应该被分隔的列数

   div {
   column-count:3;
   }
   

2. column-gap 属性规定列之间的间隔

   div {
   	column-gap:40px;
   }
   

3. column-rule 属性设置列之间的宽度、样式和颜色规则

   div {
   	column-rule:3px outset #ff0000;
   }
   

用户界面

1. resize 属性规定是否可由用户调整元素尺寸。

   // 规定 div 元素可由用户调整大小
   div{
   	resize:both;
   	overflow:auto;
   }
   

2. box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

   // 规定两个并排的带边框方框
   div {
   	box-sizing:border-box;
   	width:50%;
   	float:left;
   }
   

3. outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

   // 规定边框边缘之外 15 像素处的轮廓
   div {
   	border:2px solid black;
   	outline:2px solid red;
   	outline-offset:15px;
   }