前端面试总结
本笔记由作者在复习前端CSS部分的相关的一些总结, 如果有什么错误的地方或者有什么相关的建议欢迎联系我
这份笔记借鉴了很多网上的文章, 如果有雷同或者相似的地方, 不用怀疑, 那就是搬得, 如果你是当中一些文章得作者,
如果觉得这种行为不恰当, 请与我联系, 收到消息后我会尽快处理
邮箱: zwn_fobj@foxmail.com
QQ: 1879154660
QQ昵称: 只为你乱了浮生
感谢各位观看者的支持, 希望能对正在面临面试的你有所帮助,
目录
1. z-index的作用和用法
2. 圣杯布局的实现过程
2.1圣杯布局实现过程
2.2双飞翼布局实现过程
3.什么使BFC,IFC
3.1 BFC(Block Formatting Contexts)块级格式化上下文
3.2 IFC(Inline Formatting Contexts)行内格式化上下文
4.清除浮动方式
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不为auto12. 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>实现效果:
