Web前端最新03，思维导图+源代码+笔记+项目

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

二、什么是盒子模型？

css盒子模型本质上就是一个盒子，是有边框border、内容content、内边距padding、外边距margin组成

1.边框：border:border-width border-style border-color

border-width:5px;一般用px来设置

border-style:solid(实线边框)、dashed虚线边框)、dotted(点线边框)

border-collapce:collapce 可以把相邻的边框合并，避免边框合并

注：边框会影响盒子的大小

---

2.padding 内边距

padding ： 5px 指的是上下左右都是5px

padding : 5px 10px 指的是上下5，左右10

padding：5px 10px 10px 指的是上5，左右是10，下是5

padding：5px 10px 8px 6px 指的是上5、下10、右8,、左6

注：padding也会影响盒子的实际大小

如果盒子本身没有指定width/height ，padding是不会撑开的

---

3.margin 外边距

margin的复合写法和padding一致

注意：margin外边距可以设置块元素水平居中，必须满足两个条件：

1、盒子必须有宽度

2、左右外边距必须设置为auto,即：margin:0 auto；

---

4. 行内元素或行内块元素水平居中

行内元素或行内块元素水平居中，给父元素设置text-align:center；就可以了

---

三、盒子模型-清除内外边距

网页元素很多都自带默认内外边距、不同浏览器之间也不同，为了统一可以直接清除元素的内外边距

* {

margin: 0;

padding: 0;

}

注意：行内元素一般只设置左右的内外边距，设置上下边距不起效果！但是转换为块级或者行内块就可以

---

四、盒模型-外边距合并问题

定义：对于两个嵌套关系的块元素，父元素有上边距的同时子元素也设置上边距，此时父元素会塌陷较大的外边距值

解决方案：

1、为父元素设置上边框：border: 1px solid transparent;

2、为父元素设置上内边距:padding-top: 1px;

3、为父元素添加overflow:hidden

4、还有其他方法比如浮动、固定、绝对定位的盒子不会有塌陷问题

---

五、box-sizing 属性

box-sizing 属性定义如何计算一个元素的总宽度和总高度，元素的总高度和宽度包含内边距和边框(padding 与 border)

例如，需要并排放置两个带边框的div，可通过将 box-sizing 设置为 “border-box”。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript