一、浮动元素
特征
浮动元素会脱离文档流，并按照指定的方向移动，直到其碰到父元素边框或另一个浮动元素的边缘。普通文档流会视浮动元素不存在一样，但文字和图片等内容可以感知浮动元素的存在，遇到浮动元素会避开。
- 对于父容器
若子元素都是浮动元素，相当于子元素不存在，父元素没有包含任何内容，因此会无法撑开父容器，父元素高度为0。 - 对于其他浮动元素
浮动元素会水平排列，如果包含块太窄无法容纳全部浮动元素，那么无法包含的浮动元素会向下移动，直到有足够的空间，而如果浮动元素的高度不同，那么向下移动的时候可能会被卡主。 - 对于其他普通元素
普通元素会占据浮动元素原来的空间，但会被浮动元素遮盖。 - 对于文字
文字会感知到浮动元素的存在，会环绕其周边。
二、清除浮动
清除浮动是指清除浮动元素带来的不利影响。
清除浮动的方法
- 在浮动元素的后面增加一个无内容的标签，添加clear属性。
- 因为BFC可以包含浮动元素，因此可以使父容器形成BFC：
float: left | right;overflow: hidden | auto | scroll;display: table-cell | table-caption | inline-block;position: absolute | fixed
- 利用CSS添加一个空的内容，1类似
/*方法1*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/*方法2*/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
三、定位
- inherit
从父元素继承。 - static
默认值，元素出现在正常流中，参考点是文档流中正常的位置。 - relative
相对定位。相对于元素本身正常的位置进行定位，通过top、bottom、left、right属性来设置偏移值，原有位置不被其他元素占据。
使用场景：为绝对定位设置参照物或元素自身位置进行局部调整。 - absolute
绝对定位。相对于除static定位外的第一个父元素进行定位，通过top、bottom、left、right属性来设置偏移值，不占空间。
使用场景：因为是一父元素作为参照，可以比较方便地设置元素的位置，且不影响其他元素的布局。 - fixed
固定定位。相对于viewport进行的定位，不为元素预留空间。
使用场景：弹窗等。 - sticky
粘性定位是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
四、z-index
z-index属性指定了一个元素及其子元素的z-order。当元素之间重叠的时候，z-order决定了哪一个元素覆盖在其他元素的上方显示。通常来说，z-index较大的元素会覆盖较小的一个。
五、position：relative和margin的偏移作用
-
position：relative不会影响其他元素的布局，即使偏移了，页面还是会保留其原来的位置。 -
margin自身偏移的情况下，还会影响后面其他普通流的元素。
六、 BFC（Block Formatting Context）
块格式化上下文是由以下之一创建的：
- 根元素或其它包含它的元素
- 浮动
- 绝对定位的元素（元素具有position为absolute或fixed）
- 内联块inline-blocks
- 表格单元格（display：table-cell）
- 表格标题（display：table-caption）
- 块元素 元素具有overflow的值不是visible
- 弹性盒子 flex boxes（display：flex | inline-flex）
- display：flow-root
块格式化上下文对定位和清除浮动很重要。可以理解BFC为一个模块，两个不同模块是相对独立互不影响的：
- 同一个模块内，两个相邻元素或嵌套元素的垂直margin重叠；
- 可以包含浮动，因此浮动不会影响其他模块中元素的布局；
- 清除浮动只能清除同一模块中，在它前面的元素的浮动。
例子：通过{display：inline-block}包裹浮动元素
<div class="one">
<div class="two">2</div>
</div>
.one{
display: inline-block;
border: 5px solid black;
}
.two{
width:400px;
height:400px;
background:red;
float: left;
}
七、外边距合并
- 在什么场景下会出现外边距合并？
在同一BFC里，垂直相邻的两个元素或嵌套关系的父子元素会发生外边距合并。 - 如何合并？
- 外边距为正值时，并不是将两个边距相加，而是只保留较大一个。
- 遇到外边距为负数时，会进行相加。
- 如何不让相邻元素外边距合并？
- 将其分别放置在不同的BFC中。
- 设置padding或border，保证外边距不接触。
- 父子外边距实例
注意，red的左右margin在yellow里显示，而red的上下margin与yellow的合并，然后两者合并后的margin又和blue的margin合并。
<div class="blue"></div>
<div class="yellow">
<div class="red"></div>
</div>
.blue{
width: 400px;
height: 200px;
background: blue;
margin: 20px
}
.yellow{
background: yellow;
margin:20px;
}
.red{
width: 400px;
height: 400px;
background: red;
margin: 20px;
}
Screenshot.png
网友评论