DIV+CSS知识点总结

2023年6月21日发(作者：)

DIV+CSS知识点总结 DIV+CSS是Web设计标准，它是⼀种⽹页的布局⽅法。与传统中通过表格（table）布局定位的⽅式不同，它可以实现⽹页页⾯内容与表现相分离。1、描述⼀下浮动会造成什么影响。 我们知道，当⼀个元素浮动时，其周围的⽂字段落等会相应地环绕着它。这样浮动元素就会变成⼀座“孤岛”，周围的东西就会成为“⽔流”围绕着它。那么这时问题来了，我们往往希望浮动不要对周围原有的布局产⽣影响，想到的⽅法是利⽤clear来进⾏清除浮动，但是我们却会忘记clear只对块级元素有作⽤，所以经常会因为忽略这⼀点⽽导致清除浮动失败。2、简单说明绝对定位和浮动的区别和应⽤。 当⼀个元素使⽤绝对定位之后，它的位置将依据浏览器左上⾓开始计算或者相对于⽗容器（⽗容器使⽤相对定位）。绝对定位使元素脱离⽂档流，因此不占据空间。普通⽂档流中元素的布局就与绝对定位的元素不存在时⼀样，因为绝对定位的框与⽂档流⽆关，所以它们还是覆盖页⾯上的其他元素。 ⽽浮动元素的定位还是基于正常的⽂档流，然后从⽂档流中抽出并尽可能远的移动⾄左侧或者右侧，⽂字内容会围绕在浮动元素周围。当⼀个元素从正常⽂档流中抽出后，仍然在⽂档流中的其他元素将忽略该元素并填补原先的空间。它只是改变了⽂档流的显⽰，并没有脱离⽂档流，⼀个元素浮动或者绝对定位后，它将⾃动变成块级元素，⽽不论该元素本⾝是什么类型。3、CSS引⼊的⽅式有哪些，都有什么区别。 1）在head部分加⼊：，引⼊外部的css⽂件。 这种⽅法是⽬前使⽤最多的，它不仅最能体现css的特点，⽽且也能体现DIV+CSS中的内容与现实分离的思想，改版代码容易，代码美观。 2）在head部分加⼊ 这种⽅法的使⽤情况要少得多，最常见的就是访问⼤量的门户⽹站，或者访问量较⼤的企业⽹站的⾸页。与第⼀种⽅法⽐起来，这种⽅法有点突出，弊端也明显。优点：速度快，所以测CSS控制都是针对本页⾯标签的，没有多余的CSS命令，其次不⽤外链CSS⽂件，直接在HTML⽂档中读取样式。缺点：改版⿇烦，单个页⾯会显得⽐较臃肿，CSS不能被其他页⾯应⽤，造成代码量相对较多，维护也⿇烦。对它们来说，⽤户量是关键，他们需要⼤量⼈员进⾏复杂的维护⼯作。 3）直接在页⾯的标签中添加：

。 这种⽅法⽤得⽐较少，⼀般情况下，HTML⾥⾯不能出现CSS命令。这种⽅法的通⽤性较差，效果特殊，使⽤CSS命令较少，并且不常改动的地⽅，使⽤这种⽅法反⽽是很好的选择。 4）@import ulr() ，使⽤⽅法：4、在书写⾼效CSS⽂件时，需要考虑哪些问题 1）不影响页⾯的布局。 2）去掉不必要的样式。 3）合并相同的样式。 4）尽可能缩⼩样式的⼤⼩。5、CSS层叠是什么 CSS层叠指的是样式的优先级，当产⽣冲突的时候以优先级⾼的为准。 1）开发者样式>读者样式>浏览器样式（除⾮使⽤！important标记）。 2）id选择符>(伪)类选择符>元素选择符。 3）权重相同时，取后⾯定义的样式。6、如何理解HTML的语义化，是否解除或者了解重构 根据内容的结构化（内容语义化），选择合适的标签（代码语义化），不仅便于开发者阅读和写出更优雅的代码，⽽且能够让浏览器的爬⾍和机器很好地解析。 当系统发展到⼀定阶段后，使⽤从重构的⽅式，不改变系统的外部功能，针对内部的结构进⾏重新的整理。通过重构，不断地调整系统的结构，使系统对于需求的变更始终具有较强的适应能⼒。7、如何区别CSS中的display:none和visibility:hidden 1）display:none 视为不存在，且不加载 使⽤这个属性之后，HTML元素的宽度、⾼度等各种属性值都将“丢失”。 2）visibility:hidden 表⽰隐藏，但在浏览器保留位置 使⽤这个属性之后，HTML元素仅仅是在视觉上看不见（完全透明），⽽它所占据的空间位置仍然存在，也就是说它仍然具有⾼度、宽度等属性值。8、标签上alt和title属性的区别 alt是给搜索引擎识别时，在图像⽆法显⽰说的替代⽂本； title是关于元素的注释信息，主要是给⽤户 解读的。当⿏标放到⽂字上或者图⽚上时，有title⽂字显⽰。9、em为什么可以缩放，以什么为标准 ⼀个em表⽰⼀种特殊字体的⼤写字母M的⾼度。 在⽹页上，⼀个em是⽹页浏览器的基础⽂本尺⼨的⾼度，⼀般情况下是16px，但是，任何⼈都可以改变这个基础尺⼨的设置。因此，⼀个em对于有的⼈来说可能是16px，有可能是24px。换句话来说，em是⼀个相对的度量单位。10、为什么利⽤多个域名来存储⽹站资源会更有效 CDN缓存更⽅便；突破浏览器并发限制；节约cookie带宽；节约主域名的连接数，优化页⾯响应速度；防⽌不必要的安全问题。11、⽹页设计采⽤div+css的优缺点优点:⼤⼤缩减页⾯代码 因为采⽤CSS布局，不象表格布局充满各种各样的属性和数字，⽽且很多css⽂件通常是共⽤的，从⽽⼤⼤缩减页⾯代码，提⾼页⾯浏览速度。对搜索引擎更加友好，获得更好的⽹站排名 结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和⼀些SEO处理，可以获得更好的⽹站排名。兼容性更好 兼容性更好，符合web标准规范的发展趋势，可以在⼏乎所有的浏览器上都可以使⽤，不会出现在不同的浏览器中效果差距很⼤的情况。缩短改版时间 因为⽹站的布局都是通过外部的css⽂件来控制，只要简单的修改⼏个CSS⽂件就可以将许多⽹页的风格格式同时更新，不⽤再⼀页⼀页地更新了。你可以将站点上所有的⽹页风格都使⽤⼀个CSS⽂件进⾏控制，只要修改这个CSS⽂件中相应的⾏，那么整个站点的所有页⾯都会随之发⽣变动。强⼤的字体控制和排版能⼒

CSS控制字体的能⼒⽐糟糕的FONT标签好多了，CSS不再需要⽤FONT标签或者透明的1px图⽚来控制标题、改变字体颜⾊、字体样式等等。提⾼易⽤性 使⽤CSS可以结构化HTML，例如：p标签只⽤来控制段落，h1-h6标签只⽤来控制标题，table标签只⽤来表现格式化的数据等等。你可以增加更多的⽤户⽽不需要建⽴独⽴的版本。更好的扩展性 你的设计不仅仅⽤于web浏览器，也可以发布在其他设备上，⽐如PowerPoint等。更灵活控制页⾯布局 通常页⾯的下载是按照代码的排列顺序，⽽表格布局代码的排列代表从上向下，从左到右，⽆法改变。⽽通过CSS控制，您可以任意改变代码的排列顺序，⽐如将重要的右边内容先加载出来。表现和内容相分离 将设计部分剥离出来放在⼀个独⽴样式⽂件中，⽽⽹页主要来放置您的内容，你可以减少未来⽹页⽆效的可能。缺点：CSS⽹站制作的设计元素通常放在1个外部⽂件中，或⼏个⽂件，有可能相当复杂，甚⾄⽐较庞⼤，如果CSS⽂件调⽤出现异常，那么整个⽹站将变得惨不忍睹。DIV+CSS尽管不是⾼不可及，但⾄少要⽐表格定位复杂的多，即使对于⽹站设计⾼⼿也很容易出现问题，更不要说初学者了。虽然说DIV+CSS解决了⼤部分浏览器兼容问题，但是也有在部分浏览器中使⽤出现异常，⽐如⽕狐浏览器，在IE中显⽰正常的页⾯，到了⽕狐浏览器中可能会⾯⽬全⾮。当然这应该是浏览器的问题，但是可以说在⽬前来看，DIV+CSS还没有实现所有浏览器的统⼀兼容。DIV+CSS对搜索引擎优化与否,取决于⽹页设计的专业⽔平,⽽不是DIV+CSS本⾝。DIV+CSS⽹页设计并不能保证⽹页对搜索引擎的优化，甚⾄不能保证⼀定⽐HTML⽹站有更简洁的代码设计，何况搜索引擎对于⽹页的收录和排序显然不是以是否采⽤表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的⽹站在搜索结果中的排序靠前，⽽很多使⽤CSS及web标准制作的⽹页排名依然靠后的原因。因为对于搜索引擎⽽⾔，⽹站结构、内容、相关⽹站链接等因素始终是⽹站优化最重要的指标。12、谈谈CSS Sprites技术的优缺点 1）优点利⽤CSS Sprites能很好地减少⽹页的http请求，从⽽⼤⼤提⾼了页⾯的性能，这也是CSS Sprites最⼤的优点，也是其被⼴泛传播和应⽤的主要原因。CSS Sprites能减少图⽚的字节，⽐如说把3张图⽚合并成1张图⽚的字节总是⼩于这3张图⽚的字节总和。 2）缺点在图⽚合并时，要把多张图⽚有序的、合理的合并成⼀张图⽚，还要留好⾜够的空间，防⽌板块内出现不必要的背景。还有⼀个最⼤的问题，在宽屏以及⾼分辨率的屏幕下的⾃适应页⾯，如果宽度不够宽，很容易出现背景破裂。CSS Sprites在开发时⽐较⿇烦，要通过Photoshop或其他⼯具测量计算每⼀个背景单元的精确位置，这是⼀个“针线活”，没什么难度，但是很烦琐。CSS Sprites维护时⽐较⿇烦，如果页⾯背景有少许改动，⼀般就要改这张合并的图⽚，所以⽆需修改的地⽅最好不要动，这样避免改动更多的CSS。如果在原来的地⽅放不下，那么只能往下加图⽚，此时图⽚的字节就要增加，⽽且还要改动CSS。13、 css 布局中的 BFC BFC就是“块级格式化上下⽂”的意思，创建了 BFC的元素就是⼀个独⽴的盒⼦，不过只有Block-level box可以参与创建

BFC， 它规定了内部的Block-levelBox如何布局，并且与这个独⽴盒⼦⾥的布局不受外部影响，当然它也不会影响到外⾯的元素。

内部的Box会在垂直⽅向，从顶部开始⼀个接⼀个地放置。Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的

margin会发⽣叠加 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box叠加。 BFC就是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然。 计算BFC的⾼度时，浮动元素也参与计算。14、置换元素和不可替换元素 1) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显⽰内容。

例如：浏览器会根据标签的src属性的 值来读取图⽚信息并显⽰出来，⽽如果查看(x)html代码，则看不到图⽚的实际内容；标签的type属性来决定是显⽰输⼊ 框，还是单选按钮等。 (x)html中 的、、、<select>、<object> 都是置换元素。这些元素往往没有实际的内容，即是⼀个空元素。置换元素在其显⽰中⽣成了框，这也就是有的内联元素能够设置宽⾼的原因。 2) 不可替换元素：(x)html 的⼤多数元素是不可替换元素，即其内容直接表现给⽤户端（如浏览器）。例如： <label>label中的内容</label> 标签<label>是⼀个⾮置换元素，⽂字label中的内容”将全被显⽰。</p><p><p></p></img></p><p>2023年6月21日发(作者：)</p><p></p><p></img></p><p>DIV+CSS知识点总结 DIV+CSS是Web设计标准，它是⼀种⽹页的布局⽅法。与传统中通过表格（table）布局定位的⽅式不同，它可以实现⽹页页⾯内容与表现相分离。1、描述⼀下浮动会造成什么影响。 我们知道，当⼀个元素浮动时，其周围的⽂字段落等会相应地环绕着它。这样浮动元素就会变成⼀座“孤岛”，周围的东西就会成为“⽔流”围绕着它。那么这时问题来了，我们往往希望浮动不要对周围原有的布局产⽣影响，想到的⽅法是利⽤clear来进⾏清除浮动，但是我们却会忘记clear只对块级元素有作⽤，所以经常会因为忽略这⼀点⽽导致清除浮动失败。2、简单说明绝对定位和浮动的区别和应⽤。 当⼀个元素使⽤绝对定位之后，它的位置将依据浏览器左上⾓开始计算或者相对于⽗容器（⽗容器使⽤相对定位）。绝对定位使元素脱离⽂档流，因此不占据空间。普通⽂档流中元素的布局就与绝对定位的元素不存在时⼀样，因为绝对定位的框与⽂档流⽆关，所以它们还是覆盖页⾯上的其他元素。 ⽽浮动元素的定位还是基于正常的⽂档流，然后从⽂档流中抽出并尽可能远的移动⾄左侧或者右侧，⽂字内容会围绕在浮动元素周围。当⼀个元素从正常⽂档流中抽出后，仍然在⽂档流中的其他元素将忽略该元素并填补原先的空间。它只是改变了⽂档流的显⽰，并没有脱离⽂档流，⼀个元素浮动或者绝对定位后，它将⾃动变成块级元素，⽽不论该元素本⾝是什么类型。3、CSS引⼊的⽅式有哪些，都有什么区别。 1）在head部分加⼊：<link rel="stylesheet stype="text/css" href=""/>，引⼊外部的css⽂件。 这种⽅法是⽬前使⽤最多的，它不仅最能体现css的特点，⽽且也能体现DIV+CSS中的内容与现实分离的思想，改版代码容易，代码美观。 2）在head部分加⼊<style text=""></style> 这种⽅法的使⽤情况要少得多，最常见的就是访问⼤量的门户⽹站，或者访问量较⼤的企业⽹站的⾸页。与第⼀种⽅法⽐起来，这种⽅法有点突出，弊端也明显。优点：速度快，所以测CSS控制都是针对本页⾯标签的，没有多余的CSS命令，其次不⽤外链CSS⽂件，直接在HTML⽂档中读取样式。缺点：改版⿇烦，单个页⾯会显得⽐较臃肿，CSS不能被其他页⾯应⽤，造成代码量相对较多，维护也⿇烦。对它们来说，⽤户量是关键，他们需要⼤量⼈员进⾏复杂的维护⼯作。 3）直接在页⾯的标签中添加：<div style=""></div>。 这种⽅法⽤得⽐较少，⼀般情况下，HTML⾥⾯不能出现CSS命令。这种⽅法的通⽤性较差，效果特殊，使⽤CSS命令较少，并且不常改动的地⽅，使⽤这种⽅法反⽽是很好的选择。 4）@import ulr() ，使⽤⽅法：<style type="test/css"> @import uel();</style>4、在书写⾼效CSS⽂件时，需要考虑哪些问题 1）不影响页⾯的布局。 2）去掉不必要的样式。 3）合并相同的样式。 4）尽可能缩⼩样式的⼤⼩。5、CSS层叠是什么 CSS层叠指的是样式的优先级，当产⽣冲突的时候以优先级⾼的为准。 1）开发者样式>读者样式>浏览器样式（除⾮使⽤！important标记）。 2）id选择符>(伪)类选择符>元素选择符。 3）权重相同时，取后⾯定义的样式。6、如何理解HTML的语义化，是否解除或者了解重构 根据内容的结构化（内容语义化），选择合适的标签（代码语义化），不仅便于开发者阅读和写出更优雅的代码，⽽且能够让浏览器的爬⾍和机器很好地解析。 当系统发展到⼀定阶段后，使⽤从重构的⽅式，不改变系统的外部功能，针对内部的结构进⾏重新的整理。通过重构，不断地调整系统的结构，使系统对于需求的变更始终具有较强的适应能⼒。7、如何区别CSS中的display:none和visibility:hidden 1）display:none 视为不存在，且不加载 使⽤这个属性之后，HTML元素的宽度、⾼度等各种属性值都将“丢失”。 2）visibility:hidden 表⽰隐藏，但在浏览器保留位置 使⽤这个属性之后，HTML元素仅仅是在视觉上看不见（完全透明），⽽它所占据的空间位置仍然存在，也就是说它仍然具有⾼度、宽度等属性值。8、标签上alt和title属性的区别 alt是给搜索引擎识别时，在图像⽆法显⽰说的替代⽂本； title是关于元素的注释信息，主要是给⽤户 解读的。当⿏标放到⽂字上或者图⽚上时，有title⽂字显⽰。9、em为什么可以缩放，以什么为标准 ⼀个em表⽰⼀种特殊字体的⼤写字母M的⾼度。 在⽹页上，⼀个em是⽹页浏览器的基础⽂本尺⼨的⾼度，⼀般情况下是16px，但是，任何⼈都可以改变这个基础尺⼨的设置。因此，⼀个em对于有的⼈来说可能是16px，有可能是24px。换句话来说，em是⼀个相对的度量单位。10、为什么利⽤多个域名来存储⽹站资源会更有效 CDN缓存更⽅便；突破浏览器并发限制；节约cookie带宽；节约主域名的连接数，优化页⾯响应速度；防⽌不必要的安全问题。11、⽹页设计采⽤div+css的优缺点优点:⼤⼤缩减页⾯代码 因为采⽤CSS布局，不象表格布局充满各种各样的属性和数字，⽽且很多css⽂件通常是共⽤的，从⽽⼤⼤缩减页⾯代码，提⾼页⾯浏览速度。对搜索引擎更加友好，获得更好的⽹站排名 结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和⼀些SEO处理，可以获得更好的⽹站排名。兼容性更好 兼容性更好，符合web标准规范的发展趋势，可以在⼏乎所有的浏览器上都可以使⽤，不会出现在不同的浏览器中效果差距很⼤的情况。缩短改版时间 因为⽹站的布局都是通过外部的css⽂件来控制，只要简单的修改⼏个CSS⽂件就可以将许多⽹页的风格格式同时更新，不⽤再⼀页⼀页地更新了。你可以将站点上所有的⽹页风格都使⽤⼀个CSS⽂件进⾏控制，只要修改这个CSS⽂件中相应的⾏，那么整个站点的所有页⾯都会随之发⽣变动。强⼤的字体控制和排版能⼒ </p><p> CSS控制字体的能⼒⽐糟糕的FONT标签好多了，CSS不再需要⽤FONT标签或者透明的1px图⽚来控制标题、改变字体颜⾊、字体样式等等。提⾼易⽤性 使⽤CSS可以结构化HTML，例如：p标签只⽤来控制段落，h1-h6标签只⽤来控制标题，table标签只⽤来表现格式化的数据等等。你可以增加更多的⽤户⽽不需要建⽴独⽴的版本。更好的扩展性 你的设计不仅仅⽤于web浏览器，也可以发布在其他设备上，⽐如PowerPoint等。更灵活控制页⾯布局 通常页⾯的下载是按照代码的排列顺序，⽽表格布局代码的排列代表从上向下，从左到右，⽆法改变。⽽通过CSS控制，您可以任意改变代码的排列顺序，⽐如将重要的右边内容先加载出来。表现和内容相分离 将设计部分剥离出来放在⼀个独⽴样式⽂件中，⽽⽹页主要来放置您的内容，你可以减少未来⽹页⽆效的可能。缺点：CSS⽹站制作的设计元素通常放在1个外部⽂件中，或⼏个⽂件，有可能相当复杂，甚⾄⽐较庞⼤，如果CSS⽂件调⽤出现异常，那么整个⽹站将变得惨不忍睹。DIV+CSS尽管不是⾼不可及，但⾄少要⽐表格定位复杂的多，即使对于⽹站设计⾼⼿也很容易出现问题，更不要说初学者了。虽然说DIV+CSS解决了⼤部分浏览器兼容问题，但是也有在部分浏览器中使⽤出现异常，⽐如⽕狐浏览器，在IE中显⽰正常的页⾯，到了⽕狐浏览器中可能会⾯⽬全⾮。当然这应该是浏览器的问题，但是可以说在⽬前来看，DIV+CSS还没有实现所有浏览器的统⼀兼容。DIV+CSS对搜索引擎优化与否,取决于⽹页设计的专业⽔平,⽽不是DIV+CSS本⾝。DIV+CSS⽹页设计并不能保证⽹页对搜索引擎的优化，甚⾄不能保证⼀定⽐HTML⽹站有更简洁的代码设计，何况搜索引擎对于⽹页的收录和排序显然不是以是否采⽤表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的⽹站在搜索结果中的排序靠前，⽽很多使⽤CSS及web标准制作的⽹页排名依然靠后的原因。因为对于搜索引擎⽽⾔，⽹站结构、内容、相关⽹站链接等因素始终是⽹站优化最重要的指标。12、谈谈CSS Sprites技术的优缺点 1）优点利⽤CSS Sprites能很好地减少⽹页的http请求，从⽽⼤⼤提⾼了页⾯的性能，这也是CSS Sprites最⼤的优点，也是其被⼴泛传播和应⽤的主要原因。CSS Sprites能减少图⽚的字节，⽐如说把3张图⽚合并成1张图⽚的字节总是⼩于这3张图⽚的字节总和。 2）缺点在图⽚合并时，要把多张图⽚有序的、合理的合并成⼀张图⽚，还要留好⾜够的空间，防⽌板块内出现不必要的背景。还有⼀个最⼤的问题，在宽屏以及⾼分辨率的屏幕下的⾃适应页⾯，如果宽度不够宽，很容易出现背景破裂。CSS Sprites在开发时⽐较⿇烦，要通过Photoshop或其他⼯具测量计算每⼀个背景单元的精确位置，这是⼀个“针线活”，没什么难度，但是很烦琐。CSS Sprites维护时⽐较⿇烦，如果页⾯背景有少许改动，⼀般就要改这张合并的图⽚，所以⽆需修改的地⽅最好不要动，这样避免改动更多的CSS。如果在原来的地⽅放不下，那么只能往下加图⽚，此时图⽚的字节就要增加，⽽且还要改动CSS。13、 css 布局中的 BFC BFC就是“块级格式化上下⽂”的意思，创建了 BFC的元素就是⼀个独⽴的盒⼦，不过只有Block-level box可以参与创建 </p><p>BFC， 它规定了内部的Block-levelBox如何布局，并且与这个独⽴盒⼦⾥的布局不受外部影响，当然它也不会影响到外⾯的元素。 </p><p> </p><p>内部的Box会在垂直⽅向，从顶部开始⼀个接⼀个地放置。Box垂直⽅向的距离由margin决定。属于同⼀个BFC的两个相邻Box的 </p><p>margin会发⽣叠加 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box叠加。 BFC就是页⾯上的⼀个隔离的独⽴容器，容器⾥⾯的⼦元素不会影响到外⾯的元素，反之亦然。 计算BFC的⾼度时，浮动元素也参与计算。14、置换元素和不可替换元素 1) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显⽰内容。 </p><p> 例如：浏览器会根据<img>标签的src属性的 值来读取图⽚信息并显⽰出来，⽽如果查看(x)html代码，则看不到图⽚的实际内容；<input>标签的type属性来决定是显⽰输⼊ 框，还是单选按钮等。 (x)html中 的<img>、<input>、<textarea>、<select>、<object> 都是置换元素。这些元素往往没有实际的内容，即是⼀个空元素。置换元素在其显⽰中⽣成了框，这也就是有的内联元素能够设置宽⾼的原因。 2) 不可替换元素：(x)html 的⼤多数元素是不可替换元素，即其内容直接表现给⽤户端（如浏览器）。例如： <label>label中的内容</label> 标签<label>是⼀个⾮置换元素，⽂字label中的内容”将全被显⽰。</p><p><p></p></img></p></div></article></div><div class="torson info"><div><span>本文发布于:2023-06-21，感谢您对本站的认可！</span></div><div><span>本文链接:</span><a href="http://torson.com.cn/news/1687278174a963.html" title="DIV+CSS知识点总结">http://torson.com.cn/news/1687278174a963.html</a></div><div><span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div></div><span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="/tag/6.html" target="_blank">css加载失败</a></span></div><div class="torson post_comments" id="comments"><div id="comt-respond" class="commentpost"><h4>发布评论 <span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4><form action="/comment/create/963.html?safe_token=MKu_2FeuMmqWAaJOBpDaO10uF_2FqXk2GfWZKoT_2Fgq_2Fv_2Bnq1g2loYyu2x_2Fk6Z7ONokARH1J8w6L_2FDUzdxmkMzBPIDQ_3D_3D" method="post" name="saypl" id="frmSumbit"><input type="hidden" name="doctype" value="1" /><input type="hidden" name="quotepid" value="0" /><div id="comment-tools"><div class="torson tools_text"><textarea placeholder="请在这里留言..." name="message" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5">