锦囊（css）BFC:块级格式化上下文，可以理解为它是块级盒子的一块渲染区域，它规定了，其内部的块级元素是如何布局的，是

1.`css`盒模型？如何设置?

标准盒模型：盒模型的宽高只是内容的宽高
IE盒模型：盒模型的宽高是内容+padding+border的总宽高，注意不包括margin

通过css属性box-sizing设置:

/*标准模型*/
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;

2.BFC

可以试着从cssom,dom合成rendertree分析

BFC:块级格式化上下文，可以理解为它是块级盒子的一块渲染区域，它规定了，其内部的块级元素是如何布局的，是一种css布局的规则。

会生成BFC的元素:

根元素html
浮动元素 float:left;float:right
overflow:hidden,scroll,auto;
position:absolute,fixed
display:inline-block flex等

浏览器对BFC的约束规则:

BFC` 内部的块级盒会在垂直方向上一个接一个排列
同一BFC下的相邻块级元素可能发生外边距折叠，创建新的BFC可以避免外边距折叠
每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此
浮动盒的区域不会和BFC重叠
计算BFC的高度时，浮动元素也会参与计算
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC的应用：

防止margin重叠
清除内部浮动
实现自适应两栏布局
具体实现自己敲一下代码

3.rem vw

rem是由html标签的字体大小来决定。以rem代替px作为单位，可以根据不同的屏幕大小，来缩放rem的值，实现屏幕的自适应。

vw是跟视口(viewport)相关的单位。1vw = 1/100 * viewport

4.flex?

flex的一些概念：

采用flex布局的元素，称为flex container(容器);它的所有子元素自动成为容器的成员，称为flex item(项目)
容器默认有两个轴：水平主轴main axis和垂直的交叉轴cross axis.项目默认沿主轴排列。
容器的常用属性(具体值说常用的就好)：
- flex-direction:可以用来设置项目的排列方向。row,row-reverse,column,column-reverse
- flex-wrap：决定项目在一条轴线放不下，如何换行。nowrap,wrap,wrap-reverse
- justify-content:决定项目在主轴上的对齐方式。flex-start,flex-end,center,space-between,space-around
- align-items:决定项目在交叉轴的对齐方式。flex-start,flex-end,center,stretch,baseline
项目的常用属性：
- order:定义项目的排列顺序。数值越小，排列越靠前
- flex-grow:定义项目的放大比例。默认是0，不放大。
- flex-shrink:定义项目的缩小比例。默认是1，空间不足时缩小。个项目中会出现被挤压的情况，设置值为0，就不会被挤压。
- flex-basic:定义项目要占据主轴的空间。可以设置width:100px，表示项目占有固定100px的空间
- flex:该属性是flex-grow,flex-shirnk,flex-basic的缩写。默认是0 1 auto.这个属性经常会用：比如flex:1会默认占用剩下的空间;flex:0 0 100px,可以设置一个占用100px的项目,不会放大缩小。

5.移动端如何实现`1px`

出现的原因：在retina屏幕下，dpr(设备像素比) = 2时,1px = 1个设备独立像素 = 2个设备像素,dpr =3时,1px = 1个设备独立像素 = 3个设备独立像素,(所以1px的线在这种屏幕下会粗一些)因为设计师，要求的1px是指1个设备像素，所以分别写0.5px,0.3333px才能达到设计师的要求。

推荐的写法：伪元素 + transform缩放

.border-1px{
  position: relative;
  &::after{
    position: absolute;
    content: '';
    background-color: #e5e5e5;
    display: block;
    width: 100%;
    height: 1px;
    top: 0;
    left: 0;
    @media (min-device-pixel-ratio:2){
        transform:scaleY(0.5);
    }
    @media (min-device-pixel-ratio:3){
        transform:scaleY(0.333333);
    }
  }
}

6.`display:inline-block`为什么元素之间会显示间隙? 如何解决?

产生原因:元素之间换行的空白字符导致的

解决办法：

给父元素设置font-size:0,再给自身设置实际的字号(推荐)
元素之间不换行
负margin

7.`grid`? 网格布局

flex是基于轴线，来排列内部项目的位置，可以看做一维布局。

grid则是将容器划分为行和列，产生单元格，然后指定项目所在的单元格，可以看做是二维布局

采用网格布局的区域，称为container(容器)。容器内部采用网格定位的子元素，称为item(项目)。

项目只能是容器的顶层元素，不包含项目的子元素。

容器内的水平区域称为row(行)，垂直区域称为column(列)，行和列的交叉区域，称为cell(单元格)。

容器属性：

display属性：grid:指定容器采用网格布局，块状元素；inline-grid:行内元素
grid-template-columns,grid-template-rows:用来划分行和列。前者用来定义每一列的列宽，后者用来定义每一行的行宽。
grid-row-gap,grid-column-gap,grid-gap:用来设置行间距和列间距。

了解大概的意思就行，全部的属性加起来有点多

8.样式选择器的权重?

通配符*选择器 0000
标签选择器，伪元素选择器 0001
类选择器(class)|伪类选择器|属性选择器0010
ID选择器0100
内联样式选择器 1000
!important
权重相同时，后定义的css样式优先

属性选择器：(自己很少用到，但很有用)

input[type="text"]{
    //选中了type属性为text的所有input元素
}

9.伪类与伪元素的区别?

伪元素：伪元素表示元素中一些特殊的位置。有5种；伪元素规定用两个::表示

::first-letter:元素中首字母
::first-line:元素中首行
::before:元素最前边的位置
::after:元素最后边的位置
::selection:元素中被用户选中的部分

伪类：伪类通常表示元素的一种状态，种类有很多，规定用:表示，常用的有：

:hover
:first-child
:nth-child
等等

css3以前对伪类及伪元素的写法都只是单冒号，而css3为了更好的区分开伪类及伪元素就规定对伪元素使用双冒号的写法，显然这个出发点是好的，但是为了兼容不支持css3这种特性的浏览器，我们还是先老实的用单冒号的写法吧。

锦囊（css）

1.css盒模型？如何设置?

2.BFC

3.rem vw

4.flex?

5.移动端如何实现1px

6.display:inline-block为什么元素之间会显示间隙? 如何解决?

7.grid? 网格布局