浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。
- 对父容器: 如果其子元素都是浮动元素.会引起父容器的塌陷
- 其他浮动元素: 如果父容器足够宽.会并排排列.如果宽度不够,后面的元素会换一行再排列,如果上一行有浮动元素超长,会把下一行的浮动元素卡主
- 普通元素: 普通元素会占据浮动元素的位置.但是会被浮动元素遮住
- 文字:文字会感知到浮动元素的存在，会留出空间,形成环绕效果
清除浮动指什么? 如何清除浮动? 两种以上方法
- 清除浮动指清除掉元素float属性。
子元素浮动会引起父元素的塌陷.是因为当父元素未设置高度,全靠其里面的子元素的高度撑起来,而子元素浮动起来,脱离了文档流.父元素感知不到子元素.因此.父元素的高度就为0.所以发生了父元素的塌陷
- 在浮动元素最后设置一个div,设置clear:both能清除浮动，并撑开父元素。(clear 属性规定元素的哪一侧不允许其他元素浮动
- 使父容器形成BFC
/方法1/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/方法2/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？
- inherit 规定应该从父元素继承 position 属性的值
- static 默认值,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
- relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px
- absolute 生成绝对定位的元素，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
- fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
- sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
z-index 有什么作用? 如何使用?
- 当网页上出现多个由绝对定位或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。z-index的意思就是在z轴的顺序，如果说网页是由x轴和y轴所决定的一个平面，那么z轴就是垂直于屏幕的一条虚拟坐标轴，浮动层就在这个坐标轴上，那么它们的顺序号就决定了谁上谁下了。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
- position:relative: 只是相对于自己本身进行偏移.不会影响其它普通流中的元素
- margin:不光自身进行偏移,还会影响其它普通流中的元素
BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明
- 块格式化上下文（block formatting context） 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。具有对内部元素的包裹性及对外部元素的独立性。
- 对元素设置以下属性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed; - BFC的作用有：
（1） 解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
（2） 清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
- 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
（1）两个兄弟元素在垂直方向上合并外边距，取较大值进行合并。
（2）父子元素间没有阻挡（如：边框、非空内容、padding等）时发生上和/或下外边距合并。
（3）外边距自己和自己合并
如果一个元素没有边框和填充，但有上下外边距，这时它的上下外边距会合并。
除此之外，若该元素垂直方向上的兄弟元素也有外边距，那么垂直方向的外边距依旧会发生合并。
网友评论