2024年最全从零开始学WEB前端——CSS基础，腾讯3轮面试都问了Web前端事件分发

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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

border-style 属性指定要显示的边框类型。

允许以下值：

• dotted - 定义点线边框

• dashed - 定义虚线边框

• solid - 定义实线边框

• double - 定义双边框

• groove - 定义 3D 坡口边框。效果取决于 border-color 值

• ridge - 定义 3D 脊线边框。效果取决于 border-color 值

• inset - 定义 3D inset 边框。效果取决于 border-color 值

• outset - 定义 3D outset 边框。效果取决于 border-color 值

• none - 定义无边框

• hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

具体应用如下：

border-style 属性

此属性规定要显示的边框类型：

点状边框。

虚线边框。

实线边框。

双线边框。

凹槽边框。

垄状边框。

3D inset 边框。

3D outset 边框。

无边框。

隐藏边框。

混合边框。

标准文档流

以下参考千古壹号大佬

宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。

标准文档流的特性

（1）空白折叠现象：

无论多少个空格、换行、tab，都会折叠为一个空格。

比如，如果我们想让img标签之间没有空隙，必须紧密连接：

（2）高矮不齐，底边对齐：

举例如下：

（3）自动换行，一行写不满，换行写。

行内元素和块级元素

标准文档流等级森严。标签分为两种等级：

• 行内元素

• 块级元素

行内元素和块级元素的区别：（非常重要）

行内元素：

• 与其他行内元素并排；

• 不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

• 霸占一行，不能与其他任何元素并列；

• 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。

行内元素和块级元素的分类：

在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。

从HTML的角度来讲，标签分为：

• 文本级标签：p、span、a、b、i、u、em。

• 容器级标签：div、h系列、li、dt、dd。

PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

• 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。

• 块级元素：所有的容器级标签都是块级元素，还有p标签。

我们把上面的分类画一个图，即可一目了然：

行内元素和块级元素的相互转换

我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素可以转换为行内元素：

一旦，给一个块级元素（比如div）设置：

display: inline;

那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

• 此时这个div不能设置宽度、高度；

• 此时这个div可以和别人并排了。

举例如下：

行内元素转换为块级元素：

同样的道理，一旦给一个行内元素（比如span）设置：

display: block;

那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

• 此时这个span能够设置宽度、高度

• 此时这个span必须霸占一行了，别人无法和他并排

• 如果不设置宽度，将撑满父亲

举例如下：

标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

• （1）浮动

• （2）绝对定位

• （3）固定定位

浮动

浮动的性质

浮动是css里面布局用的最多的属性。

现在有两个div，分别设置宽高。我们知道，它们的效果如下：

此时，如果给这两个div增加一个浮动属性，比如float: left;，效果如下：

这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。

浮动想学好，一定要知道三个性质。接下来讲一讲。

性质1：浮动的元素脱标

脱标即脱离标准流。我们来看几个例子。

证明1：

上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个<div>标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个<div>还在自己的层面上遵从标准流进行排列。

证明2：

上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。

所以能够证明一件事：**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**所有标签，浮动之后，已经不区分行内、块级了。

性质2：浮动的元素互相贴靠

我们来看一个例子就明白了。

我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：

上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。

如果没有足够的空间靠着1号大哥，3号自己去贴左墙。

不过3号自己去贴墙的时候，注意：

上图显示，3号贴左墙的时候，并不会往1号里面挤。

同样，float还有一个属性值是right，这个和属性值left是对称的。

性质3：浮动的元素有“字围”效果

来看一张图就明白了。我们让div浮动，p不浮动。

上图中，我们发现：div挡住了p，但不会挡住p中的文字，形成“字围”效果。

总结：标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）

关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

性质4：收缩

收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。

举例如下：

上图中，div本身是块级元素，如果不设置width，它会单独霸占整行；但是，设置div浮动后，它会收缩

浮动的补充（做网站时注意）

上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：

浮动的清除

这里所说的清除浮动，指的是清除浮动与浮动之间的影响。

通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。

比如说一个网页有header、content、footer这三部分。就拿content部分来举例，如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。

从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。

下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下：

上面这个例子很简单。可如果我们给里面的<li>标签加浮动。效果却成了下面这个样子：

代码如下：

• 生命壹号1
• 生命壹号2
• 生命壹号3
• 生命壹号4
• 许嵩1
• 许嵩2
• 许嵩3
• 许嵩4

• 效果如下：

  

  上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。

  这便引出我们要讲的：清除浮动的第一种方式。

  那该怎么解决呢？

  方法1：给浮动元素的祖先元素加高度

  造成前言中这个现象的根本原因是：li的父亲div没有设置高度，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。

  撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。

  好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象：

  

  给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：

  

  总结：

  如果一个元素要浮动，那么它的祖先元素一定要有高度。

  有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）

  只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

  

  

  方法2：clear:both;

  网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法1，工作中用得很少。

  那么，能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

  这个时候，我们可以使用clear:both;这个属性。如下：

  

  clear:both;

  clear就是清除，both指的是左浮动、右浮动都要清除。clear:both的意思就是：不允许左侧和右侧有浮动对象。

  这种方法有一个非常大的、致命的问题，它所在的标签，margin属性失效了。读者可以试试看。

  margin失效的本质原因是：上图中的box1和box2，高度为零。

  方法3：隔墙法

  上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置clear: both;属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。

  我们看看例子效果就知道了：

  

  上图这个例子就是隔墙法。

  内墙法：

  近些年，有演化出了“内墙法”：

  

  上面这个图非常重要，当作内墙法的公式，先记下来。

  为了讲内墙法，我们先记住一句重要的话：一个父亲是不能被浮动的儿子撑出高度的。举例如下：

  （1）我们在一个div里放一个有宽高的p，效果如下：（很简单）

  

  （2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了：

  

  （3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度：

  

  于是，我们采用内墙法解决前言中的问题：

  

  与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。

  而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。

  方法4：overflow:hidden;

  我们可以使用如下属性：

  overflow:hidden;

  overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下：

  

  上图显示，overflow:hidden;的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：

  一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上overflow:hidden; 那么，父亲就能被儿子撑出高了。这是一个偏方。

  举个例子：

  

  那么对于前言中的例子，我们同样可以使用这一属性：

  

  案例

  ---

  恭喜看到这里的小伙伴，你超越了很多人了，虽然css的重点就在于选择器和各种标签属性，但是从中延伸出来的一系列知识点，可以直接把人劝退。如果不是有千古壹号大佬的开源项目，作者身为一个后端程序员绝对不可能把css讲透彻。

  现在和作者做一下作者初学时候写的案例，保证每个案例都十分的精髓。

  代码都在仓库里面，有需要的自取，记得给个star（不做白嫖党！）

  Github地址：https://github.com/SuZui-cn/my-web

  Gitee地址：https://gitee.com/north_gate/my-web

  三更灯火五更鸡，正是男儿读书时。

  黑发不知勤学早，白首方悔读书迟。

  ——颜真卿《劝学》

  案例01抖音风格字体

  先看效果

  pass：作者除了“su_zui”之外还有一个笔名“北落燕门”

  

  这里主要是设置基础的文本阴影效果，非常简单一行代码搞定。

  北落燕门

  案例02精灵图

  这个案例需要使用ps来完成，是一个体会精灵图的案例。

  当用户访问一个网站时，浏览器会向服务器发送一系列请求，比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。然而，一个网页中往往包含大量的图像资源（例如在页面中展示的图片、网页的背景图像以及一些装饰性的图像等），这就会导致浏览器频繁的请求服务器，大大降低网页的加载速度。为了有效的减少请求服务器的次数，提高页面加载的速度，就出现了 CSS Sprites 技术，也被称为精灵技术。

  简单来讲，精灵技术就是一种处理网页背景图像的方式，它需要将一个页面中涉及到的所有或一部分较小的背景图像合并到一张较大的图片中，然后再将这个图片应用到网页种。通常情况下，我们只是将背景图像中那些较小的、零碎的图像集中到一个大的图像中，这个较大的图像被称为精灵图（也被称为雪碧图）

  ——http://m.biancheng.net/css3/sprite.html

  精灵图使用教程：https://blog.csdn.net/sinat_34104446/article/details/83032762

  这里要提一句，要从事前端的同学需要有一点ps和墨刀的基础，这样可以准确的把美工制作的原型图的各个部分的具体像素量出来。

  我在仓库里放了学成网首页.psd有需要的同学可以自己设置做一下，配套的视频是黑马pink老师的前端教程，作者当时看到就是这套视频。

  黑马程序员pink老师前端入门教程：https://www.bilibili.com/video/BV14J4114768

  慕课网墨刀教程：https://www.imooc.com/learn/1310

  

  具体效果：

  

  代码：

  这里为了方便大家练习，我把精灵图的连接换成了图床链接

  图床其实是互联网中存储图片的空间，举个栗子：

  假设你在微博分享一张图片，你的粉丝可以通过互联网看到你分享的图片，那么他是去访问你的手机的相册吗？其实不是的，你分享图片，也就是把图片上传到微博的服务器，微博将为你生成一个独一无二的访问链接，这个链接指向的空间其实就是图床。

  欢迎使用CSS

  案例03绝对定位

  来自千古壹号大佬的案例

  绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。

  现在有如下两张图片素材：

  

  

  要求作出如下效果：

  

  代码实现如下：

  

  广东深圳宝安区建安一路海雅缤纷城4楼

  代码解释如下：

  • 为了显示“多套餐”那个小图，我们需要用到精灵图。

  • “多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。

  代码的效果如下：

  

  案例04固定定位

  顶部导航栏

  先上效果，当鼠标放置时小格子的背景颜色会变：

  
• 网页栏目
• 网页栏目
• 网页栏目
• 网页栏目
• 网页栏目
• 网页栏目
• 网页栏目
• 网页栏目
• 网页栏目
• 网页栏目

• 案例05伪类

  鼠标悬停显示和隐藏特效

  鼠标放置前

  

  鼠标放置之后

  

  伪类结合表格案例

  鼠标放置时对应行颜色变为灰色

  

  案例06跳动的心

  这个案例主要需要掌握如何用正方形的盒子做出爱心的图案（设置边框即可）

  作者当时做这个的时候使用了关键帧，做成了逐帧动画。

  这里有对应的B站视频：https://www.bilibili.com/video/BV1UE411h7Ez?from=search&seid=14832393251779908197&spm_id_from=333.337.0.0

  

  跳动的心

  案例07小米布局

  从这个案例开始都是仿照的真实的网站制作的静态页面，因为代码量较多，我就不放详细代码，只讲述制作的思路。

  效果图：

  

  制作思路：

  标准的DIV+CSS布局，右侧使用了固定定位。中间部分使用浮动制作。

  需要知道一个概念：版心

  “版心”（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。

  使用版心可以保证我们的内容都位于水平居中。

  /* 清除浏览器自带的8px边距 */

  • {

  margin: 0;

  padding: 0;

  }

  /* 版心 */

  .w {

  width: 1226px;

  margin: 0 auto;

  }

  

  案例08拼多多

  完全仿照当时的拼多多官网。标准的DIV+CSS布局。初学者大概两小时可以完成。

  

  案例09京东商城

  作者大一寒假学习的时候编写的，但是因为当时作者也是初学者所以很多细节做的不好，但是还是很有参考价值。

  

  

  

  总结

  =============================================================

  从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

  个人将这段时间所学的知识，分为三个阶段：

  第一阶段：HTML&CSS&JavaScript基础

  

  第二阶段:移动端开发技术

  

  第三阶段:前端常用框架

  

  • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

  • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。