总结
阿里十分注重你对源码的理解,对你所学,所用东西的理解,对项目的理解。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
initial-scale - 设置页面的初始缩放值,是一个数字,可以是小数
-
maximum-sacle - 设置页面最大缩放值,是一个数字,可以是小数
-
user-scalable - 是否允许用户进行缩放,值为’yes’或者’no’,yes表示可缩放,no表示禁止缩放
-
minimum-scale - 允许用户缩放的最小值,是一个数字,可以是小数
-
height - 设置layout viewport的高度,这个属性很少使用
一般情况下禁止用户缩放网页,设置的时候只需要:
<meta name=“viewport”
content=“width=device-width, initial-scale=1.0 , user-scalable=no” >
就可以了,但是由于某些浏览器不能识别 initial-scale,所以添加了最大和最小缩放限制。
viewport 设置可视区之后,就会把网页的宽度设置为移动设备的屏幕宽度。
如想深入学习,可查阅《viewport深入理解和使用 - 前端人 - 博客园》。
2.2、盒模型
CSS3 中新增 box-sizing 属性,可以设置盒模型类型。属性值分别为:
content-box - 标准模型
border-box - IE模型
两者最大区别就是盒子的宽度不同:
标准模型宽 = 内容宽 + padding + border
IE模型宽 = 内容宽(包含padding、border)
这样做的优点就是可以任意设置它的 padding 和 border,不会挤压盒子的排列,但是如果设置一个 margin,会立马改变盒子的排列。
如想深入了解,可查阅《前端面试题中的“盒模型”是什么?》
2.3、flex - 弹性布局
Flex 是 Flex Box 的简写,意为弹性布局,为盒子提供最大的灵活性。任何一个元素都可以指定为弹性布局。
使用语法:
.box{
display:-webkit-flex;
display:flex;
}
采用 flex 布局的,也称 flex 容器,对应的属性有:
-
flex-direction 设置排列方向(向下、向上、向左、向右)的
-
flex-wrap 内容放置不下时换行方式
-
flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrap
-
justify-content 定义在主轴上的对齐方式。
-
align-items 定义项目在交叉轴上如何对齐。
-
align-content 定义多根轴线的对齐方式
容器内的子元素增加,布局所占的系数:如:
//其样式为
.box{
display:-webkit-flex;
display:flex;
}
.child{
flex:1;
background:#eee;
height:100px;
border:solid 1px red;
}
此时我们给 child 不论如何设置边框、内边距,还有外边距,三个 child 始终排列在一行。
flex 布局优点:
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。
[外链图片转存中…(img-TAGsqIM1-1715180743527)]