2022常见前端基础面试题(含答案)六
谈谈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绝对定位可以让元素脱离文档流的 如果父级有定位属性就相对于父级定位 如果父级没有就会一直往上级查找直至浏览器
- 脱离文档流布局的缺点初始位置不存在就会破坏网页布局
伪类伪元素区别
· 相同点:都是属于选择器中的一种,能实现对于页面元素的修饰
· 不同点:
o 1、概念不同:伪类:用于已有元素处于某种状态时为其添加对应的样式,这个状态是根据用户行为而动态变化的;例如鼠标的悬停效果;伪元素:用于创建一些不在DOM树中的元素,并为其添加样式;例如:先前向后插入元素内容等等
o 2、使用方法不同:css3规范中要求使用双冒号(::)表示伪元素,以此来区分伪类和伪元素,比如::before和::after等伪元素使用双冒号(::),:hover和:active伪类使用单冒号(:)目前来看有一部分浏览器为了达到一个更好的兼容性的问题,我们的双冒号也可以写成单冒号;但是在一些低版本浏览器里面有些时候还是需要使用双冒号的
为什么无法定义1px左右高度的容器
高版本浏览器里面是能够定义1px的高度的容器的 但是由于浏览器的版本和浏览器的内核不一样导致低版本浏览器中的兼容性不一样 在低版本 IE6浏览器下面,容易出现这个问题,产生问题的原因是因为默认的行高造成的, 解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
更多关于html5培训的问题,欢迎咨询千锋教育在线名师,如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问,获取试听资格来试听我们的课程,在线零距离接触千锋教育大咖名师,让你轻松从入门到精通。