1、简述一下你对HTML语义化的理解

　1）用正确的标签做正确的事情

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

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

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

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

2、Doctype作用？标准模式与兼容模式之间区别？

　　<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html>标签之前，告知浏览器的解析器用什么文档标准解析这个文档

　　DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现

　　标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行

　　在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器以防止站点无法工作

3、什么是盒模型？你是怎么理解的

　　简单的说页面是由若干个盒模型（BOX）堆砌起来的，可以说每个HTML元素就是一个盒模型

　　盒模型由外到内包括边距(margin)、边框（border）、填充(padding)、内容(content)

　　盒子模型有两种分别是W3C标准模型和IE模型

　　不同之处：

　　标准模型宽高是指content，不包括padding和border

　　IE模型的宽高是指content+padding+border的总宽高

4、谈谈对BFC的理解

　　BFC：块格式化上下文(Block Formatting Context)

　　BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品

　　BFC的特性：

　　1）bfc 是一个独立的容器，容器内子元素不会影响容器外的元素

　　2）bfc的区域不会与float的元素区域重叠

　　3）计算bfc的高度时，浮动元素也参与计算

　　4）垂直方向上的距离由margin决定

　　5）内部的Box会在垂直方向上一个接一个的放置

　　以下条件会形成BFC：

　　1）浮动元素 float:left | right | inherit（none除外）

　　2）position:absolute 或 fixed 定位

　   3）display:inline-block | inline-flex | table-cell

　　4）overflow:hidden | auto | scroll (visible除外)

5、CSS选择符有哪些？哪些属性可以继承？

　　id选择器（ # myid）
　　类选择器（.myclassname）
　　标签选择器（div, h1, p）
　　相邻选择器（h1 + p）
　　子选择器（ul > li）
　　后代选择器（li a）
　　通配符选择器（ * ）
　　属性选择器（a[rel = "external"]）
　　伪类选择器（a:hover, li:nth-child）

　　可继承的样式： font-size font-family color, ul li dl dt dd

　　不可继承的样式：border padding margin width height

6、CSS优先级算法如何计算？

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

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

　　优先级为: !important > id > class > tag important 比 内联优先级高

7、你理解的伪类与伪元素　

　　伪类：用于向某些选择器添加特殊的效果。比如span:first-child{}
　　伪元素：用于将特殊的效果添加到某些选择器。比如span:before{}

　　伪类只要不是互斥可以叠加使用

　　伪元素在一个选择器中只能出现一次，并且只能出现在末尾
　　伪类与伪元素优先级分别与类、标签优先级相同
　　它们的本质区别：是否抽象创造了新元素

8、display有哪些值？box-sizing 常用的属性有哪些？说明他们的作用

　　block 像块类型元素一样显示。
　　none 缺省值。像行内元素类型一样显示。
　　inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
　　list-item 像块类型元素一样显示，并添加样式列表标记。
　　table 此元素会作为块级表格来显示
　　inherit 规定应该从父元素继承 display 属性的值　

　　box-sizing: content-box; // 默认的标准(W3C)盒模型元素效果
　　box-sizing: border-box; // 触发怪异(IE)盒模型元素的效果
　　box-sizing: inherit; // 继承父元素 box-sizing 属性的值

9、什么是外边距重叠？ 重叠的结果是什么？

　　外边距重叠就是 margin-collapse

　　相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。 这种合并外边距的方式被称为折叠　　

　　折叠结果遵循下列计算规则：
　　1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
　　2）两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
　　3）两个外边距一正一负时，折叠结果是两者的相加的和

10、请列举几种隐藏元素的方法　　

　　1）display: none; 元素会变得不可见，并且不会再占用文档的空间
　　2）visibility: hidden; 只是简单的隐藏某个元素，但是元素占用的空间还存在
　　3）opacity: 0; 设置0可以使一个元素完全透明
　　4）position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
　　5）transform: scale(0); 将一个元素设置为缩放无限小，元素不可见 原来位置将被保留

11、你对line-height是如何理解的？

　　line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离

　　一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容

　　把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中

　　line-height和height都能撑开一个高度，height会触发 haslayout，而line-height不会

12、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

　　行内元素有：a b span img input select strong

　　块级元素有：div ul ol li dl dt dd h1-h6 p

　　常见的空元素: <br> <hr> <img> <input> <link> <meta>

13、position有哪些值，他们各自的区别

　　absolute：生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位

　　relative：生成相对定位的元素，相对于其正常位置进行定位

　　fixed：生成绝对定位的元素，相对于浏览器窗口进行定位（固定定位）

　　static：默认值,无定位,元素出现在正常的流中（忽略top,bottom,left,right z-index）

14、HTML5有哪些新特性，新技术，如何区分HTML和HTML5？

　　语意化更好的内容元素。比如header、footer、nav、section、article

　　用于媒介回放的 video 和 audio 元素

　　绘画 canvas

　　拖放Drag

　　表单控件，calendar、date、time、email、url、search

　　存储功能localStorage和sessionStorage

　　localStorage 长期存储数据，浏览器关闭后数据不丢失
　　sessionStorage的数据在浏览器关闭后自动删除

　　新的技术webworker, websocket（通讯协议）, Geolocation（地理定位）

　　区分HTML和HTML5:

　　DOCTYPE声明上不同

　　结构语义上不同

　　添加了新的功能媒体标记标签，如audio、video

15、SVG 与 Canvas两者间的区别

　　SVG 是一种使用 XML 描述 2D 图形的语言

　　Canvas 通过 JavaScript 来绘制 2D 图形

　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的，在SVG 中，每个被绘制的图形均被视为对象

　　如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形

　　Canvas 是逐像素进行渲染的

　　在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注

　　如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象

16、为什么要初始化CSS样式

　　因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的

　　如果没对CSS初始化往往会出现浏览器之间的页面显示差异

　　可以使用 reset.css 或 Normalize.css 做 CSS 初始化

17、rgba() 和 opacity 的透明效果有什么不同？

　　opacity 作用于元素以及元素内的所有内容（包括文字）的透明度

　　rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果

18、请描述一下 cookies，sessionStorage 和 localStorage 的区别

　　cookie是网站为了标示用户身份而储存在用户本地终端上的数据（一般加密）

　　sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

　　存储大小：

　　cookie数据大小不能超过4k

　　sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

　　有效时间：

　　localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

　　sessionStorage 数据在当前浏览器窗口关闭后自动删除

　　cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

19、浏览器是怎么对HTML5的离线储存资源进行管理和加载的？

　　1）在线的情况下，浏览器发现 html 标签有 manifest 属性，它会请求 manifest 文件

　　2）如果是第一次访问app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储

　　3）如果已经访问过app且资源已经离线存储了，浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作。如果文件改变了，那么就会重新下载文件中的资源并进行离线存储

　　4）离线的情况下，浏览器就直接使用离线存储的资源

20、页面导入样式时，使用 link 和 @import 有什么区别？

　　link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS

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

　　@import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题

21、列举几种清除浮动的方法

　　1)给父级使用:after 伪元素

　　2）末尾处添加空div标签clear:both

　　3）父元素设置 overflow：hidden; （必须定义width或zoom:1）

　　4）父元素也设置浮动

　　5）结尾处加br标签clear:both

22、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

　　响应式设计就是网站能够兼容多个终端（包括PC端，手机平板终端），而不是为每个终端做一个特定的版本

　　基本原理是利用CSS3媒体查询，为不同尺寸的设备适配不同样式

　　对于低版本的IE，可采用JS获取屏幕宽度，然后通过resize方法来实现兼容

23、水平居中、垂直居中的方法有哪些？

　　水平居中：

　　1）inline-block实现水平居中（text-align:center;）

　　2）margin和width实现水平居中

　　3）绝对定位实现水平居中

　　4）使用flex实现水平居中

　　5）使用栅格布局grid实现水平居中

　　垂直居中：

　　1）新增 inline-block 兄弟元素，设置 vertical-align

　　2）绝对定位配合 transform 位移

　　3）使用flex弹性盒子display:flex

　　4）未知高度的块级子元素，采用table-cell配合vertical-align

　　5）已知高度的块级子元素，采用绝对定位和负边距

　　6）通过css3的translate变形实现

24、你理解的flex弹性盒子布局

　　Flexbox用于不同尺寸屏幕中创建可自动扩展和收缩布局

　　任何一个容器都可以指定为Flex布局

　　使用弹性布局可以有效的分配一个容器的空间

　　即使我们的容器元素尺寸改变，它内部的元素也可以调整它的尺寸来适应空间

　　设置了flex布局后，子元素的float、clear和vertical-align属性就会失效

25、阐述px与em、rem的区别，以及你知道的其他css单位

　　px就是pixel像素的缩写，相对长度单位。常用于PC端的字体单位

　　em相对于当前父元素的font-size（并不是固定的）

　　rem相对于HTML根元素的font

　　其他css单位：

　　%百分比，一般来说就是相对于父元素

　　vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100

　　vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100

　　vm css3新单位，相对于视口的宽度或高度中较小的那个

26、实现左边固定宽度，右边自适应（不限于一种方法）

　　1）浮动布局（左侧固定宽度并且左浮动，右侧使用margin-left）

　　2）使用定位（左侧固定宽度并且绝对定位，右侧使用margin-left）

　　3）overflow（左侧固定宽并且左浮动，右侧加overflow：hidden）

　　4）flex布局（父级元素设置display:flex，左侧设置固定宽，右侧flex:1）

27、使用css实现一个持续的动画

　　

.animat{

     width:20px;

     height:20px;

     background:red;

     position:relative;

     animation:mymove 3s infinite;

}

@keyframes mymove{

     from{left:0px;}

     to{left:200px;}

}

28、css实现三角形

.triangle{

     width:;

     height:;

     border-width:20px;

     border-style:solid;

     border-color:transparent transparent red transparent;

}

29、移动端开发中有哪些常用的布局？

　　百分比流式布局

　　flex布局

　　媒体查询+rem布局

　　固定宽度做法

30、什么是圣杯布局和双飞翼布局，并说下实现原理

　　圣杯布局：

　　三列布局；中间主体内容前置，且宽度自适应；两边内容定宽

　　好处：重要的内容放在文档流前面可以优先渲染

　　原理：利用相对定位、浮动、负边距布局，而不添加额外标签

　　双飞翼布局：

　　双飞翼布局：对圣杯布局（使用相对定位对以后布局有局限性）的改进，消除相对定位

　　原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位

31、align-content与align-items的区别？

　　align-content:center对单行是没有效果的

　　而align-items:center不管是对单行还是多行都有效果

　　我们日常开发中用的比较多的就是align-items

32、列举去除inline-block出现间距的几种方法

　　1）给父级font-size：0

　　2）使用margin负值

　　3）使用letter-spacing

　　4）使用word-spacing

　　5）移除空格

33、title与h1的区别、b与strong的区别、i与em的区别？

　　title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响

　　b是一个实体标签，展示强调内容。strong是标明重点内容，有语气加强的含义

　　i内容展示为斜体，em表示强调的文本

34、<script>、<script defer>、<script async>三者之间区别

　　没有defer或async属性，浏览器会立即加载并执行相应的脚本

　　有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行

　　有了defer属性，加载后续文档的过程和js脚本的加载是并行进行的
　　（此时仅加载不执行）

　　defer和async在网络加载过程是一致的，都是异步执行

　　两者的区别在于脚本加载完成之后何时执行

　　如果存在多个有defer属性的脚本，那么它们是按照加载顺序执行脚本的

　　对于async，它的加载和执行是紧挨的，无论声明顺序如何，只要加载完成立刻执行

35、data-的用法，以及他的优势

　　data-代表自定义属性，可以在所有的 HTML 元素中嵌入数据

　　自定义的数据可以让页面拥有更好的交互体验

　　属性名不要包含大写字母，在 data- 后必须至少有一个字符

　　该属性可以是任何字符串

　　自定义属性前缀 "data-" 会被客户端忽略

36、如何实现浏览器内多个标签页之间的通信?

　　WebSocket、SharedWorker

　　也可以调用localstorge、cookies等本地存储方式

37、实现不使用border画出1px高的线

注：在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>

38、怎么让Chrome支持小于12px 的文字

.shrink{

      -webkit-transform:scale(0.8);

       -o-transform:scale(1);

       display:inline-block;

}

39、一个满屏 品 字布局 如何设计?

　　上面的div宽100%

　　下面的两个div分别宽50%

　　然后用float或者inline使其不换行即可

40、经常遇到的浏览器的兼容性有哪些？解决方法是什么？

　　1）PNG24位的图片在ie6浏览器上出现背景，解决方案是做成PNG8

　　2）浏览器默认的margin和padding不同。解决方案：*{margin:0;padding:0;}

　　3）Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入CSS属性-webkit-text-size-adjust:none解决

　　4）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义的属性

　　在FireFox下，只能使用getAttribute()获取自定义属性；解决方法：统一通过getAttribute()获取自定义属性

　　5）IE下，even对象有x,y属性，但是没有pageX,pageY属性

　　在Firefox下，even对象有pageX,pageY属性，但是没有x,y属性

　　 解决方法：(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数

41、less如何定义一个函数，比如圆角

//定义圆角

   @radius

       .round(@radius:5px){

        border-radius:@radius;

            -webkit-border-radius: @radius;

            -moz-border-radius: @radius;

        }

        .round7{

           .round(7px);

        }

42、如何平移放大一个元素

transform:translateX(100px)

transform:scale(2)

43、CSS中动画实现的方式有几种

　　transition、keyframes(animation)

44、你知道的CSS预处理器，以及预处理器作用

　　less、sass、Stylus

　　作用：
　　帮助更好地组织CSS代码
　　提高代码复用率
　　提升可维护性

45、如何解决CSS模块化

　　less sass 等CSS预处理器

　　webpack处理CSS(css-loader+style-loader)

　　PostCSS插件(postCSS-import/precss等)

46、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

　　浏览器的默认行为会把inline元素间的空白字符渲染成一个空格，空格会占用一个字符的宽度

　　解决方案：给父级font-sieze设置为0。或者采用letter-spacing方式

47、描述一下你对渐进增强和优雅降级的理解

　　渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

.transition{

    -webkit-transition: all .5s;

       -moz-transition: all .5s;

         -o-transition: all .5s;

           transition: all .5s;

 }

　　优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

        .transition{

        　　     transition: all .5s;

        　　  -o-transition: all .5s;

          　-moz-transition: all .5s;

         -webkit-transition: all .5s;

        }

48、解释css sprites，如何使用

　　css精灵又称雪碧图

　　将多个小图片整个到一张大的背景图上，再利用repeat、position进行精准操作

　　雪碧图减轻了服务器的请求次数，提高了页面性能

49、针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？

<meta name = "viewport" content = "width=device-width,initial-scale = 1.0,maximum-scale = 1.0">

50、简述几个css hack

　　(1) 图片间隙
　　在div中插入图片，图片会将div下方撑大3px。hack1：将<div>与<img>写在同一行。hack2：给<img>添加display：block；
　　dt li 中的图片间隙。hack：给<img>添加display：block；
　　(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
　　hack1：给元素添加：font-size：0；
　　hack2：声明：overflow：hidden；
　　表单行高不一致
　　hack1：给表单添加声明：float：left；height： ；border： 0；
　　鼠标指针
　　hack：若统一某一元素鼠标指针为手型：cursor：pointer；
　　当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
　　hack1：给a加display：inline-block；
　　hack2：给li加float：left；

前端面试题整理—HTML/CSS篇的更多相关文章

  1. 前端面试题整理（css）

    1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...

  2. 最近面试前端面试题整理（css部分）

    对最近面试的面试题坐下总结: 一,css部分 1,html元素的垂直居中 答案: <div id="box"> <div> 测试 </div> ...

  3. 前端面试题整理（html篇）

    1.Doctype作用?标准模式与兼容模式各有什么区别? <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准 ...

  4. 前端面试题整理——HTML/CSS

    如何理解语义化: 对应的内容是用相应意思的标签,增加开发者和机器爬虫对代码的可读性. 块状元素和内联元素: 块状元素有:display:block/table:有div h1 h2 table ul  ...

  5. 【web前端面试题整理02】前端面试题第二弹袭来，接招！

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  6. 常见前端面试题之HTML/CSS部分

    转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...

  7. 史上最全前端面试题(含答案)-A篇

    HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...

  8. 前端面试题（HTML/CSS）

    (前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...

  9. 【web前端面试题整理06】成都第一弹，邂逅聚美优品

    前言 上周四回了成都,休息了一下下,工作问题还是需要解决的,于是今天去面试了一下,现在面试回来了,我感觉还是可以整理一下心得. 这个面试题整理系列是为了以后前端方面的兄弟面试时候可以得到一点点帮助,因 ...

随机推荐

  1. 【BZOJ5324】[JXOI2018]守卫（动态规划）

    [BZOJ5324][JXOI2018]守卫(动态规划) 题面 BZOJ 洛谷 题解 既然只能看到横坐标在左侧的点,那么对于任意一个区间\([l,r]\)而言,\(r\)必须被选. 假设\(r\)看不 ...

  2. table用模板生成的问题

    在使用<template></template>存放HTML模板标记时,发现一个烦人的问题,表格不行. <template> <table> <t ...

  3. 构建MFS分布式文件系统

    ++++++++++++++构建MFS分布式文件系统++++++++++++++PB级别:企业存储空间达到PB级别,即100万GB空间.(1PB=1000TB,1TB=1000GB,1GB=1000M ...

  4. hdu 5289 Assignment (ST+二分)

    Problem Description Tom owns a company and he is the boss. There are n staffs which are numbered fro ...

  5. 项目部署之nginx实现PC端和移动端自动跳转

    假设PC端域名为 www.abc.com     移动端域名为m.abc.com PC端nginx配置文件server中加入如下代码: if ($http_host !~ "^www.abc ...

  6. 【SFA官方翻译】Spring WebFlux和Spring Cloud进行响应式微服务开发

    源码,修正一些错误: https://github.com/bigben0123/sample-spring-cloud-webflux 原创 SpringForAll社区 2018-05-18 作者 ...

  7. Java 判断相等

    1.基本数据类型用 == long a = (long) 1234567890; long b = (long) 1234567890; if (a == b) { System.out.printl ...

  8. Django（十二）—关于查询知识点总结

    https://www.cnblogs.com/haiyan123/p/7763710.html models.Book.objects.filter(**kwargs):   querySet   ...

  9. JS实现clone()方法，对五种主要数据类型进行值复制

    Object.Array.Boolean.Number.String 分为三种情况:普通变量,Array,Object 递归调用

  10. shiro:hasPermission 标签 ：验证当前用户是否拥有指定权限

    1.这些值是存在数据库里的,在哪里找呢?sys_menu 中的permission列. <shiro:hasPermission name="cms:article:edit" ...