CSS浮动定位

2017-02-17 本文已影响0人 clark124

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

特征：浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，因此文档普通流中的块级元素感知不到浮动元素的存在。
对父容器影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。引起的父元素高度塌陷
对其他浮动元素的影响：父容器足够宽，与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时，超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素，那么向下移动的时候可能被卡住。
对普通元素的影响：浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
对文字的影响：文字所在行框（或display：inline-block）因为浮动元素的挤压而缩短，从而围绕浮动元素排列。

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

子元素浮动引起父元素高度塌陷，因为没有预先设置div高度，所以div高度由其包含的子元素高度决定。而浮动脱离文档流，所以子元素并不会被计算高度。此时的div中，相当于div中子元素高度为0，所以发生了父元素高度塌陷现象。
清除浮动指：消除浮动元素对其父元素因浮动元素造成的高度塌陷的问题
清理浮动方法：
方法一：使父元素形成新的BFC，可以使用overflow：hidden/auto/scroll
display:inline-block float:方位等等
方法二：使用伪元素清楚浮动,如

.clearfix{zoom:1;}
.clearfix:after{ 
content:"";
display:block;
visible:hidden;
clear:both;
}

然后在需要清除浮动的元素进行调用

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

4 种不同类型的定位，这会影响元素框生成的方式。

static

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

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
参考点：自身在文档流中的位置。
使用场景：一般作为绝对定位的元素参考点，或者页面图片的小偏移。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
参考点：距离最近的非static祖先元素位置。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。
使用场景：元素的水平垂直居中。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
参考点：参考浏览器窗口(视窗)的位置。使用场景：相对于浏览器窗口位置始终不变的显示窗口，比如：固定边栏和底栏

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置

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

z-index 属性设置元素在Z轴方向上的堆叠顺序。数值越大，元素越靠前。可设置负的 z-index 属性值。Z-index 仅能在定位元素（position:relative/absolute/fixed）上奏效。

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

position:relative，元素显示位置发生变化，但是元素在文档流中的位置不变，不影响后面元素在文档流中的布局。
负margin，元素的显示位置和在文档流中的位置均发生变化，会影响后面元素在文档流中的位置。

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

BFC是块级格式上下文。其定义是：浮动、绝对定位（绝对定位、固定定位）元素、块级容器（如inline-block、 table-cell、table-caption）并不是块级盒子，还包括那些overflow属性值取值visible以外的块级盒子，会为它们的内容物创建一个新的块级格式化上下文。
对元素设置以下属性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
BFC的作用有：

解决margin重叠问题。所谓margin重叠是指处于同一个BFC的相邻元素、嵌套元素，只要它们之间没有阻挡（如：边框、非空内容、padding等）就会发生margin重叠。这是只要让其中一个元素生成新的BFC就能解决margin重叠问题。
清除浮动。因为BFC可以包含浮动，所以让父容器生成新的BFC可以让父容器在视觉上包围了浮动的子元素，因而清除了浮动。

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

外边距合并:两个在普通文档流中相邻的元素外边距相遇的时候发生合并。这个相邻可以是父子关系相邻，兄弟关系相邻，或者一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
合并的结果：两个外边距都是正数，取两者之中的较大者；两个外边距都是负数，取两者之间绝对值较大者；当两个外边距一正一负时，取两者的和。

1、相邻元素外边距合并：两个元素都设置外边距时，外边距不会相加，而是选择外边距的最大值。