前端3+1(Day11)11.2
2022/1/15 23:33:47
本文主要是介绍前端3+1(Day11)11.2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前端3+1(Day11)
常见css布局方式
- 传统盒模型布局
-
文档流布局
块级元素占一行,行内元素共享一行
-
浮动布局
float,会脱离文档流
-
定位布局
就是使用position
- flex布局
-
常见属性父盒子
-
flex-direction:定义文档的书写方向,就是主轴的方向
-
flex-wrap:看换行的样式
-
flex-flow:就是flex-direction和flex-wrap的简写
-
justify-content:子容器在主轴的排列方式
-
align-content:多根轴线的对齐方式
-
align-items:子容器在交叉轴的排列方式
-
-
常见属性子盒子
-
order:子盒子的排列顺序,数值越小排列越靠前,默认为0
.ele{ order: num; }
-
flex-grow:盒子总宽度-子盒子原来宽度,然后拉升占比例,然后分配
.ele{ flex-grow: <number>; /* default 0 */ }
-
flex-shrink:子盒子超过空间的压缩比例
-
flex-basis:子盒子在不伸缩的情况下的原始比例(就是设置的原始的长度)
.red{ order: 99; flex-basis: 20px; /* flex-grow: 1; */ flex-shrink: 2; width: 200px; height: 200px; background-color: rgb(172, 75, 75); }
-
+ flex:是flex-grow,flex-shrink,flex-basis的简写 + align-self:允许这个一个元素不按照align-item的要求,自己根据交叉轴区排列 ```css .blue{ /* flex-grow: 1; */ width: 200px; height: 200px; align-self:flex-end; background-color: cornflowerblue; }
3. grid布局,可以进行二维布局 - **当设置为网格,column,float,clear,vertical-align全部失效** ## 常见css布局 1. 水平垂直布局 2. 圣杯布局 3. 双飞翼布局 ## JS常见的内置对象 1. 时间对象Date 2. 数组对象Array 3. 字符串对象String 4. 数学对象Math 5. 函数对象Function 6. 函数参数集合arguments 7. 布尔对象Boolean 8. 错误对象Error 9. 基础对象Object
这篇关于前端3+1(Day11)11.2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-26uniapp 哪里看mp-html 是否有引用-icode9专业技术文章分享
- 2024-09-26uniapp 怎么显示html 代码-icode9专业技术文章分享
- 2024-09-26uniapp 有没有自带mp-html 吗-icode9专业技术文章分享
- 2024-09-25前端高频大厂面试真题解析与实战教程
- 2024-09-25前端高频面试题详解:新手必看指南
- 2024-09-25前端高频面试真题详解与实战攻略
- 2024-09-25前端大厂面试真题及答案详解:从零开始的初级面试攻略
- 2024-09-25前端面试实战:新手必备技巧与案例解析
- 2024-09-25前端面试题及答案详解:初级面试必备
- 2024-09-25前端面试真题及答案详解:适合入门与初级用户