作者:小旋律丶_409 | 来源:互联网 | 2023-09-13 17:34
传统布局的局限性1.清除浮动的额影响2.很难实现居中3.结构不灵活,不能随时添加盒子弹性盒布局非常灵活提供一套浏览器内置布局特点:一位布局固定的CSS属性决定了这个布局一般用
传统布局的局限性
1.清除浮动的额影响
2.很难实现居中
3.结构不灵活,不能随时添加盒子
弹性盒布局
非常灵活 提供一套浏览器内置布局
特点:一位布局 固定的CSS属性 决定了这个布局一般用在移动端
加在弹性父盒子身上的属性
1.声明弹性盒子
-webkit-display:flex;
display:flex;
2.设置主轴方向
flex-direction:row 水平方向(默认)
row-reverse(水平反向)
column(垂直)
column-reserve(垂直反向)
3.设置主轴方向的排列顺序
justify-content:flex-start(左对齐)
flex-end(右对齐)
center(居中)
space-sround(两端间距等于中间的一半)
space-between(两端对齐中间间距等分)
space-evenly(间距等分)
4.设置交叉轴方向的排列方式(单行使用)
algin-items:flex-start(上对齐)/
flex-end(下对齐)
center(居中)
baseline(基线对齐)
stretch(延伸,占满)
5.换行属性
前提:不想自动收缩的时候,子盒子宽度>父盒子宽度
flex-wrap:wrap/nowrap/wrap-reverse(上下换行)**6.复合写法**
flex-flow:flex-direction flex-wrap;默认值 row nowrap## 加在子项身上的属性
**flex属性**
```css
flex:flex-basis flex-shrink flex-grow;flex-basis: 子项的宽度(auto) 基础宽度属性 flex-shrink:子项占据弹性父盒子的溢出空间的比例 &#xff08;子项宽度和>父盒子宽度的时候&#xff09; 默认值为:1flex-grow: 子项占据弹性父盒子的剩余空间的比例 &#xff08;子项宽度和<父盒子宽度的时候&#xff09;默认值:0flex:auto 1 0;默认值99%情况 剩余空间 flex:auto 1 n; &#61;&#61;&#61;> flex:n;
order排序属性
order:n;
子项自己在交叉轴的排列方式
align-self:flex-start上对齐/flex-end下对齐 /center居中/baseline基线对齐/stretch延伸&#xff0c;占满;
多行使用
所有子项在交叉轴的对齐方式
align-content:flex-start 左对齐
flex-end右对齐
center居中
space-around两端间距等于中间的一半
space-between两端对齐中间间距等分
space-evenly间距等分;
LESS语言
介绍一下你自己: 我是css的升级 我不是为了取代css 我是为了扩展css语言 我是动态语言 具有编程语言特性的语言 我比css好在 我可以计算&#xff0c;可以预定义一些你今后要用的值 &#xff0c;嵌套&#xff0c;传参&#xff0c;----》
好处:编码速度会提高,维护相对容易 主旨&#xff1a; less is more
新建 .less —> 浏览器不认识.less —>编译(.less—>.css)—>浏览器认识啦&#xff01;
编译方式:
Koala 考拉
缺点&#xff1a;弹框 提示错误
EasyLess
缺点&#xff1a;设置一下.css文件路径 稍微有点卡 重新导入
1. 变量
方便的去保存和获取数据 —>其实就是一个名字保存一个值 这个名字就叫变量
&#64;变量名:变量值;
&#64;w:1000px;
&#64;maincolor:skyblue;使用:
.box {width:&#64;w;height:200*2px;background-color:&#64;maincolor;
}
2.类混入
级别1:
.a {width:200px;height:200px;bgc:red;.br;
}
.b {.a;bgc:blue;opacity:0.8;.br;
}定义一个圆角边框类.br {border-radius:50%;
}
级别2&#xff1a;
.br(&#64;a) {border-radius:&#64;a;
}.b {.a;bgc:blue;opacity:0.8;.br(10px);
}
级别3:
.br(&#64;a:50%) { //&#64;a:50% 默认值 调用.br()不传递参数相当于使用默认值border-radius:&#64;a;
}.b {.a;bgc:blue;opacity:0.8;.br();//采用的默认值 50%
}
.c {.br(3px);//3px
}
例子&#xff1a;
定义盒子阴影类
.bs(&#64;h,&#64;v,&#64;blur,&#64;size,&#64;color) {// box-shadow:&#64;h &#64;v &#64;blur &#64;size &#64;color;box-shadow:&#64;arguments;//实际参数列表 代表上面的5个实参
}.box {.bs(0px ,0px ,10px,0px,red);
}.bs(&#64;str,&#64;color) {box-shadow:&#64;arguments;
}
// &#64;str: 0px 0px 10px 0px.bs(0px 0px 10px 0px,red)