前端面试题二：CSS01. 不定宽高的盒子居中 02. 清除浮动为什么清除浮动？浮动元素脱离文档流，就无法撑起父元素

01. 不定宽高的盒子居中

flex布局

.parent-box {
  display: flex;
  justify-content: center;  // 水平居中
  align-items: center;  // 垂直居中
}

定位position+移动transform

.parent-box {
  position: relative;
}
.child-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

display: table-cell

.parent-box {
  display: table-cell;
  vertical-align: middle;  // 垂直居中
}
.child-box {
  margin: auto;  // 水平居中
}

position:absolute 配合定位与margin：auto

.parent-box {
  position: relative;
}
.child-box {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom:0;
  margin: auto;
}

02. 清除浮动

为什么清除浮动？ 浮动元素脱离文档流，就无法撑起父元素，会造成父元素的高度塌陷。
原理？ 将浮动区域设置为一个BFC，这样就不会影响到外面元素的布局。

父元素设置 overflow：hidden
给父元素设置高度
额外变迁法，并设置 clear: both
after伪元素（推荐）

.parent::after {
  content: '';
  display: block;
  clear: both;
  visibility: hidden;
}

03. 什么是BFC？

定义：BFC(Block formatting context)直译为"块级格式化上下文"
布局规则
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
- BFC的区域不会与浮动元素的box重叠
- 计算BFC高度的时候，浮动元素也参与计算
- BFC是一个独立的容器，容器里面的元素不会影响到外面的元素
生成BFC的条件
- float的值不是 none
- position的值为 fixed 或者 absolute
- display的值为 inline-block、flex、table-cell。。。
- overflow的值不是 visible

04.px、em、rem 的区别

px（Pixel），它是相对于屏幕分辨率而言的。
em：相对于当前对象内文本的字体尺寸
rem（root em），r代表root，也就是相对于html根元素的font-size
px 和 rem 的选择？
- 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。
- 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
vh：当前视口高度的占比
vw：当前视口宽度的占比
%：相对于父元素

05. position属性

static：默认
relative：相对定位，相对于元素自身的位置进行移动
absolute：绝对定位（脱离文档流），相对于最近定位为非static的父级元素进行定位
fixed：固定定位（脱离文档流），相对的是视口的距离
sticky：粘性定位

06. CSS选择器优先级

!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符* > 继承 > 浏览器默认

07. CSS3新特性

颜色透明度 rgba
阴影：text-shadow、box-shadow
边框圆角：border-radius
盒子模型：box-sizing：content-box | border-box
- 标准盒模型（content-box）：content + padding + border + margin
- 怪异盒模型（border-box）：content + padding + border
动画：animation、过渡：transition
媒体查询 media：通过查询当前屏幕尺寸属于哪个范围，从而有哪个范围的样式生效；从而可以实现响应式布局
- @media 媒体类型 and （媒体特性）{ 样式 }
- @media screen and (max-width:480px) { ... }
background-size：指定背景图片大小
- length：
- percentage：
- cover
- contain
flex布局

08. css 画三角形

triangle up

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

Triangle Top Left

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

09. flex布局

CSS：Flex布局（掘金）

10. inline-block存在什么问题

问题：两个inline-block元素放到一起会产生一段空白
原因：问题: 两个display：inline-block元素放到一起会产生一段空白原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。
也就是我们在写html的时候，有换行的渲染结果中间会有一段空白，所以我们可以把它们放在一行消除空白

<span>aa</span>
<span>bb</span>
// output: aa bb

<span>aa</span><span>bb</span>
//output: aabb

11. img 图片下有间隙的解决方案

将图片转换为块级元素
设置乳片的垂直对齐方式
- vertical-align：top
设置图片的浮动属性

12. CSS引入方式有哪些？link和@import的区别是？

CSS引入方式：内联style属性、内嵌<style>标签、外链<link>、导入@import
link 和 @import 的区别？
- 加载顺序区别：加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
- link 属于 XHTML 标签.而@import完全是css提供的一种方式
- 兼容性区别，@import在一些较老的浏览器中可能不兼容，而link完全兼容

13. 父盒子里两个子盒子，怎么一左一右？

flex布局

.father {
  width: 300px;
  border: 2px solid #000;
  display: flex;
  justify-content: space-between;
}
.left, .right {
  width: 100px;
  height: 120px;
  background-color: skyblue;
}

浮动
定位