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:last-of-type 选择属于其父元素的最后

元素的每个

元素。

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

元素的每个

元素。

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

元素。

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

元素。

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

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

三、CSS3有哪些新特性？

更详细的请见：https://www.cnblogs.com/qianduantuanzhang/p/7793638.html

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 文件，浏览器支持度还要低;

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

//已知宽高

.div1{width:400px;height:400px;position:absolute;left:50%;top:50%margin:-200px 0 0 -200px;}

.div1{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;border:1px solid #000;width:400px;height:400px;}

//未知宽高方法二：Document

.div1{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #000;width:400px;height:400px;}

十一、从输入url到页面加载完成发生了什么？

DNS解析 - TCP连接 - 发送HTTP请求 - 服务器处理请求并返回HTTP报文 - 浏览器解析渲染页面 - 连接结束