css 经典问题记录

问题一

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

js 复制代码

<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的高度，就要做一下改变

js 复制代码

<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;让文本节点上下居中

问题二

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

方法

总结

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

问题三

div的水平垂直居中

方法一

这是一种常见的方式,使用弹性盒子布局(flex)实现：

· display: flex;

· align-items: center; // 侧轴(纵轴)对齐方式，默认是侧轴(纵轴) 子元素垂直居中

· justify-content: center; //主轴(横轴)对齐方式，默认是主轴(横轴)

代码片段如下

方法二

父项设置flex时，通过给子项设置margin: auto实现水平垂直居中

方法三

使用绝对定位的方式实现水平垂直居中

使用绝对定位的方式需要将容器设置position: relative。

子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%); 这种方式不需要关心子项的width和height，

但是这种方法兼容性依赖translate2d的兼容。

方法四

用tabel-cell实现水平垂直居中 css新增的table属性，可以让我们把普通元素，变为table元素的效果，而且tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了。

· 设置容器 display: table-cell;

· 设置元素的垂直对齐方式vertical-align: middle;

· 子元素如果是块级元素，使用margin:auto;如果是行内元素，给父容器设置text-align:center;

问题四

用纯CSS创建一个三角形的原理是什么

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

js 复制代码

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

问题五

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

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

方法

给父级div定义伪类(推荐使用)

js 复制代码

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

给父级div定义overflow:hidden

js 复制代码

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