前端面试题（HTML、CSS部分）

HTML、CSS部分：

一、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
h5新标签兼容：
IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何区分：
DOCTYPE声明\新增的结构元素\功能元素

二、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）

可以继承的属性：

可继承的样式： font-size font-family color, UL LI DL DD DT;

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

优先级：

!important > id > class > tag

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

CSS3新增伪类举例：

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

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

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

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

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

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

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

三、CSS3有哪些新特性？

CSS3实现圆角（border-radius），阴影（box-shadow），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

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

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

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

媒体查询，多栏布局

border-image

四、解释盒模型宽高值得计算方式，边界塌陷，负值作用，box-sizing概念？

1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，宽度 = 边框 + padding + 内容宽度； chrom、IE9+、(添加doctype) 使用标准盒模型，宽度 = 内容宽度。
2. box-sizing : 为了解决标准黑子和IE盒子的不同，CSS3增添了盒模型属性box-sizing，content-box(默认)，border-box 让元素维持IE传统盒子模型， inherit 继承父盒子模型；
3. 边界塌陷：块元素的 top 与 bottom 外边距有时会合并（塌陷）为单个外边距（合并后最大的外边距），这样的现象称之为外边距塌陷。
4. 负值作用：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。

五、BFC（Block Formatting Context）是什么？应用？

1. BFC 就是 ‘块级格式上下文’ 的格式，创建了BFC的元素就是一个独立的盒子，不过只有BLock-level box可以参与创建BFC，它规定了内部的Bloc-level Box 如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
2. 应用场景：
1. 解决margin叠加的问题
2. 用于布局（overflow: hidden）,BFC不会与浮动盒子叠加。
3. 用于清除浮动，计算BFC高度。

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

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

七、简要说一下CSS的元素分类

块级元素：div,p,h1,form,ul,li;
行内元素 : span,a,label,input,img,strong,em;

八、解释下浮动和它的工作原理？清除浮动的方法

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

2.使用after伪对象清除浮动

　该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

#parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

3.设置overflow为hidden或者auto

4.浮动外部元素

九、CSS隐藏元素的几种方法（至少说出三种）

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

十、如何让一个盒子水平垂直居中

//已知宽高

<div class="div1"></div>

<style>

    .div1{

        width:400px;

        height:400px;

        position:absolute;

        left:50%;

        top:50%

        margin:-200px 0 0 -200px;

    }

</style>

//未知宽高

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .div1{

            position: absolute;

            left: 0;

            top: 0;

            bottom: 0;

            right: 0;

            margin: auto;

            border: 1px solid #000;

            width: 400px;

            height: 400px;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

</body>

</html>

//未知宽高方法二：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .div1{

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

            border: 1px solid #000;

            width: 400px;

            height: 400px;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

</body>

</html>

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

相同点：都会在浏览器端保存，有大小和同源限制。
不同点：
1、cookie会随请求发送到服务器，作为会话表示，服务器可修改cookie。web storage不会随请求大宋到服务器。
2、cookie有path的概念，子路径可以访问父路径的cookie，父路径不可以访问子路径的cookie。
3、有效期： cookie在设置的有效期内有效，默认为浏览器关闭消失。sessionStorage在会话窗口关闭后失效，localStorage长期有效，需主动删除。
4、sessionStorage不能共享，localStorage在同源文档之间可以共享，cookie在同源且符合path规则的文档之间可以共享。
5、localStorage的修改会触发其他文档的update事件。
6、cooie有secure属性要求HTTPS传输。
7、浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。webStorage可以支持5M的存储。

十二、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。

// 方法一：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .div1{

            width: 100px;

            height: 200px;

            background-color: #ccc;

            float: left;

        }

        .div2{

            background-color: #ff0;

            margin-left: 100px;

            height: 200px;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

</body>

</html>

//方法二：

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .div{

            display: flex;

            flex-direction: row;

            align-items: center;

        }

        .div1{

            flex-basis: 100px;

            background-color: #ccc;

            height: 300px;

        }

        .div2{

            background-color: #ff0;

            height: 300px;

            flex-grow: 1;

        }

    </style>

</head>

<body>

<div class="div">

    <div class="div1"></div>

    <div class="div2"></div>

</div>

</body>

十三、什么是语义化的HTML?

直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

十四、link和@import有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

十五、常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

十六、如何解决跨域问题

JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面

1、JSONP

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

2、CORS

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

3、通过修改document.domain来跨子域

将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

主域相同的使用document.domain

4、使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的

十七、前端性能优化的方式

1、减少DOM操作
2、部署前，图片压缩，代码压缩
3、优化js代码结构，减少冗余代码
4、减少http请求，合理设置HTTP缓存
5、使用内容分发cdn加速
6、静态资源缓存
7、图片延迟加载

十八、对前端工程化的理解

开发规范
模块化开发
组件化开发
开发仓库
性能优化
项目部署
开发流程
开发工具

（如果有不错的，再补充）

前端面试题（HTML、CSS部分）的更多相关文章

web前端面试题HTML/CSS部分
web前端面试题HTML/CSS部分前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...
前端面试题：CSS实现水平垂直居中
这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现这一种工作中用的应该是最多的,兼 ...
[WEB面试题] web前端面试题HTML+CSS第一弹，个人整理部分面试题汇总
以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...
前端面试题（css）
css 基础面试题 css 面试题 js 面试题 1.介绍下CSS的盒子模型介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? css 是如何设置这两种模型的 box-si ...
前端面试题：css相关面试题
CSS 选择器中,元素选择器和类选择器的区别是什么? 元素选择器是最常见的 CSS 选择器,即,文档的元素就是最基本的选择器.选择器通常是某个 HTML 元素,比如 <p>.<h1& ...
前端面试题之css
1.请列出几个具有继承特性的css属性 font-family font-size color line-height text-align text-indent 2.阐述display: ...
前端面试题-HTML+CSS
引用GitHub 上 ltadpoles的前端面试 https://github.com/ltadpoles HTML部分 1. Doctype作用,HTML5 为什么只需要写<!DOCTYPE ...
前端面试题归类-css
一.说下盒模型? 有两种盒模型,W3C盒模型和IE盒模型通常说的"IE盒子模型"指的是IE5.5,IE6及其以后,盒模型都为 content-box当浏览器未设置<!doct ...
前端面试题归类-css的flex相关
Flex布局常见父项的属性: ●flex-direction :设置主轴的方向 Row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到 ...
某一线互联网公司前端面试题总结css部分
1,css3选择器 :not(selector) 选择页面内所有type!=text的类型: input:not([type=text]){ color: red; font-weight: bold ...

随机推荐

Linux基础篇三：文件系统
/bin 实际上是 /usr/bin /sbin 实际上是 /usr/sbin /usr/bin 里面的命令其实是依赖 /lib64 或者 /lib32 ldd /us ...
Could not open Hibernate Session for transaction; nested exception is org.hibernate.TransactionExcep linux下mysql修改连接超时wait_timeout修改后就ok了
Linux下mysql修改连接超时wait_timeout 1,首先: show variables like '%timeout%': 显示结果: +------------------------ ...
ReactJS - 组件的生命周期
组件的生命周期分为三个状态 Mounting: 已插入真实DOM Updateing: 正在被重新渲染 Unmounting: 已移出真实DOM React 为每个状态都提供了两种处理函数,即函数在进 ...
基于phathomjs token 不定时无响应问题排查
问题描述基于phathomjs的token池项目,基本原理是,打开淘宝页,获取匿名cookie,再由cookie中提取有效token,调用方通过该token获取淘宝数据为方便基他人应用,封装了部分 ...
安装与使用django-restframework
django-restframework 一.安装与使用 1.安装 >: pip3 install djangorestframework 2.使用在settings.py中注册: INSTA ...
虚拟机apache启动
/usr/local/apache2/bin/apachectl restart 重启当启动也行尝试过进入目录运行,比较奇怪,www目录竟然不一致,直接使用 server httpd start ...
浮动框架iframe
浮动框架式一种比较特别的框架,和frame比较类似.不过frame必须在frameset中才可以,而iframe不一样,首先, 他是一种内联框架,其次,他可以放在网页中的任何位置. 所以,iframe ...
Android开发之《USB Camera》
SimpleWebCam Source Code:https://bitbucket.org/neuralassembly/simplewebcam/src 1. USB摄像头UVC兼容(如今大部分兼 ...
PHP导出excel文件的多种方式
1.第一种实现的方法 set_time_limit(0); //逐条导出数据 ob_end_clean(); header("Content-type: application/vnd.ms ...
mybatis参数映射
转载地址:http://iyiguo.net/blog/2012/09/27/mybatis-param-mapping-rules/ 规则非注解参数当参数未使用@Param注解时,可以通过以下方 ...

前端面试题（HTML、CSS部分）

前端面试题（HTML、CSS部分）的更多相关文章

随机推荐

热门专题