web前端面试题（HTML&CSS）下 答案详解

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

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

（1） 声明位于文档中的最前面，处于  标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

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

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

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

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

（1）块级元素。默认display属性是block。div ul ol li dl dt dd h1 h2 h3 h4…p。

（2）行内元素。默认display属性是inline。a b span img input select strong。

（3）空元素。功能性元素，标签可以不闭合。

---

 

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

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;--

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

4.link和@import的区别是？

（1）属于XHTML标签，而@import是CSS提供的;

（2）页面被加载的时，会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import只在IE5以上才能识别，而是XHTML标签，无兼容问题;

（4）方式的样式的权重 高于@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  选择属于其父元素的首个

元素的每个

元素。

2)      p:last-of-type   选择属于其父元素的最后

元素的每个

元素。

3)      p:only-of-type  选择属于其父元素唯一的

元素的每个

元素。

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

元素。

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

元素。

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）用正确的标签做正确的事情！

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

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

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

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

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

IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink。

8. iframe有那些缺点？

（1）iframe会阻塞主页面的Onload事件；

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

解决方法：使用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.一个满屏”品”字布局 如何设计?

class="header">div>

        

class="main">

            

class="left">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;}