css面试题--定位与浮动

1、为什么需要清除浮动?

在非IE浏览器下,容器不设高度且子元素浮动时,容器高度不能被内容撑开,内容会溢出到容器外面而影响布局。这种现象被称为浮动。

浮动的原理:浮动元素脱离文档流,不占用空间;浮动元素碰到包含它的边框或其他浮动元素边框停留。

浮动元素会引起的问题:父元素的高度无法被撑开,影响与父元素同级的元素;与浮动元素同级的非浮动元素会跟随其后;若浮动的元素不是第一个元素,则该元素之前的元素也要浮动,否则会影响页面的展示。

清除浮动的方式:给父级添加高度;最后一个浮动元素后添加一个空标签,并设置clear:both;包含浮动元素的父元素设置overflow:hidden;使用:after伪元素。

2、clear清除浮动的原理

元素盒子的边不能和前边的浮动元素相邻,对元素设置clear属性是为了避免浮动元素对该元素的影响,而不是清除浮动。

3、BFC的简单理解

简单来讲,BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定的规则进行物品摆放,并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件,则BFC中的元素布局不受外部的影响。

创建BFC的条件:

根元素(body);

元素设置浮动;

元素设置绝对定位;

display值为table-cell、inline-block、flex等;

overflow的值为scroll、hidden、auto。

BFC的特点:

垂直方向上,自上而下排列,和文档流排列一致;

在BFC中,上下两个相邻容器的margin会重叠;

计算BFC的高度时,需要计算浮动元素的高度;

BFC区域不会与浮动元素重叠;

每个元素的左margin和容器的左border相接触。

BFC的作用:

解决margin重叠问题;

解决高度塌陷问题;

创建自适应两栏布局。

4、什么是margin重叠问题?如何解决

两个块级元素的上外边距和下外边距可能会合并为一个外边距,其大小会取其中外边距值大的那个,这个行为就是外边距折叠。脱标的元素,如浮动元素和绝对定位元素等的外边距不会重叠,且重叠只会出现在垂直方向上。

计算原则:

如果两者都是正值,就取最大值;

一正一负,就是算正负相加的和;

如果都是负值,就用0减去两个中绝对值大的那个。

解决办法:

兄弟折叠

html 复制代码
底部元素变为行内盒子:display: inline-block
底部元素设置浮动:float
底部元素的position的值为absolute/fixed

父子重叠:

html 复制代码
父元素加入:overflow: hidden
父元素添加透明边框:border:1px solid transparent
子元素变为行内盒子:display: inline-block
子元素加入浮动属性或定位

5、元素的重叠顺序

元素发生重叠时,有着特定的垂直显示顺序,css盒模型的层叠顺序如下:

背景和边框:建立当前层叠上下文元素的背景和边框;

负的z-index;

块级盒:文档流内非行内级非定位后代元素;

浮动盒:非定位浮动元素;

行内盒:文档流内行内级非定位后代元素;

z-index:0;

正的z-index。

当定位元素z-index:auto,生成盒在当前层叠上下文中的层级为0,不会建立新的层叠上下文,除非是根元素。

6、position的属性有哪些

7、absolute和fixed的共同点与不同点

共同点:改变行内元素的呈现方式,将display置为inline-block;使元素脱离普通文档流,不再占据文档物理空间;覆盖非定位文档元素。

相同点:absolute与fixed根元素不同,absolute的根元素可以设置,fixed根元素是浏览器;在有滚动条的页面中,absolute会跟着父元素进行移动,fixed固定在页面的具体位置。

8、对sticky定位的理解

sticky定位被称为粘性定位,基于用户的滚动位置来定位。粘性定位的元素是以来用户滚动,在position:relative和position:fixed定位之间切换。具体表现为在跨越特定阈值前为相对定位,跨越阈值后,为固定定位。这个特定的阈值指的是top、right、bottom、left之一。

相关推荐
写代码的小王吧39 分钟前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
小小小小宇1 小时前
CSS 渐变色
前端
snow@li2 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇2 小时前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)2 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy2 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
前端开发张小七3 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七3 小时前
14.Python Socket客户端开发指南
前端·python
齐尹秦3 小时前
CSS Id 和 Class 选择器学习笔记
css·笔记·学习
ElasticPDF-新国产PDF编辑器3 小时前
Vue 项目 PDF 批注插件库在线版 API 示例教程
前端·vue.js·pdf