web前端面试题(HTML&CSS)下 答案详解

原创 2016年10月03日 17:40:18

总结了一下遇到的面试上的问题,希望能帮助到大家【歪脖树 

1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

1<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。

2)严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

3)在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

4DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2.行内元素有哪些?块级元素有哪些? (void)元素有那些?

1)块级元素。默认display属性是blockdiv ul ol li dl dt dd h1 h2 h3 h4p

2)行内元素。默认display属性是inlinea b span img input select strong

3)空元素。功能性元素,标签可以不闭合。<br> <hr> <img> <input> <link> <meta>

 

3.介绍一下CSS的盒子模型?

1)有两种, IE 盒子模型、标准 W3C 盒子模型;IEcontent部分包含了 border  padding;--

2)盒模型: 内容(content)、填充(padding)、边界(margin) 边框(border).

4.link@import的区别是?

1<link>属于XHTML标签,而@importCSS提供的;

2)页面被加载的时,<link>会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

3import只在IE5以上才能识别,而<link>XHTML标签,无兼容问题;

4<link>方式的样式的权重 高于@import的权重。

5.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?

CSS 选择符:

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)

可继承的样式:

1)      font-size

2)      font-family

3)      color

4)      text-indent

不可继承的样式:

1)      border

2)      padding

3)      margin

4)      width

5)      height

优先级算法:

1)      优先级就近原则,同权重情况下样式定义最近者为准;

2)      载入样式以最后载入的定位为准;

3)      3.!important >  id > class > tag  

4)      important 比 内联优先级高,但内联比 id 要高

CSS3新增伪类举例:

1)      p:first-of-type  选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

2)      p:last-of-type   选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

3)      p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

4)      p:only-child     选择属于其父元素的唯一子元素的每个 <p> 元素。

5)      p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

6)      :enabled :disabled 控制表单控件的禁用状态。

7)      :checked         单选框或复选框被选中。

 

CSS3有哪些新特性?

1)    CSS3实现圆角(border-radius),阴影(box-shadow),

2)    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform

3)    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4)    增加了更多的CSS选择器  多背景 rgba 

5)    CSS3中唯一引入的伪元素是 ::selection.

6)    媒体查询,多栏布局

7)    border-image

 

6.HTML语义化的理解?

1)用正确的标签做正确的事情!

2html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;

3)在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的。

4)搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO

5)使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

7.浏览器的内核分别是什么?

IE浏览器的内核TridentMozillaGeckoChromeBlinkWebKit的分支)、Opera内核原Presto现为Blink

8. iframe有那些缺点?

1iframe会阻塞主页面的Onload事件;

2iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

解决方法:使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。

9.用纯 CSS 创建一个三角形

.triangle{

    width: 0;height: 0;

    border-left: 60px solid transparent;

    border-right: 60px solid transparent;

border-top: 120px solid red;

    }

10.一个满屏字布局 如何设计?

<div class="header"></div>

        <div class="main">

            <div class="left"></div>

            <div class="right"></div>

</div>

    .header{height:200px;background:#e33;width:100%;}

    .main{width:100%;height:200px;overflow:hidden;}

    .main .left,.main .right{width:50%;height:200px;float:left;background:#a23;}

      .main .right{background:#e11;}

版权声明:初学者日常,多多指教

Web前端基础面试题目及答案

前端基本技能有:1 HTML/CSS 2 JavaScript 1、什么是盒子模型?  在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(pad...
  • qq443068902
  • qq443068902
  • 2016年05月31日 22:08
  • 4364

web前端面试题及答案 css篇

1.CSS3有哪些新特性? CSS3实现圆角(border-radius), 阴影(box-shadow), 对文字加特效(text-shadow、), 线性渐变(gradient), 旋转...
  • qq_34753236
  • qq_34753236
  • 2016年04月29日 11:46
  • 2594

web前端面试题及答案 JavaScript篇

1.null和undefined的区别?1,null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN。 2,null用来表示尚未存在的对象,常用...
  • qq_34753236
  • qq_34753236
  • 2016年05月03日 17:20
  • 6208

web前端面试题(HTML&CSS)上 答案详解

总结了一下遇到的面试上的问题,希望能帮助到大家【歪脖树】 1.你能描述一下你制作一个网页的工作流程吗?   第一步:项目需求评审(明确需求) 第二步:等待ui设计师提供psd(项目需求技术调研) 第三...
  • action_xing
  • action_xing
  • 2016年09月29日 11:30
  • 968

2017年前端面试题整理汇总100题

2017年前端面试题整理汇总100题
  • kebi007
  • kebi007
  • 2017年02月05日 18:14
  • 112032

web前端经典面试题

web前端面试题   其他问题 1、请谈谈你对性能优化的认识? 网页内容 减少http请求次数 80%的响应时间花在下载网页内容(images, stylesheets, javascri...
  • gyq04551
  • gyq04551
  • 2017年02月16日 12:18
  • 8741

2017年前端面试题最新汇总

再来更新一篇面试题 早前我更新过一篇 《前端面试题》,据反馈,确实帮助到了不少去面试的新人或者换工作的菜鸟他们留言或者直接赞赏表示感谢,还有问答案的,不过我想说:我就是不给你答案,自有原因,给了答案,...
  • xllily_11
  • xllily_11
  • 2017年04月28日 12:12
  • 10662

百度web前端面试题-2015年

http://www.itmian4.com/forum.php?mod=viewthread&tid=6239&extra=page%3D2%26filter%3Dtypeid%26typeid%3...
  • sinat_16073327
  • sinat_16073327
  • 2015年03月18日 15:25
  • 1290

web前端面试题-各大公司面试题(360)

1 下面代码的输出值是:alert(1&&2) 2 answer:1、只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。2、只要“||”前面为true...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017年08月07日 21:50
  • 771

2017年web前端面试题目汇总!

划重点 为您收集一些面试中经常会遇到的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,助你过关斩将,早日获得满意工作,如有错误或更好的答案...
  • zwjweb
  • zwjweb
  • 2017年12月02日 14:50
  • 256
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web前端面试题(HTML&CSS)下 答案详解
举报原因:
原因补充:

(最多只允许输入30个字)