CSS 3-浮动、定位

最新推荐文章于 2023-03-23 18:49:24 发布

weixin_34217711

最新推荐文章于 2023-03-23 18:49:24 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015070751

文档流

文档流是一种默认定位方式，在文档流中元素框的位置由元素在html中的位置决定，文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行，自上而下排列；内联元素从左到右排列。
让元素脱离文档流有三种方法：
浮动float;
绝对定位position:absolute;
固定定位position:fixed;
元素脱离文档流demo

CSS定位

CSS的三种布局机制：文档流、浮动、定位。定位定义元素相对于它正常位置应该出现的位置，或者相对于父元素、另一个元素、浏览器本身偏移。定位方式有三种：

div{
 position:absolute/relative/fixed
}

1.position:fixed相对于浏览器的窗口定位，定位后的元素脱离文档流。元素的位置通过 left,top,right以及bottom属性进行规定。fixed永远是根据浏览器窗口来定位，无论其他元素怎么设置，都影响不了它。
2.position:relative相对于元素自身正常位置进行定位,元素在文档流中仍占据原来空间，只是表现出来的位置会相对原来的位置偏移。left:20会向元素的 LEFT 位置添加 20 像素。
3.position:absolute,相对于有定位属性（fix/relative/absolute，一般是用relative）的第一个父元素偏移,如果找不到这种父元素就向上层找，直到body，html元素。absolute定位元素会脱离文档流。元素的位置通过 left,top,right以及bottom属性进行规定。
定位方式demo

absolute, relative, fixed 偏移的参考点

1.absolute的定位：浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。一般情况下，我们会将relative与absolute配套使用，方便我们对absolute元素定位。

2.relative的定位：relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

3.fixed的定位：fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。

z-index

具有定位属性的元素设置top,right,bottom,left，z-index才有效。
z-index（设置层叠）,可以通过z-index属性控制元素在Z轴方向的叠放顺序，z-index越高，元素位置越靠上，如果为正数，则离用户更近，为负数则表示离用户更远。没定位属性的元素设置了无效果。如果2个元素的z-index的值相同，按文档流顺序，后面的元素会悬浮在前面的元素上面。
z-index demo

position:relative和负margin使元素位置发生偏移的区别

position：relative可以使元素相对于元素自身正常位置发生偏移，有relative定位属性的元素仍然在文档流中，它仍然占据着原来的位置，所以其他元素的位置不会发生变化。
负margin：通过负margin进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间，所以其他元素的位置发生了变化。
relativ,负margin偏移区别 demo

局对居中

将目标元素的父元素设置absolute定位，四方向偏移值设置为0。再将目标元素设置absolute定位，上、左方向设置偏移值为50%（这里50%是相对于父元素），让元素的左上角原点位于页面的中心。再使用负margin使元素左上角沿左、上移动它宽高的一半，这样就能使元素在页面中垂直居中了。
demo

浮动元素的特征。

float的设计初衷是用于文字环绕效果，即对一个图片使用float之后，周围的文字环绕它。
1.float使元素脱离文档流，当父元素没设置固定高度时，元素浮动脱离文档流，父元素会收缩
2.元素设置浮动或绝对定位后，如果不给元素设置宽度，元素具有收缩性，元素会根据内容自动调整宽度。也就是说absolute、float具有自适应宽度的特性。
3.行内元素、块级元素浮动后都会变成块级元素。元素使用绝对定位后也会成块级元素
4.浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动元素会脱离文档流，其他的普通元素会忽视浮动元素，后面的元素会占据浮动元素的文档流空间。
元素浮动的时候只能向左，或向右，不会向上，向下浮动。浮动的元素是先站住自己所在文档流的位置，然后左右浮动。元素浮动后紧跟的内联元素会贴住浮动的元素(图文环绕)，文字会围绕着浮动元素，这也是设计浮动元素的初衷。
浮动demo

清除浮动

元素浮动后，父元素无法撑起高度（父元素未指定高度时），影响与父元素同级的元素。与浮动元素同级的非浮动元素会紧随其后视浮动元素不存在，占据浮动元素原来的位置。若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响布局。demo
1.元素加clear:left/right/both; 可清除该元素前面有浮动元素产生的副作用。元素浮动后谁受影响，clear就加给谁。
2.浮动元素包裹父元素（或直接设置父元素），设置宽度100%，设置overflow：hidden
3.浮动元素包裹父元素（或直接设置父元素），设置父元素after伪元素为block，再设置伪元素clear:both;