1、position中常见的属性有哪些？它们之间的区别是什么？
- position属性是对于元素位置设置的属性；
- position有属性有static、absolute、relative、fixed、sticky;
static:默认值。没有定位。
relative:相对定位，不会脱离文档流；但是可以使用z-index进行层级分级。
absolute:绝对定位，会脱离文档流；选取其最近的父级定位元素，如果父级position为static，absolute元素将以body坐标原点进行定位，可以通过z-index进行层级分级。
fixed:固定定位元素，相对于浏览器窗口进行定位。
sticky:粘性定位，定位基于用户滚动位置；它的行为就像 position:relative;而当页面滚动超出目标区域时它的表现就像 position:fixed;，它会固定在目标位置。
2、如何实现双边框
方法一、
background:green;
border:5px solid red;
outline:5px solid black;
方法二、
background:green;
box-shadow:0 0 0 5px red,0 0 0 10px black;
说明：特点：box-shadow:几乎可以在任何属性上创建阴影
box-shadow: offset-x offset-y blur spread color position
box-shadow有六个参数
1.offset-x 阴影在x轴的距离。正数向右偏移，负数向左偏移。
2.offset-y 阴影在y轴的距离。正数向下偏移，负数向上偏移。
3.blur 模糊的尺度，
4.spread 阴影的扩展。
（前四个都是以px 等距离单位为单位的数值）
5.color 阴影的颜色。可以是任何合法的颜色表示法表示的数据。
6.position 阴影的位置，两种取值
（1、outset 不用设置 默认就是外部阴影
（2、inset 阴影位于内部
3、css文本溢出隐藏
overflow:hidden 超出的文本隐藏
text-overflow:ellipsis 文本溢出用省略号显示
white-space:nowrap 溢出不换行---只能显示一行
display:-webkit-box 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical 从上到下垂直排列的子元素，设置伸缩盒子子元素排列方式
-weblit-line-clamp:2 不是css规范的属性，需要组合上面的两个属性，表示显示的行数
css 第二行溢出隐藏的css格式
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
4、谈谈你对css盒模型的认识、标准模型和IE模型的区别
1)基本概念：标准模型+IE模型 区别在计算宽度和高度不同
标准模型：width/height是指内容的宽度和高度
IE模型：width/height内容的宽度或是高度+padding+border
2) CSS如何设置这两种模型:
box-sizing:content-box;标准模型--浏览器默认
box-sizing:border-box；IE模型
5、css优先级算法如何计算
同权重: 内联样式表（标签内部）>嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比 内联优先级高
6、BFC边距重叠解决方案？
BFC:块级格式化上下文
原理：BFC的渲染规则：
1）在BFC这个元素的垂直方向的边距会发生重叠
2）BFC的区域不会与浮动元素的区域重叠
3）BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素
4）计算BFC高度的时候，浮动元素也会参与计算
6) 如何创建BFC:float不为none 、position:不为static和relative 、overflow:auto/hidden
7) BFC的应用：在子元素外层加一个块级元素overflow:hidden（浮动布局）
注意：BFC元素即使是float也会参与计算
7、css3新增的属性以及用法
1、box-shadow 阴影效果
2、border-color 为边框设置多种颜色
3、border-image 图片边框
4、text-shadow 文本阴影
5、text-overflow 文本截断
6、word-warp 自动换行
7、border-radius 圆角边框
8、opacity 透明度
9、box-sizing 控制盒模型的组成模式
10、resize 元素缩放
11、outline 外边框
12、background-size 指定背景图片尺寸
13、background-origin 指定背景图片从哪里开始显示
14、background-clip指定背景图片从什么位置开始裁剪
15、background 为一个元素指定多个背景
16、hsl 通过色调、饱和度、亮度来指定颜色值
17、hsla 在hsl的基础上增加透明度的设置
18、rgba 基于rgb设置颜色，a 设置透明度
8、水平居中
1)margin：0 auto;
满足元素定宽
元素为块级作用域或是行内元素设置display:block
margin-left或margin-right 为auto
2)定位法
满足元素定宽
元素绝对定位，并且设置left:50%
元素的负左边距margin-left为宽度的一半若元素的宽度未知则可设置transform：translateX（-50%）
3）对于单行文字直接使用text-aligin:center
9、清除浮动
1、父级添加overflow属性
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
2、使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。
3、使用before和after双伪元素清除浮动
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
10、页面导入样式时，使用link和@import有什么区别
link链接方式：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
@import导入方式：
<style>
@import url(style.css);
</style>
区别：
1、link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；
2、而@import是CSS提供的，只能用于加载CSS;页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
3、import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
11、怎么让chrome支持小于12px的字
谷歌浏览器Chrome是Webkit的内核，有一个 -webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或浏览器影响。CSS样式定义如下：
-webkit-text-size-adjust:none;
但是在最新版的谷歌里。已经不在支持这个属性啦，需要通过css3的transform来解决，方法如下：
<p>我是一个小于12px字</p>
p{
font-size: 9px;
-webkit-transform:scale(0.8);
-o-transform: scale(1);
}
12、行内元素和块级元素的区别
块级元素的特点：
1、独占一行
2、高度，行高以及外边距和内边距都可控制
3、它可以容纳内联元素和其他块元素
行内元素的特点：
1、和其他元素都在一行上；
2、设置高度和宽度无效；
3、设置margin只有左右有效，上下无效
4、设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
13、px，em，rem，vw 有什么区别？
px:像素具体的尺寸单位，像我们平时用的米、厘米。
em和rem的尺寸是相对的
em:相对于它的父级font-size倍数；
rem相对于根元素及html font-size倍数；
