各种居中
行内元素和文字的各种居中
- 给父元素添加
text-align:center;实现行内元素的水平居中 - 给行内元素添加
vertical-align:middle;实现该元素对于父元素的垂直居中 - line-height和height设置相同的值，实现文字垂直居中
块级元素居中 jsbin code
- 给一个宽度再
margin:0 auto;实现水平居中 - margin:0和绝对定位实现垂直居中
.box{
margin: auto;
position: absolute;
top: 0; bottom: 0
}
- margin:auto + 绝对定位 实现水平垂直居中 ，上两个结合
.margin-auto{
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
- 绝对定位+transform实现水平垂直居中
.position{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
- fixed + margin:auto 实现水平垂直居中
.fixed{
position:fixed;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
z-index:999
}
- 宽高确定，负margin 等于宽度和高度的一半，兼容IE67
.margin{
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -170px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}
- table-cell
父：display:table;vertical-align:middle;
子：display:table-cell:margin:0 auto; - flex 父元素设置flex
.flex{
display:flex;
justify-content:center; //主轴居中，默认水平居中
align-items:center; //交叉轴居中，默认垂直居中
//别忘了浏览器前缀
}
纯CSS实现三角形
.sanjiaoxing{
width:0px;
border-left:50px solid red;
border-top:50px solid #fff;
border-right:50px solid blue;
border-bottom:50px solid black;
}
CSS的盒子模型
ie的是border-box w3c的是content-box。border-box高度和宽度=content+padding+border
CSS3新增伪类有那些?
p:first-of-type
选择属于其父元素的首个<p>元素的每个<p>元素。
p:last-of-type
选择属于其父元素的最后<p>元素的每个<p>元素。
p:only-of-type
选择属于其父元素唯一的<p>元素的每个<p>元素。
p:only-child
选择属于其父元素唯一的子元素的每个<p>元素。
p:nth-child(n)
选择属于其父元素的第n个子元素的每个<p>元素。
p:nth-last-child(n)
选择属于其父元素的倒数第n个子元素的每个<p>元素。
p:nth-of-type(n)
选择属于其父元素第n个<p>元素的每个<p>元素。
p:nth-last-of-type(n)
选择属于其父元素倒数第n个<p>元素的每个<p>元素。
p:last-child
选择属于其父元素最后一个子元素的每个<p>元素。
p:empty
选择没有子元素的每个<p>元素（包括文本节点）。
p:target
选择当前活动的<p>元素。
:not(p)
选择非<p>元素的每个元素。
:enabled
控制表单控件的可用状态。
:disabled
控制表单控件的禁用状态。
:checked
单选框或复选框被选中。
CSS3新特性
CSS3实现圆角（border-radius），阴影（box-shadow），边框图片border-image
对文字加特效（text-shadow、），强制文本换行（word-wrap），线性渐变（linear-gradient）
旋转,缩放,定位,倾斜：transform:rotate(90deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
增加了更多的CSS选择器、多背景、rgba()；
在CSS3中唯一引入的伪元素是 ::selection ；
媒体查询(@media)，多栏布局（flex）
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，占用一个字符的宽度。
解决方法：
- li标签写在同一行
- ul font-size：0px
- 2方法safari无效 ， 用
ul{letter-spacing: -5px;}
为什么要初始化CSS样式？
因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。
为什么需要清除浮动？清除浮动的方式
清除浮动是为了清除使用浮动元素产生的影响。浮动元素会使父元素高度塌陷，从而使页面布局不能正常显示。
清除方式：
- 父元素高度和里面整个文档流的高度相同
- 父元素也浮动，触发BFC清除浮动
- .clearfix{*zoom: 1}
触发hasLayout清除浮动；Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。高度宽度就会重新计算。 - clear：both
.clearfix::after{ content:""; display:block; clear:both; }
::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
在代码顺序上，::after生成的内容也比::before生成的内容靠后。
如果按堆栈视角，::after生成的内容会在::before生成的内容之上
什么是CSS 预处理器 / 后处理器？
- 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。 - 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的
是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
怎么让Chrome支持小于12px 的文字
- 用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。
- 使用12px及12px以上字体大小：为了兼容各大主流浏览器，建议设计美工图时候设置大于或等于12px的字体大小，如果是接单的这个时候就需要给客户讲解小于12px浏览器不兼容等事宜。
- 继续使用小于12px字体大小样式设置：如果不考虑chrome可以不用考虑兼容，同时在设置小于12px对象设置-webkit-text-size-adjust:none，做到最大兼容考虑。
- 使用12px以上字体：为了兼容、为了代码更简单 从新考虑权重下兼容性。
CSS优化、提高性能的方法有哪些？
关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
提取项目的通用公有样式，增强可复用性，按模块编写组件；增强项目的协同开发性、可维护性和可扩展性;
使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；
视差滚动
多层 监听滚动改变background-position
- 背景层的滚动(最慢)
- 贴图层(内容层和背景层之间的元素)的滚动(次慢)
- 内容层的滚动(可以和页面的滚动速度一致)
background-attachment -- 定义背景图片随滚动轴的移动方式
scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed: 当页面的其余部分滚动时，背景图像不会移动。
png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
- png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式，优点是：压缩比高，色彩好。 大多数地方都可以用。
- jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
- gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果
- webp格式
是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%，缺点是压缩的时间更久了。兼容性不好，目前谷歌和opera支持。
CSS HACK
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
CSS hack的三种方法：
- 属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
- 选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
- IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
CSS hack书写顺序，一般是将适用范围广、被识别能力强的CSS定义在前面。
BFC和margin重叠
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
满足下列CSS声明之一的元素便会生成BFC。
- 根元素
- float的值不为none
- overflow的值不为visible （这一条不知道为什么对于上下元素的时候不起作用。）
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
浏览器对于BFC这块区域的约束规则如下：
- 内部的Box会在垂直方向上一个接一个的放置
- 垂直方向上的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。
- 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
BFC清除浮动：当父元素没有设置宽高，子元素浮动的时候，会使得父元素高度塌陷，这时候只需要给父元素设置overflow: hidden或者display: inline-block或者float: left或者position: absolute。都可以解决这个问题。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题
margin重叠 ： 属于同一个BFC的两个相邻块级元素的margin会发生重叠。
为了防止发生margin重叠，只需要把发生重叠的两个元素之一生成BFC
CSS3有哪些新特性？
新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
转换
旋转 transform: rotate(20deg);
倾斜 transform: skew(150deg, -10deg);
位移 transform: translate(20px, 20px);
缩放 transform: scale(.5);
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
CSS优化、提高性能的方法有哪些？
多个css合并，尽量减少HTTP请求
将css文件放在页面最上面
移除空的css规则
避免使用CSS表达式
选择器优化嵌套，尽量避免层级过深
充分利用css继承属性，减少代码量
抽象提取公共样式，减少代码量
属性值为0时，不加单位
属性值为小于1的小数时，省略小数点前面的0
css雪碧图
