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;}

版权声明:初学者日常,多多指教 https://blog.csdn.net/action_xing/article/details/52728790

web前端面试题及答案 JavaScript篇

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

web前端面试题及答案 html篇 上

1.说说你对语义化的理解? 1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构 2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权...
  • qq_34753236
  • qq_34753236
  • 2016-04-29 14:44:24
  • 2050

Web前端开发经典面试题(附参考答案)

  • 2015年09月16日 17:23
  • 362KB
  • 下载

2018最新Web前端经典面试试题及答案

本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案。马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识...
  • wdlhao
  • wdlhao
  • 2018-01-16 21:56:43
  • 57607

web前端经典面试题

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

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

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

Web前端开发面试题集及答案

一、填空题(40分)1、目前常用的WEB标准静态页面语言是__ ______。(4分)html2、改变元素的外边距用________,改变元素的内填充用________。(6分)margin  pad...
  • yy280458609
  • yy280458609
  • 2011-03-05 13:15:00
  • 25833

web前端面试题及答案 css篇

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

2018最新Web前端面试题之HTML部分~~好久不见

好久不见 有一段时间没有写博客了。最近一段时间准备Web前端面试,刷了好多题。在这里和大家分享下,这一期主要分享一些HTML类型的面试题,大家赶快拿起纸和手。。。敲键盘吧 文档类容出自https:...
  • qq_32758013
  • qq_32758013
  • 2018-03-13 11:14:16
  • 220

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

总结了一下遇到的面试上的问题,希望能帮助到大家【歪脖树】 1.你能描述一下你制作一个网页的工作流程吗?   第一步:项目需求评审(明确需求) 第二步:等待ui设计师提供psd(项目需求技术调研) 第三...
  • action_xing
  • action_xing
  • 2016-09-29 11:30:39
  • 1035
收藏助手
不良信息举报
您举报文章:web前端面试题(HTML&CSS)下 答案详解
举报原因:
原因补充:

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