面试题(html5+css3)H5 的新特性有哪些？语义化标签(header,nav,footer ,aside, a

H5 的新特性有哪些？

语义化标签(header,nav,footer ,aside, article, section)

结构清晰，易读
便于SEO
方便设备解析

表单功能增强
音频 ,视频(audio, video)标签

autoplay：自动播放

画布 Canvas
拖拽释放(Drap and drop) API ondrop

拖放是一种常见的特性，即抓取对象以后拖到另一个位置,在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

地理(Geolocation) API 其实 Geolocation

就是用来获取到当前设备的经纬度（位置）

css3新特性

两种类型渐变：线性、径向
文本效果：文字阴影、轮廓
过渡：四个是属性（属性名称、花费时间、时间曲线、何时开始）
媒体查询
盒子模型：标准盒子模型，怪异盒子模型
字体图标 iconfont/icomoon

使盒子水平居中

利用定位

<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>利用 margin:auto
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>

利用 margin:auto

<style>
.parent
{
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>

利用 display：flex;设置垂直水平都居中

<style>
.parent {
width: 500px;
height: 500px;
border: 1px
display: flex;
solid #000;
justify-content: center;
align-items: center;
}

.child {
width: 100px;
height: 100px;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>

计算父盒子与子盒子的空间距离(这跟方法一是一个道理)

<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
margin-top: 200px;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>

利用 transform

<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>

CSS 的盒模型

盒子模型分为两种:

W3C 标准的盒子模型（标准盒模型）

标准盒模型中 width 指的是内容区域 content 的宽度

height 指的是内容区域 content 的高度

标准盒模型下盒子的大小 = content + border + padding + margin 2.IE 标准的盒子模型（怪异盒模型）
怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border +padding）；height 指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width（content + border + padding） + margin

CSS 中选择器的优先级以及 CSS 权重如何计算

！Important>行内样式>ID 选择器>类选择器>标签>通配符>继承>浏览器默认属性权重

H5 input 元素 type 属性值

file 定义输入字段和 "浏览..." 按钮，供文件上传

hidden 定义隐藏输入字段

image 定义图像作为提交按钮

number 定义带有 spinner 控件的数字字段

password 定义密码字段。字段中的字符会被遮蔽。

radio 定义单选按钮。

search 定义用于搜索的文本字段。

submit 定义提交按钮。提交按钮向服务器发送数据。

text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。

url 定义用于 URL 的文本字段。

CSS 中哪些属性可继承，哪些不可以

能继承的属性

字体系列属性:font、font-family、font-weight、font-size、font-style;
文本系列属性:

2.1）内联元素：color、line-height、word-spacing、letter-spacing、text-transform;

2.2）块级元素：text-indent、text-align;
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout;
列表布局属性：list-style

不能继承的属性

display：规定元素应该生成的框的类型；
文本属性：vertical-align、text-decoration;
盒子模型的属性：width、height、margin 、border、padding;
背景属性：background、background-color、background-image;
定位属性：float、clear、position、top、right、bottom、left、min-width、

min-height、max-width、max-height、overflow、clip;

CSS 单位中 px、em 和 rem 的区别

1、px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位

2、em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小因此并不是一个固定的值

3、rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素

4、区别：

IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐前，除了 IE8 及更早版本外，所有浏览器均已支持 rem

rem 适配方法如何计算 HTML 根字号及适配方案）

通用方案

1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）

2、通过媒体查询分别设置每个屏幕的根 font-size

3、CSS 直接除以 2 再除以 100 即可换算为 rem

优：有一定适用性，换算也较为简单

劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同

手机，单某款手机尺寸不在设置范围之内，会导致无法适配

网易方案

1、拿到设计稿除以 100，得到宽度 rem 值

2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入 x

document.documentElement.style.fontSize=document.documentElement.clientWidth/ x + ‘px‘

;

3、设计稿 px/100 即可换算为 rem

优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便

劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适配不是很到位

手淘方案

1、拿到设计稿除以 10，得到 font-size 基准值

2、引入 flexible

3、不要设置 meta 的 viewport 缩放值

4、设计稿 px/ font-size 基准值，即可换算为 rem

优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。

劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时,单位计算复杂

display：none 与 visibility：hidden 的区别

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失

visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

区别

1.visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元素会显示

2.visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。

3.在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display ，因为transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可提高用户体验

4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

position 的值有哪些，分别有哪些作用？

静态定位：static 默认值,不脱离文档流，top，right，bottom，left 等属性不生效
绝对定位：absolute

绝对定位的关键是找对参照物：找到最近的一级带有带定位的父级元素进行位置移动
如果找不到，那么相对于浏览器窗口进行定位
注：设置了 position:absolute;属性后，元素会脱离正常文档流，不在占据空间；左右 margin为 auto 将会失效；我们通过left、top、bottom、right 来决定元素位置

相对定位：relative

参照物：元素偏移前位置
注：设置了相对定位，左右 margin 为 auto 仍然有效、并且不会脱离文档流。

固定定位：fixed

参照物：浏览器窗口；
注：固定定位会脱离文档流；当绝对定位和固定定位参照物都是浏览器窗口时的区别：当出现滚动条时，固定定位的元素不会跟随滚动条滚动，绝对定位会跟随滚动条滚动

为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动

浮动将元素排除在普通流之外，即元素将脱离文档流，不占据空间。浮动元素碰到包含它的边界或者浮动元素的边界停留

为什么需要清除浮动

1、子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素；

2、与浮动元素同级的非浮动元素（内联元素）会跟随其后；

3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解

清除浮动的方式

1、使用 CSS 中的 clear:both;（放一个空的标签，并设置上述 css，注意该标签必须是块元素）,属性来清除元素的浮, 可解决 2、3 问题

2、对于问题 1，给父元素添加 clearfix 样式；

3、给父级元素设置 overflow：hidden；或 overflow：auto；本质是构建一个 BFC

如何解决 margin“塌陷”

外边距塌陷共有两种情况：

第一种情况：两个同级元素，垂直排列，上面的盒子给 margin-bottom 下面的盒子给margin-top，那么他们两个的间距会重叠，以大的那个计算。

解决这种情况的方法为：两个外边距不同时出现

第二种情况：两个父子元素，内部的盒子给 margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。

解决方案：

1、为父盒子设置 border，添加 border 后父子盒子就不是真正意义上的贴合（可以设置成透明：border：1px solid transparent）；

2、为父盒子添加 overflow：hidden；

3、为父盒子设定 padding 值；

4、为父盒子添加 position：fixed；

5、为父盒子添加 display：table；

6、利用伪元素给父元素的前面添加一个空元素

.father::before {
content:'';
display:table;
}

::before 和::after 中双冒号和单冒号有什么区别、作用

区别

单冒号（:）用于 CSS3 的伪类
双冒号（::）用于 CSS3 的伪元素
想让插入的内容出现在其它内容前，使用::before，否则，使用::after；
在代码顺序上，::after 生成的内容也比::before 生成的内容靠后
作用：

::before 和::after 的主要作用是在元素内容前后加上指定内容伪类与伪元素都是用于向选择器加特殊效果

伪类与伪元素的本质区别就是是否抽象创造了新元素
伪类只要不是互斥可以叠加使用
伪元素在一个选择器中只能出现一次，并且只能出现在开始和末尾
伪类与伪元素优先级分别与类、标签优先级相同

CSS3 新增伪类，以及伪元素

CSS3 新增伪类

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

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

p:nth-child(n) 选择属于其父元素的第 n 个子元素并且必须是元素

p:nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素并且必须是元素

p:nth-of-type(n) 选择属于其父元素第 n 个元素

p:nth-last-of-type(n) 选择属于其父元素倒数第 n 个元素

p:last-child 选择属于其父元素最后一个子元素的并且必须是元素

p:target 和锚点链接一起使用

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

:not(p) 选择非元素

:enabled 选中不在禁用状态下的表单控件

:disabled选中禁用状态下的表单控件

:checked选中单选框或复选框被选中的元素

伪元素

::first-letter 将样式添加到文本的首字母

::first-line 将样式添加到文本的首行

::before 在某元素之前插入某些内容

::after 在某元素之后插入某些内容

Bootstrap 栅格系统的工作原理

原理

1、行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补（padding）

2、通过行（row）在水平方向创建一组列（column）

3、自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素

4、类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化布局

5、通过为列设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值 margin 从而抵消为.container 元素设置的 padding，也就间接为行（row）所包含的列（column）抵消掉了 padding

6、栅格系统的列是通过指定 1 到 12 的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4 来创建

7、如果一行（row）中包含了的列（column）大于 12，多余的列所在的元素将作为一个整体另起一行排列