一、CSS3新属性？
border:border-radius、box-shadow、border-image、border-color、border-box
transfrom: rotate(9deg) scale(0.85,0.90) translate(0,-3px) skew(-9deg,0)
background: background-size
二、H5新特性？
新标签：<header><aside><main><nav><footer><section><article><hgrounp><canvas><audio><video>
input的类型：color、datetime-local、button、email、file、tel
新伪类：last-child()、first-child（）、
三、水平、垂直剧中的方法？
①transfrom
style{ position:relative; margin:0 auto; top:calc(100vh/2); transform:translateY(-50%); }
②flex布局
display: flex; justify-content: center; align-items: center;
四、盒模型
①标准模型（W3C）
标准盒模型的width是content的width
②怪异模型
怪异模型的width是padding+border+content-width
五、块元素和行元素和行内块元素
①块元素 独占一行 可以设置宽高 display：block
div、p、from、h1-h6、p、ul、ol、li
②行元素 不能设置宽高 display：inline；
a、span、u、strong、em
③行内块元素 可以设置宽高， display：inline-block；
img、input、
六、常见布局
①flex布局
display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;
②表格布局
display:table; display:table-row; display:table-cell;
③网格布局
display: grid; grid-template-columns: 500px 500px; /* 设置每一列的列宽 */ grid-template-rows: 200px 200px; /* 设置每一行的行高 */
七、定位 position
①relative 相对定位
相对于自己进行定位
②absolute 绝对定位
相对于除了static定位以外的最近的父元素进行定位。
③fixed 固定定位
相对于浏览器窗口进行定位
④static 没有定位
⑤inherit 规定应该从父元素继承 position 属性的值。
八、清除浮动的方法？
若一个div中有两个div其中一个浮动了。会导致父元素的高度无法撑开，影响与父元素同级的其他元素。
①在浮动元素后面在加一个标签
设置清除浮动
.d3{
clear：both；
}
②父元素使用 overflow：auto
③父元素使用after伪类
.div : :after{ content:""; display:block; clear:both; }
九、CSS的优先级？
！important>id选择器>class选择器>标签选择器>通配符选择器>继承>浏览器默认属性
十、Viewport了解？
移动端开发常用
content有这么几个属性
①width：宽度 device-width 屏幕宽度
②initial-scale：初始缩放
③maximum-scale：最大缩放
④miximumu-scale：最小缩放
⑤user-scalable：是否允许用户进行缩放
十一、媒体查询@media
响应式布局：不同的设备能够自动调节布局
@media (min-500px)and(max-780px){
}
十二、如何理解H5的语义化标签
①让合适的内容有合适的标签，增加可读性，减少差异化。有利于开发人员更好的理解和维护。
②使得爬虫能够更高的解析文档。
③在没有层级样式的时候也能让页面呈现清晰的结构。
十三、BFC是什么？
BFC是格式化上下文
作用：①使BFC内部的浮动元素不会到处乱跑
②和浮动元素产生边界
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
.div2{ 100px; height: 100px; box-sizing: content-box; box-shadow: 3px 3px 10px hotpink; float: left; } .div1{ border: 5px solid red; }
产生效果：
创建BFC的方式
①父元素浮动元素（float的值不是none）
②决定定位元素（position的值为absolute/fixed）
③行内块元素（display的值为inline-block）
④display：flow-root； 触发BFC
产生效果：
十四、单行省略和多行省略
单行省略
.box{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis;//文本以省略号显示 }
多行省略
.box{ display: -webkit-box;//将盒子设置为弹性盒子 -webkit-line-clamp: 2;//显示多少行 -webkit-box-orient: vertical;//文本显示方式，默认水平 overflow: hidden; }
十五、link标签和import标签的区别？
①link标签是页面加载的时候进行加载，@import标签是页面加载完毕后在进行加载。
②link是html标签内的，@import是CSS提供的。
③link的权重要比@import重。
④link存在于html标签内所以不存在兼容性，而@import是在ie5以上才支持的。