1、position属性分为几种，有什么区别
- 默认定位static，正常文档流定位，此时top、left、right、bottom和z-index等属性无效，块级元素从上往下纵向排列，行级元素从左往右排列
- 相对定位relative，此时的相对是相对于正常文档流的位置
- 绝对定位absolute，相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级和祖父级元素都为relative，它会相对他的父级而产生偏移
- 固定定位fixed，元素相对于屏幕视口的位置来指定元素位置，元素的位置在屏幕滚动时不会改变，比如回到顶部的按钮一般都是用此定位方式
- 粘性定位sticky，相当于relative和fixed的结合，主要用在scroll事件的监听上
2、介绍下BFC及其应用
BFC就是块级格式上下文，是页面盒模型布局中的一种CSS渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响
特性
- 同一个BFC下，元素外边距会重叠
- BFC可以清除浮动
- BFC可以阻止浮动元素被覆盖
如何形成
- 根元素，即HTML元素
- position：fixed/absolute
- float不为none
- overflow不为visible
- display的值为inline-block、table-cell、table-caption、flex
作用
- 防止margin发生重叠
- 两栏布局，防止文字环绕
- 防止元素塌陷
3、垂直居中方法
- position:absolute margin负边距
- position:absolue margin:auto top:0...
- position:absolue transform:translate(-50%,-50%)
- display:flex align-item:center
- display:table-cell vertical-align:middle
4、display:none与visibility:hidden和opacity:0的区别
如图：
-
display：none
- 元素从文档树中消失，渲染的时候不占据任何空间 - 无法进行DOM事件的监听，不能点击 - 修改元素会造成文档的回流，性能消耗较大 - 是非继承属性 -
visibility：hidden
- 元素还存在于文档树中，继续占据空间，只是看不见 - 也无法进行DOM事件监听，不能点击 - 修改元素只会造成重绘，性能消耗较少 - 是继承属性 -
opacity：0
- 透明度为100%，元素还存在于文档树中，占据空间，只是内容不可见 - 可以进行DOM事件监听，可以点击 - 是继承
打个比方：dispaly:none从这个世界消失了，不存在了；opacity:0在视觉上隐身了，看不见，可以触摸得到；visibility:hidden视觉上和物理上都隐身了，看不见也摸不到，但是存在
5、什么是回流，什么是重绘，有什么区别
- 当我们对DOM的修改引发了DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其它元素的几何属性也会因此受到影响），然后再将计算的结果绘制出来，这个过程就是回流（也叫重排）
- 当我们对DOM的修改导致了样式的变化，却并且影响其几何属性（比如修改了颜色或背景色）时，浏览器不需要重新计算元素的几何属性，直接为该元素绘制新的样式，这个过程叫做重绘
区别
回流必将引起重绘，而重绘不一定会引起回流。
6、清除浮动的方式
- 使用空div方式
- 使用BFC，如给父元素添加overflow:hidden或auto
- 使用clearfix方式
7、CSS的选择器有哪些，优先级
id选择器，class选择器，标签选择器，伪元素选择器，伪类选择器等
- 样式选择器的类型不同时，优先级顺序：id选择器>class选择器>标签选择器
- 带有!important标记的样式优先级最高
总的来说：内联样式>内部样式>外部样式
8、Flex布局
分为容器属性和元素属性
容器的属性
- flex-direction：row|row-reverse|column|column-reverse决定主轴的方向
- flex-wrap：nowrap|wrap|wrap-reverse决定换行规则
- flex-flow：上面两个属性的简写
- justify-content：主轴对齐方式
- align-items：交叉轴对齐方式
- align-content：定义多根轴线的对齐方式
项目属性
- order：定义项目排列顺序，数值越小，越靠前
- flex-grow：定义项目放大比例，默认为0
- flex-shrink：定义项目缩小比例，默认为1
- flex-basis：定义占据空间，默认auto，项目本来大小
- flex：前面三个缩写，默认0 1 auto
- align-self：允许单个项目与其他项目不一样的对齐方式
例子
1、两个元素，左边固定，右边自适应
左：flex:none(0 0 auto) 右：flex:auto(1 1 auto)
2、三个元素平分空间
flex:1
3、求最终left和right的宽度
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 500px;
background: red;
}
.right {
flex: 2 1 400px;
background: blue;
}
// left:
// right:
</style>
题解如下：
对应题目：
- 子项溢出空间的宽度为500+400-600=300
- left收缩比例为500×2÷(500×2+400×1)≈0.71
- right收缩比例为400×1÷(500×2+400×1)≈0.29
对应的：
- left的收缩宽度为0.71×300=213
- right的收缩宽度为0.29×300=87
所以：
- left的最终宽度为500-213=287px
- right的最终宽度为400-87=313px
9、怎么画一条0.5px的直线
heigt: 1px;
transform: scale(0.5);
10、CSS中link和@import的区别是什么
- link属于HTML标签，而@import是css提供的
- 页面被加载时，link会同时被加载，而@import被引用的css会等到引用它的css文件被加载完再加载
- import只在IE5以上才能识别，而link是HTML标签，无兼容问题
- link方式的样式的权重高于@import的权重
11、rgba()和opacity的透明效果有什么不同
两者都能实现透明效果，但最大的不同时opacity作用于元素，以及元素内的所有内容的透明度；而rgba()只作用于元素的颜色或其背景色(设置rgba透明的元素的子元素以及内容都不会继承透明效果)
12、请列举几种隐藏元素的方法
visibility: hidden-这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在opacity: 0-CSS3属性，设置0可以使一个元素完全透明，但不会改变页面布局；而且如果该元素已经绑定一些事件如click，那么点击该区域还是会触发点击事件的position: absolute-设置一个很大的left负值定位，使元素定位在可见区域之外display: none-元素会变得不可见，并且不会在占用元素位置，会改变页面布局transform: sacle(0)-将一个元素设置为缩放无限小，元素将不可见，元素原来的所在的位置将被保留- 用层叠关系
z-index把元素在最底下使其隐藏
13、disabled和readonly的区别
- disabled指当前input元素加载时禁用此元素，input内容不会随着表单提交
- readonly规定输入字段为只读，input内容会随着表单提交
- 无论设置readonly还是disabled，通过js脚本都能改变input的value
14、px、rpx、em和rem的区别
- px：绝对长度单位，来描述一个元素的宽高以及定位信息
- rpx：微信小程序独有的，解决屏幕自适应的尺寸单位
- em：相对单位，基准点为父节点字体的大小，浏览器默认16px，em作为字体单位，相对于父元素字体大小；em作为行高单位，相对于自身字体大小
- rem：相对单位，可理解为
root em，相对于根节点html的字体大小来计算
15、CSS盒模型是什么，又分为几种
盒模型顾名思义指的是能装东西的盒子，比如div、h等元素，而像img、input这种就不是盒模型
主要组成有；content、padding、border、margin，其中content又分为width、height
目前主要分为两类盒模型：
- IE盒模型：其width、height包括content、padding、border，通过设置box-sizing: border-box;
- 标准盒模型：其width、height就是content，通过设置box-sizing: content-box;
持续更新...
