前端面试总结
本笔记由作者在复习前端CSS部分的相关的一些总结, 如果有什么错误的地方或者有什么相关的建议欢迎联系我
这份笔记借鉴了很多网上的文章, 如果有雷同或者相似的地方, 不用怀疑, 那就是搬得, 如果你是当中一些文章得作者,
如果觉得这种行为不恰当, 请与我联系, 收到消息后我会尽快处理
QQ: 1879154660
QQ昵称: 只为你乱了浮生
感谢各位观看者的支持, 希望能对正在面临面试的你有所帮助,
目录
1.z-index的作用和用法
z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候,z-index 较大的元素会覆盖较小的元素在上层进行显示。
z-index可以是0, 处于正值下面, 处于auto前面
z-index可以是负数,处于auto下面
2.圣杯布局和双飞翼布局
圣杯布局和双飞翼布局都是三栏布局: 两边高度固定, 中间栏自适应, 中间栏优先渲染
尾部: 清除浮动
容器: bfc
三栏: float:left; positive:relative;height:500px
左右栏: 宽度+背景颜色
左侧挪到上一行前面: margin-left: -100%
右侧往前挪: right: -150px
给容器: pandding-left: 200px; padding-right:150px
具体实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
.header,.footer{
background-color: rgba(29,27,27,0.726);;
text-align: center;
height: 60px;
line-height: 60px;
}
.footer{
/*清除浮动*/
clear: both;
}
.middle,.left,.right{
height: 100px;
}
.content{
padding-left: 200px; /*空出left的位置*/
padding-right: 150px; /*空出right的位置*/
overflow: hidden;
}
.content div{
position: relative;
float: left;
text-align: center;
height: 300px;
line-height: 300px;
}
.middle {
width: 100%;
background-color: orange;
}
.left {
width: 200px; /* leftContent width */
right: 200px; /* leftContent width */
margin-left: -100%;
background-color: green;
}
.right {
width: 150px; /* rightContent width */
margin-left: -150px; /* rightContent width */
right: -150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content wrapper">
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
效果展示
中间栏里再放inner
容器:bfc
三栏: float:left; height: 500px
左右栏: 宽度+背景颜色
中间栏: 100%+背景颜色
左右栏: 宽度+背景颜色
左侧挪到上一行前面: margin-left:-100%;
右侧挪到上一行后面: margin-left: -150px;
inner里面margin: 0 200px 0 150px;
具体实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
body {
min-width: 550px;
font-weight: bold;
font-size: 20px;
}
#header, #footer {
background: darkgoldenrod;
text-align: center;
height: 60px;
line-height: 60px;
}
#container {
/*这里预留位置用再预留*/
/*该元素大小有center撑开*/
overflow: hidden;
}
.column {
text-align: center;
height: 300px;
line-height: 300px;
}
#left, #right, #center {
float: left;
}
#center {
width: 100%;
background: gray;
}
#left {
width: 200px;
/*移动到上一行首首*/
margin-left: -100%;
background: skyblue;
}
#right {
width: 150px;
/*移动到上一行行尾*/
margin-left: -150px;
background: orange;
}
.content {
/*内容区显示的位置*/
margin: 0 150px 0 200px;
}
</style>
</head>
<body>
<div id="header"># header</div>
<div id="container">
<div id="center" class="column">
<div class="content"># center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>
</html>
效果展示
3.什么是BFC,IFC
块级格式化上下文使页面上的一块渲染区域, 这块区域由符合条件的容器产生.
容器内的子元素会由块盒子和浮动元素按如下规则排列:
纵向一个挨着一个排列
两个贺子的纵向间距由margin属性决定, 两个相邻的盒子在垂直方向上的margin
会有种"重叠合并"的效果,此时纵向间距距离取较大的那个margin值
这个容器可以看作一个独立的布局环境,容器外的元素与容器内的元素(包括浮动元素)
再布局上不会影响到对方
BFC容器的高度将浮动圆度的高度计算进去
浮动清除效果. BFC会排斥外部浮动元素,让浮动元素和块元素在视觉上不会由重叠的效果:
产生块格式上下文的方式有:
1. 根元素 - <html>
2. 浮动元素 - 非float: none的元素
3. 绝对定位元素 - position为absolute或fixed的元素(和产生粘滞效果sticky的元素?)
4. 行内块元素 - display为inline-block的元素
5. 表格元素
display: table-cell的元素,如<td>
display: table-caption的元素,如<th>
display: table的元素,如<table>
display: table-row的元素,如<tr>
display: table-row-group的元素,如<tbody>
display: table-header-group的元素,如<thead>
display: table-footer-group的元素,如<tfoot>
display: inline-table的元素
6. overflow不为visible的块元素
7. display: flow-root的元素
8. contain: layout | content | paint的元素
9. 弹性元素 - display: flex | inline-flex的直接子元素
10. 网格元素 - display: grid | inline-grid的直接子元素
11 .多列容器 - column-count或column-width不为auto
12. column-span: all的元素
行内格式化上下文的布局首先要根据水平, 垂直和左右书写模式来说明:
在水平书写模式 writing-mode: hortizontal-td下,盒子会在时评方向上从左到右排列,空间不够时换到下一行继续
在垂直书写模式下 writing-mode: vertical-rl | vertical-lr, 盒子会在垂直方向上从上到下排列, 空间不够时换到下一行继续, 只是这里的下一行有左右之分
writing-mode: vetical-rl时就像古人书写以及日本台湾书籍的格式一样,从右到左排列; writing-mode: vertival-lr则时从左到右排列
每"行"在浏览器中会被作为一个盒子处理, 这个盒子叫行框(line box),他的高度由其包含行内元素的最低位置到最高位置(不包含margin)计算而来; 因为考虑盒子件对齐处理的关系,
这个值可能会被行内最高的元素要搞
当由浮动元素在行内式化上下文时, 在浮动元素的行框可能会因为它而缩短宽度,产生"文字环绕"效果
当行框内的行内元素没有占满整行的空间时, 他们在水平方向的位置会受到text-align属性的影响
而当行内元素太长时, 会被分割为多行, 也就是说这个元素内产生了多个行框排列在一起,此时margin.
border, padding都不会在断裂处生效
满足以下条件时,行框会被当做高度为0的盒子处理:
不包含文字
非white-space: pre | pre-wrap | pre-line
不含margin、padding、border值不为零的元素
不含在常规流中的元素,如图片、表格之类
4.清除浮动方式
清除浮动: 清除浮动后造成的影响-->清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题
额外标签法(在最后一个浮动标签后,新新加一个标签, 给其设置clear: both;)(不推荐)
<div style="clear:both"></div>
我们清除了浮动,父元素自动检测盒子的高度,然后与其同高
优点: 通俗易懂, 方便
缺点: 添加无意义标签, 语义化差
父级添加overflow属性, 变成BFC(块级格式化上下文),就可以解决浮动带来的影响(不推荐)
通过除法BFC方式,实现清除浮动
优点:代码简洁
缺点: 内容增多的时候容易造成不会自动换行,导致内容被隐蔽掉,无法显示要溢出的元素
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
使用before和after伪元素清除浮动(推荐使用):
这种方式也是使用额外标签方式达到效果,只是变相的使用了伪元素after/before,使得页面结构更简介,也是常用的清除浮动的方式
优点: 符合闭合浮动思想,结构语义化正确
缺点: ie6-7不支持伪元素:after,使用zoom:1触发hasLayout.
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: ""; /*元素设置为空*/
display: block; /*转换为块级元素*/
height: 0; /*高度为0*/
clear:both;/*清除浮动*/
visibility: hidden;/*将元素隐藏*/
}
/*下面为了兼容IE*/
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
具体使用
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
使用before和after双伪元素清除浮动
优点: 代码更简洁
缺点: 用zoom:1除法hasLayout
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
具体使用
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
使用 display: flow-root(推荐):
一个新的 display 属性的值,它可以创建无副作用的 BFC。在父级块中使用 display: flow-root 可以创建新的 BFC。
给 <div> 元素设置 display: flow-root 属性后,<div> 中的所有内容都会参与 BFC,浮动的内容不会从底部溢出。
你可以从 flow-root 这个值的名字上看出来,它创建一个新的用于流式布局的上下文,类似于浏览器的根(html)元素。
具体使用
.box[style] {
background-color: aliceblue;
border: 5px solid steelblue;
}
.float {
float: left;
width: 200px;
height: 100px;
background-color: rgba(255, 255, 255, .5);
border:1px solid black;
padding: 10px;
}
<div class="box" style="display:flow-root">
<div class="float">I am a floated box!</div>
<p>I am content inside the <code>display:flow-root</code> container.</p>
</div>
实现效果: