CSS定位与浮动
2016-06-14 本文已影响0人
petertou
CSS定位机制
CSS 有三种定位机制 普通流(文档流)、浮动和绝对定位。浮动和绝对定位可以让一个元素脱离文档流。
文档流
顾名思义，普通流中的元素的位置由在HTML中的位置决定，根据上下级和前后的顺序，一个一个的排列在界面上；当然根据元素的类型不一样，排列的方式会不一样，但先后顺序，显示层次关系不会改变；
一般在HTML元素分为两种：块级元素和行内元素。像div,p这些的元素属于块级元素；而span,strong等属于行内元素。块级元素是从上到下一行一行的排列，默认一个块级元素会占用一行，而跟在后面的元素会令起一行排列；行内元素是在一行中水平布置，从前到后的排列。引用来源
通过POSITION属性，可以选择4种不同类型的定位。
- 1.STATIC
默认值。没有定位，出现在普通流中（忽略top,bottom,left,right或者Z-INDEX。） - 2.FIXED
生成绝对定位元素，相对于浏览器窗口（参考点），脱离文档流，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行设定。
对于定位元素（非static）， Z-INDEX用来控制层叠元素的显示优先级，值越大优先级越高。如果两个元素都定位在相同的位置并且没有使用Z-index，那么后面定义的CSS属性比前面定义的CSS属性的层级高。 - 3.RELATIVE
生成相对定位的元素，相对于其正常位置（参考点是自身）进行定位。偏移之后的该元素的原来位置被保留。没有脱离文档流。 - 4.ABSOLUTE
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位（参考点）。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
position:relative 是CSS的一种定位机制，定位之后该元素的原位置被保留，后面的元素不会跟进。
负margin 是CSS盒子模型中的一个属性，使用负margin之后，该元素原有的空间会被后面的元素填充。
如何让一个固定宽高的元素在页面上垂直水平居中?
浮动
浮动可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止（注意：浮动的元素不是一直跑，跑到页面的最左边或者最右边）。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动元素的特征：脱离文档流。想要浮动（或绝对定位）元素要设置宽度，否则浮动（或绝对定位）的宽度会收缩，收缩成和内容一样的宽度。
| 影响 | 浮动元素 | 普通元素 | 文字 |
|---|---|---|---|
| 浮动元素 | 阻止元素继续浮动 | 占用浮动元素的位置 | 环绕 |
清除浮动指什么? 如何清除浮动?
因为浮动的元素会对其后面的元素产生如下影响，所以我们要清除浮动。
- 1.父元素的高度无法被撑开，影响与父元素同级的元素
- 2.与浮动元素同级的非浮动元素会跟随其后
- 3.若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题。
对于1的情况
.clearfix:before, .clearfix:after{ content: ""; display: table;}
或者BFC
overflow:hidden; _zoom:1; /* for ie 6*/
