浮动元素有什么特征？对父容器、其它浮动元素、普通元素、文字分别有什么影响？
-
浮动元素的特征：
- 不占据普通文档流的空间。
- 浮动元素的左（右）外边界不能超过其包含块的左（右）内边界
- 浮动元素的左（右）外边界必须是源文档中之前出现的左浮动（右浮动）的元素的右（左）边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面
- 左浮动元素的右外边界不会在其右边浮动元素的左外边界的右边。一个右浮动元素的左外边界不会在其左边任何左浮动元素的右外边界的左边
- 一个浮动元素的顶端不能比其父元素的内顶端更高
- 浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
- 如果文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成的框的任何行框的顶端更高。
- 如果浮动元素出现在另一个浮动元素的旁边，而因此可能导致超出包含块的话，这个浮动元素会向下浮动到之前浮动元素下面的某一点。
- 浮动元素必须尽可能高地放置。
- 左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远。
- inline 元素设置浮动，改变 inline 的 display 使得它像个 block-level。
- 在重叠上，浮动元素会遮盖 block-level 元素的背景，不会遮盖 inline 元素。
内边界:指盒模型中的 content 边界。外边界：指盒模型中的 margin 边界。
-
影响：
- 非BFC的正常文档流父元素会"感受"不到浮动元素的存在，从而产生"高度塌陷"。
- 其他浮动元素会“察觉”到浮动元素的存在按照从左到右的“正常文档流”排列。
- 普通元素（非 inline-level）会无视浮动元素的存在，从而占据浮动元素的“原来的位置”
- 文字（也既 inline-level）级的元素会环绕浮动元素，表现的像是察觉到浮动元素一样
清除浮动指什么？如何清除浮动？两种以上方法
- 清除浮动指元素的侧边不允许出现浮动元素，从而使浮动元素的不占据普通文档流空间而导致的父元素的高度塌陷问题得到解决，主要通过 clear 属性实现。
- clear：指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动（清除浮动）在它的下面。clear 属性适用于浮动和非浮动元素。
- 当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致 margin collapsing 不起作用。
- 当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。
- 清除浮动的方法：
- 设置浮动包含块的父元素 height 值。
- 使包含块的父元素形成BFC（而对于IE7-浏览器，则用到其特有属性 haslayout ）。
- 通过添加
:after伪元素，然后在伪元素上设置 clear 属性来实现
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit
- 从父元素继承position属性的值
- 一般不用
- static
- 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
- relative
- 生成相对定位的元素，相对于元素本身正常位置进行定位
- 属性值：left, top,right ,bottom
- 应用于对其自身进行细微调整
- absolute
- 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位
- 属性值：left, top,right ,bottom
- fixed
- 生成绝对定位的元素，相对于浏览器窗口进行定位。
- 属性值：left, top,right ,bottom
- 需要一直停留在窗口的元素，例如
- sticky
- 兼容性较差，一般用JS实现
- 新的css3属性，它的表现类似 position: relative 和 position: fixed 的合体，目标区域在屏幕中可见时，它的行为就像 position: relative; 而当页面滚动超出目标区域时，它的表现就像 position: fixed，它会固定在目标位置。
- 注意:如果同时定义了left和right值，且width和height有值，那么left生效，right无效，同样，同时定义了top和bottom，top生效
z-index 有什么作用? 如何使用?
- z-index 规定了元素在Z轴（距离用户远近）上的顺序，值越大则越靠近用户，表现就是元素在最上面。
- z-index仅在设置了position非static属性的元素生效，且z-index的值只能在兄弟元素之间比较
- z-index 默认值为 auto，则不建立层叠上下文。设置为 0 则会建立层叠上下文。
- 示例
position: relative 和 负margin 都可以使元素位置发生偏移？二者有什么区别
- position: relative 相对自己原本的位置偏移，不影响其它普通流中元素的位置。
- margin：除了让元素自身发生偏移还影响其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- BFC：块格式化上下文（block formatting context） 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的
- 满足下列条件之一就可形成BFC：
- 根元素（即HTML元素）或其它包含它的元素
- 浮动（元素的 float 不是 none）
- 绝对定位的元素（元素具有 position 为 absolute 或 fixed）
- 内联块状元素 inline-blocks（元素具有 display: inline-block）
- 表格单元格（元素具有 display: table-cell，HTML表格单元格默认属性）
- 表格标题（元素具有 display: table-caption，HTML表格标题默认属性）
- 块元素具有 overflow ，且值不是 visible
- display: flow-root
- display: flex
- 注意：浮动不会影响其它BFC中元素的布局，并且清除浮动只能清除同一BFC中在它前面的元素的浮动，在其之后的不行。
- 应用：
- 自适应的两栏布局。
- 清除元素内部浮动。
- 嵌套元素margin边距合并问题的解决。
- 举例：利用BFC清浮动
<body>
<div style="border: solid 5px #0e0; width: 300px; overflow: hidden;">
<div style="height: 100px; width: 100px; background-color: Red; float: left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float: left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float: left;">
</div>
</div>
</body>
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 外边距合并出现的三个场景
- 同一个BFC，且同处于普通流中的垂直相邻元素外边距合并
- 父子元素的外边距合并
- 空元素的外边距合并
- 合并规则
- 两个margin都是正值的时候，取两者的最大值；
- 当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移；
- 当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，将其（即绝对值最大的 负margin）和正 margin 值当中最大的相加。
- 所有毗邻的margin要一起参与运算，不能分步进行
- 不让相邻元素外边距合并的方法
- 被非空内容、padding、border 或 clear 分隔开
- 不在一个普通流中或一个BFC中
- margin在垂直方向上不毗邻
- 如果我们想减少这种情况的发生：在实际编写过程中，应尽量避免同时使用
margin-bottom和margin-top
- 总结
- 这些 margin 都处于普通流中，并在同一个BFC中；
- 这些 margin 没有被非空内容、padding、border 或 clear 分隔开；
- 这些 margin 在垂直方向上是毗邻的，包括以下几种情况：
- 一个 box 的 top margin 与第一个子box 的 top margin
- 一个 box 的 bottom margin 与最后一个子box 的 bottom margin，但须在该box 的 height 为 auto 的情况下
- 一个 box 的 bottom margin 与紧接着的下一个 box 的 top margin
- 一个 box 的 top margin 与其自身的 bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的 height、没有普通流的子元素
- 例外的情况：
- 根元素（html）的外边距不会参与折叠
- 设置任何属性的空span和空div不影响任何布局，可以无视之。
- 实例：父子外边距合并
网友评论