问答

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

特征

浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示

浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐

浮动元素后面的内联元素会向此浮动元素的外边距靠齐

影响

对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷

对其兄弟元素（非浮动）的影响

如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。

如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。

对其兄弟元素（浮动）的影响

同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面

反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下

对子元素的影响

当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

清除浮动指什么? 如何清除浮动? 两种以上方法

一个块级元素的高度如果没有设置height，那么其高度就是由里面的子元素来撑开的，如果子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，你可以使用firebug查看下如果不清除浮动，父元素会出现高度不够，那样如果设置border或者background都得不到正确的解析，所以需要清除元素周围的浮动，

方法：clear：both,或者通过设置overflow:auto属性新建一个BFC从而清除浮动。

有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

参考点：原来在文档流的位置；使用场景：位置偏离；

元素框相对于原来位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

相对于文档位置，参考点：文档；使用场景：快速看到想要的效果，
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

参考点：用户显示屏，使用场景需要在屏幕向用户固定展示的内容；

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

z-index 有什么作用? 如何使用?

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

使用如图，通过设置该属性的值，来设置其展示的位置，相当于三维坐标轴的Z轴

position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative

只是视觉上元素位置发生了变化，而元素在文档流中的位置并有改变，对其他元素没有影响。

负margin

让元素在文档流中的位置也发生了改变，对后面的元素会产生影响

如图

BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC是什么？

块格式化上下文（block formatting context）是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。

BFC如何生成？

根元素或其它包含它的元素

浮动 (元素的float不是none)

绝对定位的元素 (元素具有position为absolute或fixed)

内联块 inline-blocks (元素具有display: inline-block)

表格单元格 (元素具有display: table-cell，HTML表格单元格默认属性)

表格标题 (元素具有display: table-caption, HTML表格标题默认属性)

块元素具有overflow，且值不是visible

BFC 有什么作用？

创建BFC来避免垂直外边距叠加

创建BFC来清除浮动

创建BFC来实现自适应布局

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

如何不让相邻元素外边距合并？创建BFC，设置boder,padding

代码

实现如下alert效果，效果范例372

代码

实现如下表单效果，效果范例379

我的代码

实现如下模态框效果，效果范例366

我的代码

实现如下导航栏效果，效果范例409

我的代码