css面试题总结（持续更新。。。）

主流浏览器内核私有属性CSS前缀

mozilla内核 (firefox,flock等) -moz-
webkit内核(safari,chrome28以前版本等) -webkit-
opera内核(opera浏览器) -o-
trident内核(ie浏览器) -ms-
blink内核（chrome28及以后版本） -webkit-

CSS选择器优先级

选择器的针对性越强，它的优先级别就越高。
选择器的权值:
- * ：0
- 标签：1
- 类：10
- 伪类：10
- id：100
- important：1000
原则：选择器的权值加一起，大的优先，如果权值相同，后定义的优先。
优先级排序：
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
点击这里了解更多

清除浮动的几种方式

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度无法撑起的问题。
清除浮动的方法（最常用的4种）：

额外标签法（不推荐）
在最后一个浮动标签后，新加一个标签，给其设置样式clear: both;
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
父级添加overflow属性 (不推荐)
父元素添加overflow:hidden;通过触发BFC方式，实现清除浮动。
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

使用before和after双伪元素清除浮动（推荐使用）

.clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
}

盒子模型

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width、height表示content+padding+border这三个部分的宽度、高度;
在标准的盒子模型中，width、height指content部分的宽度、高度。

使用box-sizing来设置盒子模型

 box-sizing: content-box;  /*是W3C盒子模型*/
 box-sizing: border-box;   /*是IE盒子模型*/

画一条0.5px的直线

利用transform的scale（缩放）属性来实现。

<div clsss="main"></div>
<style>
    .main{
        width: 400px;
        height: 1px;
        background-color: #000;
        transform: scale(1, 0.5);
    }
</style>

1rem、1em、1vh、1px各自代表的含义

rem
rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vh/vw
全称是 Viewport Width 和 Viewport Height，视窗(可视区域)的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。
.vmin：选取vw和vh中最小的那个。
vmax：选取vw和vh中最大的那个
px
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{1920*1024}等不同的分辨率
1920*1024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素

伪类伪元素

伪类- pseudo classes
css伪类用于向某些选择器添加特殊的效果,
伪类的语法:

selector : pseudo-class {property: value}

常见的伪类：:link, :visited, :hover, :focus, :active, :first-child, :lang
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标划过链接 */
a:active /* 已选中的链接 */
:first-child　 --第一个子元素
:lang 　　　--伪类使你有能力为不同的语言定义特殊的规则
更多

伪元素 pseudo element
CSS伪元素是用来添加一些选择器的特殊效果。
伪元素的语法：

selector:pseudo-element {property:value;}

常见伪元素：
:before 　--可以在元素的内容前面插入新内容。
:after 　--在元素的内容之后插入新内容。
:first-line（只能用于块级元素）　--向文本的首行设置特殊样式。
:first-letter（只能用于块级元素）　--向文本的首字母设置特殊样式
更多

实现水平垂直居中

<div class="md-warp">
    <span class="md-main"></span>
</div>
<style>
    .md-warp{
        width: 400px;
        height: 300px;
        max-width: 100%;
        border: 1px solid #000;
    }
    .md-main{
        display: block;
        width: 100px;
        height: 100px;
        background: #f00;
    }
</style>

水平居中

margin法
需要满足三个条件：
①元素定宽
②元素为块级元素（或者行内元素设置display: block）
③元素的margin:left和margin-right都必须设置auto

.md-main{
    margin: 0 auto
}

定位法
①元素定宽
②元素绝对定位，并设置left:50%;
③元素左边距margin-left为宽度的一半的负值

.md-wrap{
    position:relative;
}
.md-main{
    position:absolute;
    left:50%;
    margin-left:-50px
}

元素不定宽时：

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

文字水平居中
直接使用text-align:center即可

.md-warp{
    text-align:center;
}

垂直居中

定位法
和水平居中类似
定高时:

 .md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

不定高时：

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

单行文本垂直居中
将其line-height设置成和父容器height的值一样
让元素在视窗中居中，使用vh实现

.md-warp{
    position: relative;
}
.md-main{
    position: absolute;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

flexbox的实现文本的水平垂直居中

 .md-warp{
    display:flex;
}
.md-main{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

绝对定位垂直水平

.md-wrap{
    position: relative;
}
.md-main{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中较大者。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并.
了解更多

calc, support, media各自的含义及用法

calc
calc() 函数用于动态计算长度值，支持 "+", "-", "*", "/" 运算，使用标准的数学运算优先级规则。
例如：width: calc(100% - 10px);
supprot
CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性，如果支持某个属性，就会应用对应的样式。
- 基本语法：
  @supprot(prop: value){/* 自己的样式 */}
  例如：@supports (display: flex) { div { display: flex; }}
  注释：如果浏览器支持display:flex属性的话，那么div的样式就是display:flex。
- 逻辑操作符：“not” 的用法
  @supports not (display: flex) { div { float: right; }}
  注释：如果浏览器不支持display:flex属性的话，那么div的样式就是display:right
- 逻辑操作符：“and”的用法
  @supports (display: flex) and ( box-shadow: 2px 2px 2px black ) { /*自己的样式*/ }
  注释：如果浏览器支持display:flex和box-shadow的属性，就执行里面自己的样式
- 逻辑操作符：“or” 的用法
  @supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) { /*自己的样式 */ }
  注释：如果浏览器支持其中一个就可以执行里面自己的样式
- 混用的例子
  “or”和“and”混用，在@supports中“or”和“and”混用时，必须使用括号（）来区分其优先级。

@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) { 
/*自己的样式 */
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
/*自己的样式 */
}
@supports (display: grid) and (not (transition-property: color) or (animation-name: foo)){
/*自己的样式 */
}

media
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
基本语法：@media mediatype and|not|only (media feature) { CSS-Code; }
示例：
设备屏幕宽度小于等于960px时应用css样式。

@media screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }
}

混用:
表示浏览器宽度大于等于960px且小于等于1200px时使用样式。

@media screen and (min-width:960px) and (max-width:1200px){
    body{background:yellow;}
}