CSS小随笔（三）浮动与定位

先来说一下CSS中的浮动

一、浮动

1、标准流中的块级盒子，宽度将自动伸展为100%，而浮动的块级盒子，宽度不会自动伸展，而是由内容撑开

2、当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在而占据浮动盒子原来的位置。（浮动盒子，会盖在这个盒子的上方）

但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响。（未浮动盒子中的内容，不会被浮动盒子盖住）

3、由于第二条的原因。

　　　　可以给收影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响

　　　　clear可选值：left-清除左浮动影响

　　　　right-清除右浮动影响

　　　　 both-同时清除左右浮动影响，常用

　　4、父盒子没有指定高度。

　　　　如果子盒子没有浮动，则父盒子的高度可以被盒子撑开

　　　　如果，父盒子中的所有子盒子都浮动，则父盒子高度讲变为0

　　　　　　[解决所有盒子浮动，父盒子高度塌陷的问题]

　　　　　　　　①给父盒子也添加浮动

　　　　　　　　②给父盒子添加overflow属性；推荐使用！

　　　　　　　　③在父盒子最后，添加一个高度为0的空div。给这个div添加clear:both;属性，清除掉浮动效果

　　　　　　　　④可以将③中的div用伪对象选择器::after实现

#div4::after{
display:block;
concent:"";
height:0px;
clear:botn;
}

　　　　水平排放的盒子，水平间距数margin的累加

　　　　垂直排放的盒子，垂直间距是合并的去最大值

二、定位

　　1、相对定位relative

　　　　①使用position: relative;设置元素为相对定位元素

　　　　②使用top、right、bottom、left调整元素的位置，当left跟right同时存在时left生效top、bottom同时存在时top生效

　　　　③定位机制：

　　　　　　a、相对定位是相对于自己原来的位置定位。当top等属性不指定是，元素位置不会发生不改变

　　　　　　b、相对定位，不会释放掉元素在原有文档流中的位置。不会影响其他文档流元素的位置

　　　　④关于元素Z轴重叠

　　　　　　a、定位元素，默认的Z轴高于普通流文档元素

　　　　　　b、同为定位元素，后来在居上

　　　　　　c、可以使用z-index手动调节定位元素的上下层z轴顺序（不加px123什么的表示的是图片的顺序）

　　　　　　d、z-index默认为0，而且只能作用于定位元素

　　2、[绝对定位]

　　　　①使用position: absolute;设置元素为绝对定位

　　　　②定位机制：

　　　　　　a、相对于死一个非static定位的祖先元素进行定位（即相对于使用了relative、absolute、fixed定位的祖先元素进行定位）

　　　　　　b、如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位

　　　　　　c、使用absolute的元素，会从文档流中完全删除，原有空间会被释放

　　3、[固定定位 fixed]

　　　　①使用position: fixed;设置固定定位；

　　　　②固定定位：是一种特殊的绝对定位！！只是祖先元素无法使用定位锁住

　　　　③定位机制：永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动而滚动

　　4、[z-index 属性]

　　　　① 作用：根据z-index属性设置的数值，决定元素在z轴方向上的层叠次序

　　　　② 使用要求：

　　　　　　a、z-index只能给定位元素调整层叠次序：

　　　　　　relative、absolute、fixed

　　　　　　b、元素的z-index属性要考虑父容器z-index的约束

　　　　　　　　>>>如果父容器设置了z-index属性，则子容器的所有元素，讲不能脱离父容器层次的约束。（即，父容器设置了z-index，则子容器只能以父容器数值为准。再给子容器设置了z-index，只能调整子容器在服容器层次之内的层叠次序）

　　　　　　　　>>>如果父容器没有设置z-index，或者设置为z-index：auto;则子容器调整z-index将不受父容器层次约束

　　　　③ z-index:auto;  &  z-index:o;  之间的异同

　　　　　　a、 z-index:auto;是默认值，与 z-index:o;处于同一平面

　　　　　　b、 z-index:o;会约束子元素必须与父容器在同意平面

　　　　　　z-index:auto;不会约束子元素的层次

三、浮动与定位的一些小区别

　　　float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;position: absolute|relative; 要配合top,left等定位。

　　　　position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。

　　　　float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。CSS允许任何元素浮动float，不论是图像，段落还是列表。无论先前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度缺省为auto。

　　浮动有一系列控制它的规则。

　　　　1.浮动元素的外边缘不会超过其父元素的内边缘。

　　　　2.浮动元素不会互相重叠。

　　　　3.浮动元素不会上下浮动。

　　　　4.如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。说简单点就是没有空间的话，就另起一行。

　　CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

　　　　除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

　　　　块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

　　　　行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

　　CSS position 属性

　　　　通过使用 position 属性，我们可以选择 3 种不同类型的定位，这会影响元素框生成的方式。

　　position 属性值的含义：

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

　　　　absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

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

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

　　position，我们通常用到的是绝对(absolute)和相对(relative)定位

　　通常，做弹出菜单的时候，会用到定位，父元素相对定位position:relative，其中的子元素绝对定位position:absolute，通过top，right，bottom，left的值来控制子元素的位置，要注意的是子元素的位置将相对于父元素，而不是整个页面。

　　浮动与定位的区别

　　　　通过定位虽然也可以进行布局，但是它的特点决定了它不适合做页面的布局，因为被定义的元素在普通文档中占有的任何空间都将被关闭，可以说，它是漂浮在整个页面上面的，所以，它可以和页面上其他的内容重叠显示。

　　　　这个特点可以方便的让我们做出其他特殊的效果，但是相对与浮动就布局来说，我们更多的还是用浮动。