Html_Css问答集(9)

最新推荐文章于 2024-08-12 16:19:20 发布

dzweather

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量975

点赞数 20

分类专栏： htmcsjs 文章标签： html css 前端

本文链接：https://blog.csdn.net/dzweather/article/details/140467490

版权

htmcsjs 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

57、clear:both本质上是做什么？对父元素，兄弟、子元素有什么影响？

clear属性用于控制一个元素两侧不能出现浮动元素,

本质上,clear属性可以看作是在元素前面或后面添加了一个"清除区域",不允许该区域内有浮动元素存在。根据值的不同,可以分别控制左侧、右侧或两侧是否有清除效果。

对于clear:both,它的作用是:在该元素之前和之后都不能有浮动元素。具体来说,clear:both对父元素、兄弟元素和子元素有以下影响:

   父元素:
       给父元素设置clear:both通常没有实际效果,因为父元素内不会有其他元素"浮动"到它上面或下面。
       但如果子元素是浮动的,而父元素没有设置高度或触发BFC,则子元素设置clear:both可以使父元素扩展高度,避免出现高度塌陷的情况。

   兄弟元素:
       如果之前的兄弟元素是浮动的,则该元素会在上面增加一个清除区域,避免被前面的浮动元素覆盖。
       如果之后的兄弟元素是浮动的,则该元素会在下面增加一个清除区域,避免被后面的浮动元素覆盖。

       清除区域(clearing area)的意思是,设置了clear:both的元素上方和下方都增加了一个不允许有浮动元素存在的"区域"。


   子元素:
       子元素设置clear:both对子元素本身没有影响。

   总的来说,clear:both最常见的作用是用于清除浮动元素对其他元素产生的影响,比如元素被不小心覆盖了、父元素高度塌陷等。通过在合适的元素上设置clear:both,可以使布局更加规范、可控。

当然,现在一般建议使用其他清除浮动的方式,比如给父元素设置overflow:auto触发BFC、添加空的伪元素等,而不是直接使用clear属性。但理解clear属性的工作原理,有助于更好地掌握CSS布局。

58、overflow:hidden与clear:both在解决塌陷时有区别吗？

有区别！

overflow:hidden
当应用于父元素时,overflow:hidden可以创建一个新的BFC(Block Formatting Context),这个BFC会根据浮动子元素的高度自动扩展父元素的高度,从而避免高度塌陷。

overflow:hidden的工作原理是:
BFC区域不会重叠浮动元素,所以它会被迫扩展自身的高度来包含浮动子元素。

clear:both
clear:both通常不直接应用于父元素,而是作为一种"clearfix"hack手段,给父元素的伪元素设置clear:both。

它的工作原理是:
伪元素在父元素内部的最后位置,通过设置clear:both,迫使父元素计算高度时将自身的高度也计算在内,从而避免高度塌陷。

   overflow:hidden创建真正的BFC,可以完全包含浮动子元素。
   clear:both只是一种hack手段,依赖伪元素和父元素的计算细节。
   overflow:hidden可能会影响子元素的渲染(比如隐藏溢出),而clear:both不会。
   总的来说,overflow:hidden更加彻底,可以解决高度塌陷和避免元素重叠等多种问题。而clear:both只是一种应急手段,需要额外的hack代码。

现代项目通常更推荐使用overflow:auto或display:flow-root来创建BFC,这比overflow:hidden更加语义化,也不会影响子元素的渲染。clear:both则很少使用,只在旧代码或极端情况下出现。

59、多个小图片往往用一个大的图片(两者大小相当），使用CSS精灵来合并图像，为什么？

   实际上，多个小图片和一个大图片在总像素数量上可能差不多，但是加载速度和服务器的负担不仅仅取决于图像的像素大小，还有以下几个因素：
   HTTP请求：
       每个图像文件通常都需要一个单独的HTTP请求。在加载页面时，浏览器会同时打开一定数量的并发连接来下载资源。当图像数量多时，可能会超过浏览器允许的并发连接数，导致浏览器必须等待一个请求完成后才能开始下一个请求。这会导致加载时间增加。而一个图像只需要一个请求，因此可以更快地完成加载。
   服务器响应：
       服务器处理和响应多个请求比处理一个请求要复杂。每个请求都需要服务器进行额外的处理，如磁盘I/O、网络I/O、内存分配等，这些都会增加服务器的工作量。

   以下是具体的原因：
   连接开销：
       每个HTTP请求都有一定的开销，包括DNS查询、建立连接（如TCP三次握手）、发送请求、等待响应、关闭连接等。即使图像很小，这些开销加起来也可能比图像本身的大小还要大。
   磁盘I/O：
       服务器需要从磁盘读取每个图像文件，多次读取会增加磁盘I/O的负担。
   网络延迟：
       网络延迟会影响每个请求的加载时间。虽然单个图像的加载时间可能不明显，但多个请求累积起来的延迟会对用户体验产生负面影响。
   缓存效率：
       浏览器通常会对加载的资源进行缓存。如果一个页面上的所有图像都包含在一个大图像文件中，那么浏览器只需要缓存这个单一的文件。如果是多个小图像，浏览器需要为每个图像分别缓存，这可能会占用更多的缓存空间，并且增加了缓存管理的复杂度。
   浏览器渲染：
       浏览器在渲染页面时会构建DOM树和CSSOM树，并且当资源加载时进行布局（reflow）和绘制（repaint）。多个图像可能导致浏览器多次进行这些操作，从而影响渲染效率。

因此，即使图像的总大小相似，使用CSS精灵来合并图像仍然可以显著提高页面加载速度，并减轻服务器的负担。

60、在背景图对齐中有像素与百分率，它们的锚定物、锚定点是什么？

在 CSS 中，background-position 及其相关属性 background-position-x 和 background-position-y 用于控制背景图像在其容器中的位置。它们的锚定点与定位元素的锚定点概念有所不同。
它们的锚定物都是它们的容器。

(1)长度值（例如 10px）：相对于容器的左上角(0,0)进行偏移。

        .container {
          width: 300px;
          height: 300px;
          background-image: url('image.jpg');
          background-position: 30px 30px; 
          background-size: cover;
        }

       背景图片的左上角相对于容器的左上角偏移 30px 。
       结论：
           当使用像素值（如 30px 30px）来设置 background-position 时，背景图片的左上角会相对于容器的左上角进行偏移。

   (2)百分比值（例如 50%）：相对于容器的大小进行百分比定位。

        .container {
          width: 300px;
          height: 300px;
          background-image: url('image.jpg');
          background-position: 30% 30%;
          background-size: cover;
        }

       在这个例子中，背景图片的 30% 位置点（即背景图片宽度的 30% 和高度的 30%）会与容器的 30% 位置点（即容器宽度的 30% 和高度的 30%）对齐。
       结论：
           当使用百分比值（如 30% 30%）来设置 background-position 时，百分比值表示背景图片相对于容器的尺寸进行定位。具体来说，百分比值表示背景图片中某个特定点相对于容器的对应点。

   (3)关键词（例如 top、bottom、left、right、center）：用于快速定位背景图像。

        .container {
          width: 300px;
          height: 300px;
          background-image: url('image.jpg');
          background-position-x: 50%; /* 背景图像在水平方向居中 */
          background-position-y: top; /* 背景图像在垂直方向顶部对齐 */
          background-size: cover;
        }

       备注：
           left：背景图像的左边缘对齐到容器的左边缘。
           right：背景图像的右边缘对齐到容器的右边缘。
           top：背景图像的上边缘对齐到容器的上边缘。
           bottom：背景图像的下边缘对齐到容器的下边缘。
           center：背景图像的中心对齐到容器的中心。
       组合：
           left top：背景图像的左上角对齐到容器的左上角。
           right bottom：背景图像的右下角对齐到容器的右下角。
           center top：背景图像的中心对齐到容器的上边缘。
           left center：背景图像的左边缘对齐到容器的垂直中心。

           如果只使用一个关键词，另一个方向默认值为 center。例如：left 等同于 left center。top 等同于 center top。
           如果指定了无效的 background-position 组合，浏览器会回退到默认值 0% 0%，即背景图像的左上角对齐到容器的左上角。

61、精灵图就是利用背景图定位，若三行四如何来写定位？

   例如三行四列，每行用ul(other-nav-list)，每一行有四个li(内有div类名picture)来表示列（浮动）

   一般按照逐个写，共3X4=12个（中间省略）：
   .other-nav-list:nth-child(1) li:nth-child(1) .picture { background-position: 0 0; }
   ...
   .other-nav-list:nth-child(1) li:nth-child(4) .picture { background-position: -144px 0; }

   .other-nav-list:nth-child(2) li:nth-child(1) .picture { background-position: 0 -48px; }
   ...
   .other-nav-list:nth-child(2) li:nth-child(4) .picture { background-position: -144px -48px; }

   .other-nav-list:nth-child(3) li:nth-child(1) .picture { background-position: 0 -96px; }
   ...
   .other-nav-list:nth-child(3) li:nth-child(4) .picture { background-position: -144px -96px; }

   不考虑公式，js等，还可用非标准css，只需要3个行，4个列，共7个语句块，同时对于第一条默认的可以省略，故可以简化为5个块：
       .other-nav-list:nth-child(2) .picture{
           background-position-y: -48px;
       }
       .other-nav-list:nth-child(3) .picture{
           background-position-y:-96px;
       }
       .other-nav-list li:nth-child(2) .picture{
           background-position-x:-48px;
       }
       .other-nav-list li:nth-child(3) .picture{
           background-position-x:-96px;
       }
       .other-nav-list li:nth-child(4) .picture{
           background-position-x:-144px;
       }

注意：尽量避免使用非标准的 background-position-x 和 background-position-y 属性，确保了代码的跨浏览器兼容性。

62、:first-child的锚点元素是哪些？

   :first-child的锚点元素就冒号前面元素。
       ul li:first-child {
           float: left;
       }
   上面锚点元素就是li，即ul祖先元素下，所有li，且这些li作为第一个元素。即第一元素的类型，锚点元素就是li。

   常被误认为是first-child第一个子元素，因此是li里面的第一个子元素，这是错误的。
   比如:
       ul:first-child{...}
       锚点元素是ul,即所以ul，且ul作为第一个子元素的。
       而不是“ul里面的第一个子元素”，这样理解的话，第一个元素是指哪一个？也许是li，也许是span，也许是a，这没法说明了，明显不符使用。

   结论：
   （1）级别等效：
       在选择器 ul:first-child 中，ul 和 :first-child 是等效层级的。换句话说，ul 是目标元素，:first-child 是一个对该目标元素应用的条件。这些条件限定了特定目标元素在满足某些特定属性或条件时，应该如何被选择。

（2）设计目的：
这种设计使选择器在层级结构中更具灵活性，并允许开发人员根据需求精确选择和样式化特定元素。例如：

       ul:first-child 选择的是特定条件下的 ul，即作为其父元素的第一个子元素的 ul。
       li:first-child 选择的是 li，但仅是作为其父元素的第一个子元素的那些 li。
   这种方式提供了我们所需的精确性和灵活性。

   注意:
       nth-child(n)的理解与上相同。

63、vscode背景色易与其它软件黑色混淆，如何快捷区别？

若两软件都是黑色背景，那么可以设置vscode的标题栏为其它颜色来快速区别，便于切换。
打开vscode的设置（点击vscode左下角齿轮图标，点选设置），右上角，点击“打开设置(json)”图标（在“向右拆分编辑器”的左侧），打开后，在最后一个}上行末尾添加一个逗号，再添加下面：

        "workbench.colorCustomizations": {
            "titleBar.activeBackground": "#2c7749",
            "titleBar.activeForeground": "#ffffff",
            "titleBar.inactiveBackground": "#FFA500",
            "titleBar.inactiveForeground": "#CCCCCC"
        }

   上面颜色非常实用，所有都是黑色时，通过标题色区分软件，特别是切换到另一软件时，vscode又显示橙黄色，又能识别并定位到vscode上。

   注意：
       (1)保存生即可生效；
       (2)颜色可以点色斑进行设置其它色。上面都是标题栏颜色，只是激活与不激活时变化。

   另外：
       shift+del可以快速删除当前鼠标位置所在行；
       Ctrl+Enter可以快捷向下添加一行，且鼠标跳向下一行；

64、SEO是什么？有什么用？

简言之：SEO是搜索引擎优化，为提高流量而生。就象直播人员为了流量，专题设置一些特色：用语、服装、剧情、表演等。

什么是SEO？
SEO，全称为Search Engine Optimization（搜索引擎优化），是通过优化网站和内容，提高其在搜索引擎结果页（SERP）中的自然排名的一系列技术和策略。SEO的目标是增加网站的可见性，从而吸引更多的有机（自然）流量。

   SEO可以分为以下几个主要部分：
       关键词研究（Keyword Research）：
           通过工具和分析，找到与业务相关的、高搜索量但竞争不高的关键词。
       内容优化（Content Optimization）：
           创建高质量、相关性强的内容，并在适当的位置使用目标关键词。
           优化内容标题、元描述、标题标签（H1, H2等）以及内容的可读性和结构。
       技术SEO（Technical SEO）：
           包括网站结构优化、URL结构优化、站点地图（Sitemap）创建、robots.txt配置、页面速度优化和确保网站移动友好性。
       页面内优化（On-page SEO）：
           指在网站内部进行的优化，如内部链接结构、图片Alt属性、页面标题和描述、以及用户体验的改进。
       页面外优化（Off-page SEO）：
           指网站外部的优化活动，主要包括获取高质量的反向链接（Backlinks）、社交媒体信号和品牌曝光。
       本地SEO（Local SEO）：
           针对本地业务，通过优化Google My Business（现为Google Business Profile）、获取本地评论、使用本地关键词等方式，提升在本地搜索结果中的排名。

   SEO的作用
       提高网站流量：
           通过提高搜索排名，吸引更多的有机访问者，从而增加网站流量。
       提升品牌曝光度：
           高排名的网页得到的点击次数更多，因此可以提高品牌的在线可见性和知名度。
       改善用户体验：
           SEO不仅仅是为了搜索引擎，也是为了用户。通过优化内容和网站结构，提升用户体验。
       带来更高的转化率：
           有效的SEO策略能够将搜索用户转化为实际的客户或订阅用户，提高网站的转化率。
       长期收益：
           一旦网站在搜索引擎上获得高排名，通常能维持较长时间，带来长期的流量和收益。
       成本效益高：
           相较于付费广告，SEO是一个更为长期和成本效益高的策略。一旦达到目标排名，可以持续受益，而不需要不断支付广告费用。

   SEO的重要性
       用户行为的导向：
           大多数用户在寻找信息时首先使用搜索引擎，良好的SEO可以让你的网站在用户寻找相关信息时排名靠前。
       竞争必备：
           大多数企业和网站都在进行SEO优化，如果不进行SEO，你很容易被竞争对手超越，且很难吸引到有机流量。
       增加可信度：
           用户通常认为排名靠前的网站更权威，因此良好的搜索引擎排名可以提升你的网站的可信度和信任度。
   通过合理的SEO策略，
   可以提升网站在搜索引擎中的排名，从而吸引更多有机流量，提升品牌知名度和用户转化率。SEO是一项长期投入的工作，但其带来的收益也是长期且显著的。

65、同时可用H4、H5实现的，一般用哪一个？

   推荐使用H5。

   HTML5带来了许多新的特性和改进，不仅仅是新标签，还有API、语义改进、安全和性能增强等，优势如下：
       (1)语义化增强：
           HTML5引入了诸如 <article>、<section>、<nav>、<header>、<footer> 等标签，这些标签通过语义化改进了内容结构，使得文档更易读、更易于维护、更搜索引擎友好。
       (2)新的表单控件：
           HTML5引入了新的表单输入类型如 date、email、url、number 等，这些控件自带验证功能和更好的用户体验。
       (3)多媒体支持：
           HTML5提供了 <audio> 和 <video> 标签，直接在浏览器中嵌入音频和视频，而不需要依赖第三方插件如Flash。
       (4)API和新特性：
           HTML5引入了诸多API和功能，如Geolocation API、Local Storage、Session Storage、Canvas API、Web Workers等，提升了网页应用的功能和响应速度。
       (5)移动友好性：
           HTML5针对移动设备进行了大量优化，如响应式设计更容易实现，多媒体内容的直接支持、更好的触摸体验等。

   即使在HTML4中可以通过繁冗的class和id来模拟语义结构，但这并不如HTML5标签直接、清晰。例如：
   HTML4实现：
       <div class="header">...</div>
       <div class="main-content">...</div>
       <div class="footer">...</div>
   HTML5实现：
       <header>...</header>
       <main>...</main>
       <footer>...</footer>

   性能和安全
       HTML5对资源的加载和处理进行了优化，提升了页面性能。
       HTML5定义了更严格的安全策略，减少了XSS等攻击风险。

   总结:
       两者均可实现时，推荐使用H5。

66、H5中header可以有类名吗？

   可以。
   它也是Block元素，只是比div更有语义，避免用<div class="header">来表达。

   HTML5中的 <header> 标签并不一定要写在网页的首部，它可以出现在文档中的任何位置，用来表示任何内容块的头部。也就是说，你可以在文档的不同部分使用多个 <header> 标签，只要它们语义上确实代表了那部分内容的头部。常需要通过类名（class）或ID来区分不同的 <header>，并应用不同的样式或功能。

        <head>
          <meta charset="UTF-8">
          <title>高级示例</title>
          <style>
            .main-header {
              background-color: #0044cc;
              color: #fff;
              padding: 20px;
            }
            .article-header {
              background-color: #f4f4f4;
              color: #333;
              padding: 10px;
              margin-bottom: 20px;
            }
            .sidebar-header {
              font-weight: bold;
              margin-top: 15px;
            }
          </style>
        </head>
        <body>
          <header class="main-header">
            <h1>主网站标题</h1>
            <nav>
              <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">联系</a></li>
              </ul>
            </nav>
          </header>

          <main>
            <article>
              <header class="article-header">
                <h2>文章标题</h2>
                <p>作者：张三</p>
                <p>发布日期：2023年10月2日</p>
              </header>
              <p>这是文章的内容部分。</p>
            </article>
          </main>

          <aside>
            <header class="sidebar-header">
              <h3>侧边栏标题</h3>
            </header>
            <p>侧边栏的内容。</p>
          </aside>

          <footer>
            <p>&copy; 2023 示例网站. 保留所有权利。</p>
          </footer>
        </body>

   上面：
       主头部：用于页面的全局头部，带有类名 main-header 和对应的样式。
       文章头部：每篇文章的头部，带有类名 article-header。样式与全局头部明显不同。
       侧边栏头部：侧边栏中也有头部，带有类名 sidebar-header，样式上更简洁。

   因此，header是可以有类名,ID等。