-
1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
-
浮动元素的主要特征是脱离普通流，根据设定的值向左或向右偏移，直到其边缘遇到父元素的边界或者另一个浮动元素的边框。
-
对父容器:如果父容器内的元素均设置了浮动，那么他们脱离普通流无法撑起父容器的高度，导致父元素的塌陷。
-
对其它浮动元素：同一父容器内的浮动元素按照设定的方向并排排列，当父元素的宽度不够时，后面的元素会向下移动，直到有足够的空间；如果浮动元素的高度不同，那么有可能挡住移动的路径。
-
对普通元素：无法辨别普通元素，有可能导致覆盖其它普通元素，占据其位置
-
对文字：文字能够识别浮动元素，会围绕浮动元素
-
2.清除浮动指什么? 如何清除浮动? 两种以上方法
-
清除浮动指指清除掉元素内的float属性
①.通过在浮动元素末尾添加一个空的标签
②.使用:after 伪元素 消除浮动
③.父元素也设置浮动 或者display-blocks（或者其它生成BFC的方式） -
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
-
absolute 绝对定位 根据不为默种定位方式认定位的第一个父元素进行定位
-
static 默认值 没有定位，元素出现在正常的流中
-
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位
-
relative：相对定位。相对于元素本身正常位置进行定位，通过top、bottom、left、right属性来设置偏移量。使用场 景为绝对定位设定参照物或对元素自身位置进行局部调整。
-
inherit 从父元素继承定位属性
-
sticky：对象在常态时遵循普通流。它就像是 relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外 时则表现如fixed
-
4.z-index 有什么作用? 如何使用?
z-index负责控制一个元素使用绝对定位，与其它元素重叠，浏览器根据设定重叠元素的顺序。可以给z-index设定值，越大的顺序越在前。
-
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative和负margin都可以使元素位置发生偏移，二者的区别表现在：
margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间；
相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。
-
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
-
BFC，格式化块级上下文，使元素形成独立的与其他块隔离的容器，确保内部元素的属性不会影响到其它元素
-
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素
在以上的情况里可以创建BFC -
解决margin叠加问题 解决浮动问题
-
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，或者一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
合并规则：
两个外边距都是正数，取两者之中的较大者；
两个外边距都是负数，取两者之间绝对值较大者；
当两个外边距一正一负时，取两者的和。
范例
网友评论