css细节整理

最新推荐文章于 2022-03-18 10:24:47 发布

yanner_

最新推荐文章于 2022-03-18 10:24:47 发布

阅读量314

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/yanner_/article/details/82015829

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.XHTML与HTML的有何异同？
HTML 和 XHTML 的区别简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。
功能上的差别：主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。
书写习惯的差别：XHTML要求比较严谨，所以书写应用要求细心与细致，XHTML要求正确嵌套，XHTML所有元素必须关闭。

2.doctype作用，标准模式与兼容模式的区别
告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5 为什么只需要写？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

3.行内元素有哪些？块级元素有哪些？空(void)元素有那些？
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：<br> <hr> <img> <input> <link> <meta>
鲜为人知的是

 <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

4.页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

5.介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。

常见的浏览器内核有哪些？
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

6.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
增加：
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websockt, Geolocation;

移除：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。

如何区分： DOCTYPE声明\新增的结构元素\功能元素

7.简述一下你对HTML语义化的理解？
1）用正确的标签做正确的事情；
2）html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
3）即使在没有样式css情况下也以一种文档格式显示，并且是容易阅读的；
4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；
5）使于都源代码的人对网站更容易将网站分块，便于阅读维护理解。

8.HTML5的离线储存怎么使用，工作原理能不能解释一下？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

9.iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

10.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

11.列举IE 与其他浏览器不一样的特性？
12.CSS Sprite是什么，谈谈这个技术的优缺点
CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。
其优点在于：
减少网页的http请求，提高性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
减少图片的字节：多张图片合并成1张图片的字节小于多张图片的字节总和；
减少了命名困扰：只需对一张集合的图片命名，不需要对每一个小元素进行命名提高制作效率；
更换风格方便：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便。

13.如何用CSS分别单独定义ie6 IE7 IE8 IE9 IE10的width属性
可以用hack来区分不同的IE浏览器：
仅IE6识别 : _margin-left:10px;
IE6/IE7识别： *margin-left:10px;
仅IE8识别： margin-left:10px\0;
仅IE识别： margin-left:10px\9;

14.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有哪些？
1）id 选择器（#myid）
2）类选择器（.myclassname）
3）标签选择器（div，h1，p）
4）相邻选择器（h1 + p）
5）子选择器（ul > li）
6）后代选择器（li a）
7）通配符选择器（* ）
8）属性选择器（ a[rel = “external”]）
9）伪类选择器（a: hover, li: nth - child）
可继承的样式： font-size font-family color, UL LI DL DD DT
不可继承的样式：border padding margin width height

15.document load 和document ready 的区别
load事件需要页面完全加载完成才可以触发
ready事件不要求页面完全加载完，只需要加载完dom结构即可触发。

16.什么是 Web Worker？
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

17.给一个元素添加CSS样式有哪几种方法
内联样式：内联样式是直接在html标签上定义该标签的css样式
内部样式：内部样式是写在html文件中，且包含在<style></style>代码块中。
外部样式：外部样式是通过在html中引用外部css文件来控制样式

18.document.write、innerHTML和innerText 的区别？
DOM的innerHTML是DOM元素对象的一个属性
而write是document对象的一个方法
innerHTML：也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText：从起始位置到终止位置的内容, 但它去除Html标签

19.实现当屏幕宽度大雨700,小于800是时引用外部样式style-7-9.css
css3@media规则根据媒体设备不同，浏览器窗口尺寸不同使用不同的css样式。
语法：

@media 设备类型 and（设备特性）{ 
//css代码 
}

//窗口宽度大于900px
@media screen and(min-width:900px)
{
  body{
       font-size:25px;
      }
}
//窗口宽度大于500px小于900px
@media screen and(min-width:500px)and(max-width:900px)
{
  body{
       font-size:20px;
      }
}
//窗口宽度小于500px
@media screen and(max-width:500px)
{
  body{
       font-size:15px;
      }
}

20.HTML中input的6个新属性
email、url、number、date、search、range

21.CSS超过宽度的文字显示点点，必须要设置的属性

Text-overflow: clip | ellipsis；
over-flow:hidden;
white-space:nowrap；

22.文本强制换行

word-break: break-all;
word-wrap:break-word;

23.display:none与visibility:hidden的区别是什么？
display:none 不为被隐藏的对象保留其物理空间 visibility：hidden 为被隐藏的对象保留其物理空间。

24.如何解决超链接被点击后hover样式不出现问题
当超链接被点击后，经常会出现hover样式效果不显示的问题。解决这个问题其实很简单，只要对超链接的样式属性进行正确的排序即可。

25.ie 和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

26.