这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战
1、position 属性比较
固定定位fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定 位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。
相对定位relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那 么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
粘性定位sticky：元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定 位，之后为固定定位。
默认定位Static： 默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right 或者z-index 声 明）。 inherit: 规定应该从父元素继承position 属性的值。
2、浮动清除
方法一：使用带clear 属性的空元素 在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS 中赋 予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" /> 来进行清理。
方法二：使用CSS 的overflow 属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在IE6 中还 需要触发hasLayout ，例如为父元素设置容器宽高或设置zoom:1。 在添加overflow 属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动 的效果
方法三：给浮动的元素的容器添加浮动 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影 响布局，不推荐使用。
方法四：使用邻接元素处理 什么都不做，给浮动元素后面的元素添加clear 属性。
方法五：使用CSS 的:after 伪元素 结合:after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的IEhack 指的是触发hasLayout。 给浮动元素的容器添加一个clearfix 的class，然后给这个class 添加一个:after 伪元素实 现元素末尾添加一个看不见的块元素（Block element）清理浮动。
3、CSS 选择器有哪些，优先级呢
id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等
同一元素引用了多个样式时，排在后面的样式属性的优先级高；
样式选择器的类型不同时，优先级顺序为：id 选择器> class 选择器> 标签选择器；
标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了 与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级 比较低，至少比标签选择器的优先级低；
带有!important 标记的样式属性的优先级最高；
样式表的来源不同时，优先级顺序为：内联样式> 内部样式> 外部样式> 浏览器用户 自定义样式> 浏览器默认样式
4、怎么样让一个元素消失，讲讲
display:none; visibility:hidden; opacity: 0; 等等
5、css 动画如何实现
创建动画序列，需要使用animation 属性或其子属性，该属性允许配置动画时间、时长 以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是 由@keyframes 规则实现，具体情况参见使用keyframes 定义动画序列小节部分。 transition 也可实现动画。transition 强调过渡，是元素的一个或多个属性发生变化时产生 的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生 （例如hover）时才能获取样式，这样就会产生过渡动画。
6、如何实现图片在某个容器中居中的？
父元素固定宽高，利用定位及设置子元素margin 值为自身的一半。 父元素固定宽高，子元素设置position: absolute，margin：auto 平均分配margin css3 属性transform。子元素设置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);即可。 将父元素设置成display: table, 子元素设置为单元格display: table-cell。 弹性布局display: flex。设置align-items: center; justify-content: center
7、如何实现元素的垂直居中
- 法一：父元素display:flex,align-items:center;
- 法二：元素绝对定位，top:50%，margin-top：-（高度/2）
- 法三：高度不确定用transform：translateY（-50%）
- 法四：父元素table 布局，子元素设置vertical-align:center;
8、CSS3 中对溢出的处理
text-overflow 属性，值为clip 是修剪文本；ellipsis 为显示省略符号来表被修剪的文本； string 为使用给定的字符串来代表被修剪的文本。
9、三栏布局的实现方式，尽可能多写，浮动布局时，三个div 的生成顺序有没有影响
三列布局又分为两种，两列定宽一列自适应，以及两侧定宽中间自适应
两列定宽一列自适应： 1、使用float+margin： 给div 设置float：left，left 的div 添加属性margin-right：left 和center 的间隔px,right 的 div 添加属性margin-left：left 和center 的宽度之和加上间隔
2、使用float+overflow： 给div 设置float：left，再给right 的div 设置overflow:hidden。这样子两个盒子浮动，另 一个盒子触发bfc 达到自适应
3、使用position： 父级div 设置position：relative，三个子级div 设置position：absolute，这个要计算好盒 子的宽度和间隔去设置位置，兼容性比较好，
4、使用table 实现： 父级div 设置display：table，设置border-spacing：10px//设置间距，取值随意,子级div 设置display:table-cell，这种方法兼容性好，适用于高度宽度未知的情况，但是margin 失效，设计间隔比较麻烦，
5、flex 实现： parent 的div 设置display：flex；left 和center 的div 设置margin-right；然后right 的div 设置flex：1；这样子right 自适应，但是flex 的兼容性不好
6、grid 实现： parent 的div 设置display：grid，设置grid-template-columns 属性，固定第一列第二列宽 度，第三列auto，
对于两侧定宽中间自适应的布局，对于这种布局需要把center 放在前面，可以采用双飞 翼布局：圣杯布局，来实现，也可以使用上述方法中的grid，table，flex，position 实现
10、z-index 的定位方法
z-index 属性设置元素的堆叠顺序，拥有更好堆叠顺序的元素会处于较低顺序元素之前， z-index 可以为负，且z-index 只能在定位元素上奏效，该属性设置一个定位元素沿z 轴的位置，如果为正数，离用户越近，为负数，离用户越远，它的属性值有auto，默认，堆叠顺序与父元素相等，number，inherit，从父元素继承z-index 属性的值
11、box-sizing 的语法和基本用处
box-sizing 规定两个并排的带边框的框，语法为box-sizing：content-box/border-box/inheritcontent-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框
border-box：为元素设定的宽度和高度决定了元素的边框盒，
inherit：继承父元素的box-sizing
