文章目录

• • 一、H5的新特性有哪些?
  • 二、CSS3的新特性有哪些?
  • 三、如何实现一个盒子水平垂直居中?
  • • 方法一：利用定位（常用方法,推荐）
    • 方法二：利用 margin:auto;
    • 方法三：利用 display:table-cell
    • 方法四：利用 display：flex;设置垂直水平都居中
    • 方法五：计算父盒子与子盒子的空间距离(这跟方法一是一个道理)
    • 方法六：利用 transform
  • 四、CSS的盒模型
  • 五、CSS选择器的优先级及CSS权重如何计算?
  • 六、列举 5 个以上的 H5input 元素 type 属性值？
  • 七、CSS 中哪些属性可继承，哪些不可以？
  • 八、CSS 单位中 px、em 和 rem 的区别？
  • 九、rem 适配方法如何计算 HTML 根字号及适配方案？
  • 十、display：none 与 visibility：hidden 的区别？
  • 十一、position的值有哪些，分别有什么作用？
  • 十二、为什么会出现浮动？浮动元素会引起什么问题？怎么清除浮动？
  • 十三、简述弹性盒子flex布局及rem布局？
  • 十四、如何解决margin“塌陷”？
  • 十五、::before和::after中双冒号和单冒号有什么区别、作用？
  • 十六、CSS3新增伪类，和为元素有哪些？
  • 十七、Bootstrap 栅格系统的工作原理？
  • 十八、BFC 是什么？（高薪常问）
  • 十九、iframe 有哪些优缺点？
  • 二十、使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？

一、H5的新特性有哪些?

H5 新特性
1、拖拽释放(Drap and drop) API ondrop
拖放是一种常见的特性，即抓取对象以后拖到另一个位置
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
2、自定义属性 data-id
3、语义化更好的内容标签(header,nav,footer ,aside, article, section)
4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办? 在属性中添加
autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)
5、画布 Canvas
5.1）getContext() 方法返回一个用于在画布上绘图的环境 Canvas.getContext(contextID) 参
数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二
维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
5.2）cxt.stroke() 绘制线条
5.3）canvas 和 image 在处理图片的时候有什么区别?
image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上. 6、 地理(Geolocation) API 其实 Geolocation 就是用来获取到当前设备的经纬度（位置）
7、 本地离线存储 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，
直到手动去删除
8、 sessionStorage 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页
之后将会删除这些数据。
9、 表单控件 calendar , date , time , email , url , search , tel , file , number
10、新的技术 webworker, websocket , Geolocation

二、CSS3的新特性有哪些?

CSS3 新特性
1、颜色: 新增 RGBA , HSLA 模式
2、文字阴影(text-shadow)
3、边框: 圆角(border-radius) 边框阴影 : box-shadow
4、盒子模型: box-sizing
5、背景:background-size background-origin background-clip
6、渐变: linear-gradient , radial-gradient
7、过渡 : transition 可实现属性的渐变
8、自定义动画 animate @keyfrom
9、媒体查询 多栏布局 @media screen and (width:800px) {…}
10、border-image 图片边框
11、2D 转换/3D 转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12、字体图标 iconfont/icomoon
13、弹性布局 flex

三、如何实现一个盒子水平垂直居中?

方法一：利用定位（常用方法,推荐）

方法二：利用 margin:auto;

方法三：利用 display:table-cell

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

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

方法六：利用 transform

四、CSS的盒模型

盒子模型分为两种: 
第一种:是 W3C 标准的盒子模型（标准盒模型）
第二种:IE 标准的盒子模型（怪异盒模型）
标准盒模型与怪异盒模型的表现效果的区别之处:
1、标准盒模型中 width 指的是内容区域 content 的宽度
height 指的是内容区域 content 的高度
标准盒模型下盒子的大小 = content + border + padding + margin
2、怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border +
padding）；height 指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width（content + border + padding） + margin

五、CSS选择器的优先级及CSS权重如何计算?

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

六、列举 5 个以上的 H5input 元素 type 属性值？

值 		描述
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox 定义复选框。
color 定义拾色器。
date 定义日期字段（带有 calendar 控件）
month 定义日期字段的月（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
file 定义输入字段和 "浏览..." 按钮，供文件上传
hidden 定义隐藏输入字段
image 定义图像作为提交按钮
number 定义带有 spinner 控件的数字字段
password 定义密码字段。字段中的字符会被遮蔽。
radio 定义单选按钮。
search 定义用于搜索的文本字段。
submit 定义提交按钮。提交按钮向服务器发送数据。
text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url 定义用于 URL 的文本字段。

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

能继承的属性
1. 字体系列属性:font、font-family、font-weight、font-size、font-style; 
2. 文本系列属性: 2.1）内联元素：color、line-height、word-spacing、letter-spacing、text-transform;2.2）块级元素：text-indent、text-align; 3. 元素可见性：visibility
3. 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、
table-layout; 5. 列表布局属性：list-style
不能继承的属性
4. display：规定元素应该生成的框的类型；
5. 文本属性：vertical-align、text-decoration; 3. 盒子模型的属性：width、height、margin 、border、padding; 4. 背景属性：background、background-color、background-image; 5. 定位属性：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
优：有一定适用性，换算也较为简单
劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同
手机，单某款手机尺寸不在设置范围之内，会导致无法适配

十、display：none 与 visibility：hidden 的区别？

元素隐藏和显示最常用的为 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 样式：
.clearfix:after {content: "."; display: block;height: 0; clear: both; visibility: hidden;}
/* for IE */
.clearfix{ *zoom:1; }
3、给父级元素设置双伪元素；
.clearfix:after{content:""; /*设置内容为空*/height:0; /*高度为 0*/line-height:0; /*行高为 0*/display:block; /*将文本转为块级元素*/visibility:hidden; /*将元素隐藏*/clear:both; /*清除浮动*/
}
.clearfix{zoom:1; /*为了兼容 IE*/
}
4、给父级元素设置 overflow：hidden；或 overflow：auto；本质是构建一个 BFC

十三、简述弹性盒子flex布局及rem布局？

rem 是 CSS3 新增的一个相对单位，相对于根节点(html)字体大小的值，r 就是 root
例如：html{font-size:10px} 则 2rem=20px
通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖 html
字体的大小
适配方案步骤：

1、首先动态计算 html 的 font-size
2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根
据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），
请看下面的注意事项


豪豪豪 10px