CSS面试类型思维导图
css面试题类型进行梳理汇总
基本概念
1. 传统布局
1.1. 说说你对盒模型的理解？
答：当布局的时候，浏览器会把所有元素标识为一个个矩形的盒子。这个盒子由content + padding + border + margin 等4个部分组成。
1.2. 盒模型的宽度和高度如何计算？
答：盒模型的宽度为content的宽度 + padding的宽度 + border ；
如果想设置width、height就是盒模型的宽度和高度，可以使用box-sizing:border-box这个属性
1.3. margin的设置的负数的影响？
答：
margin-top，margin-left设置成负值，自身向上移动和自身向左移动。
margin-right设置负值，其右侧元素向左移动，自身不受影响。
margin-bottom设置成负值，其下方元素向上移动，自身不受影响。
1.4. 什么是BFC?以及怎么形成BFC？
答：BFC实际就是页面的一个独立的渲染区域，里面的子元素不会影响外面的元素。
形成BFC的条件：
（1）float不是none
（2）postion是absolute或fixed
（3）overflow不是visible
（4）display是flex，inline-block
1.5. 怎么实现圣杯布局和双飞翼布局？（不是重点）
答：
圣杯布局就是中间的内容宽度为100%，左右两侧的宽度会根据中间内容的宽度变化而自适应的布局。是利用了float布局和padding为左右两侧预留空间进行排版的。
圣杯布局：
（1）圣杯布局里有左侧盒子，内容盒子和右侧盒子，给三个盒子设置float：left，使之浮动起来。
（2）给它们的父盒子设置padingg-left和padding-right一定的大小，为左右两侧预留空虚。
（3）给左侧盒子设置position：relative；margin-left：-100%；right的值为父盒子的padding-left的值。
（4）给右侧盒子设置margih-right，值为父盒子的padding-right的负数。
双飞翼布局就是中间的内容宽度为100%，左右两侧的宽度会根据中间内容的宽度变化而自适应的布局。是利用了float布局和margin为左右两侧预留空间进行排版的。
双飞翼布局：
（1）给左侧盒子、内容盒子、右侧盒子设置foat：left
（2）对三者的父盒子的margin-left，margin-right设置大小，为左右盒子预留空间
（3）对左侧盒子设置margin-left：-100%；
（4）对右侧盒子设置margin-left，其值为父盒子margin-right的负数
1.6. CSS如何画一个三角形？
答：可以利用border的属性，给width和height设置成0px，给border设置大小，并且只给其中一条边框设置颜色，其它边框的颜色设置成transparent，就可以展示成三角形了。
2. flex布局
2.1. 说一下flex布局都有哪些属性？
答：有
（1）flex-direction：定义了主轴的方向
（2）flex-wrap：定义了超出主轴时是否会自动换行
（3）flex-flow：是flex-direction和flex-wrap二者的简写
（4）justify-content：定义的主轴上的对齐方式
（5）aligin-items：定义了纵轴的对齐方式
（6）aligin-self：定义了单个元素在纵轴的对齐方式
（7）aligin-content：定义了多轴的时候的对齐方式
2.2. 怎么用flex画一个三个点的色子？
答：首先是有一个父盒子，里面有三个div的子盒子
（1）对父盒子设置display：flex；justify-content：space-between
（2）利用子选择器nth-child(2)，对第二个子盒子设置align-self：center
（3）同理利用子选择器nth-child(3)，对第三个子盒子设置align-self：flex-end
就可以画出一个三点的色子
2.3. flex这个属性是哪些属性的简写？这些属性代表什么意思？
答：flex这个属性是flex-grow、flex-shrink、flex-basis这三个属性的简写，默认的值是flex：0 1 auto；
flex-grow：代表了根据什么比例放大元素，默认是0
flex-shrink：代表了根据什么比例缩小元素，默认是1
flex-basis：代表了元素在放大和缩小之前的初始化的尺寸，默认是auto
2.4. flex等于1代表什么意思？
flex为1代表的是 1 1 0%；即放大比例占为1，缩小比例占为1，初始化尺寸为尽量最小。
3. Grid布局
3.1. 介绍一下grid网格布局
答：Grid布局就是网格布局，是一种二维的布局方式。
使用display：grid可以开启网格布局
它有下面一些属性：
grid-template-columns属性和grid-template-rows属性设置列宽和行宽，宽度的单位有fr这个特定的单位，表示占比的意思。
grid-row-gap，grid-column-gap、grid-gap属性代表行间距和列间距
grid-template-areas属性来定义区域，然后对各个元素指定grid-area属性来规划所占的区域。
其余的就是align-items，align-content，justfiy-items，justify-conteng属性，和flex布局里的属性相似。
4. 定位
4.1. position都有哪些属性？
答：有static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）
4.2. 水平垂直居中有哪些方式？
答：
行内元素：
（1）设置text-align：center来水平居中；line-height为父盒子height实现垂直居中。
块级元素（知道宽高）
（1）设置position：absolute
（2）设置left：50%；margin-left：-（自身宽度的一半）；来水平居中
（3）设置top：50%；margin-top：-（自身高度的一半）；来实现垂直居中
块级元素（不知道宽高）
通过absolute的方法
（1）设置position：absolute
（2）设置left：50%；top：50%
（3）设置transform：translate（-50%，-50%）；来实现水平垂直居中
通过flex的方法
（1）设置display：flex
（2）设置juestfy-content：center；来实现水平居中
（3）设置align-items：center；来实现垂直居中
5. css选择器
5.1. css都有哪些选择器？
答：有id选择器、类选择器、元素选择器、子元素选择器（>）、相邻兄弟选择器（+）、伪类选择器（:hover）、伪元素选择器（::before、::after）、指定元素位置选择器（nth-child(n)）
6. 图文样式
6.1. line-height如何继承？
答：如果line-height是具体数值、或者是一个比例，则会直接继承给子元素。
如果line-height是百分比，则利用百分比和父元素的font-size计算出一个值，然后继承下来为line-height的值。
6.2. UI的字体文件怎么用?
6.3. UI给的字体文件很大，只需要使用其中的一部分文字，怎么处理?
高级概念
1. 响应式
1.1. 说一下em/px/rem/vh/vw的区别？
答：
px是一个绝对长度单位，表示像素
em是相对长度单位，表示根据父元素的font-size计算出的长度单位
rem是相对长度单位，表示根据html根节点font-size计算出的长度单位
vh是当前视窗的高度，1vh代表当前视窗高度的1/100
vw是当前视窗的宽度，1vw代表当前视窗宽度的1/100
扩展：vmin是取vw、vh的最小值；vmax是取vw、vh的最大值
1.2. 说一下设备像素、css像素、设备独立像素、dpr、ppi之间的区别？
2. 回流和重绘
2.1. 什么是回流和重绘？
答： 元素的位置信息或者大小等信息发生变化叫回流，如果元素只是背景颜色等一些属性方式变化叫重绘。回来必然会触发重绘，但是重绘不一定会触发回流。
CSS3
1. 新特性
1.1. CSS3新增了哪些新特性？
答：
（1）新增了rem、vh、vw、vm等新的计量方式
（2）新增了一些选择器 nth-child
（3）新增了三个边框属性border-radius、box-shadow、border-image
（4）增加了自定义属性，var()
（5）增加了计算属性，calc
1.2. 什么是var()?
答:css3新增了 自定义属性，通过一个--变量名的方式定义一个变量名。然后其它元素就可以通过val()这个形式使用这个变量名的值。
