HTML/CSS面试题

2019-11-19  本文已影响0人  chang_遇见缘

一、HTML 和 CSS

1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

Firefox：gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核 
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)

2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏 览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

3、Quirks 模式是什么？它和 Standards 模式有什么区别

（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是 看文章看的，甚至完全不知道。）

4、div+css 的布局较 table 布局有什么优点？

5、 img 的 alt 与 title 有何异同？ strong 与 em 的异同？**

定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt

当成 tool tip 显示)

6、你能描述一下渐进增强和优雅降级之间的不同吗?

7、为什么利用多个域名来存储网站资源会更有效？

8、请谈一下你对网页标准和标准制定机构重要性的理解。##

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降 低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题， 最终提高网站易用性。

9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

10、简述一下 src 与 href 的区别。

11、知道的网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。

12、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开 放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应 用范例：豆瓣，有兴趣自行 google）

13、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，

一次 js 请求一般情况下有哪些地方会有缓存处理？

答案：dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。

14、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优

化这些图片的加载，给用户更好的体验。

15、你如何理解 HTML 结构的语义化？

16、谈谈以前端角度出发做好 SEO 需要考虑什么？

17、有哪项方式可以对一个 DOM 设置它的 CSS 样式？**

18、CSS 都有哪些选择器？

除了前 3 种基本选择器，还有一些扩展选择器，包括

19、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

最基本的： 设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性： 设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

20、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的 排列顺序: L-V-H-A（link,visited,hover,active）

21、什么是 Css Hack？ie6,7,8 的 hack 分别是什么？

答案：针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
示例如下：

#test { 
        width:300px; 
        height:300px; 
        background-color:blue; /*firefox*/ 
        background-color:red\9; /*all ie*/ 
        background-color:yellow; /*ie8*/ 
        +background-color:pink; /*ie7*/ 
        _background-color:orange; /*ie6*/ }     
        :root #test { background-color:purple\9; } /*ie9*/ 
        @media all and (min-width:0px){ #test {background-color:black;} } /*opera*/ 
        @media screen and (-webkit-min-device-pixel-ratio:0){
 #test {
      background-color:gray;
  }
 } /*chrome and safari*/

22、请用 Css 写一个简单的幻灯片效果页面

答案：知道是要用 css3。使用 animation 动画实现一个简单的幻灯片效果。

/**HTML**/ 
div.ani 
/**css**/ 
.ani{
    width:480px; 
    height:320px; 
    margin:50px auto; 
    overflow: hidden; 
    box-shadow:0 0 5px rgba(0,0,0,1); 
    background-size: cover; 
    background-position: center; 
    -webkit-animation-name: "loops"; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-iteration-count: infinite; 
}
@-webkit-keyframes "loops" { 
    0% {                                                        
 background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034f0fcdc3069f       c27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg) 
    no-repeat; 
    }
    25% { 
    background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) 
    no-repeat; 
    }
    50% { 
 background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfded1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) 
    no-repeat; 
    }
    75% {     background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) 
    no-repeat; 
    }
    100% { 
  background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) 
    no-repeat;
    }
}

24、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

25、什么是外边距重叠？重叠的结果是什么？

26、rgba()和 opacity 的透明效果有什么不同？*

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

27、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于 letter-spacing 的妙用知道有哪些么？
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。

28、如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽 
#div1{ 
    background-color:#6699FF; 
    width:200px; 
    height:200px; 
    position: absolute; //父元素需要相对定位 
    top: 50%; 
    left: 50%; 
    margin-top:-100px ; //二分之一的 height，width 
    margin-left: -100px; 
} 
//方法二:未知元素的高宽 
#div1{
    width: 200px; 
    height: 200px; 
    background-color: #6699FF; 
    margin:auto; 
    position: absolute; //父元素需要相对定位 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
}

那么问题来了，如何垂直居中一个<img>?（用更简便的方法。）

 //<img>的容器设置如下 
#container{ 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
}

29、px 和 em 的区别。

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

30、描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？

31、Sass、LESS 是什么？大家为什么要使用他们？

他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。

32、display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

34、CSS 中 link 和@import 的区别是：

Link 属于 html 标签，而@import 是 CSS 中提供的在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加
载引用的 CSS @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

35、简介盒子模型：

CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

36、为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异但是初始化 CSS 会对搜索引擎优化造成小影响

37、BFC 是什么?

38、html 语义化是什么？

当页面样式加载失败的时候能够让页面呈现出清晰的结构有利于 seo 优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
便于项目的开发及维护，使 html 代码更具有可读性，便于其他设备解析。

39、Doctype 的作用？严格模式与混杂模式的区别？

<!DOCTYPE>用于告知浏览器该以何种模式来渲染文档
严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

40、IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin比设置的较大。

解决：加入_display：inline

41、HTML 与 XHTML——二者有什么区别？

  1. 所有的标记都必须要有一个相应的结束标记
  2. 所有标签的元素和属性的名字都必须使用小写
  3. 所有的 XML 标记都必须合理嵌套
  4. 所有的属性必须用引号 "" 括起来
  5. 把所有 < 和 & 特殊符号用编码表示
  6. 给所有属性赋一个值
  7. 不要在注释内容中使用 "--"
  8. 图片必须有说明文字

42、html 常见兼容性问题？

  1. 双边距 BUG float 引起的 使用 display

  2. 3 像素问题 使用 float 引起的 使用 dislpay:inline -3px

  3. 超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active

  4. Ie z-index 问题 给父级添加 position:relative

  5. Png 透明 使用 js 代码 改

  6. Min-height 最小高度 ！Important 解决’

  7. select 在 ie6 下遮盖 使用 iframe 嵌套

  8. 为 什 么 没 有 办 法 定 义 1px 左 右 的 宽 度 容 器 （ IE6 默 认 的 行 高 造 成 的 ， 使 用over:hidden,zoom:0.08 line-height:1px）

  9. IE5-8 不支持 opacity，解决办法：

    .opacity { 
    opacity: 0.4 
    filter: alpha(opacity=60); /* for IE5-7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";                   
  /* for IE 8*/ 
}

  10. IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片

43、对 WEB 标准以及 W3C 的理解与认识

答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

44、行内元素有哪些?块级元素有哪些?CSS 的盒模型?

答：块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css 盒模型:内容，border ,margin，padding

45、前端页面有哪三层构成，分别是什么?作用是什么?

答：结构层 Html 表示层 CSS 行为层 js。

46、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的 解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

47、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？**

（1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，比如 div 默认 display 属性值为“block”，成为“块级”元素；span 默认display 属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：

<img><input><link><meta>


鲜为人知的是： <area><base><col><command> <embed><keygen><param><source><track><wbr>

48、CSS 的盒子模型？

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

49、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 ;
* 优先级就近原则，样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3 新增伪类举例：

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 
:enabled、:disabled 控制表单控件的禁用状态。 
:checked，单选框或复选框被选中。

50、如何居中 div,如何居中一个浮动元素?

给 div 设置一个宽度，然后添加 margin:0 auto 属性

div{
    width:200px; 
    margin:0 auto;
}

居中一个浮动元素 确定容器的宽高 宽 500 高 300 的层 设置层的外边距

.div { 
    Width:500px ;
    height:300px;//高度可以不设 
    Margin: -150px 0 0 -250px; 
    position:relative;相对定位 
    background-color:pink;//方便看效果 
    left:50%; 
    top:50%; 
}

51、浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧 ?

* IE 浏览器的内核 Trident、Mozilla 的 Gecko、google 的 WebKit、Opera 内核 Presto；
* png24 为的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.
* 浏 览 器 默 认 的 margin 和 padding 不 同 。 解 决 方 案 是 加 一 个 全 局 的 {margin:0;padding:0;}来统一。
* IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin 比设置的大。 浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 — —display:inline;将其转化为行内属性。(这个符号只有 ie6 会识别) 渐进识别的方式，从总体中逐渐排除局部。
*首先，巧妙的使用“\9”这一标记，将 IE 游览器从所有情况中分离出来。
*接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。

//css 
.bb{ 
    background-color:#f1ee18;/*所有识别*/ 
    .background-color:#00deff\9; /*IE6、7、8 识别*/ 
    +background-color:#a200ff;/*IE6、7 识别*/ 
    _background-color:#1e0bd1;/*IE6 识别*/ 

}

* IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性; Firefox 下,只能使用 getAttribute()获取自定义属性.

* （条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可 通过加入CSS 属性 -webkit-text-size-adjust: none; 解决. 超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和
active 了解决方法是改变 CSS 属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

52、列出 display 的值，说明他们的作用。position 的值，relative 和 absolute定位原点是？

  1. block 象块类型元素一样显示。
    none 缺省值。向行内元素类型一样显示。
    inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
    list-item 象块类型元素一样显示，并添加样式列表标记。
  2. position 的值
    absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

生成相对定位的元素，相对于其正常位置进行定位。

*（忽略 top, bottom, left, right z-index 声明）。

* inherit 规定从父元素继承 position 属性的值。

53、absolute 的 containing block 计算方式跟正常流有什么不同？

54、position 跟 display、margin collapse、overflow、float 这些特性相互叠加后会怎么样？

55、对 WEB 标准以及 W3C 的理解与认识**

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广 泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供 打印版本而不需要复制内容、提高网站易用性

56、css 的基本语句构成是?*

选择器{属性 1:值 1;属性 2:值 2;……}

57、浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

58、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

59、**超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

答案：被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link,visited,hover,active）

60、什么是 Css Hack？ie6,7,8 的 hack 分别是什么？

答案：针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。

示例如下：

#test { 
    width:300px; 
    height:300px; 
    background-color:blue; /*firefox*/ 
    background-color:red\9; /*all ie*/ 
    background-color:yellow\0; /*ie8*/ 
    +background-color:pink; /*ie7*/ 
    _background-color:orange; /*ie6*/
 } 
:root #test { background-color:purple\9; } /*ie9*/ 
@media all and (min-width:0px){ 
    #test {
        background-color:black\0;
    }
 } /*opera*/ 
@media screen and (-webkit-min-device-pixel-ratio:0){ 
    #test {
      background-color:gray;
      } 
} /*chrome and safari*/

62、请用 Css 写一个简单的幻灯片效果页面

答案：知道是要用 css3。使用 animation 动画实现一个简单的幻灯片效果。

div.ani 

/**css**/ 

.ani{ 
  width:480px; 
  height:320px; 
  margin:50px auto; 
  overflow: hidden; 
  box-shadow:0 0 5px rgba(0,0,0,1);   
  background-size: cover; 
  background-position: center; 
  -webkit-animation-name: "loops"; 
  -webkit-animation-duration: 20s; 
  -webkit-animation-iteration-count: infinite; 
}

@-webkit-keyframes "loops" { 
    0% {
    background:url(http://d.hiphotos.baidu.com/image/w%3D400/sign=c01e6adca964034 
    f0fcdc3069fc27980/e824b899a9014c08e5e38ca4087b02087af4f4d3.jpg)no-repeat; 
    }
    25% { 
    background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=edee1572e9f81a4c2 
    632edc9e72b6029/30adcbef76094b364d72bceba1cc7cd98c109dd0.jpg) no-repeat; 
    }
    50% { 
    background:url(http://b.hiphotos.baidu.com/image/w%3D400/sign=937dace2552c11dfd 
    ed1be2353266255/d8f9d72a6059252d258e7605369b033b5bb5b912.jpg) no-repeat; 
    }
    75% { 
    background:url(http://g.hiphotos.baidu.com/image/w%3D400/sign=7d37500b8544ebf86 
    d71653fe9f9d736/0df431adcbef76095d61f0972cdda3cc7cd99e4b.jpg) no-repeat; 
    }
    100%{
    background:url(http://c.hiphotos.baidu.com/image/w%3D400/sign=cfb239ceb0fb43161 
    a1f7b7a10a54642/3b87e950352ac65ce2e73f76f9f2b21192138ad1.jpg) no-repeat; 
    } 
}

63、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

64、什么是外边距重叠？重叠的结果是什么？

答案： 外边距重叠就是 margin-collapse。
在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为 折叠外边距。

65、rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素 内的所有内容的透明度，而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

66、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

67、如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽 
#div1{
  background-color:#6699FF; 
  width:200px; 
  height:200px; 
  position: absolute; //父元素需要相对定位 
  top: 50%; 
  left: 50%; 
  margin-top:-100px ; //二分之一的 height，width 
  margin-left: -100px; 
} 

// 方法二:未知元素的高宽 
#div1{
   width: 200px; 
   height: 200px; 
   background-color: #6699FF; 
   margin:auto; 
   position: absolute; //父元素需要相对定位 
   left: 0; 
   top: 0; 
   right: 0; 
   bottom: 0; 
}

那么问题来了，如何垂直居中一个<img>?（用更简便的方法。)

//<img>的容器设置如下 
#container {
  display:table-cell; 
  text-align:center; 
  vertical-align:middle; 
}

68、描述一个"reset"的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？

69、说 display 属性有哪些？可以做什么？*

70、哪些 css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;

71、css 优先级算法如何计算？

!important > id > class > 标签
!important 比 内联优先级高
*优先级就近原则，样式定义最近者为准;
*以最后载入的样式为准;

72、b 标签和 strong 标签,i 标签和 em 标签的区别？

后者有语义，前者则无。

73、有那些行内元素、有哪些块级元素、盒模型？

a – 锚点 
abbr – 缩写 
acronym – 首字 
b – 粗体(不推荐) 
big – 大字体 
br – 换行 
em – 强调 
font – 字体设定(不推荐) 
i – 斜体 
img – 图片 
input – 输入框 
label – 表格标签 
s – 中划线(不推荐) 
select – 项目选择 
small – 小字体文本 
span – 常用内联容器，定义文本内区块 
strike – 中划线 
strong – 粗体强调 
sub – 下标 
sup – 上标 
textarea – 多行文本输入框 
tt – 电传文本 
u – 下划线 
var – 定义变量 

address – 地址 
blockquote – 块引用 
center – 举中对齐块 
dir – 目录列表 
div – 常用块级容易，也是 css layout 的主要标签 
dl – 定义列表 
fieldset – form 控制组 
form – 交互表单 
h1 – 大标题 
h2 – 副标题 
h3 – 3 级标题 
h4 – 4 级标题 
h5 – 5 级标题 
h6 – 6 级标题 
hr – 水平分隔线 
isindex – input promptmenu – 菜单列表 
noframes – frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容） 
noscript – ）可选脚本内容（对于不支持 script 的浏览器显示此内容） 
ol – 排序表单 
p – 段落 
pre – 格式化文本 
table – 表格 
ul – 非排序列表

74、有哪些选择符，优先级的计算公式是什么？行内样式和！important 哪个优先级高？

#ID > .class > 标签选择符 !important 优先级高

75.我想让行内元素跟上面的元素距离 10px，加 margin-top 和 padding-top 可以吗？

margin-top,padding-top 无效

76.CSS 的盒模型由什么组成？

内容，border ,margin，padding

77、.说说 display 属性有哪些？可以做什么？

78、哪些 css 属性可以继承？

79、css 优先级算法如何计算？

80、text-align:center 和 line-height 有什么区别？

81、前端页面由哪三层构成，分别是什么？作用是什么？

82、写一个表格以及对应的 CSS,使表格奇数行为白色背景，偶数行为灰色，鼠标一上去为黄色背景。

上一篇下一篇

猜你喜欢

热点阅读