-
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 布局优点:
-
可以实现 border-box 的效果。
-
添加弹性布局之后,元素不需要再使用浮动,清除浮动等。
-
同行元素设置边框、内外边距均不影响同行排列。
-
还可使用 max-width、min-width 或固定宽度与 flex 配合使用,另一边可自动填充功能。
不设置其他属性的时候,弹性布局默认水平方向从左排列,还可以通过属性控制垂直方向布局,对齐方式等,可以点击《flex布局制作自适应网页 - 前端人 - 博客园》详细学习。弹性布局超强大,应用也非常广泛。
2.4、rem
rem是一种相对单位。长度单位可分为两种:相对单位和绝对单位。
绝对单位:长度是固定的值,反应物理真实尺寸。如:px像素,一个像素相当于我们屏幕的一个小点,屏幕实际就是由很多个像素点组成的,不同显示器像素大小不同。还有cm、mm、in等等。
相对单位:根据其参考物决定的,参照物大小改变时,它也会改变。如%、rem、em、vh、ex等等。
网页布局中我们常用到em和rem两种单位:
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
总结
大厂面试问深度,小厂面试问广度,如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官,还要平时遇到问题后思考一下问题的本质,找方法解决是一个方面,看到问题本质是另一个方面。还有大家一定要有目标,我在很久之前就想着以后一定要去大厂,然后默默努力,每天看一些大佬们的文章,总是觉得只有再学深入一点才有机会,所以才有恒心一直学下去。
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
(https://img-blog.csdnimg.cn/img_convert/718310d106ab948d6f467d78e08b1aed.png)
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-88LvHq8L-1712874808723)]