CSS知识总结（三）

最新推荐文章于 2022-11-18 11:43:11 发布

Mr.Groooooooot

最新推荐文章于 2022-11-18 11:43:11 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/wdhxs/article/details/109745062

版权

CSS知识总结

文章目录

CSS知识总结
一、实现一个简易modal框
二、关于前端渲染和后端渲染
三、笔试题
四、AJAX技术原理
五、关于BFC的面试题

一、实现一个简易modal框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
        }
        
        section {
            width: 800px;
            height: 100%;
            margin: 0 auto;
            background-color: rgba(68, 45, 170, .1);
        }
        
        .modal {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
            background-color: rgb(95, 93, 93, .2);
            transition: all 1s ease-in-out;
        }
        
        button {
            width: 100px;
            height: 30px;
        }
        
        .modal-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 300px;
            height: 200px;
            background-color: rgb(252, 246, 246);
        }
    </style>
</head>

<body>
    <section>
        <button></button>
    </section>
    <div class="modal">
        <div class="modal-box">
            <header></header>
            <main></main>
            <footer></footer>
        </div>
    </div>
    <script>
        const button = document.querySelector('button');
        const modal = document.querySelector('.modal');

        button.addEventListener('click', function(e) {
            modal.style.display = 'block';
        });

        modal.addEventListener('click', function(e) {
            if (e.target == modal) {
                modal.style.display = 'none';
            }

        })
    </script>
</body>

</html>

二、关于前端渲染和后端渲染

前端渲染和后端渲染

三、笔试题

1.css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。（√）

2.有关HTML的Doctype和严格模式与混杂模式的描述：

文档类型
DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。
DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。
如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。
浏览器模式
浏览器有两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
DOCTYPE 切换
对于 HTML 4.01 文档，
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

3.关于精灵图 (CSS Spirites)

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

4.三大浏览器内核

Wekbit是一个开源的Web浏览器引擎，也就是浏览器的内核。Apple的Safari, Google的Chrome, Nokia S60平台的默认浏览器，Apple手机的默认浏览器，Android手机的默认浏览器均采用的Webkit作为器浏览器内核。Webkit的采用程度由此可见一斑，理所当然的成为了当今主流的三大浏览器内核之一。另外两个分别是Gecko和Trident，大名鼎鼎的Firefox便是使用的Gecko 内核，而微软的IE系列则使用的是Trident内核。
另外，搜狗浏览器是双核的，双核并不是指一个页面由2个内核同时处理,而是所有网页（通常是标准通用标记语言的应用超文本标记语言）由webkit内核处理,只有银行网站用IE内核

四、AJAX技术原理

AJAX指异步的JS和XML
AJAX并不是新的技术，而是现有几种技术结合，实现网页请求更新渲染的异步处理。

AJAX主要包括：

使用CSS和XHTML来表示。
使用DOM模型来交互和动态显示。
使用XMLHttpRequest来和服务器进行异步通信。
使用javascript来绑定和调用。

AJAX的核心是XMLHttpRequest 对象

AJAX主要原理是在用户和服务器端之间加了一个中间层——AJAX引擎，使用户操作与服务器响应异步化。

在这里插入图片描述

五、关于BFC的面试题

1.两个兄弟盒子A在上、B在下，A margin-bottom：20px，B margin-top：30px A和B的最终距离是多少？

30px 因为同属于一个BFC，margin会重叠。可以给B套一个盒子并开启BFC就变成50px了。

A和B是父子关系A在外、B在内，A margin-top：30px ，B margin-top： 20px，A和B之间的距离是多少？

相同的原因，两个盒子的margin会重叠，导致子盒子会顶在父盒子边框。所以距离是0px。

3.A是绝对定位，B是相对定位，A和B是兄弟关系，A和B分别相对什么位置移动，A 和 B 是否脱离文档流

A相对有定位的父盒子或者根元素移动，脱离文档流；B相对自己位置移动，不脱离文档流。

Mr.Groooooooot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS知识总结（三）

CSS面试题文章目录CSS面试题一、实现一个简易modal框二、关于前端渲染和后端渲染一、实现一个简易modal框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume
复制链接

扫一扫