CSS面试题

一、 水平垂直居中的几种方式？

1 使用 flex 中 水平轴 和 相对轴 居中的布局方式实现子文件的水平与垂直居中

justify-content: center; 主轴居中

align-items: center; 侧轴居中

2 父元素使用 relative + 子元素 absolute 完成基本定位布局、子绝父相 给子元素一个left，top 50% 在给子元素transform: translate(-50%,-50%) 将子元素向左上偏移

3 也是子绝父相 子元素的top,left, right, bottom 都设置为0 然后margin:auto

二、 三角形如何实现？

给一个块级盒子设置宽高都为0 给他的边框设置高度 将背景色修改为透明色 要什么样的三角形就给其中一个边框设置一个颜色。

三、如何实现一个左边固定200px宽度，右边自适应的布局？

       1  给一个父盒子设置一个高度为将它转成flex 布局 再创建两个子盒子左边设置宽度为200px 右边给一个 flex: 1

        2 将两个div进行左浮动 左侧给一个宽200px给一个高度 右侧将它的宽度 width: calc(100% - 200px);

四、说说em/px/rem/vh/vw区别?

em  是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

px，表示像素 

rem，相对单位，相对的只是HTML根元素font-size的值

vw ，就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度

五、BFC 模式

BFC就是页面上一个单独容器，容器内部的元素不会影响到外部的元素

如何创建BFC?

读完MDN后，我们知道，满足其一，就是建立了一个BFC

• float的值不是none
• position的值是absolute、fixed
• display的值是inline-block、flow-root、table-cell、table-caption、flex或者inline-flex、grid或者inline-grid
• overflow的值不是visible

六、CSS 设置文字只显示一行，多余显示省略号

.view-text{
  /**
	思路：
	1.设置inline-block属性
	2.强制不换行
	3.固定高度
	4.隐藏超出部分
	5.显示“……”
  */
  display: inline-block;
  white-space: nowrap; 
  width: 100%; 
  overflow: hidden;
  text-overflow:ellipsis;
}

显示两行

/**
思路：
	1.超出的文本隐藏
	2.溢出用省略号显示
	3.溢出不换行
	4.将对象作为弹性伸缩盒子模型显示
	5.从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
	6.这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
  */
  .text2{
	width:200px;
	word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}