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前端面试题(HTML&CSS)上 答案详解

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

前端面试题答案的解答:html+css部分

知乎上一个前端面试题答案的解答: https://www.zhihu.com/question/19568008HTML+CSS

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

11.iframe的优缺点? 1.优点: ① 解决加载缓慢的第三方内容如图标和广告等的加载问题; ② Security sandbox; ③ 并行加载脚本; 2....

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

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

Web前端面试题笔记_HTML&CSS篇

1.DOM操作:怎样添加、移除、移动、复制、创建和查找节点 (1)创建新节点 (2)添加、移除、替换、插入 (3)查找 2.DOM对象与jQuery对象如何转换 3.如何将一个div垂直居中...

web前端面试题之html+css+js

HTML/CSS部分 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的...

web开发-web前端面试题(html-css-js)-学习笔记十二

1、。 答:html5标准网页声明,表示网页采用html5。 2、块元素和内联元素的区别。 答:块元素:换行,新的一行开始且能包含其他块对象和内联对象。例:div table p h1 form 内联...

前端面试题答案整理之CSS

css面试答案整理

web前端面试题及答案汇总

Doctype作用?严格模式与混杂模式如何区分?它们有何意义? HTML5 为什么只需要写 ? 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 页面导入样式时,使用link和@impor...

web前端面试题及答案整理(一)

web前端、HTML、CSS、JavaScript、DOM
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web前端面试题(HTML&CSS)下 答案详解
举报原因:
原因补充:

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