1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
特征：
- 元素浮动之后不占据原来的位置。
- 浮动的盒子在一行上显示。
- 行内元素浮动之后转换为具备有块级元素的特征，可以设置宽高
对父容器、其他浮动元素、普通元素、文字分别有什么影响：
- 如果父容器的子元素都是浮动元素，如果父容器没有定义高度，那么父容器会失去高度，在浮动元素之外。
- 对于普通元素，普通元素会感知不到浮动元素的存在，如果宽高合适，后面的元素会占据浮动元素原来的位置。
- 对于文字来说，能感知到浮动元素的存在，如果位置足够，就能够实现文本绕图的效果。
2、清除浮动指什么? 如何清除浮动? 两种以上方法
清除浮动指什么：
- 当使用浮动元素时，会产生各种问题：
1.使用浮动元素会导致文字包围浮动元素的情况；
2.父元素无法感知浮动元素的容量，如果父元素未设置高度值，父元素高度将无法只由浮动元素撑开,可能会出现父容器高度为0的现象。为了解决这些问题，需要清除浮动。
如何清除浮动:
- 针对文字包围浮动元素的情况，可以使用clear属性来清除浮动
- 针对使用浮动元素后父容器出现的高度问题，利用某些属性清除格式上下文的特质，使父容器形成一个新的BFC.其便具有BFC包含浮动的特质，使高度撑起来。
- 浮动元素脱离文档流
父级div定义 height ：
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
3、有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit：继承父元素定位属性。
- static：默认值，没有定位，元素出现在正常的文档流中。参考点是文档流中的位置。
- relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场景：为绝对定位设定参照物或对元素自身位置进行局部调整。
- absolute：绝对定位。相对于static定位除外的第一个祖先元素进行定位，若都没有发现则以html标签为参考进行定位。使用场景：当想让元素参照特定参照物进行定位时使用。
- fixed：固定定位。生成绝对定位元素，相对于viewport进行定位。
- sticky：对象在常态时遵循普通流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。兼容性不佳，不常用。
4、z-index 有什么作用? 如何使用?
- 作用:绝对定位元素脱离文档流，因此有时会发生元素的层叠。z-index元素为这些元素设置了层叠顺序
- 使用:对拥有absolute元素的属性使用
5、position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative 是相对于自己本来的位置发生偏移，对其他元素无影响
- mairgin:负值 会影响周围的普通流元素
6、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC是块级格式化上下文
- 生成方式：为元素设置以下属性即可：
float:left|right
overflow:hidden|auto|scroll
display:table-cell|table-caption|inline-block
position:absolute|fixed - 作用 BFC为元素生成一个独立的空间，外界元素无法对内界元素造成影响
1.margin的重叠。当两个上下相邻的元素发生margin重叠时，让其中一个元素产生一个新的BFC，即可解决
2.清除浮动:BFC元素可以包含浮动
7、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 会出现外边距合并的情况：
两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，或者一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。 - 合并规则：
1、两个外边距都是正数，取两者之中的较大者；
2、两个外边距都是负数，取两者之间绝对值较大者；
3、当两个外边距一正一负时，取两者的和。 - 取消相邻元素的外边距合并：
1、可以选择使用同一方向上的margin设定，比如都设置margin-top或者统一设置margin-bottom。
2、给元素加一个display:inline-block;(只针对当前加的元素起效)
3、给元素添加folat, position等 -
父子外边距合并范例：
8D1AC4FA-B269-4687-BA53-19A365E14D0E.png
父元素加上overflow:hidden;
AEAC962A-B970-4BC8-96A1-85B6FC06FEE0.png
网友评论