html/css总结一

最新推荐文章于 2025-12-19 15:33:32 发布

原创最新推荐文章于 2025-12-19 15:33:32 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

1.px，em，rem 的区别？

答：1) px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。2) em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。3) rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML根元素。

区别：IE 无法调整那些使用 px作为单位的字体大小，而 em和 rem可以缩放，rem相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8 及更早版本外，所有浏览器均已支持 rem。

2.CSS 引入的方式有哪些? link 和@import 的区别是?

答：内联(行内样式) 内嵌(内部样式) 外链(外部样式) 导入式 ;

区别：差别1：link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。差别2：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无兼容性。差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

3.div+css的布局较table布局有什么优点？

答: 1.改版的时候更方便只要改css文件。

2.页面加载速度更快、结构化清晰、页面显示简洁。

3.表现与结构相分离。

4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

4.描述 css reset 的作用和用途？

答:每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致；为了让页面获得浏览器跨浏览器的兼容性，需要用重置文件css代码覆盖浏览器默认的样式来统一样式。

5.解释 css sprites，如何使用？

答：Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量.

6.SRC和href的区别?

答:src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。<script src =”js.js”></script>.当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference(超文本引用)的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

7.CSS都有哪些选择器？

答: 标签选择器（用HTML标签申明）

id选择器（用DOM的ID申明）

类选择器（用一个样式类名申明）

后代选择器（利用空格间隔，比如div .a{ }）

并集选择器（利用逗号间隔，比如p,div,#a{ }）

属性选择器

伪类选择器

8.CSS选择器的优先级是怎么样定义的？

答:一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。复杂的计算方法：用1表示派生选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。

9.清除浮动的几种方式?

答：1，父级 div定义 height 原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。简单、代码少、容易掌握，但只适合高度固定的布局.

2，结尾处加空div标签 clear：both 原理：在浮动元素的后面添加一个空 div兄弟元素，利用 css 提供的 clear：both 清除浮动，让父级 div能自动获取到高度，如果页面浮动布局多，就要增加很多空 div，让人感觉很不好 .

3，父级 div定义伪类：after 和 zoom /*清除浮动代码*/ .clearfix：after{ content：""； display：block； visibility：hidden； height：0； line-height：0； clear：both； } .clearfix{zoom：1} 原理：IE8 以上和非 IE 浏览器才支持：after，原理和方法 2 有点类似，zoom(IE 转有属性)可解决 ie6，ie7浮动问题，推荐使用，建议定义公共类，以减少 CSS 代码。

4，父级 div定义 overflow：hidden 超出盒子部分会被隐藏，不推荐使用.

5. 双伪元素法： .clearfix：before，.clearfix：after { content：""； display：block； clear：both；} .clearfix { zoom：1；}

10.display: none；与 visibility:hidden 的区别是什么？

答：display：none；使用该属性，HTM元素的宽度、高度等各种属性值都将“丢失”,不占位置； visibility：hidden；使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值.

11.块级元素和行内元素的区别?

答:1)块级元素(block)特性：独占一行，可以设置宽高和内外边距，宽度默认是父容器的宽度，在盒子内部，还可以放其他的块级或者行内块等等，文字类型的块级元素内不能放其他的结构块级元素.2)内联元素(inline)特性:宽高设置无效,宽度是文本内容的大小,多个行内元素显示在一行.可以设置左右距离, 只能容纳文本及其他行内元素, A链接里不能放a链接.3)行内块:多个行内块元素在一行内显示,可以设置宽高和内外边距,行内块和行内块默认之间有间隙，不好解决,后期用浮动解决.