浮动定位BF边距合并
- 浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
浮动元素脱离文档流，会随着float属性值的设定向左或向右移动，直到它的边缘碰到它的包含框或浮动元素的边缘，普通文档流会视浮动元素不存在
- 对父容器, 如果子元素都是浮动元素, 父元素的高度无法撑开, 导致父容器高度塌陷.
- 对其他浮动元素, 浮动元素边缘接触到其他浮动元素就会停止移动, 如果包含块太窄，无法完全水平容纳浮动元素，那么其他浮动元素就会向下移动，直到有足够空间。如果浮动元素高度不同，那么向下移动时可能会被卡住.
- 对普通元素, 会视浮动元素不存在; 如果宽高合适, 普通元素会占据原来浮动元素占据的空间, 造成布局变动; 浮动元素可以覆盖普通元素.
- 对文字, 文本内容感知浮动元素的存在, 造成文字会环绕在浮动元素周围.
- 清除浮动指什么? 如何清除浮动? 两种以上方法
由于父元素认为其内的浮动的子元素是不存在的, 所以会父元素边框无法撑开的问题, 清楚浮动解决浮动父容器高度塌陷问题;
方法一:
<div style="clear: both;"></div>
方法二:
利用BFC内的浮动子元素参与计算高度的特性.
.parent {
overflow: hidden;
}
方法三;
通用方法, 其实同方法一
.parent:after {
content: "";
display: block;
clear: both;
}
- 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
position总的来说有两类分类: 相对定位和绝对定位
取值可以有: static | relative | absolute | fixed | sticky
static
- 是根据正常的文档流定位的
- 是默认的属性值.
relative
- 是根据正常的文档流定位
- 相对于本身的位置进行偏离
- 不影响其他元素, 本身在页面布局中的位置仍然存在
- 形成了重叠上下文, z-index有效
absolute
- 不在正常的文档流中
- 在页面布局中不占据位置
- 相对于离它最近的设置了postion 不是static的祖先的定位; 如果不存在这样的祖先, 就是相对于<body>的定位.
fixed
- 不在正常的文档流中
- 在页面布局中不占据位置
- 相对于视窗(viewport, 即<html>)来定位
- 视窗滚动时, 位置并不会移动
- 可以用来做在滚动条滚动时固定不变的部分
sticky
- 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位
- 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
- 兼容性较差
参考了css position mdn, 博客
- z-index 有什么作用? 如何使用?
z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系.
在一个层叠上下文中, z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下.可以参考这个例子
position: relative | absolute | fixed 会创建一个new stacking context, z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序
- position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
两者都可以是元素发生偏移.
相对定位发生偏移之后, 不影响其他元素的布局, 之前元素占据的空间扔存在.
负margin发生偏移后, 原来元素占据的空间会被让出, 影响周围元素的布局.
可以参考实例
- BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关
CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC:
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
BFC特性:
- 按照BFC的定义, 只要同属于一个BFC, 两个元素才有可能发生垂直Margin的重叠, 这个包括相邻元素, 嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠
因此要解决margin重叠问题,只要让他们不在同一个BFC就行了, 但是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳, 但是对于嵌套元素来说就很必要了, 只要把父元素设置为BFC就可以了. 这样子元素的margin就不会和父元素的margin发生重叠了 - BFC不会重叠浮动元素
实例可以参考 - BFC可以包含浮动
计算BFC高度时, 浮动子元素也参与运算
所以这条可以用来处理子元素都是浮动元素时,父元素没有忽略子元素高度的问题
实例可以参考
- 在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
按照BFC的定义, 只要同属于一个BFC, 两个元素才有可能发生垂直Margin的重叠, 这个包括相邻元素, 嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者的相加的和
阻止相邻元素外边距合并的方法是给相邻元素添加一个外壳, 是两个相邻元素不在同一个BFC中.
举例, 给.div2加了个外壳
要阻止父子外边距合并, 可以让父元素形成BFC
例子
可以参考Mdn外边距合并,
CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
代码
