一、CSS
1.说一下CSS的盒模型。
在HTML页面中的所有元素都可以看成是一个盒子
盒子的组成：内容content、内边距padding、边框border、外边距margin
盒模型的类型：
标准盒模型
margin + border + padding + content
IE盒模型
margin + content(border + padding)
控制盒模型的模式：box-sizing:content-box（默认值，标准盒模型）、border-box（IE盒模型）;
2.CSS选择器的优先级？
CSS的特性：继承性、层叠性、优先级
优先级：写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式
标签、类/伪类/属性、全局选择器、行内样式、id、!important
!important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器
内联式 （style=””）> 嵌入式(<style></style>) > 外部式(import)
属性选择器：input[type=password]
伪类选择器:a:hover {color:blue }
选择器详细：https://www.cnblogs.com/ssjd/p/12894389.html
3.隐藏元素的方法有哪些？
display:none;元素在页面上消失，不占据空间
opacity:0;设置了元素的透明度为0，元素不可见，占据空间位置
visibility:hidden;让元素消失，占据空间位置，一种不可见的状态
position:absolute;
clip-path
4.px和rem的区别是什么？
px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度
rem，相对单位，相对于html根节点的font-size的值，直接给html节点的font-size:62.5%;
1rem = 10px; （16px*62.5%=10px）
5.重绘重排有什么区别？
重排（回流）：布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小
重绘：计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制
浏览器的渲染机制
对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排
对DOM的样式进行修改，比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘
6、positon
absolute生成绝对定位的元素，相对于 static 定位以外的第一个有定位的父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。
7、 css3 flex
Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
8.清除浮动的方法
clear:both
overflow：hidden
clearfix
6.让一个元素水平垂直居中的方式有哪些？
1.定位+margin 2.定位+transform 3.flex布局
4.grid布局 5.table布局
(详细如下
1.flex
父元素 display: flex;justify-content: center;（水平居中）align-items: center;（垂直居中）
2.flex+auto
父元素display: flex;（弹性盒子）
子元素margin: auto;（上下左右居中）
3.position+auto
父元素position: relative
子元素position: absolute;top:0;right:0;bottom:0;left:0;margin:auto;
4.position + translate 支持不知道宽高 支持ie9及以上
父元素position: relative;
子元素position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
5.position+calc( )
父元素position: relative;
子元素position: absolute;top: calc(50% – 50px);left: calc(50% – 50px);)
7.CSS的哪些属性哪些可以继承？哪些不可以继承？
CSS的三大特性：继承、层叠、优先级
子元素可以继承父类元素的样式
1.字体的一些属性：font
2.文本的一些属性：line-height
3.元素的可见性：visibility:hidden
4.表格布局的属性：border-spacing
5.列表的属性：list-style
6.页面样式属性：page
7.声音的样式属性
8.有没有用过预处理器？
预处理语言增加了变量、函数、混入等强大的功能
SASS LESS
9.画三角形
.triangle {
width: 0;
height: 0;
border-color: transparent transparent red transparent;
border-width: 0 60px 60px 60px;
border-style: solid;
}
二、HTML5 CSS3
1.语义化的理解。
1)在写HTML页面结构时所用的标签有意义
头部用head 主体用main 底部用foot…
2)怎么判断页面是否语义化了？
把CSS去掉，如果能够清晰的看出来页面结构内联式 （style=””）> 嵌入式(<style></style>) > 外部式(import)，显示内容较为正常
3)为什么要选择语义化？
1.让HTML结构更加清晰明了
2.方便团队协作，利于开发
3.有利于爬虫和SEO
4.能够让浏览器更好的去解析代码
5.给用户带来良好的体验
2.H5C3有哪些新特性？
H5的新特性：
1.语义化的标签
2.新增音频视频
3.画布canvas
4.数据存储localstorage sessionstorage
5.增加了表单控件 email url search…
6.拖拽释放API
CSS3的新特性：
1.新增选择器：属性选择器、伪类选择器、伪元素选择器
2.增加了媒体查询
3.文字阴影
4.边框
5.盒子模型box-sizing
6.渐变
7.过度
8.自定义动画
9.背景的属性
10.2D和3D
11.Flex:弹性布局
3.rem是如何做适配的？
rem是相对长度，相对于根元素（html）的font-size属性来计算大小，通常来做移动端的适配
rem是根据根元素font-size计算值的倍数
比如html上的font-size:16px，给div设置宽为1.5rem,1.2rem = 16px*1.2 = 19.2px.
4.解决了哪些移动端的兼容问题？
1.当设置样式overflow:scroll/auto时，IOS上的华东会卡顿
-webkit-overflow-scrolling:touch;
2.在安卓环境下placeholder文字设置行高时会偏上
input有placeholder属性的时候不要设置行高
3.移动端字体小于12px时异常显示
应该先把在整体放大一倍，然后再用transform进行缩小
4.ios下input按钮设置了disabled属性为true显示异常
input[typy=button]{opcity:1 }
5.安卓手机下取消语音输入按钮
input::-webkit-input-speech-button{ display:none }
6.IOS下取消input输入框在输入引文首字母默认大写
<input autocapitalize=’off’ autocorrect=’off’/>
7.禁用IOS和安卓用户选中文字
添加全局CSS样式：-webkit-user-select:none
8.禁止IOS弹出各种窗口 webkit-touch-callout:none
9.禁止IOS识别长串数字为电话
添加meta属性 <meta conten=’telephone=no’ name=’format-detection’>