Web前端面试基础题汇总-CSS基础部分

• 如何实现子元素的垂直居中和水平居中？

• 水平居中

• 对处于block内的元素（宽度为容器宽度），使用text-align: true。
• 对父元素给出width和height的子元素，使用margin: 0 auto。
• 对子元素使用position: relative || absolute，须有存在position属性的父元素，使用left: cal(50% - 子元素宽度的一半)
• 父元素设置display: flex; justify-content: center。

• 垂直居中

• 居中元素内文字节点可以使用line-height对其垂直居中，
• 对子元素使用position: relative || absolute，须有存在position属性的父元素，使用top: cal(50% - 子元素高度的一半)，或者使用使用transfom:translate(-50%)的属性来向上位移自身元素一半的高度距离。
• 父元素设置display: flex; align-item center。

• 居中可以考虑一下单行居中和多行居中的差别。

• css3的新特性

• 盒子模型border-sizing: content-box || border-box || inherit
• 伸缩布局盒模型 display: flex(块级) || inline-flex(内联级)
• 自动检测越界换行word-wrap，文字超出后如何显示text-overflow: clip(不显示) || ellipsis(省略号)
• 多列布局multi-column
• 颜色透明度color: rgba(255,0,0,0.75)
• 边框，阴影box-shadow，圆角border-radius
• 背景background-clip || -origin || -size
• 线性渐变
• 媒体查询@media，响应式设计必备
• 动画 @keyframes
• 适用于2D或3D的元素形状转换和变形transform: translate || rotate || ...
• 选择器，对伪类和伪元素需要掌握一些设计技巧。

• 纯CSS实现三角形

元素content设置为0，利用border在两条垂直边间相邻的斜线来做:

<div class="circle"></div>

.circle {
	width:0;
	height:0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid black;  /* content的width为0时，border-bottomd的内边框没有宽
	度，外边框是我们设置的20px，所以整体呈现是一个三角 */
}

• 纯CSS实现ToolTip提示

<div class="node" data-content="我出来了"></div>

.node {
	width: 200px;
	height: 200px;
	text-align: center;
	background-color: #51607b;
	color: #fff;
	position: relative;
}
.node::before {
	content: attr(data-content);
	width: 50px;
	height: 50px;
	background-color: #2657ae;
	position: absolute;
	left: 100%;
  	top: 50%;
  	transform: translate(0%,-50%);
	opacity: 0;
	transition: all .3s;
}
.node::after {
	content: '';
	border: 10px solid transparent;
	border-right: 10px solid #2657ae;
	position: absolute;
	left: 90%;
    top: 50%;
	transform: translate(0%,-50%);
	opacity: 0;
	transition: all .3s;
}
.node:hover::before {
  opacity: 1;
  left:105%;
}
.node:hover::after {
  opacity: 1;
  left: 95%;
}