CSS面试总结盒模型标准盒模型：盒子实际总宽高 = 内容的宽高width\height（content）+ borde

盒模型

盒子模型的组成为：content（元素内容） + padding（内边距） + border（边框） + margin（外边距）

标准盒模型：盒子实际总宽高 = 内容的宽高width\height（content）+ border + padding + margin
CSS3盒模型：盒子实际总宽高 = 内容的宽高width\height（content+border+padding）+ margin

box-sizing的值来改变盒模型；

box-sizeing: content-box为标准盒子模型；也是默认值；
box-sizeing: border-box为CSS3盒子模型；

box-sizing的意义就是是否让border和padding撑开盒子。

margin 负值问题

margin-top 元素自身会向上移动，同时会影响下方的元素向上移动；
margin-left 元素自身会向左移动，同时会影响右边元素向左移动；
margin-botom 元素自身不会位移，但是会减少自身供css读取的高度，从而影响下方的元素会向上移动。
margin-right 元素自身不会位移，但是会减少自身供css读取的宽度，从而影响右侧的元素会向左移动；

浮动

CSS三种布局机制分别是标准流、浮动和定位。

浮动就是给元素设置浮动属性，让其脱离标准流，移动到指定位置。

浮动的特性：

浮：浮动的盒子在普通流的上面，脱离标准流
漏：浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子
特：float属性会改变元素display属性，类似行内块，但是元素之间没有空白缝隙，任何元素都可以浮动。

为什么要清除浮动？

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

清除浮动的本质：清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

清除浮动的办法：

额外标签法：浮动元素平级的末尾添加一个空标签，设置clear: both样式
父元素创建BFC：父级添加：overflow：hidden
给父元素添加单伪元素或者双伪元素，是额外标签法的升级版

定位

static静态定位：默认值，就是没定位，设置top、bottom、left、right是无效的
relative相对定位：相对自身移动，不脱标，没有模式转换
absolute绝对定位：相当于定位的父元素，脱标，有模式转换
fixed固定定位：相对浏览器窗口，脱标，有模式转换

子绝父相：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

CSS层叠上下文(stacking context)

一个元素有层叠上下文，我们认为它在z轴上高人一等。

如何产生层叠上下文？

HTML中的根元素<html></html>本身就具有层叠上下文，称为“根层叠上下文”。
普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
CSS3中的新属性也可以产生层叠上下文。

不同层叠上下文，先判断层叠上下文的层叠等级
同一个层叠上下文中，谁的z-index大，谁高
z-index相同，则后来的居上

z-index设置为0或者auto、或者不设置的区别

z-index不设置，默认就是auto，也就是在0层，所以这三种情况是后来居上
- 比如：div1设置auto，div2设置0，div3不设置，层叠关系就是 div1 < div2 < div3
z-index：0会创建层叠上下文，其他情况不会
- 比如div2里面再添加一个div4设置z-index：10，这时候div4还是在div3下面的，因为div4是属于div2的层叠上下文的

相邻块元素和嵌套块元素垂直外边距合并的问题

外边距重叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

解决方案：

对于上下相邻盒子，可以给上面的盒子创建BFC
对于嵌套盒子，可以给父盒子添加内边距或者边框，或者给父盒子创建BFC

注意：只有普通文档流的盒子才会发生垂直外边距合并的问题

BFC块级格式化上下文

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件：

ovevflow：不为visible（可为hidden、auto、scroll）
float：不为none（只要设置了浮动就有BFC）
position：为绝对定位（absolute）或者固定定位（fixed）
display：为flex、table、inline-block

BFC元素所具有的特性：

同属于一个BFC的盒子垂直排列，外边距会发生合并的问题，解决办法，上面盒子再创建BFC
计算 BFC 的高度时，浮动子元素也参与计算，这也是清除浮动的本质
BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
- 如果左边盒子浮动，右边是标准流，右边盒子有文字，这时候就会有文字环绕左边盒子的效果
- 我们给右边盒子添加BFC后，左边盒子和右边盒子就没有交集了

自适应两栏布局：左float+右BFC，是利用了BFC 的区域不会与 float 的元素区域重叠的机制。

display属性的几个取值

flex、table、inline-block、block、inline、none。

inline inline-block元素之间为什么会有空白？

原因：元素被当成行内元素或行内块元素的时候，原来在HTML中的回车换行被转换成一个空白字符，在字体不为0的情况下，空白字符占据一定宽度，所以inline/inline-block元素之间就出现了空隙。这些元素之间的间距也会随着字体的大小而变化。

解决办法：

写在同一行，中间不留空格
为父元素设置font-size:0,在子元素上重置正确的font-size（推荐）
子元设置素浮动（推荐）

CSS三大特性：层叠继承优先级。

优先级：!important最高，其次是，行内 > id > 类 > 标签，通配符优先级为0，继承样式，没有优先级，最低。

回流和重绘

回流：当渲染树中的元素的布局（如：尺寸、位置）发生改变时，重新生成布局，重新排列元素。

重绘：当渲染树中的元素外观（如：颜色、背景、visibility）发生改变，不影响布局时，产生重绘。

回流必将引起重绘，而重绘不一定会引起回流。

隐藏元素的几种方式

display: none：元素会变得不可见，元素从文档流中消失（回流+重绘），不再占用文档的空间，不可交互
visibility: hidden：这个属性只是简单的隐藏某个元素，元素继续占用空间（重绘），不可交互
opacity: 0：本质上是将元素的透明度设置为0，就看起来隐藏了，但是依然占据空间（重绘），可以交互

对于子元素的影响：

display: none，直接父元素直接从文档流中消失了，所以子元素怎么操作也不会显示
visibility: hidden：父元素设置隐藏，子元素继承了visibility: hidden所以才会隐藏，可以让子元素设置visibility: visible，显示出来。
opacity: 0，父元素是透明的，所以隐藏了，可能你说子元素设置opacity: 1不就显示了吗？其实opacity是相对于父元素的透明度的，比如父元素设置opacity: 0.2，子元素默认opacity: 1，也就是相对于父元素的0.2来的，所以，当父元素设置opacity: 0，子元素再怎么设置透明度都不行的。

元素设置 opacity 和背景色设置 rgba() 的透明效果比较

父元素设置opacity以后也会影响子元素，因为子元素的透明度就是相对于父元素来的
父元素背景色设置rgba() 不会影响子元素，因为rgba() 本质是带有透明度的颜色

动画

transform：用来给元素做平移旋转缩放的变换，它本身是没有动画效果的，比如经过某个元素，给其添加transform样式。如果想要实现动画，需要结合后两者。
transition：是过渡的意思，会有动画，是指元素从A样式 -> B样式具有过渡效果，类似UIView的动画。
animation：是动画，通过@keyframes定义动画，通过from、to或者是百分比来定义动画的具体实现。

transform、transition、animation的区别：

transform：用来给元素做平移旋转缩放的变换，它本身是没有动画效果的，比如经过某个元素，给其添加transform样式。如果想要实现动画，需要结合后两者。
transition 设置的是 css 属性变化时的过渡动画，而 animation 动画会自动执行； transition 定义的动画触发一次执行一次，想再次执行就需要再次触发；animation 可以执行指定次数或者无数次；
 transition定义的动画只有两个状态，开始态和结束态，animation可以定义多个动画中间态，且可以控制多个复杂动画的有序执行。

如何优化动画性能？

使用 css3 的 transform 代替left、top等引起页面回流的属性：
尽量减少js动画，如需要，使用对性能友好的 requestAnimationFrame，它会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中完成。

手写动画的最小时间间隔是多久？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

transform 的 translate rotate 先后顺序有何不同？

在几何上分析，先平移后旋转，还是先旋转后平移是一样的。但在CSS中却并不是如此。
因为平移是按照自身坐标系平移的，如果先旋转，自身坐标系就会改变，所以先旋转再平移，会按照旋转后的坐标系进行平移。

px、em、rem、vw、vh的区别

px，是绝对单位，页面按精确像素展示，设置之后就固定了，不会随页面大小的改变而自适应改变
em，是相对单位，相对于父元素的font-size大小来决定的，如果父元素的font-size也是em单位，则会往上一直继承，如果自己设置了font-size，则会以自己设置的font-size的px为准。
rem，也是一个相对单位，但是是相对于根元素的字体大小，浏览器默认字体是16px，1rem = 16px
vw和vh：都是针对当前浏览器窗口大小而言，1vw 就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。

移动端为什么需要二倍图？

在早期的设备中，一个逻辑像素就是一个物理像素，但是随着设备的升级，苹果出现了Retina屏幕，有二倍的、有三倍的，也就是一个逻辑像素相当于4个物理像素，或者9个物理像素，但是屏幕的尺寸是没有变的，当我们使用二倍图或者三倍图在Retina屏幕上的时候，就会显示的更精细。

如何使用CSS设置三角形？

宽高都为0
需要有三角的一侧设置边框
设置边框的颜色

width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;

绘制扇形：三角的基础上加一个border-radius

width: 0;
heigt: 0;
border: 50px solid transparent;
border-top-color: blue;
border-radius: 50px;

如何实现小于12px的字体大小效果

我们用css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，所以对于行内元素设置小于12px，我们可以加上一个display:inline-block。

元素竖向的百分比设定是相对于容器的高度吗

按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，同理，百分比设置高度，也是相当于父元素的高度计算的，但是我们一般不设置高度，会让内容撑开盒子。
但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

line-height 三种赋值方式有何区别？（带单位、纯数字、百分比）

分为两种情况：

子元素直接设置line-height：

如果是px，那就是固定值，如果是em，那就和em的单位换算规则一样
如果是数字或者百分比，就拿数字或百分比乘以当前的font-size

如果给父元素设置line-height，子元素继承：

如果是px固定值，那么直接继承，如果是em，那就和em的单位换算规则一样
如果是纯数字，那就将数字比例传递给后代
如果是百分比，会将百分比计算后的值传给后代

CSS 中的`background-image` 属性可以和 `background-color` 属性一起生效么？

可以，并且background-color在下面。

background-size: cover和contain 区别

cover缩放背景图片，直接盖住元素，可能背景图片部分看不见。
contain缩放背景图片，让图片完全被元素包含，可能背景区部分空白

水平居中的方案

行内元素，给其父元素设置text-align:center（缺点：只能是行内块）
定宽块级元素，该元素设置margin:0 auto（缺点：要知道宽度）
定宽块级元素，该元素设置绝对定位left:50%，margin-left:-1/2宽度；（缺点：要知道宽度）
不定宽块级元素，该元素设置绝对定位left:50%，transform: translateX(-50%)；（缺点：父盒子要有相对定位，并且高度不能为0）
设置父元素为flex布局，且设置justify-content: center;（定宽、不定宽、多元素都可以）

垂直居中方案

若元素是单行文本, 则可设置line-height等于父元素高度
定高块级元素，该元素设置margin:auto 0
定高块级元素，可以用绝对定位top:50%; +margin-top:-1/2
不定高块级元素，该元素设置绝对定位top:50%，transform: translateY(-50%)；
设置父元素为flex布局，且设置align-items: center;（定宽、不定宽、多元素都可以）

实现圣杯布局和双飞翼布局

实现效果都一样，都是左右等宽，中间自适应。

圣杯布局

设置左、中、右三个div，中间div要在文档流前面以优先渲染
左右固定宽度，中间宽度100%，这时候它们在三行显示
让三个div左浮动，这时候中间在上面，左右div在一行左边
给左边设置margin-left:-100%，右边设置margin-left:负自身宽度，这时候左右中间栏都在一行，并且左右都盖住了中间栏
给父盒子设置左右padding，因为浮动盒子不会和父元素的边框重叠，所以左右中间栏会被挤进来
给左右盒子设置相对定位，将其往左、右移动一个自身的宽度

双飞翼布局

双飞翼布局是在圣杯布局的基础上改进的，上面设置完左右的-margin后，左右会盖住中间栏，既然盖住了我们就不使用中间栏了，我们给中间栏添加一个子元素，然后给这个子元素设置左右margin值，以后我们就在子元素上布局。

Flex布局

父项设置的属性：

display：flex 父盒子设置flex布局
flex-direction：设置主轴的方向
- row：默认从左到右
- row-reverse：从右到左
- column：从上到下
- colunm-reverse：从下到上
justify-content：设置主轴上的子元素排列方式（justify vt. 证明…是正当的，对齐）
- flex-start：从主轴头部开始
- flex-end：从主轴尾部开始
- center：从主轴中间开始
- space-around：平分剩余空间
- space-between：先两边贴边，再平分剩余空间
align-items 设置侧轴上的子元素排列方式（单行）
- flex-start：从主轴头部开始
- flex-end：从主轴尾部开始
- center：从主轴中间开始
align-content 设置侧轴上的子元素的排列方式（多行）
- flex-start：从主轴头部开始
- flex-end：从主轴尾部开始
- center：从主轴中间开始
- space-around：平分剩余空间
- space-between：先两边贴边，再平分剩余空间
flex-wrap：设置是否换行
- nowrap：默认值，不换行，一行显示不全会缩小盒子
- wrap：换行

子项常见属性：

flex：子项目占的份数，如果不指定flex属性（比如设置了width），则不参与伸缩分配。
order：定义弹性对象元素出现的顺序（如果元素不是弹性对象元素，则 order 不生效），数值越小，排列越靠前，默认为0。

注意：flex-direction:row-reverse 和 justify-content:flex-end 区别

比如：默认排列是 1 2 3 4 空格空格

设置flex-direction:row-reverse 是完全方向翻转，排列效果：空格空格 4 3 2 1，盒子顺序改变了。设置justify-content:flex-end 只是从尾部开始排列，排列效果：空格空格 1 2 3 4，盒子顺序不变。

CSS面试总结

盒模型