面试题总结

来源：互联网发布：中国大豆进口数据编辑：程序博客网时间：2024/06/06 21:43

1.行内元素有哪些？块级元素有那些？

行内元素（内联元素，内容多大占多大）：span strong em i b a

块级元素（占一行）：div p ul ol li dl dt dd

2.标签上的alt和title属性的区别是什么？

alt属性:图片无法加载时才会显示其值

<img src="url" name=""/>

title:图片正常加载鼠标划上去时，显示一个悬浮框，其中显示的文字

<img src="url" title=""/>

3.css的引进方式有几种？link和import的区别是什么？

(1 ).内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

示例：

   <div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

(2).嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

示例：

  <head>       <style>       .content {           background: red;     }       </style>   </head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

(3).链接方式

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

示例：

   <head>      <link rel="stylesheet" type="text/css" href="style.css">   </head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

(4).导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

  <style>      @import url(style.css); </style>

两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

4.css的优先级。

5.（优先级）下面这段代码p的背景颜色显示哪个？

<style>

.red{

background:red;

}

.blue{

background:blue;

}

</style>

<p class="blue red">eeeeeeeee</p>

6.谈下你对盒子模型的理解

盒子模型有两种，W3C和IE盒子模型

（1）W3C定义的盒子模型content-box包括margin、border、padding、content ，元素的width=content的宽度

content-box

（2）IE盒子模型border-box与W3C的盒子模型唯一区别就是元素的宽度，元素的width=content+padding+border

border-box

1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效
2.对于相邻的块级元素margin-bottom和margin-top 取值方式

1）都是正数：取最大值

距离=Math.max(margin-botton,margin-top)

2）都是负数：取最小值

距离=Math.min(margin-botton,margin-top)

3）上面是正数，下面是负数或者上面是负数，下面是正数：正负相加

距离=margin-botton+margin-top

7.position的值，relative和absolute分别是相对于谁进行定位的？

absolute :绝对定位，生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

fixed :生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。

relative: 相对定位，相对于其在普通流中的位置进行定位,以它原来默认位置为参考点。

static :默认定位，没有定位，元素出现在正常的流中。

定位和top bottom left right 在一起使用，值可正可负

8.行内元素float:left后是否变为块级元素?

行内元素使用浮动后的变化：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div style="width:600px;      height:300px;      background-color: greenyellow;      margin:50px auto;      text-align: center">    <!--左浮动-->    <span style="color:#fff;          font-size: 30px;          height:50px;          padding:30px;          width: 100px;          background-color:deepskyblue;          float: left">左浮动</span>    <!--未设置浮动（父级设置了text-align:center）-->    <span style="color:#fff;                  font-size: 30px;                  height:50px;                  padding:30px;                  width: 100px;                  background-color:deepskyblue">无浮动</span>    <!--右浮动-->    <span style="color:#fff;                  font-size: 30px;                  height:50px;                  padding:30px;                  width: 100px;                  background-color: deepskyblue;                  float: right;">右浮动</span></div></body></html>

块级元素使用浮动后的变化

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div style="width:600px;             height:300px;             background-color:mediumpurple;             margin:50px auto;             text-align: center">    <!--左浮动-->    <div style="color:#fff;                 font-size: 30px;                 height:50px;                 padding:30px;                 background-color:greenyellow;                 float: left">左浮动</div>    <!--未设置浮动-->    <div style="color:#fff;                 font-size: 30px;                 height:100px;                 padding:30px;                 width: 150px;                 background-color:deepskyblue;                 border:1px solid green">无浮动</div></div></body></html>

9.b和strong、i和em有什么区别？

10.你都用什么浏览器去测试页面？为什么？简单说下内核的理解。

阅读全文

0 0