前端开发面试知识汇总-css篇
本篇博客主要介绍自己在今年秋招准备前端开发面试时遇到的css布局相关问题,也是css布局一些比较基础的知识,希望对大家在前端面试或学习前端css布局相关知识能够有所帮助。
五、BFC
1. box | formatting context简介
box:css布局基本单位
盒子是css布局的基本单位,即一个页面由若干个盒子组成,元素类型和display属性取值决定了盒子类型。
formatting context(格式化上下文)是独立的文档渲染容器,它是页面中的一块渲染区域,并且有一套渲染规则,决定了其子元素将如何定位,以及和其他元素的关系和相互作用。决定如何对盒子进行渲染。不同类型的盒子参与不同的formatting context。
常见的formatting context:BFC(Block fomatting context)、IFC(inline formatting context)
2. BFC简介
BFC(blcok formatting context):块级格式化上下文,是一个独立的渲染容器,只有block-level-box会参与,它规定了block-level-box如何布局,与外部布局没有关系,同时外部布局也不受BFC内部布局的影响。
3.触发BFC
只要元素满足下面任一条件即可触发 BFC 特性:
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值
(hidden、auto、scroll)
4.BFC布局规则
- 容器内部元素垂直排列
- 元素垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
- BFC区域不会与flaot区域重叠(可以通过触发BFC避免float元素与元素重叠)
- 计算BFC高度时,浮动元素也参与计算
- BFC是页面一个独立的渲染区域,内部与外部的布局互不影响。
5.BFC布局规则案例
5.1. 避免margin重叠(通过使块级元素处于不同的BFC)
多个相邻普通流的块元素垂直方向margin会重叠
重叠结果为:
- 相邻外边距都为正数,折叠结果为两者中较大的值。
- 相邻外边距都为负数,折叠结果为两者绝对值中较大的值。
- 相邻外边距一正一负时,折叠结果为两者相加的和。
/*两个div处于同一个BFC:body里*/
<body>
<div id="child1"></div>
<div id="child2"></div>
</body>
#child1{
height: 200px;
width:100px;
margin:0px 0px 10px 0px;
background-color: #FF7F50;
}
#child2{
height: 200px;
width:100px;
margin:20px 0px 0px 0px;
background-color: #7aff63;
}
/*将第二个div触发BFC,避免margin重叠*/
<body>
<div id="child1"></div>
<div id="container">
<div id="child2"></div>
</div>
</body>
#container{
overflow: hidden;
}
#child1{
height: 200px;
width:100px;
margin:0px 0px 10px 0px;
background-color: #FF7F50;
}
#child2{
height: 200px;
width:100px;
margin:20px 0px 0px 0px;
background-color: #7aff63;
}
5.2.清除浮动(BFC高度包含浮动元素的高度)
<body>
<div class="father">
<div id="child1"></div>
</div>
</body>
.father{
background-color: aquamarine;
}
#child1{
float:left;
height:100px;
width:200px;
background-color: aliceblue;
}
<body>
<div class="father">
<div id="child1"></div>
</div>
</body>
.father{
overflow:hidden;
background-color: aquamarine;
}
#child1{
float:left;
height:100px;
width:200px;
background-color: aliceblue;
}
六、清除浮动
1.文档流简介
标准文档流:在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。
浮动:浮动元素会脱离标准文档流,在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。
2.浮动存在问题
2.1父元素高度塌陷
<body>
<div class="father">
<div id="child1"></div>
</div>
</body>
.father{
border:2px solid black;
background-color: aquamarine;
}
#child1{
float:left;
height:100px;
width:200px;
background-color: aliceblue;
}
2.2浮动元素会遮盖其他标准流的元素
3.清除浮动方式
3.1 BFC(见上一章节5.2内容)(不推荐)
3.2 clear属性(通过在浮动元素之后新添一个标签,设置其clear:both)(不推荐)
clear:left | right | none | both | inherit
left:规定元素左侧不允许有浮动元素
right:规定元素右侧不允许有浮动元素
none:规定元素两侧允许有浮动元素
both:规定元素两侧不允许有浮动元素
inherit:规定元素从父元素继承clear值
<body>
<div class="father">
<div id="child1"></div>
<div id="child2"></div>
</div>
</body>
.father{
border:2px solid black;
}
#child1{
float:left;
height:100px;
width:200px;
background-color: aliceblue;
}
#child2{
clear:both;
}
3.3 伪元素(推荐使用)
<body>
<div class="father">
<div id="child1"></div>
</div>
</body>
.father{
border:2px solid black;
}
#child1{
float:left;
height:100px;
width:200px;
background-color: aliceblue;
}
.father:after{
content:"";
display:block;
visibility: hidden;
clear:both;
}
七、隐藏元素方式
1. 隐藏元素方式
- display:none
- visibility: hidden
- opacity: 0
2. 隐藏方式比较
display:none
元素从页面中删除,即页面中不存在该元素,改变页面布局。
visibility:hidden
元素在页面中仍存在,只是看不到,不改变页面布局,但不会触发该元素绑定的事件。
opacity:0
元素隐藏起来,元素在页面中仍存在,只是看不到,不改变页面布局。会触发该元素绑定的事件如点击事件。