彻底弄懂CSS盒子模式之三

2024-04-27 11:38

文章标签 模式 css frontend 盒子弄懂彻底之三

本文主要是介绍彻底弄懂CSS盒子模式之三，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

导读：

彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)

1.彻底弄懂CSS盒子模式一(DIV排版快速入门)
2.彻底弄懂CSS盒子模式二(导航栏实例)
3.彻底弄懂CSS盒子模式四(绝对定位和相对定位)

一、下面请看float的精彩表演，有请。
大家好,我是float,欢迎访问CSS家族,在CSS家族中,在当今CSS排版流行的年代,我可扮演着重要的角色哦。因为我的工作对网页设计人员很有用，就像之前align帮助你们定位网页元素一样重要，但是我的功能似乎比align强多了。接下来我将现场给你演示我的绝活，看细心点哦。当然也许我一下子不能把我所有的技巧给大家演示，因为有些技巧本人也许一下子记不起来了，那就请那些对我比较了解的人来帮我补充补充啰，比如版主等等啊。

先讲一下我主要的工作，我主要是帮助对像在网页中对齐的，一旦我发出float:left或float:right命令，被我浮动的对像就会向左或向右移动直到遇到边框( border) 、填充( padding）、边界( margin ）或者另一个块对象的边缘为止，当然也有一些看起来较特殊的情况，比如被我浮动的元素设置了一个负边界（margin）的时候。我还可以让文字流环绕在被我浮动的对像周围,这也是我的特色。另外要注意的一点是，最好给浮动对象设置一下宽度，不然会出现一些意想不到的麻烦。我主要浮动类型有两种,它们是float:left和float:right,当然我还有一个功能是float:none,不过float:none比较少用，这也是我的默认值，有时也是很有用的，我等一下会讲的。下面我开始表演了,我的舞台可以是IE(Internet Explorer),或者FF(Firefox),但是有些技巧我一定要在标准的舞台中,如FF中才能表出来做的,请注意看我的说明,不然你用IE是看不到效果的。

1.我不动声色（我的属性不设置的时候），即：float:none,或者样式中不写这一项时，网页中的元素将按照它们自身的出现方式排列，一般是靠边对齐，先出现的排在前边,下面运行框是DIV先出现，P后出现，所以P排在DIV后面，注意看DIV的右边还有很多空间，但是P的文字不会跟在它的右边去。看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>不设浮动属性的情况</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div id="box">我现在没有浮动</div> <br><p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2.我向盒子发出float:left命令，此时盒子浮动到左边，虽然看起来我的位置与上面例子没有什么变化，但此时跟在我后面的文本可以环绕到浮动盒子的右边了，看下面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>对象左浮动</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div id="box">我现在左浮动（float:left）</div> <br><p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

哈哈，看我表演了几项是不是开始觉得有点烦了，那么简单无聊的，那下面就给你表演几项特别的，但愿你不是IE的崇拜者，因为下面效果你用IE是看不到效果的，请用像FF那样的标准浏览器来运行代码框或测试吧。

4．浮动对象有负边界的情况，这时浮动对象可能会漂浮到其所在父对象外边去，这有点像绝对定位的效果，但又与绝对定位不同，它还能影响它所在地方的文本流，请用标准浏览器FF看下面代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>浮动对象有负边界的情况[请用标准浏览器查看]</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div id="box"> <br> <div id="box2">margin-top:-15px</div> <br>右上方小盒子边界是margin:-10px 10px 0px 0px;，folat:right，这个效果还可以吧，这可不是用相对、或者绝对定位做出来的哦，部分文字还是有环绕效果。如果在上面小盒子输标题，在这大盒子内部输内容，这种类型的网页版面效果还可以的，大家可以举一反三，多做出另外类似的效果来。</div> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

5．如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性，子盒子漂浮后不会影响到父盒子的宽度，子盒子超出父盒子的部分会越到父盒子外面，但越出父盒子外的部分不会引起外边文本流的移动，而会直接覆盖在外边文字上面的，请用标准浏览器FF看下面代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>子级元素宽大于父级元素宽的情况[请用标准浏览器查看]</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div id="box">我现在左浮动（float:left），我的宽小于子盒子，但它不会把我撑开，同时我设置了一定的左边界，目的是方便看到子盒子越出去的情况 <br> <div id="box2">我是子盒子，我的宽比父级要大，同时我的浮动是folat:right,所以右边靠在父级盒子的右边，而宽于父盒子的部分在大盒子左边越出。</div> <br></div> <br><p>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。</p> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

6．如果父盒子不设定高度或者高度为自动，而其子盒子设定了浮动，并且高度超过了父盒子，在标准浏览器中，父盒子高度是不能自适高度，但是这种高度自适应常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内，浮动子盒子后边加入以下代码：

清除掉那个小盒子的浮动。请自行把代码中我注释部分消除注释再看效果，现在是没有自适应的情况，请用标准浏览器FF预览和测试代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>高度不能自适应[请用标准浏览器查看]</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div class="box">我是父盒子,我的高没有设定,但是我的子盒子高过我时,在标准浏览器中我的高不能自适应。 <br> <div class="box2"> <br>这个盒子是小盒子，它没有设定高度属性，其高度是随里面的文字的加多而自动升高的，但是当它的高度超过父级盒子时，在标准浏览器中并没有把父级撑高，这种情况与上面讲的子级宽度超过父级元素是一样的，但是这种高度自适度常是我们需要的，如何做到让高度自适应呢，常见的办法是在父级内加入以下样式：<div style="clear:both"></div>清除掉与其同级小盒子的浮动。 <br> </div> <br> <br></div> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

7.下面这个例子很重要，可以说明浮动元素的很多特性，大家运行代码框后再手动调整浏览器窗口大小，看版面有什么变化，下面我给你解释常见的问题和技巧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>理解浮动的一些特性</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div class="box"></div> <br>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， <br><div class="box"></div> <br>CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料； <br><div class="box"></div> <br>边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是， <br><div class="box"></div> <br>现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。 <br><div class="box"></div> <br>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， <br><div class="box"></div> <br>CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料； <br><div class="box"></div> <br>边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是， <br><div class="box"></div> <br>现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。 <br><div class="box"></div> <br><div style="clear:both"></div> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（1）在一个盒子内的浮动对像左右浮动时，它的左右边界不一定就会靠在父对象的内补白上或边框上，上面9个盒子都是左浮动的，但在窗口最大化的情况下，只有第一个盒子和最后一个盒子的左边界靠在父盒子左边内侧。
（2）浮动对象之间不会重叠。上面有讲到浮动对像越出外边去的情况，那么一个浮动盒子又会不会越到另一个浮动对象上面去呢，实质上它们是不会重叠的，即使用了负边界看起来像重叠在一起。
（3）并排的同一浮动方向的对像在一行中放不下时，可以自动换行。大家在浏览下面代码时，改变一下浏览器窗口，就会看到我所说的情况。
（4）浮动盒子在本文流中出现的位置会影响它的水平浮动位置，就像下面运行框效果，那些盒子并不是紧跟着一起出现的，之间有文本存在，所以结果造成所有等高的盒子并不是同一直线排列出现，而变成有一定的梯度。如果两个盒子之间文本流区块高度大于前边浮动元素高度时，紧接着的同一浮动方向的对象将会被自动换行显示。在下面实例中，如果调整浏览器窗口尽量小时，所有盒子可能会出现全部靠在父盒子左边的情况，因为缩小浏览器同时，盒子右边的文本流高度随之增高。

可见不要小看我浮动，熟练掌握我将会给你排版带来很多意想不到效果哦。

8．再讲一则注意事项，在开始时我不是有说过要给浮动对象设定一个宽度的，不然会有意想不到结果，即没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。请大家自行修改下面代码我注释前边的宽（只能删其中一个），测试看看效果就知道怎么回事了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>要给浮动元素一个宽度，不然盒子在没有内容情况下宽度将趋向0</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div class="box"></div> <br><div class="box2"></div> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二、下面我要请我的好伙伴clear出场给你们讲讲它的故事，有请。
大家好，我是clear，能见到如此多人捧场我感到无比的荣幸，虽然在各位网页设计工作中我的作用常常被忽略，但我也有些作用是没有人能替代的，下面我将讲几项我实用作用以激发大家对我的兴趣：
1．如果你想一段文本流两边可以出现浮动对像的话，你可以用clear:none，看下面效果，蓝色背景段落两边的盒子是浮动的哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>让对象两边都有浮动对象存在</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div class="box1"></div> <br><p>　　如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。 <br>理解CSS盒子模型 <br>什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 <br>CSS盒子模式 <br></p> <br><div class="box2"></div> <br><p id="clearF">　　这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。 <br></p> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2．如果你要为一个网页准备一个页脚区块，比如

，你在设计网页的时候，你想不管你前边怎么浮动排版而又不想这个页脚跟上去，让它一直保持在前边内容后边，而且还是换行独立显示的，那么给这个页脚区块样式加个clear:both吧。
3．我还可以快速清除网页中具有浮动属性的不同对像的浮动，如果有很多的话，我的作用更能发挥出来，当然你也可以一条一条样式去删掉浮动的样式，但我肯定这样没有我来的方便，下面效果中，没有清除浮动前是横排的，但是清除后变成纵排（举此例只为说明问题，不管这实例实不实用），请自己删掉我的注释部分进行前后对比。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>用clear快速清除所有对像浮动</title> <br><style type="text/css"> <br> <br></style> <br></head> <br><body> <br><div class="box1">我原来位置是[横排]的</div> <br><div class="box2">我原来位置是[横排]的</div> <br><div class="box3">我原来位置是[横排]的</div> <br><div class="box4">我原来位置是[横排]的</div> <br><div class="box5">我原来位置是[横排]的</div> <br><div class="box2">我原来位置是[横排]的</div> <br><div class="box3">我原来位置是[横排]的</div> <br><div class="box4">我原来位置是[横排]的</div> <br><div class="box5">我原来位置是[横排]的</div> <br></body> <br></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

好了，我的介绍到此完毕，各位还满意吗？有什么不满意可以提出来哦。你的意见就像一面镜子，它可以让我很清楚地发现自己的不足，然后改进它。

本文转自
http://www.webjx.com/htmldata/2007-04-02/1175497154.html

这篇关于彻底弄懂CSS盒子模式之三的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

http://www.chinasem.cn/article/940403。 23002807@qq.com

相关文章

一篇文章彻底搞懂macOS如何决定java环境

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面：本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一：使用 which命令方法二：使用 Java_home工具（Apple 官方推荐）那问题来了，

阅读更多...

vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

阅读更多...

Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多

阅读更多...

前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码

阅读更多...

通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter

阅读更多...

Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

阅读更多...

JS纯前端实现浏览器语音播报、朗读功能的完整代码

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面：本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本：① 语音自选参数，按钮控制语音：② 效果图：二、朗读多条文本：① 语音有默认值：②

阅读更多...

vue监听属性watch的用法及使用场景详解

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,：本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

阅读更多...

前端导出Excel文件出现乱码或文件损坏问题的解决办法

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,：本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1：直接下载（推荐）方案 2：手动构造

阅读更多...

Vue实现路由守卫的示例代码

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫（Navigation Guards）本质上就是在路

阅读更多...