DIV+CSS知识点总结

最新推荐文章于 2022-05-18 15:30:37 发布

Wendy-lxq

最新推荐文章于 2022-05-18 15:30:37 发布

阅读量1.6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端面试文章标签： div+css 前端面试

本文链接：https://blog.youkuaiyun.com/u010297791/article/details/54999990

前端面试专栏收录该内容

8 篇文章

订阅专栏

DIV+CSS是Web设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。

1、描述一下浮动会造成什么影响。

我们知道，当一个元素浮动时，其周围的文字段落等会相应地环绕着它。这样浮动元素就会变成一座“孤岛”，周围的东西就会成为“水流”围绕着它。那么这时问题来了，我们往往希望浮动不要对周围原有的布局产生影响，想到的方法是利用clear来进行清除浮动，但是我们却会忘记clear只对块级元素有作用，所以经常会因为忽略这一点而导致清除浮动失败。

2、简单说明绝对定位和浮动的区别和应用。

当一个元素使用绝对定位之后，它的位置将依据浏览器左上角开始计算或者相对于父容器（父容器使用相对定位）。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就与绝对定位的元素不存在时一样，因为绝对定位的框与文档流无关，所以它们还是覆盖页面上的其他元素。

而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补原先的空间。它只是改变了文档流的显示，并没有脱离文档流，一个元素浮动或者绝对定位后，它将自动变成块级元素，而不论该元素本身是什么类型。

3、CSS引入的方式有哪些，都有什么区别。

1）在head部分加入：<link rel="stylesheet stype="text/css" href="test.css"/>，引入外部的css文件。

这种方法是目前使用最多的，它不仅最能体现css的特点，而且也能体现DIV+CSS中的内容与现实分离的思想，改版代码容易，代码美观。

2）在head部分加入<style text="text.css"></style>

这种方法的使用情况要少得多，最常见的就是访问大量的门户网站，或者访问量较大的企业网站的首页。与第一种方法比起来，这种方法有点突出，弊端也明显。

优点：速度快，所以测CSS控制都是针对本页面标签的，没有多余的CSS命令，其次不用外链CSS文件，直接在HTML文档中读取样式。
缺点：改版麻烦，单个页面会显得比较臃肿，CSS不能被其他页面应用，造成代码量相对较多，维护也麻烦。对它们来说，用户量是关键，他们需要大量人员进行复杂的维护工作。

3）直接在页面的标签中添加：<div style=""></div>。

这种方法用得比较少，一般情况下，HTML里面不能出现CSS命令。这种方法的通用性较差，效果特殊，使用CSS命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。

4）@import ulr(text.css) ，使用方法：

<style type="test/css">
     @import uel(test.css);
</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文件中相应的行，那么整个站点的所有页面都会随之发生变动。

强大的字体控制和排版能力

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-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。内部的Box会在垂直方向，从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box叠加。 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。计算BFC的高度时，浮动元素也参与计算。

14、置换元素和不可替换元素

1) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>、<object> 都是置换元素。这些元素往往没有实际的内容，即是一个空元素。置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

2) 不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。

例如： <label>label中的内容</label> 标签<label>是一个非置换元素，文字label中的内容”将全被显示。