1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素的特征：CSS的浮动更准确的说是水平浮动.浮动元素可以左浮动或者右浮动，设置浮动之后元素会脱离普通文档流，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素。
- 对父容器：浮动元素会脱离正常文档流，所以他不能撑开父元素，容易造成父元素的塌陷。
- 对其他浮动元素：如果是相同方向浮动的元素，会按顺序向浮动方向排列，如果不同方向，则会往两边排列，如果父元素的空间不足以一排容纳，则会顺延到下一排，如果浮动元素的高度不同,那么向下移动的时候可能被卡住。
- 对普通元素：因为脱离了普通文档流，普通元素会感觉不到浮动元素的存在。
- 对文字：文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。
2.清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动指的是解决因为浮动的原因导致的父容器塌陷的问题。
- 方法一：在浮动元素之后添加一个DIV，然后对其设置clear:both；属性，来完成清除浮动，缺点是增加了一个无意义的标签。
- 方法二：使父元素形成BFC。（例如：对父元素添加overflow:hidden属性。）
- 方法三：在最后一个元素后添加一个after伪类，然后再伪类中设置clear:both属性，效果和方法一一样，但是不会增加一个无意义的标签，相对来说用的最多的一种方法。
3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- 相对定位:对元素设置position:relative;便是对元素设置相对定位，表示相对于元素本身正常位置进行定位，正常文档流中的其他元素会感觉元素还在原来位置，不会进行变动。
- 绝对定位:对元素设置position:absolute;便是对元素设置绝对定位，他是相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定。
- static正常定位:默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
- 固定定位:position:fixed属性是固定定位，也是相对于浏览器窗口进行绝对定位。元素的位置和绝对定位一样通过 left, top, right 以及 bottom 属性进行规定。
4.z-index 有什么作用? 如何使用?
- z-index 属性指定了一个元素及其子元素的 z-order。 当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。
- z-index的值只在同级元素之间才会影响，对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。对于不是同级元素，z-index不影响堆叠顺序。
- 如何使用：只要是position的值不为static的话即可设置z-index.
5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- 二者区别为:position:relative不会改变普通文档流之中其他元素的位置，其他元素还是会认为设置了position:relative的元素在原来的位置，但是设置marin来让元素移动，会占用移动后的和移动前的空间，也会影响后面的元素的位置。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC的全称是 Block Format Content，中文翻译为块级格式化上下文。从样式上看，具有 BFC 的元素与普通的容器没有什么区别，但是从功能上，具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素。
- 满足下面任一条件的元素，会触发为 BFC ：
1.浮动元素，float 除 none 以外的值
2.绝对定位元素，position（absolute，fixed）
3.display 为以下其中之一的值 inline-blocks，table-cells，table-captions
4.overflow 除了 visible 以外的值（hidden，auto，scroll） - BFC的比较常用的一个作用是清除浮动：
image.png
子元素因为设置了浮动，所以父元素塌陷了。
image.png
对父元素设置overflow:hidden;形成BFC，清除浮动。
7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 块元素的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
- 发生外边距塌陷的三种基本情况:
1.相邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要[清除过去的浮动]）。
2.块级父元素与其第一个/最后一个子元素，如果中间不存在边框、内边距、内联元素、清除浮动这四条属性，那么，块级父元素和其第一个/最后一个子元素就会发生外边距合并的现象。
3.如果存在一个空的块级元素，其 border、padding、inline content、height、min-height都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。 - 外边距合并的规则：如果合并的外边距都是正值或者负值，那么边距会取其中绝对值最大的一个作为合并的边距，如果合并的外边距为一正一负，那么合并的边距为两个正负边距的值相加。
- 形成BFC的话会阻止外边距合并。
-
父子外边距合并范例:
image.png
可以看出此时因为父子元素之间并没有边框、内边距、内联元素、清除浮动这四条属性，上边距已经合并了。
image.png
设置浮动属性之后，外边距合并消失。当然如果设置边框、内边距、内联元素其他任何一种，外边距合并也会消失。综合考虑是：设置对网页影响最小的一个因素。
网友评论