问题一

如下代码，父元素father运用flex布局，不设高度，子元素son2高度设置为200px，子元素son2撑开了父元素father，son1无法填满父级元素高度

<body>
	<div class="father">
		<div class="son1">这是子元素son1</div>
		<div class="son2">这是子元素son2</div>
	</div>
</body>
<style>
	.father{
		display:flex;
		justify-content:space-between;
	}
	.son1{
	}
	.son2{
		height:200px;
	}
</style>

办法

要使子元素son1高度填满整个父元素father的高度，就要做一下改动

<body>
	<div class="father">
		<div class="son1">这是子元素son1</div>
		<div class="son2">这是子元素son2</div>
	</div>
</body>
<style>
	.father{
		display:flex;
		justify-content:space-between;
		align-items:stretch;//改动
	}
	.son1{
	        height:inherit;//改动
		display: flex;//改动，为了使文字上下居中
          align-items: center;//改动，为了使文字上下居中
          justify-content: center;//改动，为了使文字上下居中
	}
	.son2{
		height:200px;	
	}
</style>

总结：

1.align-items: stretch;特点让当前元素拉升至父级元素的高度或者宽度

2：height:inherit；特点继承父元素的高度

3：display: flex;align-items: center;justify-content: center;让文本节点上下居中

问题二

图片相对文字在单行中笔直居中

css 经典问题记载

办法

css 经典问题记载

总结

  • vertical-align: middle; //图片与文字笔直居中，但会有少量偏差，再经过
  • position:relative; //经过相对定位微调元素方位
  • top:2px; //微调方位大小

问题三

div的水平笔直居中

办法一

这是一种常见的办法,运用弹性盒子布局(flex)完成：
display: flex;
align-items: center; // 侧轴(纵轴)对齐办法，默许是侧轴(纵轴) 子元素笔直居中
justify-content: center; //主轴(横轴)对齐办法，默许是主轴(横轴)
代码片段如下

css 经典问题记载

办法二

父项设置flex时，经过给子项设置margin: auto完成水平笔直居中

css 经典问题记载

办法三

运用绝对定位的办法完成水平笔直居中
运用绝对定位的办法需要将容器设置position: relative。
子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%); 这种办法不需要关心子项的width和height，
但是这种办法兼容性依赖translate2d的兼容。

css 经典问题记载

办法四

用tabel-cell完成水平笔直居中 css新增的table特点，可以让我们把一般元素，变为table元素的效果，而且tabel单元格中的内容天然便是笔直居中的，只要添加一个水平居中特点就好了。
设置容器 display: table-cell;
设置元素的笔直对齐办法vertical-align: middle;
子元素如果是块级元素，运用margin:auto;如果是行内元素，给父容器设置text-align:center;

css 经典问题记载

问题四

用纯CSS创建一个三角形的原理是什么
首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

问题五

为什么会出现起浮和什么时候需要铲除起浮？铲除起浮的办法？
起浮元素碰到包括它的边框或者起浮元素的边框停留。因为起浮元素不在文档流中，所以文档流的块框表现得就像起浮框不存在相同。起浮元素会漂浮在文档流的块框上。
起浮带来的问题：

  1. 父元素的高度无法被撑开，影响与父元素同级的元素
  2. 与起浮元素同级的非起浮元素（内联元素）会跟随其后
  3. 若非第一个元素起浮，则该元素之前的元素也需要起浮，否则会影响页面显现的结构。

办法

给父级div界说伪类(推荐运用)

.clearfix::after {
  display: block;
  content: "";
  height: 0;
  overflow: hidden;
  clear: both;
}
.clearfix {
  zoom: 1;
}

给父级div界说overflow:hidden

.father{
display:flex;  
overflow:hidden; 
}