web前端面试题合集（九）

　　实现垂直居中的几种方法，不知道宽高的情况下如何实现元素水平垂直居中?

　　- **实现垂直居中的几种方式**：

　　- 1.单行文本垂直居中：当此标签高度和行高的值相等时;

　　- 2.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;margin-top:-高度的一半;}

　　- 3.定位： 父元素{position:relative;} 子元素{position:absolute;top:0;bottom:0;margin:auto;}

　　- 4.定位： 父元素{position:relative;} 子元素{position:absolute;top:50%;transform:translateY(-50%);}

　　- 5.弹性盒：父元素{display:flex;align-items:center;}

　　- **不知道宽高的情况下如何实现元素水平垂直居中**:

　　- 1.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

　　- 2.定位： 父元素{position:relative;}

　　 子元素{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

　　- 3.弹性盒： 父元素{display:flex;} 子元素{margin:auto;}

　　- 4.弹性盒： 父元素{display:flex;justify-content:center;align-items:center;}

　　谈谈flex布局，你知道flex:110吗

　　- flex布局：弹性盒布局(形成弹性盒后可以控制子元素在父级元素中排列位置)

　　- flex：1 1 0 是由 flex-grow:1 flex-shrink:1 flex-basis:0复合而成 也可以简写为flex：1

　　表示占据主轴上剩下的空间 当子级内容超出的时候会将当前区域撑大

　　- flex-grow默认值为0，当值大于0时，当父元素有剩余空间时当前元素放大，父元素没有剩余空间时，该元素不放大。

　　- flex-shrnk默认值为1，父元素有剩余空间时，该元素不缩小，父元素没有剩余空间时，该元素缩小。

　　- **flex-basis**相当于width属性。

　　谈一下怎么实现一个椭圆,使用css

　　· 使用border-radius属性 属性值可以设置一个/两个/三个/四个/八个 以下是两种方法实现椭圆

　　o 第一种: width: 250px; height: 150px;background: #FFD900;border-radius: 50%

　　o 第二种: width: 250px; height: 150px;background: #FFD900;border-radius: 50% / 100% 100% 0 0;

　　脱离布局流有几种方法?

　　- 常见的有浮动和定位

　　- 第一种:浮动布局(float)浮动一般用于让块级元素排成一行在同一行显示任何元素都可浮动，如一个元素设置为浮动元素，浮动元素无论最初是什么都会变成一个行块级元素，拥有disolay：inline-block属性

　　- 第二种:定位布局(position) 定位中的absolute绝对定位可以让元素脱离文档流的 如果父级有定位属性就相对于父级定位 如果父级没有就会一直往上级查找直至浏览器

　　- 脱离文档流布局的缺点初始位置不存在就会破坏网页布局

　　更多关于“web前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。